/* =========================================================
   Portail client · Thème sombre
   Connexion en deux volets + tableau de bord « bento »
   ========================================================= */

/* ---------- Couleurs et polices (À MODIFIER au besoin) ---------- */
:root{
  --fond:#111111;     /* fond des pages */
  --rail:#0C0C0C;     /* colonne d'icônes */
  --s1:#191919;       /* cartes */
  --s2:#212121;       /* champs, zones internes */
  --s3:#2A2A2A;       /* survol, éléments actifs */
  --ligne:#272727;    /* bordures et séparateurs */
  --texte:#F2F1EC;    /* texte principal */
  --gris:#8F8D88;     /* texte secondaire */
  --pale:#5E5C58;     /* texte discret */
  --vert:#00F6AC;     /* accent de la marque */
  --vert-doux:rgba(0,246,172,.12);
  --orange:#FFB84D;   /* « en attente » */
  --rouge:#FF8A7A;    /* erreurs */
  --noir:#0B0B0B;
  --f-titre:'Archivo',system-ui,sans-serif;
  --f-texte:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
  --rayon:20px;
  --largeur-rail:76px;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:24px;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--f-texte);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,table{margin:0;padding:0}
h1,h2,h3,.cond{font-family:var(--f-titre);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-transform:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font:inherit}
::selection{background:var(--vert);color:var(--noir)}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.petite{width:14px;height:14px}
.mono{font-family:var(--f-mono)}
.muted{color:var(--gris)}
.sub{font-size:12px;color:var(--gris)}
.petit{font-size:13px}
.grandit{flex:1;min-width:0}
.coupe{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intertitre{display:block;margin:22px 0 4px}
[hidden]{display:none!important}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;border:0;background:var(--vert);color:var(--noir);font-family:var(--f-texte);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s,background .15s,transform .1s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-g{background:var(--s2);color:var(--texte);box-shadow:inset 0 0 0 1px var(--ligne)}
.btn-g:hover{background:var(--s3);filter:none}
.btn-sm{height:36px;padding:0 13px;font-size:12.5px;border-radius:10px}
.btn-clair{background:var(--texte);color:var(--noir);height:48px;box-shadow:0 10px 30px -12px rgba(255,255,255,.35)}
.mini{width:34px;height:34px;flex-shrink:0;border-radius:10px;border:1px solid var(--ligne);background:var(--s2);color:var(--gris);display:inline-grid;place-items:center;font-size:17px;line-height:1;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.mini:hover{color:var(--noir);background:var(--vert);border-color:var(--vert)}
.mini .ico{width:16px;height:16px}

/* ---------- Étiquettes ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--vert-doux);color:var(--vert);white-space:nowrap}
.badge.pale{background:var(--s3);color:var(--gris)}
.badge.attente{background:rgba(255,184,77,.12);color:var(--orange)}
.badge.attente::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* =========================================================
   COQUILLE DES PAGES CONNECTÉES : colonne d'icônes + contenu
   ========================================================= */
.coquille{display:grid;grid-template-columns:var(--largeur-rail) minmax(0,1fr);transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1);min-height:100vh;background:linear-gradient(to right,var(--rail) 0 calc(var(--largeur-rail) - 1px),var(--ligne) 0 var(--largeur-rail),transparent 0)}
.rail{position:sticky;top:0;height:100vh;z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0 18px;background:var(--rail);border-right:1px solid var(--ligne)}
.marque{width:42px;height:42px;border-radius:12px;background:var(--vert);color:var(--noir);display:grid;place-items:center;font-family:var(--f-titre);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62,"wght" 900;font-size:20px;flex-shrink:0}
.rail .cote{display:flex;flex-direction:column;align-items:center;gap:6px}
.rail-sep{width:24px;height:1px;background:var(--ligne);margin:6px 0}
.rail-lien{position:relative;width:44px;height:44px;border-radius:22px;display:flex;align-items:center;gap:12px;padding:0 13px;color:var(--pale);transition:background .15s,color .15s,width .28s cubic-bezier(.4,0,.2,1)}
.rail-lien:hover{color:var(--texte);background:var(--s1)}
.rail-lien[aria-current="page"]{background:var(--texte);color:var(--noir)}
.pastille{position:absolute;top:8px;left:27px;width:8px;height:8px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 2px var(--rail)}
.rail-lien[aria-current="page"] .pastille{box-shadow:0 0 0 2px var(--texte)}
.rail [data-t]:hover::after,.rail [data-t]:focus-visible::after{content:attr(data-t);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:var(--s3);color:var(--texte);font-family:var(--f-texte);font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:40}
.rail-espace{flex:1}
.rail-bas{display:flex;flex-direction:column;align-items:center;gap:8px}
.rail .lang{flex-direction:column;border-radius:12px}
.rail-av{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--s3);color:var(--texte);display:grid;place-items:center;font-size:11px;font-weight:700;box-shadow:0 0 0 2px var(--rail),0 0 0 3px var(--ligne);transition:box-shadow .15s}
.rail-av-lien:hover .rail-av,.rail-av-lien.on .rail-av{box-shadow:0 0 0 2px var(--rail),0 0 0 4px var(--vert)}
.contenu{min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* Menu repliable : fermé = icônes seulement; ouvert = icônes + nom des sections.
   La petite flèche sur le bord du menu l'ouvre ou le ferme (choix mémorisé). */
html.rail-ouvert{--largeur-rail:252px}
.rail-bascule{position:absolute;top:30px;right:-13px;z-index:41;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid var(--ligne);background:var(--rail);color:var(--pale);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s,transform .15s}
.rail-bascule:hover{color:var(--texte);background:var(--s1);transform:scale(1.08)}
.rail-bascule .ico{width:14px;height:14px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
html.rail-ouvert .rail-bascule .ico{transform:rotate(180deg)}
.marque-lien{display:flex;align-items:center;gap:12px;width:42px;margin-bottom:14px;color:var(--texte);transition:width .28s cubic-bezier(.4,0,.2,1)}
.rail-av-lien{position:relative;display:flex;align-items:center;gap:12px;width:36px;margin-top:6px;color:var(--texte);transition:width .28s cubic-bezier(.4,0,.2,1)}
.rail-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:var(--f-texte);font-size:14px;font-weight:500;opacity:0;transition:opacity .12s}
.marque-nom{font-weight:700;font-size:15px}
.rail-av-lien .rail-nom{font-size:13px;font-weight:600;line-height:1.25}
.rail-av-lien .rail-nom small{display:block;font-size:11.5px;font-weight:400;color:var(--gris)}
.rail .theme-bascule{width:44px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 13px;border-radius:22px;transition:background .15s,color .15s,width .28s cubic-bezier(.4,0,.2,1)}
@media (min-width:761px){
  html.rail-ouvert .rail{align-items:stretch;padding-left:14px;padding-right:14px}
  html.rail-ouvert .rail .cote,html.rail-ouvert .rail-bas{align-items:stretch}
  html.rail-ouvert .rail-lien,html.rail-ouvert .rail .theme-bascule{width:100%}
  html.rail-ouvert .marque-lien,html.rail-ouvert .rail-av-lien{width:100%}
  html.rail-ouvert .rail-av-lien{padding-left:4px}
  html.rail-ouvert .rail-sep{width:100%}
  html.rail-ouvert .rail .lang{flex-direction:row;align-self:flex-start;margin-left:6px}
  html.rail-ouvert .rail-nom{opacity:1;transition:opacity .2s .1s}
  html.rail-ouvert .rail [data-t]:hover::after,html.rail-ouvert .rail [data-t]:focus-visible::after{display:none}
  html.rail-ouvert .rail .theme-liste{left:calc(100% + 10px)}
}
.rail .theme-menu{display:flex;flex-direction:column}
.contenu main{flex:1}

/* Sélecteur de langue */
.lang{display:flex;padding:3px;gap:2px;background:var(--s1);border:1px solid var(--ligne);border-radius:10px}
.lang a{padding:4px 8px;border-radius:7px;font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--gris);text-align:center}
.lang a:hover{color:var(--texte)}
.lang a.on{background:var(--vert);color:var(--noir)}

