/* DARAJAE — compléments de l'application (S3). darajae.css reste la feuille des maquettes, reprise telle quelle. */
.inp input,.inp select{border:0;outline:0;background:transparent;height:100%;min-width:0;flex:1;color:var(--ink);font-size:15px}
.inp select{flex:none;font-weight:700;appearance:none;padding-right:2px;cursor:pointer}
.inp:focus-within{border-color:var(--primary)}
input.inp{display:block}
.inp.chiffre{padding:0;height:62px;width:calc((100% - 50px) / 6);text-align:center;font-size:26px;font-weight:800}
.inp.chiffre:focus{outline:0;border-color:var(--primary)}
.oeil{display:inline-grid;place-items:center;margin-left:auto;color:var(--ink)}
.lien{color:#0379A0;font-weight:700}
.erreur{color:var(--danger);font-size:13.5px;margin-top:6px;font-weight:600}
.flash{margin-bottom:16px}
.cb input{position:absolute;opacity:0;pointer-events:none}
label.hstack{cursor:pointer;position:relative}
button.btn,a.btn{cursor:pointer}
button.nav{width:100%;text-align:left}
[dir=rtl] button.nav{text-align:right}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* sélecteur de langue */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-liste{position:absolute;bottom:100%;right:0;margin-bottom:6px;background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:6px;min-width:150px;z-index:20;box-shadow:0 10px 30px rgba(4,37,84,.16)}
.lang-liste.bas{bottom:auto;top:100%;margin:6px 0 0}
.lang-liste a{display:block;padding:8px 12px;border-radius:6px;font-weight:600;color:var(--ink)}
.lang-liste a.on,.lang-liste a:hover{background:var(--primary-soft)}
/* en-tête commune : lanceur et menu à son nom (K08) */
.top-actions button{display:inline-grid;place-items:center}
.pop[hidden]{display:none}
.pop .appli{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:12px}
.pop .appli:hover{background:var(--primary-tint)}
.pop .appli .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:var(--ink)}
.menu-l{display:flex;align-items:center;gap:12px;padding:11px 4px;width:100%;border-radius:8px}
.menu-l:hover{background:var(--primary-tint)}
.voile{position:fixed;inset:0;background:rgba(4,37,84,.35);z-index:4}
.voile[hidden]{display:none}
.search input{border:0;outline:0;background:transparent;flex:1;height:100%;color:var(--ink);font-size:15px}
.search input::placeholder{color:var(--ink-3)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.m-retour,.m-tabs,.bande-mob{display:none}
.panel-b{min-height:0}
.app{min-height:100vh}
.main{overflow:auto}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
/* ---------- téléphone : la maquette mobile (coque .m) ---------- */
@media (max-width:760px){
  body{background:var(--bg)}
  .acces{display:block!important;height:auto!important;min-height:100vh}
  .acces-g{padding:28px 20px!important;min-height:100vh}
  .acces-c{margin:0!important}
  .acces-c h1{font-size:28px!important;font-weight:800}
  .acces-sous{margin:4px 0 20px!important;font-size:15px!important}
  .acces-photo{display:none!important}
  .bande-mob{display:block;height:150px;margin:20px 0}
  .acces-pied{margin-top:28px}
  .app{display:block;height:auto}
  .topbar{height:auto;padding:10px 18px 6px;gap:14px;border:0}
  .topbar .brand{width:auto;font-size:24px}
  .topbar .search{display:none}
  .top-actions{gap:16px}
  .top-actions svg.i.l{width:22px;height:22px}
  .top-actions .avatar{width:40px;height:40px;font-size:15px}
  .side{display:none}
  .main{display:block;padding:0 0 96px;overflow:visible}
  .panel{border:0;background:transparent;border-radius:0;max-width:none!important;overflow:visible}
  .panel-h{border:0;padding:10px 16px}
  .panel-h h2{font-size:22px}
  .m-retour{display:inline-flex}
  .panel-b{padding:0 16px;overflow:visible}
  .m-tabs{display:grid;position:fixed;z-index:3}
  .m-tabs a{color:var(--ink)}
  .grille-qr{grid-template-columns:1fr!important}
  .grille-codes{grid-template-columns:1fr 1fr!important}
  .rangee-codes{flex-direction:column;align-items:stretch}
  .pop{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;transform:none!important;border-radius:20px 20px 0 0!important;border:0!important;padding:10px 18px 28px!important;box-shadow:0 -10px 30px rgba(4,37,84,.15)!important;max-height:92vh;overflow:auto}
  .pop::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:#CBD5E1;margin:0 auto 14px}
  .erreur-page header{padding:0 20px!important;height:64px!important}
  .erreur-page main{display:block!important;padding:0 20px 24px!important}
  .erreur-page .code{font-size:88px!important}
  .erreur-page h1{font-size:28px!important;margin:8px 0!important}
  .erreur-page .desc{font-size:15px!important}
  .erreur-page .actions{flex-direction:column;align-items:stretch}
  .erreur-page .actions .btn{width:100%}
  .erreur-page .visuel{height:200px!important;margin:22px 0 10px;order:-1}
  .erreur-page .visuel span{display:none!important}
  .erreur-page .colonne{display:flex;flex-direction:column}
  .erreur-page footer{padding:18px 20px!important;flex-direction:column;align-items:flex-start}
  table.t{font-size:14px}
  table.t td,table.t th{padding:10px 8px}
}
/* ---------- arabe (droite à gauche) : préparé, langue ouverte au jalon S4 ---------- */
[dir=rtl] .oeil,[dir=rtl] .top-actions,[dir=rtl] .row .end{margin-left:0;margin-right:auto}
[dir=rtl] .nav.on::before{left:auto;right:-18px;border-radius:4px 0 0 4px}
[dir=rtl] .lang-liste{right:auto;left:0}
[dir=rtl] table.t th{text-align:right}
[dir=rtl] .acces-photo>div{left:auto!important;right:48px}
[dir=rtl] svg.i.retourne{transform:scaleX(-1)}
.seul-mob{display:none}
@media (max-width:760px){.seul-pc{display:none!important}.seul-mob{display:inline}}
.interrupteur{appearance:none;width:52px;height:30px;border-radius:15px;background:#C6D2DF;position:relative;flex:none;cursor:pointer;transition:background .15s}
.interrupteur::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s}
.interrupteur:checked{background:var(--primary)}.interrupteur:checked::after{left:25px}
.qr svg{width:203px;height:203px;display:block}
label.hstack>input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* ---------- DARAJAE Contacts (C1–C5) ---------- */
.mob-seul{display:none}
.lien-ligne{display:flex;align-items:center;gap:20px;flex:1;min-width:0}
.row .end button,.row .end a,.field>button{display:inline-grid;place-items:center;color:var(--ink-2)}
.cb{position:relative;cursor:pointer}
.cb svg{display:none}
.cb.on svg,.cb:has(input:checked) svg{display:block}
.cb:has(input:checked){background:var(--primary);border-color:var(--primary);color:#fff}
.barre-sel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--primary-tint);border-bottom:1px solid var(--line-2)}
.barre-sel[hidden]{display:none}
.barre-sel select{height:42px}
details.tri,details.ajout-groupe,details.choix-groupes,details.nouveau-groupe,details.renommer,details.ajout-membres{position:relative}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.lien-corbeille{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:14px;color:var(--ink-2)}
.lien-corbeille.on{font-weight:700;color:var(--ink)}
.side h6 a{color:inherit}
.field .v a:hover{text-decoration:underline}
.inp select.tag{flex:none;margin-left:auto;padding:5px 12px;border:0;font-weight:600;background:#D9F6FE;border-radius:16px;appearance:auto;height:auto}
textarea.inp{display:block;resize:vertical;font:inherit;line-height:1.45}
.inp input[type=date]{color:var(--ink)}
.grille-fusion{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.choix-fusion,.box.source,.choix-rond{cursor:pointer;position:relative}
.choix-fusion input,.box.source input,.choix-rond input,.choix-format input{position:absolute;opacity:0;pointer-events:none}
.choix-fusion:has(input:checked),.box.source:has(input:checked),.choix-rond:has(input:checked){background:var(--primary-tint);border-color:#BFE8F5}
.box.source.tint:not(:has(input:checked)){background:#fff;border-color:var(--line-2)}
.choix-fusion:has(input:focus-visible),.box.source:has(input:focus-visible),.choix-rond:has(input:focus-visible){outline:3px solid var(--primary)}
.choix-rond:has(input:checked) .cb{background:var(--primary);border-color:var(--primary);color:#fff}
.choix-rond:has(input:checked) .cb svg{display:block}
.choix-format label{cursor:pointer;position:relative}
.choix-format label:has(input:checked){background:var(--primary-soft);font-weight:700}
.tri-select{border:1.5px solid #B9C9DC;border-radius:8px;padding:6px 10px;background:#fff;font-weight:700;color:var(--ink)}
tr.ligne-on td{background:var(--primary-tint)}
table.t a{color:inherit}
.fab{display:none}
.contacts .side{overflow:auto}
.contacts .main{overflow:hidden}
.contacts .panel>div[style*="overflow:auto"],.contacts .rangees{min-height:0;flex:1}
@media (max-width:760px){
  .mob-seul{display:flex}
  .contacts.avec-recherche .topbar{flex-wrap:wrap}
  .contacts.avec-recherche .topbar .search{display:flex;order:9;flex:1 0 100%;height:44px;margin:4px 0 6px;max-width:none}
  .contacts .main{overflow:visible}
  .contacts .panel{width:auto!important;flex:none!important}
  .contacts .row .cb{display:none}
  .contacts .row{padding:9px 18px;gap:14px}
  .contacts .lien-ligne{gap:14px}
  .contacts .letter{padding:4px 18px;font-size:17px}
  .contacts .row .t{font-size:17px}.contacts .row .s{font-size:14.5px}
  .contacts .avatar{width:44px;height:44px}
  .contacts .avatar.lg{width:104px;height:104px}
  .contacts .main h1{font-size:28px;font-weight:800}
  .contacts .btn{height:50px;font-size:16px}
  .contacts .btn.sm{height:42px;font-size:15px}
  .fab{display:grid;position:fixed;right:16px;bottom:96px;z-index:3;width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;place-items:center;box-shadow:0 6px 18px rgba(1,120,160,.28)}
  .contacts .m-head{display:flex;align-items:center;gap:12px;padding:10px 16px}
  .contacts .m-head .hstack{gap:18px}
  .contacts .fiche-contact .panel-b{padding:0 16px!important}
  .contacts .field{grid-template-columns:36px 1fr auto;padding:14px 0;gap:0 12px}
  .contacts .field>svg:first-child{grid-row:1/3;grid-column:1}
  .contacts .field .k{grid-column:2;grid-row:1;font-size:13.5px}
  .contacts .field .v{grid-column:2;grid-row:2}
  .contacts .field>button,.contacts .field>span:last-child:not(.k):not(.v){grid-column:3;grid-row:1/3}
  .contacts .boutons-fiche{gap:10px;margin:8px 0!important}
  .contacts .form .two{grid-template-columns:1fr}
  .grille-fusion{grid-template-columns:1fr}
  .grille-sources{grid-template-columns:1fr!important}
  .contacts .panel-h .btn.sm.primary{margin-left:auto}
  .contacts .seg>*{padding:9px 4px;gap:6px}
  .contacts .liste-contacts .row.sel{background:#fff;outline:0;margin:0;border-radius:0}
  .contacts .form,.contacts .form *{min-width:0}
  .contacts .inp input{width:100%}
  .contacts .form .avatar.lg{width:44px;height:44px}
  .contacts .form .avatar.lg svg{width:22px;height:22px}
  .contacts .panel-h .btn.primary svg{display:none}
  .contacts .panel-h h2{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}