/* MPS Maroc: on-brand versions of every native HTML component (shared by mps-maroc and anticrevaison).
   Everything sits inside :where() so it has zero specificity: any component-specific style on the page wins. */
:where(:root){accent-color:#C04A12;caret-color:#C04A12;scrollbar-color:#9FB6CC transparent;scrollbar-width:thin}
::selection{background:#FFD9C4;color:#073763}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#B7C6D5;border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#7F96AD;background-clip:padding-box}

/* links */
:where(a:not([class])){color:#0B5294;text-decoration-color:rgba(11,82,148,.35);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s,text-decoration-color .2s}
:where(a:not([class])):hover{color:#B8460F;text-decoration-color:currentColor}

/* lists: orange diamond bullets, numbered lists with mono numerals */
:where(ul){list-style-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='2.2' y='2.2' width='5.6' height='5.6' rx='1' transform='rotate(45 5 5)' fill='%23F06A25'/%3E%3C/svg%3E");padding-left:1.25em}
:where(ul ul){list-style-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2.4' fill='none' stroke='%230B5294' stroke-width='1.4'/%3E%3C/svg%3E")}
:where(ol){padding-left:1.6em}
:where(ol)>li::marker{font:600 .88em "IBM Plex Mono",Menlo,monospace;color:#B8460F}

/* definition lists */
:where(dt){font:600 .8em/1.3 "IBM Plex Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;color:#516478}
:where(dd){margin:.2em 0 .8em;color:#10243A}

/* disclosure */
:where(summary){cursor:pointer}
:where(summary)::marker{color:#F06A25}
:where(details[open]>summary)::marker{color:#B8460F}

/* tables */
:where(table){border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
:where(th,td){padding:.65em .8em;border-bottom:1px solid #E1E8EF;text-align:left;vertical-align:top}
:where(thead th){font:600 .74em/1.3 "IBM Plex Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;color:#516478;border-bottom:2px solid #073763;background:#F4F6F9}
:where(tbody tr:nth-child(even)){background:#FAFBFD}
:where(tbody tr):hover{background:#FFF6F0}
:where(caption){caption-side:bottom;padding-top:.6em;font-size:.85em;color:#516478;text-align:left}

/* form fields */
:where(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea,select){
  font:inherit;color:#10243A;background-color:#fff;border:1px solid #D6DFE8;border-radius:12px;padding:.65em .8em;transition:border-color .2s,box-shadow .2s;max-width:100%}
:where(input,textarea,select):hover{border-color:#9FB6CC}
:where(input,textarea,select):focus{outline:none;border-color:#073763;box-shadow:0 0 0 3px rgba(11,82,148,.16)}
:where(textarea){resize:vertical;min-height:6em;line-height:1.5}
::placeholder{color:#8A9AAB;opacity:1}
:where(input[type=number]){-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:16px;height:16px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23D6DFE8'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23073763' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* select: custom chevron (use .sel-arrow on selects that set their own background) */
:where(select),.sel-arrow{-webkit-appearance:none;appearance:none;padding-right:2.4em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23C04A12' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:16px;cursor:pointer}
:where(select option){color:#10243A}
/* checkbox and radio */
:where(input[type=checkbox],input[type=radio]){-webkit-appearance:none;appearance:none;width:20px;height:20px;margin:0 .45em 0 0;vertical-align:-4px;border:1.5px solid #9FB6CC;background:#fff center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
:where(input[type=checkbox]){border-radius:6px}:where(input[type=radio]){border-radius:50%}
:where(input[type=checkbox]:checked){background-color:#C04A12;border-color:#C04A12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:where(input[type=radio]:checked){border-color:#C04A12;background-image:radial-gradient(circle,#C04A12 0 5px,transparent 5.5px)}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:3px solid #F06A25;outline-offset:2px}
/* range slider: filled orange track up to the thumb (--fill is set by script; 50% without it) */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:26px;cursor:pointer;--fill:50%;padding:0;border:0}
input[type=range]:focus{outline:none;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#C04A12 var(--fill),#D6DFE8 var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid #C04A12;box-shadow:0 4px 10px -3px rgba(7,40,80,.45);transition:transform .15s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(240,106,37,.3)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#D6DFE8}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:#C04A12}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #C04A12;box-shadow:0 4px 10px -3px rgba(7,40,80,.45)}
/* progress and meter */
:where(progress,meter){-webkit-appearance:none;appearance:none;width:100%;height:8px;border:0;border-radius:8px;background:#E9EEF4;overflow:hidden}
progress::-webkit-progress-bar{background:#E9EEF4;border-radius:8px}progress::-webkit-progress-value{background:#C04A12;border-radius:8px}progress::-moz-progress-bar{background:#C04A12;border-radius:8px}
meter::-webkit-meter-bar{background:#E9EEF4;border:0;border-radius:8px}meter::-webkit-meter-optimum-value{background:#1F8A4C}meter::-webkit-meter-suboptimum-value{background:#F06A25}meter::-webkit-meter-even-less-good-value{background:#B42318}
/* fieldset, legend, label */
:where(fieldset){border:1px solid #E1E8EF;border-radius:16px;padding:1em 1.2em;margin:0 0 1em;min-width:0}
:where(legend){font:600 .78em/1.2 "IBM Plex Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.08em;color:#B8460F;padding:0 .4em}
:where(label){cursor:default}

/* buttons left unstyled by a component */
:where(button){font:inherit;color:inherit}
:where(button:not([class])){cursor:pointer;border:1px solid #D6DFE8;background:#fff;border-radius:999px;padding:.55em 1.1em;font-weight:600;color:#073763;transition:border-color .2s,background .2s}
:where(button:not([class])):hover{border-color:#073763}

/* text-level elements */
:where(kbd){display:inline-block;min-width:1.6em;padding:.12em .45em;font:600 .82em/1.4 "IBM Plex Mono",Menlo,monospace;text-align:center;color:#073763;background:#fff;border:1px solid #D6DFE8;border-bottom-width:3px;border-radius:6px}
:where(code,samp){font:.9em "IBM Plex Mono",Menlo,monospace;background:#EEF2F7;color:#073763;padding:.1em .35em;border-radius:6px}
:where(pre){font:.88em/1.55 "IBM Plex Mono",Menlo,monospace;background:#0A1B2C;color:#E9EEF4;padding:1em 1.2em;border-radius:14px;overflow:auto}
:where(pre code){background:none;color:inherit;padding:0}
:where(mark){background:#FFE3D2;color:#073763;padding:0 .2em;border-radius:4px}
:where(abbr[title]){text-decoration:underline dotted #9FB6CC;text-underline-offset:3px;cursor:help}
:where(small){font-size:.85em}
:where(blockquote){margin:1.4em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid #F06A25;color:#073763;font-size:1.08em}
:where(hr){border:0;height:1px;margin:2em 0;background:linear-gradient(90deg,transparent,#D6DFE8 15%,#D6DFE8 85%,transparent)}
:where(figure){margin:1.5em 0}:where(figcaption){font-size:.85em;color:#516478;margin-top:.5em}
:where(img){max-width:100%;height:auto}
:where(dialog){border:0;border-radius:24px;padding:1.5em;box-shadow:0 40px 80px -30px rgba(7,40,80,.55);color:#10243A}
:where(dialog)::backdrop{background:rgba(10,27,44,.45);backdrop-filter:blur(4px)}
:where(:focus-visible){outline:3px solid #F06A25;outline-offset:3px}
/* open dropdown list: fully custom where the browser allows it (customizable select) */
@supports (appearance:base-select){
  select,::picker(select){appearance:base-select}
  select{display:inline-flex;align-items:center}
  select::picker-icon{display:none}
  ::picker(select){border:1px solid #D6DFE8;border-radius:14px;padding:6px;margin-top:6px;background:#fff;box-shadow:0 24px 40px -20px rgba(7,40,80,.45)}
  select option{padding:9px 12px;border-radius:10px;font:500 15px/1.2 "Figtree",Arial,sans-serif;color:#10243A}
  select option:hover,select option:focus-visible{background:#FFF1E9;outline:none}
  select option:checked{background:#073763;color:#fff}
  select option::checkmark{display:none}
}
