/* DRH.ma Offres annonceurs : charte DRH.ma (page Indice de Confiance) - Roboto, encre #111013, accent #ff004a / #c8003b, fonds #faf7f9, filets #e8e6ec */
.drhoff{--o-ink:#111013;--o-fg:#2b2930;--o-muted:#6d6b76;--o-line:#e8e6ec;--o-line2:#d7d4dd;--o-soft:#faf7f9;--o-pink:#efd9e2;--o-accent:#ff004a;--o-accent-dk:#ff0050;--o-btn:#ff0050;--o-surface:#fff;--o-ok:#137a4b;
	font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--o-fg);font-size:16px;line-height:1.55;margin:24px 0}
.drhoff *,.drhoff *::before,.drhoff *::after{box-sizing:border-box}
.drhoff [hidden]{display:none!important}
.drhoff-grid{display:grid;grid-template-columns:minmax(270px,350px) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.drhoff-grid{grid-template-columns:minmax(0,1fr)}}

/* Titres de section : trait accent + titre, comme l'Indice de Confiance */
.drhoff-h{display:flex;align-items:center;gap:12px;font-family:inherit;font-weight:700;color:var(--o-ink);font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:0;text-transform:none}
.drhoff-h::before{content:"";width:26px;height:3px;background:var(--o-accent);border-radius:2px;flex:none}

/* Brief */
.drhoff-brief{background:var(--o-surface);border:1px solid var(--o-line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:18px;position:sticky;top:90px}
@media (max-width:900px){.drhoff-brief{position:static}}
.drhoff-field{display:flex;flex-direction:column;gap:7px}
.drhoff-lbl{font-size:13px;font-weight:500;color:var(--o-muted)}
.drhoff input[type=text],.drhoff select,.drhoff textarea{font:inherit;font-size:15px;color:var(--o-ink);background:var(--o-surface);border:1px solid var(--o-line2);border-radius:10px;padding:9px 12px;width:100%;margin:0;height:auto;box-shadow:none}
.drhoff input[type=text]:hover,.drhoff select:hover{border-color:var(--o-muted)}
.drhoff input:focus-visible,.drhoff select:focus-visible,.drhoff textarea:focus-visible,.drhoff button:focus-visible{outline:2px solid var(--o-accent);outline-offset:1px}
.drhoff-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drhoff-budget{position:relative}
.drhoff-budget input[type=text]{font-size:30px;font-weight:900;letter-spacing:-.02em;padding:6px 64px 6px 12px;font-variant-numeric:tabular-nums}
.drhoff-budget span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--o-muted);font-weight:700}
.drhoff-hint{font-size:13px;color:var(--o-muted);margin:0;line-height:1.45}
.drhoff-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--o-soft);border:1px solid var(--o-line);border-radius:10px;padding:4px}
.drhoff-seg label{flex:1 1 auto;text-align:center;cursor:pointer;padding:7px 10px;border-radius:7px;font-size:14px;font-weight:500;color:var(--o-muted);white-space:nowrap;margin:0}
.drhoff-seg input,.drhoff-chip input{position:absolute;opacity:0;pointer-events:none}
.drhoff-seg label:has(input:checked){background:var(--o-btn);color:#fff;font-weight:700;box-shadow:none}
.drhoff-seg label:has(input:focus-visible){outline:2px solid var(--o-accent)}
.drhoff-chips{display:flex;flex-wrap:wrap;gap:6px}
.drhoff-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--o-line2);border-radius:999px;padding:4px 11px;font-size:13px;cursor:pointer;background:var(--o-surface);color:var(--o-fg);margin:0}
.drhoff-chip small{color:var(--o-muted);font-size:11.5px}
.drhoff-chip:has(input:checked){background:var(--o-pink);border-color:var(--o-accent);color:var(--o-ink)}
.drhoff-chip:has(input:focus-visible){outline:2px solid var(--o-accent)}
.drhoff-check{display:flex;gap:9px;align-items:flex-start;font-size:14px;cursor:pointer;margin:0;color:var(--o-fg)}
.drhoff-check input{margin-top:4px;accent-color:var(--o-accent)}
.drhoff-range{display:flex;align-items:center;gap:12px}
.drhoff-range input{flex:1;accent-color:var(--o-accent)}
.drhoff-range output{min-width:48px;text-align:right;font-weight:700;color:var(--o-ink);font-variant-numeric:tabular-nums;font-size:14px}
.drhoff-interne{border-top:1px dashed var(--o-line2);padding-top:14px}