/* Pages publiques : barre simple */
.entete-simple{display:flex;align-items:center;justify-content:space-between;padding:18px 26px}
.logo-texte{font-family:var(--f-titre);font-weight:900;font-stretch:62%;font-variation-settings:"wdth" 62,"wght" 900;font-size:24px;letter-spacing:.03em;text-transform:uppercase}
.hors-app .entete-simple .logo-texte{opacity:0;pointer-events:none}
.hors-app main{min-height:calc(100vh - 140px)}

/* ---------- Contenu ---------- */
.page{max-width:1440px;margin:0 auto;padding:26px 26px 64px}
.page-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.page-tete h1{font-size:clamp(30px,3.6vw,44px)}
.page-tete .mono{margin-bottom:6px}
.salut{padding:14px 4px 6px}
.salut h1{font-size:clamp(34px,3.6vw,46px);letter-spacing:-.03em;margin:8px 0 6px}
.salut + .cartes-projets{margin-top:22px}
.flash{max-width:1388px;margin:22px 26px -8px;padding:13px 18px;border-radius:14px;background:var(--vert-doux);border:1px solid rgba(0,246,172,.35);font-size:14px;transition:opacity .4s,transform .4s}
@media (min-width:1517px){.flash{margin-left:auto;margin-right:auto}}
.hors-app .flash{max-width:900px;margin:10px auto 0}
.flash.erreur{background:rgba(255,138,122,.1);border-color:rgba(255,138,122,.4);color:#FFC2B8}
.flash.parti{opacity:0;transform:translateY(-8px)}
.erreur{border:1px solid rgba(255,138,122,.4);background:rgba(255,138,122,.08);color:#FFC2B8;border-radius:12px;padding:11px 14px;font-size:13.5px}
.note{border:1px dashed #44423F;border-radius:12px;padding:11px 14px;font-size:13.5px;background:var(--s2)}

/* ---------- Cartes ---------- */
.carte{background:var(--s1);border:1px solid var(--ligne);border-radius:var(--rayon);min-width:0}
.carte-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 0}
.carte-h h2{font-size:19px}
.carte-h .sous{font-size:12.5px;color:var(--gris);margin-top:3px}
.carte-b{padding:16px 22px 22px}
.ligne{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ligne)}
.ligne:last-child{border-bottom:0}
.ligne p{font-size:14px}
.ligne b{font-weight:600}
.ligne .num{font-size:12px;color:var(--gris);min-width:96px}
.rangee{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse}
td{padding:11px 8px;border-bottom:1px solid var(--ligne);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:0}

/* ---------- Formulaires ---------- */
.champ{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.champ span{font-size:12.5px;font-weight:500;color:var(--gris)}
.input{width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--ligne);border-radius:12px;background:var(--s2);font:inherit;font-size:14.5px;color:var(--texte);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--pale)}
.input:hover{border-color:#3A3936}
.input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(0,246,172,.15)}
textarea.input{min-height:90px;resize:vertical}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input[type=file].input{padding:9px 10px;font-size:13px}
input[type=file].input::file-selector-button{border:0;border-radius:8px;background:var(--s3);color:var(--texte);padding:6px 12px;margin-right:12px;font:inherit;cursor:pointer}
.case{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.case input{width:18px;height:18px;accent-color:var(--vert)}
.lien-sobre{font-size:13px;color:var(--gris);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.lien-sobre:hover{color:var(--texte)}
.ajout{border:1px dashed #3A3936;border-radius:14px;padding:16px;margin-bottom:14px;background:var(--s2)}
.ajout .champ:last-of-type{margin-bottom:12px}
.ajout .input{background:var(--s1)}
.ajout .sub{display:block;margin-bottom:12px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* =========================================================
   TABLEAU DE BORD « BENTO » (page projet)
   ========================================================= */
.bento{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.bento-g{display:flex;flex-direction:column;gap:18px;position:sticky;top:18px;min-width:0}
.bento-g>*,.bento-d>*{min-width:0}
.bento-d{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.bento-d .large{grid-column:1/-1}
.solo{display:flex;flex-direction:column;gap:18px;max-width:920px}

/* Avancement */
.prog{position:relative;display:block;height:6px;border-radius:9px;background:var(--s3);margin:30px 0 18px}
.prog i{position:absolute;inset:0 auto 0 0;border-radius:9px;background:var(--vert)}
.prog b{position:absolute;top:-27px;transform:translateX(-50%);font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--texte);color:var(--noir);padding:2px 6px;border-radius:6px;white-space:nowrap}
.prog.mince{height:4px;margin:4px 0 2px}
.etape-liste{background:var(--s2);border-radius:14px;padding:4px 14px}
.etape{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ligne);font-size:14px}
.etape:last-child{border-bottom:0}
.etape-nom{flex:1}
.etape .marque{all:unset;font-family:var(--f-mono);font-size:11px;color:var(--pale)}
.etape.faite .etape-nom{color:var(--gris)}
.etape.active .etape-nom{font-weight:600}
.etape.active .marque{color:var(--vert)}
.ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--pale);display:grid;place-items:center;flex-shrink:0}
.etape.faite .ck{background:var(--vert);border-color:var(--vert);color:var(--noir)}
.etape.faite .ck .ico{width:11px;height:11px;stroke-width:3}
.etape.active .ck{border-color:var(--vert);box-shadow:inset 0 0 0 3.5px var(--s2),inset 0 0 0 9px var(--vert)}

/* À faire de ton côté */
.a-faire h2{font-size:18px;margin:4px 4px 12px}
.tache{display:flex;align-items:center;gap:12px;padding:9px 14px 9px 9px;border-radius:999px;margin-bottom:6px;transition:background .15s}
a.tache:hover{background:var(--s1)}
.tache-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--s1);border:1px solid var(--ligne);color:var(--gris);flex-shrink:0}
.tache b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tache small{display:block;color:var(--gris);font-size:12px}
.tache.chaude{background:var(--texte);color:var(--noir)}
.tache.chaude:hover{background:#fff}
.tache.chaude .tache-ico{background:var(--noir);color:var(--vert);border:0}
.tache.chaude small{color:#55534F}
.tache.faite .tache-ico{color:var(--vert)}

/* Épreuve */
.ep-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
.apercu-cadre{display:grid;place-items:center;min-height:260px;border-radius:14px;background:repeating-conic-gradient(#1D1D1D 0 25%,#222 0 50%) 0 0/22px 22px;border:1px solid var(--ligne);overflow:hidden}
.apercu{display:block;max-width:100%;max-height:440px;width:auto;object-fit:contain;cursor:zoom-in}
.ep-cote{display:flex;flex-direction:column;gap:12px;min-width:0}
.ep-cote .ligne{padding-top:0}
.ep-cote .ligne b{display:block;overflow-wrap:anywhere}
.ep-cote .champ{margin-bottom:12px}
.ep-cote textarea.input{min-height:76px}
.avec-vignette{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.avec-vignette>div{min-width:0}
.vignette{width:44px;height:44px;object-fit:cover;border:1px solid var(--ligne);border-radius:10px;flex-shrink:0;cursor:zoom-in;background:var(--s2)}
.vignette.vide{display:grid;place-items:center;color:var(--gris);cursor:default}

/* Onglets */
.onglets{display:inline-flex;padding:3px;gap:2px;background:var(--s2);border:1px solid var(--ligne);border-radius:11px;margin-bottom:6px;max-width:100%;overflow-x:auto}
.onglets button{border:0;background:transparent;color:var(--gris);padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.onglets button.on{background:var(--s3);color:var(--texte)}
.onglets .compte{font-family:var(--f-mono);font-size:10px;color:var(--pale);margin-left:3px}
.panneau .muted.petit{margin:8px 0 2px}

/* Messages */
.fil{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:380px;overflow-y:auto;padding-right:4px}
.msg{display:flex;align-items:flex-end;gap:8px}
.msg.moi{justify-content:flex-end}
.av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:10.5px;font-weight:700;background:#3A3A3A;color:var(--texte)}
.av.av-md{background:var(--vert);color:var(--noir)}
.bulle{max-width:82%;padding:10px 13px;border-radius:14px 14px 14px 4px;background:var(--s2);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.bulle.moi{background:var(--vert);color:var(--noir);border-radius:14px 14px 4px 14px}
.bulle .sub{display:block;font-size:11px;margin-bottom:3px}
.bulle.moi .sub{color:rgba(11,11,11,.6)}
.compose{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 4px;border-radius:14px;border:1px solid var(--ligne);background:var(--s2)}
.compose:focus-within{border-color:var(--vert)}
.compose textarea.input{flex:1;min-height:38px;max-height:160px;border:0;background:transparent;box-shadow:none;padding:9px 10px;resize:none}
.compose .btn{width:38px;height:38px;padding:0;border-radius:10px}

/* Factures et paiement */
.paiement{margin-top:16px}
.paiement summary{list-style:none;display:inline-flex}
.paiement summary::-webkit-details-marker{display:none}
.paiement-b{margin-top:12px;border-radius:14px;background:var(--s2);border:1px solid var(--ligne);padding:18px}
.paiement-b dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 16px;font-size:14px}
.paiement-b dt{font-size:12.5px;color:var(--gris);align-self:center}
.paiement-b dd{margin:0}

/* =========================================================
   LISTE DES PROJETS (tableau-de-bord.php, client)
   ========================================================= */
.cartes-projets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.projet{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--rayon);background:var(--s1);border:1px solid var(--ligne);transition:border-color .2s,transform .2s}
.projet:hover{border-color:rgba(0,246,172,.5);transform:translateY(-2px)}
.projet-haut{display:flex;justify-content:space-between;align-items:center;color:var(--pale)}
.projet:hover .projet-haut .ico{color:var(--vert)}
.projet h3{font-size:26px;letter-spacing:-.025em;margin-top:6px}

/* Espace admin (tableau-de-bord.php) */
.grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.grille.solo{grid-template-columns:minmax(0,1fr);max-width:none}
.pile{display:flex;flex-direction:column;gap:18px}

/* Ancienne navigation dans la page (si une autre page l'utilise encore) */
.avec-cote{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.avec-cote>.cote{display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--s1)}
.avec-cote>.cote p{padding:6px 10px;font-size:11px;color:var(--pale)}
.avec-cote>.cote a{padding:9px 12px;border-radius:10px;color:var(--gris)}
.avec-cote>.cote a:hover,.avec-cote>.cote a[aria-current="page"]{background:var(--s2);color:var(--texte)}

/* =========================================================
   CONNEXION EN DEUX VOLETS (et pages mot de passe, activation)
   ========================================================= */
.ecran{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:20px 18px 40px}
.carte-connexion{width:min(1080px,100%);min-height:580px;display:grid;grid-template-columns:440px minmax(0,1fr);border-radius:26px;overflow:hidden;background:#141414;border:1px solid var(--ligne);box-shadow:0 50px 100px -40px #000}
.carte-connexion .form{order:1;padding:42px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.carte-connexion .form .logo-texte{margin-bottom:28px}
.carte-connexion .form h1{font-size:30px}
.carte-connexion .form .btn{margin-top:6px}
.carte-connexion .form .champ{margin-bottom:0}
.carte-connexion .aide-contact{margin-top:auto;padding-top:24px;font-size:12px;color:var(--pale)}
.carte-connexion .aide-contact a{color:var(--texte)}
.art{order:2;position:relative;overflow:hidden;background:#181818;border-left:1px solid var(--ligne);padding:44px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:420px}
.art::before{content:"";position:absolute;left:-70px;top:-90px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%);pointer-events:none}
.art::after{content:"";position:absolute;right:-90px;bottom:-110px;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#00F6AC 0,#0A6D51 38%,#122019 68%,#181818 80%);pointer-events:none}
.art>*{position:relative;z-index:1;max-width:430px}
.art .sceau{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--vert-doux);color:var(--vert);letter-spacing:0;text-transform:none}
.art .sceau::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.art h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em}
.art p{color:var(--gris);font-size:14px}
.carte-connexion.simple{grid-template-columns:1fr;max-width:480px;min-height:0}
.carte-connexion.simple .art{display:none}

/* ---------- Pages texte et aide ---------- */
.texte h2{font-size:22px;margin:26px 0 8px}
.texte h2:first-child{margin-top:0}
.texte p{font-size:14.5px;line-height:1.65;color:var(--gris);max-width:70ch}
.question{border-bottom:1px solid var(--ligne)}
.question:last-child{border-bottom:0}
.question summary{cursor:pointer;list-style:none;padding:16px 0;font-size:15.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--s2);font-size:17px;transition:background .2s,color .2s,transform .25s}
.question[open] summary::after{background:var(--vert);color:var(--noir);transform:rotate(45deg)}
.question p{padding:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--gris);max-width:70ch}

/* ---------- Loupe (agrandissement des images) ---------- */
.loupe{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:48px;background:rgba(8,8,8,.95);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;cursor:zoom-out}
.loupe.on{opacity:1;visibility:visible;transition:opacity .25s}
.loupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.loupe button{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.loupe button:hover{background:var(--vert);border-color:var(--vert);color:var(--noir)}

/* ---------- Tour guidé ---------- */
.tour{position:fixed;inset:0;display:none}
.tour.on{display:block}
.tour-voile{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.65)}
.tour-carte{position:fixed;z-index:97;left:50%;bottom:32px;transform:translateX(-50%);width:min(460px,calc(100% - 32px));background:var(--s1);border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:0 30px 60px -20px #000;padding:24px}
.tour-num{font-family:var(--f-mono);font-size:11px;color:var(--vert);margin-bottom:10px}
.tour-carte h2{font-size:24px;margin-bottom:10px}
.tour-texte{font-size:14.5px;line-height:1.55;color:var(--gris);margin-bottom:18px}
.tour-btns{display:flex;gap:10px;flex-wrap:wrap}
.tour-cible{position:relative;z-index:96;pointer-events:none;outline:2px solid var(--vert);outline-offset:4px;border-radius:var(--rayon);background:var(--s1)}
.rail:has(.tour-cible){z-index:96}
.rail .cote.tour-cible{position:static;background:transparent;border-radius:24px}
.bento-g:has(.tour-cible){position:static}

/* ---------- Pied de page ---------- */
.pied{padding:22px 26px 30px;font-size:12px;color:var(--pale)}
.pied a{text-decoration:underline;text-underline-offset:3px}
.hors-app .pied{text-align:center}

/* =========================================================
   TABLETTE ET MOBILE
   ========================================================= */
@media (max-width:1180px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento-g{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-g .salut{grid-column:1/-1}
}
@media (max-width:900px){
  .bento-g{display:flex}
  .bento-d{grid-template-columns:1fr}
  .ep-grille{grid-template-columns:1fr}
  .grille{grid-template-columns:1fr}
  .avec-cote{grid-template-columns:1fr}
  .carte-connexion{grid-template-columns:1fr;min-height:0}
  .art{order:0;min-height:230px;border-left:0;border-bottom:1px solid var(--ligne);padding:28px}
  .art::after{width:260px;height:260px;right:-70px;bottom:-90px}
  .carte-connexion .form{padding:30px 24px}
  .carte-connexion .form .logo-texte{margin-bottom:10px}
}
@media (max-width:760px){
  .coquille{grid-template-columns:minmax(0,1fr);background:none}
  .rail{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:flex-start;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-right:0;border-top:1px solid var(--ligne);overflow-x:auto;background:rgba(12,12,12,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .marque-lien,.rail-espace,.rail-bascule,.rail .rail-nom{display:none}
  .rail-lien{width:44px!important}
  .rail .cote,.rail-bas{flex-direction:row;gap:4px}
  .rail-sep{width:1px;height:24px;margin:0 4px}
  .rail .lang{flex-direction:row}
  .rail-av-lien{margin:0 0 0 4px!important;width:auto!important}
  .rail [data-t]:hover::after{display:none}
  .contenu{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .page{padding:18px 14px 40px}
  .flash{margin:14px 14px -4px}
  .carte-h{padding:18px 18px 0}
  .carte-b{padding:14px 18px 18px}
  .deux{grid-template-columns:1fr}
  .ligne .num{min-width:0}
  .bulle{max-width:88%}
  .tour-carte{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:20px}
  .entete-simple{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   MODULE SOUMISSIONS ET FACTURES
   ========================================================= */
.n{text-align:right}
.vert{color:var(--vert)}
.centre{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.badge.rouge{background:rgba(255,138,122,.12);color:var(--rouge)}
.pile.serre{gap:8px;margin-top:18px}
.lien-sobre{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.lien-sobre.danger:hover{color:var(--rouge)}
.page-tete h1 .badge{vertical-align:middle;margin-left:8px;font-family:var(--f-texte);letter-spacing:0}

/* Liste */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.stat{background:var(--s1);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 22px;display:flex;flex-direction:column;gap:4px}
.stat b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.table-zone{overflow-x:auto;margin:0 -8px}
.liste-sou td{border-bottom:1px solid var(--ligne);white-space:nowrap}
.liste-sou td:nth-child(2){white-space:normal;min-width:180px}
.liste-sou tr:last-child td{border-bottom:0}

/* Formulaire */
.sou-grille{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.sou-cote{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.lignes-tete,.ligne-sou{display:grid;grid-template-columns:minmax(0,1fr) 70px 110px 110px 34px;gap:8px;align-items:start}
.lignes-tete{font-size:11.5px;color:var(--gris);padding:4px 0 8px}
.lignes-tete span:nth-child(n+2){text-align:right}
.ligne-sou{margin-bottom:8px}
.ligne-sou .input{min-height:42px}
.ligne-sou textarea.input{min-height:42px;resize:none;line-height:1.4;padding-top:10px;padding-bottom:10px}
.ligne-sou input.input{text-align:right;padding-left:8px;padding-right:10px}
.montant-ligne{align-self:center;text-align:right;font-size:13px;color:var(--gris)}
.ligne-sou .mini{margin-top:4px}
#sou-ajouter{margin-top:6px}
.totaux-live dl,.doc-totaux dl{display:grid;grid-template-columns:1fr auto;gap:8px 0;margin:0;font-size:14px}
.totaux-live dd,.doc-totaux dd{padding-left:16px}
.totaux-live dt,.doc-totaux dt{color:var(--gris)}
.totaux-live dd,.doc-totaux dd{margin:0;text-align:right}
.totaux-live .total,.doc-totaux .total{font-size:18px;font-weight:700;color:var(--texte);padding-top:10px;border-top:1px solid var(--ligne)}
.totaux-live dt.total{font-family:var(--f-titre)}

/* Suivi */
.suivi{list-style:none;margin:0;padding:0}
.suivi li{position:relative;display:flex;justify-content:space-between;gap:10px;padding:0 0 14px 22px;color:var(--pale)}
.suivi li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--s3);background:var(--s1)}
.suivi li::after{content:"";position:absolute;left:5px;top:17px;bottom:-1px;width:2px;background:var(--s3)}
.suivi li:last-child{padding-bottom:0}
.suivi li:last-child::after{display:none}
.suivi li.fait{color:var(--texte)}
.suivi li.fait::before{background:var(--vert);border-color:var(--vert)}
.suivi li.non::before{background:var(--rouge);border-color:var(--rouge)}

/* Document (aspect papier) */
.page-doc{max-width:1180px}
.doc{background:#F5F4F0;color:#1C1C1C;border-radius:var(--rayon);padding:40px 44px;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.doc .sub{color:#6E6C66}
.doc-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:26px;border-bottom:2px solid #1C1C1C}
.doc-marque{display:block;font-family:var(--f-titre);font-weight:900;font-size:34px;letter-spacing:-.03em;line-height:1;font-variation-settings:"wdth" 70,"wght" 900;margin-bottom:8px}
.doc-num{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.doc-num b{font-size:18px}
.doc-num .badge.attente{background:rgba(214,130,0,.14);color:#9A5B00}
.doc-num .badge:not(.attente){background:#1C1C1C;color:var(--vert)}
.doc-infos{display:grid;grid-template-columns:1.4fr 1.2fr .8fr .8fr;gap:18px;padding:22px 0;border-bottom:1px solid #DDDAD3}
.doc-infos p{margin-top:4px;font-size:14px;line-height:1.45}
.doc-intro{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:#33312D;max-width:70ch}
.doc-table-zone{overflow-x:auto;margin-top:22px}
.doc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.doc-table th{background:#1C1C1C;color:#F5F4F0;font-family:var(--f-texte);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:10px 12px}
.doc-table th:first-child{border-radius:10px 0 0 10px}
.doc-table th:last-child{border-radius:0 10px 10px 0}
.doc-table th.n{text-align:right;white-space:nowrap}
.doc-table td{padding:13px 12px;border-bottom:1px solid #DDDAD3;vertical-align:top;line-height:1.45}
.doc-table td.n{white-space:nowrap}
.doc-totaux{margin:18px 0 0 auto;max-width:340px}
.doc-totaux dt{color:#6E6C66}
.doc-totaux .total{color:#1C1C1C;border-top-color:#1C1C1C}
.doc-depot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:12px;background:#1C1C1C;color:#F5F4F0;font-size:13.5px}
.doc-depot b{color:var(--vert)}
.doc-nos{margin-top:10px;text-align:right}
.doc-conditions,.doc-signature{margin-top:30px;padding-top:20px;border-top:1px solid #DDDAD3}
.doc-conditions h3,.doc-signature h3{font-size:12px;font-family:var(--f-texte);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.doc-conditions p{font-size:13px;line-height:1.65;color:#4A4843}
.sig-bloc{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sig-bloc img{width:240px;height:80px;object-fit:contain;background:#fff;border:1px solid #DDDAD3;border-radius:10px}
.doc-pied{margin-top:14px}

/* Décision du client */
.decision .gros{font-family:var(--f-titre);font-size:34px;font-weight:700;letter-spacing:-.03em;margin:2px 0 6px}
.decision .sub{display:block;margin-bottom:2px}
.choix{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.choix .btn{width:100%;height:48px}
.panneau-sou{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--ligne)}
.panneau-sou h2{font-size:20px}
.panneau-sou .champ{margin-bottom:0}
.panneau-sou .btn{width:100%}
.panneau-sou .lien-sobre{align-self:center}
.avis{padding:12px 14px;border-radius:12px;background:var(--vert-doux);border:1px solid rgba(0,246,172,.3);font-size:13.5px;line-height:1.5}
.sig-zone{position:relative;border-radius:12px;background:#FFFFFF;overflow:hidden}
.sig-zone canvas{display:block;width:100%;aspect-ratio:3/1;touch-action:none;cursor:crosshair}
.sig-indice{position:absolute;left:14px;right:14px;bottom:22px;border-bottom:1.5px dashed #BDBAB2;color:#9C9990;font-size:12px;padding-bottom:4px;pointer-events:none}
.sig-zone.signe .sig-indice{color:transparent}
.sig-effacer{position:absolute;top:8px;right:8px;border:0;background:#EEECE7;color:#4A4843;font:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer}
.case.consent{align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--gris);margin:0}
.case.consent input{flex-shrink:0;margin-top:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.sou-cote .aide-contact{font-size:12px;color:var(--pale);padding:0 4px}
.sou-cote .aide-contact a{color:var(--texte)}
.sou-cote .lien-sobre{display:inline-flex}

/* Remerciement et bandeaux */
.bravo{display:flex;gap:18px;align-items:flex-start;padding:24px 26px;margin-bottom:22px;border-radius:var(--rayon);background:var(--vert);color:var(--noir)}
.bravo h1{font-size:28px;margin-bottom:6px}
.bravo p{font-size:15px;line-height:1.5}
.bravo .sub{color:rgba(11,11,11,.7);margin-top:6px}
.bravo-ico{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--noir);color:var(--vert);display:grid;place-items:center}
.bravo-ico .ico{width:22px;height:22px;stroke-width:2.4}
.bandeau{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.carte-message{max-width:480px;width:100%}
.carte-message h1{font-size:26px;margin-bottom:10px}
.carte-message .aide-contact{margin-top:16px;font-size:12.5px;color:var(--pale)}
.carte-message .aide-contact a{color:var(--texte)}

/* Paiement */
.interac{margin-top:16px}
.interac h3{font-size:15px;margin-bottom:6px}
.interac dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 14px;font-size:13.5px}
.interac dt{font-size:12px;color:var(--gris);align-self:center}
.interac dd{margin:0;word-break:break-all}
.ou{display:flex;align-items:center;gap:10px;color:var(--pale);font-size:12px;margin:16px 0 0}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--ligne)}

@media (max-width:1100px){
  .sou-grille{grid-template-columns:minmax(0,1fr)}
  .sou-cote{position:static}
  .doc-infos{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .doc{padding:24px 18px;border-radius:16px}
  .doc-tete{flex-direction:column}
  .doc-num{align-items:flex-start;text-align:left}
  .doc-totaux{max-width:none}
  .lignes-tete{display:none}
  .ligne-sou{grid-template-columns:1fr 1fr 34px;padding-bottom:10px;border-bottom:1px dashed var(--ligne);margin-bottom:10px}
  .ligne-sou textarea{grid-column:1 / -1}
  .ligne-sou .montant-ligne{grid-column:1 / 3;text-align:left}
  .ligne-sou .mini{grid-row:3;grid-column:3;margin-top:0}
  .bravo{flex-direction:column}
}

/* Factures */
.onglets a{color:var(--gris);padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;white-space:nowrap}
.onglets a.on{background:var(--s3);color:var(--texte)}
.onglets.filtres{margin-bottom:0}
.rangee.fin{justify-content:flex-end;flex-wrap:nowrap}
.liste-fac td:last-child{width:1%}
#fac-nouveau-projet[hidden]{display:none}
.pdf-externe{margin-top:14px}
.pdf-externe summary{cursor:pointer;list-style:none}
.pdf-externe summary::-webkit-details-marker{display:none}

/* Types de facture */
.liste-fac-carte .carte-h{flex-direction:column;align-items:stretch}
.types{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.types .sub{margin-right:4px}
.puce{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--ligne);background:var(--s2);color:var(--gris);font-size:12px;white-space:nowrap}
.puce b{font-weight:400;color:var(--texte);font-size:11px}
.puce:hover{color:var(--texte)}
.puce.on{background:var(--texte);color:var(--noir);border-color:var(--texte)}
.puce.on b{color:var(--noir)}
.liste-fac-carte .onglets{align-self:flex-start}

/* =========================================================
   THÈME CLAIR — activé par le bouton soleil / lune
   (les couleurs se changent ici, comme celles du thème sombre en haut)
   ========================================================= */
.theme-bascule{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--pale);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.theme-bascule:hover{color:var(--texte);background:var(--s1)}
.entete-outils{display:flex;align-items:center;gap:8px}
.entete-outils .theme-bascule{width:38px;height:38px}

html:is([data-theme="light"],[data-theme^="doux"]){
  --fond:#F5F4F0;
  --rail:#ECEAE4;
  --s1:#FFFFFF;
  --s2:#F3F1EC;
  --s3:#E7E4DD;
  --ligne:#E2DFD8;
  --texte:#1C1C1C;
  --gris:#6E6C66;
  --pale:#9C9990;
  --vert-doux:rgba(0,190,132,.12);
  --orange:#A35F00;
  --rouge:#C2412F;
  color-scheme:light;
}
html:is([data-theme="light"],[data-theme^="doux"]) body{background:var(--fond)}
/* Le vert vif reste en fond (boutons) mais s'assombrit quand il sert de texte */
html:is([data-theme="light"],[data-theme^="doux"]) .badge,
html:is([data-theme="light"],[data-theme^="doux"]) .vert,
html:is([data-theme="light"],[data-theme^="doux"]) .etape.active .marque,
html:is([data-theme="light"],[data-theme^="doux"]) .tache.faite .tache-ico,
html:is([data-theme="light"],[data-theme^="doux"]) .projet:hover .projet-haut .ico,
html:is([data-theme="light"],[data-theme^="doux"]) .tour-num,
html:is([data-theme="light"],[data-theme^="doux"]) .art .sceau{color:var(--vert-texte,#00845C)}
html:is([data-theme="light"],[data-theme^="doux"]) .badge.pale{color:var(--gris)}
html:is([data-theme="light"],[data-theme^="doux"]) .badge.attente{color:var(--orange);background:rgba(214,130,0,.12)}
html:is([data-theme="light"],[data-theme^="doux"]) .badge.rouge{color:var(--rouge);background:rgba(194,65,47,.1)}
/* Éléments « inversés » (fond foncé, texte clair) */
html:is([data-theme="light"],[data-theme^="doux"]) .rail-lien[aria-current="page"],
html:is([data-theme="light"],[data-theme^="doux"]) .puce.on,
html:is([data-theme="light"],[data-theme^="doux"]) .btn-clair{background:#1C1C1C;color:#FFFFFF}
html:is([data-theme="light"],[data-theme^="doux"]) .puce.on b{color:#FFFFFF}
html:is([data-theme="light"],[data-theme^="doux"]) .rail-lien[aria-current="page"] .pastille{box-shadow:0 0 0 2px #1C1C1C}
html:is([data-theme="light"],[data-theme^="doux"]) .btn-clair{box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
html:is([data-theme="light"],[data-theme^="doux"]) .rail-av{color:var(--texte)}
/* Bordures, champs et zones internes */
html:is([data-theme="light"],[data-theme^="doux"]) .note{border-color:#CFCBC2}
html:is([data-theme="light"],[data-theme^="doux"]) .ajout{border-color:#D6D2C9}
html:is([data-theme="light"],[data-theme^="doux"]) .input:hover{border-color:#CFCBC2}
html:is([data-theme="light"],[data-theme^="doux"]) .input{background:var(--s2)}
html:is([data-theme="light"],[data-theme^="doux"]) .carte,
html:is([data-theme="light"],[data-theme^="doux"]) .stat,
html:is([data-theme="light"],[data-theme^="doux"]) .projet{box-shadow:0 1px 2px rgba(28,28,28,.04)}
html:is([data-theme="light"],[data-theme^="doux"]) .tache.chaude small{color:rgba(11,11,11,.6)}
html:is([data-theme="light"],[data-theme^="doux"]) .apercu-cadre{background:repeating-conic-gradient(#EEECE7 0 25%,#E6E3DC 0 50%) 0 0/22px 22px}
html:is([data-theme="light"],[data-theme^="doux"]) .av{background:var(--s3)}
/* Messages */
html:is([data-theme="light"],[data-theme^="doux"]) .flash{border-color:rgba(0,170,120,.35)}
html:is([data-theme="light"],[data-theme^="doux"]) .flash.erreur,
html:is([data-theme="light"],[data-theme^="doux"]) .erreur{color:#9E2F20;background:rgba(194,65,47,.07);border-color:rgba(194,65,47,.3)}
/* Connexion */
html:is([data-theme="light"],[data-theme^="doux"]) .carte-connexion{background:#FFFFFF;box-shadow:0 40px 80px -40px rgba(28,28,28,.3)}
html:is([data-theme="light"],[data-theme^="doux"]) .art{background:#1C1C1C;color:#F5F4F0}
html:is([data-theme="light"],[data-theme^="doux"]) .art p{color:rgba(245,244,240,.7)}
html:is([data-theme="light"],[data-theme^="doux"]) .art .sceau{color:var(--vert)}
html:is([data-theme="light"],[data-theme^="doux"]) .art::after{background:radial-gradient(circle at 35% 30%,#00F6AC 0,#0A6D51 38%,#122019 68%,#1C1C1C 80%)}
/* Tour guidé et loupe */
html:is([data-theme="light"],[data-theme^="doux"]) .tour-voile{background:rgba(28,28,28,.45)}
html:is([data-theme="light"],[data-theme^="doux"]) .tour-carte{box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
/* Soumissions et factures */
html:is([data-theme="light"],[data-theme^="doux"]) .doc{border:1px solid var(--ligne);box-shadow:0 30px 60px -40px rgba(28,28,28,.35)}
html:is([data-theme="light"],[data-theme^="doux"]) .avis{border-color:rgba(0,170,120,.3)}
html:is([data-theme="light"],[data-theme^="doux"]) .sig-zone{border:1px solid var(--ligne)}
html:is([data-theme="light"],[data-theme^="doux"]) .suivi li::before{border-color:var(--s3);background:var(--s1)}
html:is([data-theme="light"],[data-theme^="doux"]) .suivi li::after{background:var(--s3)}
html:is([data-theme="light"],[data-theme^="doux"]) .rail [data-t]:hover::after{background:#1C1C1C;color:#FFFFFF}
html:is([data-theme="light"],[data-theme^="doux"]) .doc{background:#FFFFFF}
@media (max-width:760px){html:is([data-theme="light"],[data-theme^="doux"]) .rail{background:rgba(236,234,228,.96)}}

/* Corrections du thème clair (texte sur fond foncé) */
html:is([data-theme="light"],[data-theme^="doux"]) .tache.chaude{color:#FFFFFF}
html:is([data-theme="light"],[data-theme^="doux"]) .tache.chaude:hover{background:#333333}
html:is([data-theme="light"],[data-theme^="doux"]) .tache.chaude small{color:rgba(255,255,255,.75)}
html:is([data-theme="light"],[data-theme^="doux"]) .tache.chaude .tache-ico{background:rgba(255,255,255,.14);color:var(--vert)}
html:is([data-theme="light"],[data-theme^="doux"]) .prog b{color:#FFFFFF}

/* Menu des thèmes */
.theme-menu{position:relative}
.theme-menu summary{list-style:none}
.theme-menu summary::-webkit-details-marker{display:none}
.theme-menu[open] summary{color:var(--texte);background:var(--s1)}
.theme-liste{position:absolute;left:54px;bottom:0;z-index:60;width:210px;padding:8px;background:var(--s1);border:1px solid var(--ligne);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.entete-outils .theme-liste{left:auto;right:0;bottom:auto;top:46px}
.theme-liste-titre{margin:4px 8px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.theme-liste button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:9px;background:transparent;color:var(--texte);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.theme-liste button:hover{background:var(--s2)}
.theme-liste button[aria-pressed="true"]{background:var(--s3);font-weight:600}
.theme-pastille{width:22px;height:22px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.theme-menu summary.theme-bascule::after{display:none}
.theme-menu[open] summary.theme-bascule::after{display:none!important}
@media (max-width:760px){.rail .theme-liste{position:fixed;left:auto;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}.rail:has(.theme-menu[open]){-webkit-backdrop-filter:none;backdrop-filter:none}}

/* =========================================================
   THÈME DOUX — 4 couleurs (mauve, bleu, vert, gris)
   Chaque couleur ne change que les variables ci-dessous.
   ========================================================= */
html[data-theme="doux-mauve"]{--fond:#F5F3FB;--s2:#F7F5FC;--s3:#EEEBF8;--ligne:#E8E5F3;--texte:#26223A;--gris:#6F6A8A;--pale:#A29DBA;--accent:#5B4FD8;--accent-fonce:#4436C4;--accent-pale:#ECE9FF;--ombre:rgba(70,50,170,.22)}
html[data-theme="doux-bleu"]{--fond:#F2F6FC;--s2:#F5F8FD;--s3:#E9EFF9;--ligne:#E1E8F3;--texte:#1D2638;--gris:#5F6B85;--pale:#9AA4BA;--accent:#2F6FDB;--accent-fonce:#1F57B8;--accent-pale:#E3EDFD;--ombre:rgba(30,80,170,.2)}
html[data-theme="doux-vert"]{--fond:#F1F7F3;--s2:#F4F9F6;--s3:#E6F0EA;--ligne:#DFEAE3;--texte:#1C2B24;--gris:#5C6E64;--pale:#97A79E;--accent:#1F8A62;--accent-fonce:#176B4C;--accent-pale:#DFF3E9;--ombre:rgba(20,110,70,.2)}
html[data-theme="doux-gris"]{--fond:#F4F4F5;--s2:#F7F7F8;--s3:#ECEDEF;--ligne:#E4E5E8;--texte:#1F2125;--gris:#666A73;--pale:#A0A3AA;--accent:#4A4E57;--accent-fonce:#2F3238;--accent-pale:#E7E8EB;--ombre:rgba(20,20,30,.18)}
html[data-theme^="doux"]{
  --rail:var(--fond);
  --s1:#FFFFFF;
  --vert:var(--accent);
  --vert-doux:var(--accent-pale);
  --f-titre:'Manrope',system-ui,sans-serif;
  --f-texte:'Manrope',system-ui,sans-serif;
  --f-mono:'Manrope',system-ui,sans-serif;
  --rayon:20px;
  color-scheme:light;
}
html[data-theme^="doux"] body{font-variant-numeric:tabular-nums}
html[data-theme^="doux"] h1,html[data-theme^="doux"] h2,html[data-theme^="doux"] h3,html[data-theme^="doux"] .cond{font-weight:800;letter-spacing:-.02em}
html[data-theme^="doux"] ::selection{background:var(--accent);color:#FFFFFF}
/* Colonne de gauche : se fond dans la page */
html[data-theme^="doux"] .coquille{background:none}
html[data-theme^="doux"] .rail{border-right:0;background:var(--fond)}
html[data-theme^="doux"] .rail .marque{background:var(--accent);color:#FFFFFF;border-radius:14px;font-family:'Manrope',sans-serif;font-variation-settings:normal;font-stretch:normal;font-size:16px;font-weight:800}
html[data-theme^="doux"] .rail-lien{border-radius:14px}
html[data-theme^="doux"] .rail-lien[aria-current="page"]{background:#FFFFFF;color:var(--accent);box-shadow:0 6px 16px -8px var(--ombre)}
html[data-theme^="doux"] .rail-lien[aria-current="page"] .pastille{box-shadow:0 0 0 2px #FFFFFF}
html[data-theme^="doux"] .rail [data-t]:hover::after{background:var(--texte)}
html[data-theme^="doux"] .rail-av{background:#FFFFFF;box-shadow:0 4px 12px -6px var(--ombre)}
/* Cartes : sans bordure, ombre douce */
html[data-theme^="doux"] .carte,
html[data-theme^="doux"] .stat,
html[data-theme^="doux"] .projet,
html[data-theme^="doux"] .doc{border-color:transparent;box-shadow:0 12px 32px -20px var(--ombre)}
html[data-theme^="doux"] .projet:hover{border-color:var(--accent-pale)}
/* Boutons et accents : couleur du thème, texte blanc */
html[data-theme^="doux"] .btn{color:#FFFFFF;border-radius:12px}
html[data-theme^="doux"] .btn:hover{filter:none;background:var(--accent-fonce)}
html[data-theme^="doux"] .btn-g{color:var(--texte);background:var(--s2)}
html[data-theme^="doux"] .btn-g:hover{background:var(--s3)}
html[data-theme^="doux"] .btn-clair,
html[data-theme^="doux"] .puce.on{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
html[data-theme^="doux"] .mini:hover{color:#FFFFFF}
html[data-theme^="doux"] .lang a.on{color:#FFFFFF}
html[data-theme^="doux"] .etape.faite .ck{color:#FFFFFF}
html[data-theme^="doux"] .badge,
html[data-theme^="doux"] .vert,
html[data-theme^="doux"] .etape.active .marque,
html[data-theme^="doux"] .tache.faite .tache-ico,
html[data-theme^="doux"] .projet:hover .projet-haut .ico,
html[data-theme^="doux"] .tour-num{color:var(--accent-fonce)}
html[data-theme^="doux"] .badge{background:var(--accent-pale)}
html[data-theme^="doux"] .badge.pale{color:var(--gris);background:var(--s3)}
html[data-theme^="doux"] .tache.chaude{background:var(--accent)}
html[data-theme^="doux"] .tache.chaude:hover{background:var(--accent-fonce)}
html[data-theme^="doux"] .tache.chaude .tache-ico{color:#FFFFFF}
html[data-theme^="doux"] .prog b{background:var(--accent)}
html[data-theme^="doux"] .input{border-radius:12px;background:var(--s2)}
html[data-theme^="doux"] .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
html[data-theme^="doux"] .flash{border-color:var(--accent-pale)}
html[data-theme^="doux"] .avis{border-color:var(--accent-pale)}
html[data-theme^="doux"] .bulle.moi{background:var(--accent);color:#FFFFFF}
/* Connexion */
html[data-theme^="doux"] .carte-connexion{border:0;box-shadow:0 40px 80px -40px var(--ombre)}
html[data-theme^="doux"] .art{background:var(--accent-fonce)}
html[data-theme^="doux"] .art::after{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55) 0,rgba(255,255,255,.14) 45%,transparent 70%)}
html[data-theme^="doux"] .art .sceau{color:#FFFFFF;background:rgba(255,255,255,.16)}
/* Soumissions et factures */
html[data-theme^="doux"] .doc-table th{background:var(--texte)}
html[data-theme^="doux"] .doc-depot{background:var(--accent);color:#FFFFFF}
html[data-theme^="doux"] .doc-depot b{color:#FFFFFF}
html[data-theme^="doux"] .doc-num .badge:not(.attente){background:var(--accent-pale);color:var(--accent-fonce)}
html[data-theme^="doux"] .bravo{background:var(--accent);color:#FFFFFF}
html[data-theme^="doux"] .bravo .sub{color:rgba(255,255,255,.8)}
html[data-theme^="doux"] .bravo-ico{background:#FFFFFF;color:var(--accent)}
html[data-theme^="doux"] .sig-zone{border-color:var(--ligne)}

/* =========================================================
   PAGE RÉGLAGES
   ========================================================= */
.reg-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.reg-champs .champ{margin:0;grid-column:1 / -1}
.reg-champs .champ.demi{grid-column:auto}
.reg-champs .plein{grid-column:1 / -1}
.reg-champs .case{margin:0}
.reg-champs .champ > .sub{line-height:1.45}
.reg-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.reg-logo img{height:56px;max-width:200px;object-fit:contain;background:#FFFFFF;border:1px solid var(--ligne);border-radius:10px;padding:6px}
.reg-logo .input{flex:1 1 240px}
.reg-couleur{display:flex;align-items:center;gap:12px;min-height:44px}
.reg-couleur input[type=color]{width:52px;height:40px;padding:0;border:1px solid var(--ligne);border-radius:10px;background:none;cursor:pointer}
.reg-apercu{display:flex;align-items:center;gap:12px}
.reg-apercu .marque{margin:0;flex-shrink:0}
.reg-apercu b{display:block}
.reg-test{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
html[data-theme^="doux"] .reg-apercu .marque{background:var(--accent);color:#FFFFFF;border-radius:14px;font-family:'Manrope',sans-serif;font-variation-settings:normal;font-stretch:normal;font-size:16px;font-weight:800}
@media (max-width:760px){.reg-champs{grid-template-columns:minmax(0,1fr)}.reg-champs .champ.demi{grid-column:1 / -1}}

/* Avis de nouvelle version (admin) */
.bandeau-maj{max-width:1388px;margin:22px 26px -8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--s1);border:1px solid var(--vert);font-size:14px}
.bandeau-maj span{flex:1 1 260px}
.bandeau-maj .ico{color:var(--vert)}
@media (min-width:1517px){.bandeau-maj{margin-left:auto;margin-right:auto}}
@media (max-width:760px){.bandeau-maj{margin:14px 14px -4px}}

/* Licence (Réglages et bandeau) */
.lic-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bandeau-lic{border-color:var(--orange,#E8A33A)}
.bandeau-lic>.ico{color:var(--orange,#E8A33A)}