/* Boutons : style du bouton PARTICIPER */
.drhoff-btn{font:inherit;font-weight:700;font-size:13px;letter-spacing:.02em;border-radius:6px;padding:9px 16px;cursor:pointer;border:1px solid var(--o-line2);background:var(--o-surface);color:var(--o-ink);line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.drhoff-btn:hover{border-color:var(--o-accent);color:var(--o-accent)}
.drhoff-primary{background:var(--o-btn);color:#fff;border-color:var(--o-btn);text-transform:uppercase}
.drhoff-primary:hover{background:#fff;color:var(--o-btn)}
.drhoff-btn.sm{padding:6px 11px;font-size:12px}

/* Résultat */
.drhoff-out{display:flex;flex-direction:column;gap:22px;min-width:0}
.drhoff-summary{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;background:var(--o-soft);border:1px solid var(--o-line);border-left:3px solid var(--o-accent);border-radius:12px;overflow:hidden}
@media (max-width:700px){.drhoff-summary{grid-template-columns:1fr 1fr}}
.drhoff-cell{padding:16px 18px;display:flex;flex-direction:column;gap:3px;min-width:0;border-right:1px solid var(--o-line)}
.drhoff-cell:last-child{border-right:0}
.drhoff-cell .k{font-size:13px;font-weight:500;color:var(--o-muted)}
.drhoff-cell .v{font-size:28px;font-weight:900;color:var(--o-ink);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.drhoff-cell .v small{font-size:14px;font-weight:700;color:var(--o-muted);letter-spacing:0}
.drhoff-cell .s{font-size:12.5px;color:var(--o-muted)}
.drhoff-cell.hero .v{color:var(--o-accent-dk)}
.drhoff-alerts{display:flex;flex-direction:column;gap:8px}
.drhoff-alert{border-radius:10px;padding:11px 14px;font-size:14px;background:var(--o-soft);border:1px solid var(--o-line);border-left:3px solid var(--o-line2);color:var(--o-fg)}
.drhoff-alert.attention{border-left-color:#d98a00}
.drhoff-alert.bloquant{border-left-color:var(--o-accent-dk);color:var(--o-accent-dk);font-weight:500}
.drhoff-alert.info{border-left-color:var(--o-accent);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.drhoff-alerts:empty,.drhoff [data-suggest]:empty{display:none}
.drhoff-panel{background:var(--o-surface);border:1px solid var(--o-line);border-radius:12px;padding:22px;min-width:0}
.drhoff-headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.drhoff-panel>.drhoff-h{margin-bottom:14px}
.drhoff-mode{font-size:13px;font-weight:500;color:var(--o-muted)}

/* Tableau */
.drhoff-tblwrap{overflow-x:auto}
.drhoff-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0;border:0;font-size:15px}
.drhoff-tbl th{font-size:13px;font-weight:500;color:var(--o-muted);text-align:left;padding:8px 10px;border:0;border-bottom:1px solid var(--o-line2);background:none;text-transform:none}
.drhoff-tbl td{padding:12px 10px;border:0;border-bottom:1px solid var(--o-line);vertical-align:middle;background:none;color:var(--o-fg)}
.drhoff-tbl .n{text-align:right;white-space:nowrap}
.drhoff-tbl .mono{font-size:14px}
.drhoff-tbl tr.cat td{background:var(--o-soft);font-weight:700;color:var(--o-ink);font-size:14px;padding:7px 10px;border-bottom:1px solid var(--o-line)}
.drhoff-tbl tr.zero td{color:var(--o-muted)}
.drhoff-tbl tr.zero .drhoff-item{color:var(--o-muted);font-weight:500}
.drhoff-item{font-weight:700;color:var(--o-ink);display:block;line-height:1.3}
.drhoff-item small{display:block;font-weight:400;color:var(--o-muted);font-size:13px;margin-top:2px}
.drhoff-qty{display:inline-flex;align-items:center;border:1px solid var(--o-line2);border-radius:8px;overflow:hidden;background:var(--o-surface)}
.drhoff-qty button{border:0;background:var(--o-soft);color:var(--o-ink);width:30px;height:32px;font-size:17px;cursor:pointer;padding:0}
.drhoff-qty button:hover{background:var(--o-pink);color:var(--o-accent-dk)}
.drhoff-qty input[type=text]{width:62px;border:0;border-radius:0;background:transparent;text-align:center;padding:4px 2px;font-size:14px;font-weight:700}
.drhoff-qty.big input[type=text]{width:96px}
.drhoff-tbl tfoot td{border-bottom:0;font-weight:700;color:var(--o-ink)}
.drhoff-tbl tfoot tr.total td{border-top:2px solid var(--o-ink);font-size:17px}
.drhoff-tbl tfoot tr.sub td{font-weight:500;color:var(--o-muted);font-size:14px;padding-block:6px}
.drhoff-tbl tfoot tr.net td{font-size:20px;font-weight:900;letter-spacing:-.01em;color:var(--o-accent-dk)}

/* Bloc commission agence : encadré « En bref » */
.drhoff-agblock{margin-top:18px;background:var(--o-soft);border:1px solid var(--o-line);border-left:3px solid var(--o-accent);border-radius:12px;padding:18px 22px;display:flex;flex-direction:column;gap:7px}
.drhoff-agtitle{font-size:15px;font-weight:700;color:var(--o-ink);margin-bottom:2px}
.drhoff-agrow{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;font-variant-numeric:tabular-nums}
.drhoff-agrow b{white-space:nowrap;color:var(--o-ink)}
.drhoff-agrow.net{font-size:17px;font-weight:700;color:var(--o-accent-dk);border-top:1px solid var(--o-line2);padding-top:9px;margin-top:2px}
.drhoff-agrow.net b{color:var(--o-accent-dk);font-weight:900}

/* Résultats et audience */
.drhoff-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:700px){.drhoff-two{grid-template-columns:1fr}}
.drhoff-kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 10px}
.drhoff-kpi .k{font-size:13px;font-weight:500;color:var(--o-muted)}
.drhoff-kpi .v{font-size:26px;font-weight:900;color:var(--o-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.drhoff-kpi .s{font-size:12.5px;color:var(--o-muted)}
.drhoff-persona{border-left:3px solid var(--o-line2);padding:8px 0 8px 16px;margin:6px 0;font-size:15px}
.drhoff-persona b{color:var(--o-ink)}
.drhoff-persona span{color:var(--o-muted);font-size:13px}
.drhoff-persona p{margin:3px 0 0;color:var(--o-fg);font-size:14px;line-height:1.5}

/* Packs */
.drhoff-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:6px}
.drhoff-pack{background:var(--o-surface);border:1px solid var(--o-line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px}
.drhoff-pack.on{background:var(--o-soft);border-color:var(--o-accent);box-shadow:0 0 0 1px var(--o-accent) inset}
.drhoff-pack .nm{font-weight:700;font-size:17px;color:var(--o-ink)}
.drhoff-pack .pr{font-size:24px;font-weight:900;letter-spacing:-.02em;color:var(--o-accent-dk)}
.drhoff-pack .pr s{font-size:13px;font-weight:500;letter-spacing:0;color:var(--o-muted);margin-left:4px}
.drhoff-pack ul{margin:4px 0 6px;padding-left:18px;font-size:14px;color:var(--o-fg)}
.drhoff-pack li{margin:2px 0}
.drhoff-pack .drhoff-btn{margin-top:auto;align-self:flex-start}
.drhoff-pack.on .drhoff-btn{background:var(--o-btn);border-color:var(--o-btn);color:#fff}

/* Texte de proposition */
.drhoff-texte{min-height:340px;background:var(--o-soft)!important;font-family:Roboto,"Helvetica Neue",Arial,sans-serif!important;font-size:14.5px!important;line-height:1.6;color:var(--o-ink)!important;resize:vertical}
.drhoff-copied{font-size:13px;font-weight:500;color:var(--o-ok)}
.drhoff-ferme{padding:18px 22px;background:#faf7f9;border:1px solid #e8e6ec;border-left:3px solid #ff004a;border-radius:12px;color:#2b2930}
.drhoff-piege{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.drhoff-envoi{display:flex;flex-direction:column;gap:14px;border-left:3px solid var(--o-accent)}
.drhoff-envoi .drhoff-large{width:auto;align-self:flex-start;min-width:260px}
@media (max-width:520px){.drhoff-envoi .drhoff-large{width:100%;min-width:0}}
.drhoff-envoi .drhoff-check{font-size:12.5px;color:var(--o-muted);line-height:1.45}
.drhoff-large{width:100%;padding:13px 16px;font-size:14px}
.drhoff-btn:disabled{opacity:.6;cursor:default}
.drhoff-retour{font-size:14px}
.drhoff-retour:empty{display:none}
.drhoff-retour.ok{color:var(--o-ok);font-weight:500}
.drhoff-retour.ko{color:var(--o-accent-dk);font-weight:500}

/* Brief en étapes */
.drhoff-steps{display:flex;flex-direction:column;gap:10px;margin-top:-4px}
.drhoff-stepnum{margin:0;font-size:13px;font-weight:700;color:var(--o-btn)}
.drhoff-steps ol{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.drhoff-steps li{flex:1 1 0;min-width:0;margin:0;padding:0}
.drhoff-steps li button{display:block;width:100%;height:12px;border:0;background:none;padding:0;border-top:3px solid var(--o-line);cursor:pointer}
.drhoff-steps li.fait button,.drhoff-steps li.en-cours button{border-top-color:var(--o-accent)}
.drhoff-steps li button:disabled{cursor:default}
.drhoff-etape{display:flex;flex-direction:column;gap:18px}
.drhoff-nav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--o-line);padding-top:16px}
.drhoff-nav [data-nav="1"]{margin-left:auto}
.drhoff-avant .drhoff-out{display:none}
.drhoff-avant .drhoff-grid{grid-template-columns:minmax(0,640px);justify-content:center}
.drhoff-avant .drhoff-brief{position:static}
.drhoff-bpacks{display:flex;flex-direction:column;gap:8px}
.drhoff-bpack{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;font:inherit;background:var(--o-surface);border:1px solid var(--o-line2);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--o-fg)}
.drhoff-bpack:hover{border-color:var(--o-accent)}
.drhoff-bpack.on{background:var(--o-soft);border-color:var(--o-accent);box-shadow:0 0 0 1px var(--o-accent) inset}
.drhoff-bpack .nm{font-weight:700;font-size:16px;color:var(--o-ink)}
.drhoff-bpack .nm small{font-weight:500;font-size:13px;color:var(--o-muted);margin-left:4px}
.drhoff-bpack .pr{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--o-accent-dk)}
.drhoff-bpack .pr s{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--o-muted);margin-left:4px}
.drhoff-bpack .pts{font-size:13px;color:var(--o-muted);line-height:1.45}
.drhoff-phase-offre .drhoff-brief{display:none}
.drhoff-phase-offre .drhoff-grid{grid-template-columns:minmax(0,1fr)}
.drhoff-offre-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.drhoff-nav [data-act="voir"]{margin-left:auto}