/* Maharati — jetons et composants (design/systeme-design.md, D63, D68, D71).
   Mise en page en propriétés logiques uniquement : l'arabe (dir="rtl") est automatique. */
:root{
  --mh-marine:#082D4A; --mh-marine-2:#0E3A5E; --mh-turquoise:#14B8A6; --mh-turquoise-texte:#0F766E;
  --mh-orange:#F59E0B; --mh-orange-texte:#B45309; --mh-sable:#FBF7F1; --mh-menthe:#E6F6F3; --mh-peche:#FDF0E1;
  --mh-blanc:#FFFFFF; --mh-texte-2:#475569; --mh-texte-3:#64748B; --mh-vide:#E2E8F0;
  --mh-sur-marine:#D3DEE8; --mh-sur-marine-2:#A9BCCD;
  --mh-ombre:0 8px 28px rgba(8,45,74,.06); --mh-r-carte:20px; --mh-r-zone:28px;
  --mh-police:'Readex Pro',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--mh-sable);color:var(--mh-marine);font-family:var(--mh-police);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--mh-turquoise);outline-offset:2px;border-radius:8px}

.mh-app{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
.mh-nav{background:var(--mh-marine);color:#fff;margin:16px;margin-inline-end:0;border-radius:var(--mh-r-zone);padding:32px 0 24px;display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(8,45,74,.18)}
.mh-nav__marque{padding-inline:28px;display:flex;align-items:baseline;gap:12px;margin-bottom:28px}
.mh-nav__marque b{font-size:34px;color:var(--mh-turquoise);line-height:1}
.mh-nav a{display:flex;align-items:center;gap:12px;margin:2px 14px;padding:12px 14px;border-radius:14px;color:var(--mh-sur-marine);font-size:16px}
.mh-nav a:hover{background:var(--mh-marine-2);color:#fff}
.mh-nav a[aria-current="page"]{background:var(--mh-turquoise);color:var(--mh-marine);font-weight:600}
.mh-main{padding:44px 56px 48px;display:flex;flex-direction:column;gap:32px}

.mh-intitule{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.2em;font-weight:600;text-transform:uppercase}
.mh-intitule::after{content:"";width:36px;height:2px;background:currentColor}
[dir="rtl"] .mh-intitule{letter-spacing:0;font-size:15px;text-transform:none}
.mh-titre{margin:0;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
[dir="rtl"] .mh-titre{letter-spacing:0}

.mh-carte{background:var(--mh-blanc);border-radius:var(--mh-r-carte);box-shadow:var(--mh-ombre);overflow:hidden}
.mh-carte__corps{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.mh-famille{padding:12px 28px;font-size:14px;font-weight:500}

.mh-reglette{display:grid;gap:4px}
.mh-reglette span{height:14px;border-radius:3px;background:var(--mh-vide)}
.mh-reglette .fait{background:var(--mh-turquoise)}
.mh-reglette .manque{background:var(--mh-orange)}

.mh-date{display:flex;flex-direction:column;line-height:1.05}
.mh-date small{font-size:13px;color:var(--mh-texte-2)}
.mh-date b{font-size:28px}

.mh-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 24px;font:600 16px var(--mh-police);cursor:pointer;min-height:48px}
.mh-bouton--principal{background:var(--mh-orange);color:var(--mh-marine)}
.mh-bouton--secondaire{background:var(--mh-marine);color:#fff}
.mh-bouton--discret{background:var(--mh-menthe);color:#0F5E57}

.mh-champ{display:flex;flex-direction:column;gap:6px}
.mh-champ label{font-size:14px;font-weight:600}
.mh-champ input,.mh-champ select{font:16px var(--mh-police);color:var(--mh-marine);background:#F1F5F9;border:0;border-radius:14px;padding:14px 16px;min-height:48px}
.mh-champ .erreur{color:var(--mh-orange-texte);font-size:14px}
.mh-meta{font-size:14px;color:var(--mh-texte-2)}

@media (max-width:900px){
  .mh-app{grid-template-columns:1fr}
  .mh-nav{display:none}
  .mh-main{padding:24px 20px 96px}
  .mh-titre{font-size:32px}
}

/* Accès : inscription, connexion, code (E01, D68–D71).
   À gauche, des gens au travail (photos en arches) et la communauté ; à droite, une conversation. */
.mh-icone{flex:none;display:block}
[dir="rtl"] .mh-sens{transform:scaleX(-1)}
.mh-acces{min-height:100vh;display:grid;grid-template-columns:minmax(360px,44%) 1fr;background:var(--mh-sable)}
.mh-acces__seuil{background:var(--mh-peche)}
.mh-acces__seuil-in{position:sticky;top:0;min-height:100vh;padding:36px 48px 40px;display:flex;flex-direction:column;gap:24px}
.mh-acces__marque{display:flex;align-items:baseline;gap:10px}
.mh-acces__marque b{font-size:40px;line-height:1;color:var(--mh-turquoise-texte)}
.mh-acces__marque span{color:var(--mh-texte-2);font-size:15px}
.mh-acces__photos{position:relative;flex:1;min-height:480px;max-height:640px}
.mh-arche{position:absolute;margin:0;display:flex;flex-direction:column;gap:10px}
.mh-arche img{display:block;width:100%;height:auto;object-fit:cover;border-radius:999px 999px 26px 26px;box-shadow:0 18px 40px rgba(8,45,74,.14)}
.mh-arche figcaption{font-size:14px;font-weight:600;color:var(--mh-marine);padding-inline:6px}
.mh-arche--1{inset-inline-start:0;top:2%;width:min(60%,330px)}
.mh-arche--1 img{aspect-ratio:3/4}
.mh-arche--2{inset-inline-end:0;top:34%;width:min(44%,250px)}
.mh-arche--2 img{aspect-ratio:3/4;border:6px solid var(--mh-peche)}
.mh-acces__communaute{display:flex;align-items:center;gap:16px}
.mh-acces__communaute p{margin:0;font-size:15px;line-height:1.5;color:#334155;max-width:34ch}
.mh-visages{display:flex;flex:none}
.mh-visages img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid var(--mh-peche);margin-inline-start:-12px}
.mh-visages img:first-child{margin-inline-start:0}

.mh-acces__scene{padding:28px 64px 64px;display:flex;flex-direction:column}
.mh-acces__langues{display:flex;gap:6px;justify-content:flex-end}
.mh-acces__langues a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--mh-texte-2)}
.mh-acces__langues a[aria-current]{background:var(--mh-menthe);color:#0F5E57;font-weight:600}
.mh-acces__contenu{width:100%;max-width:560px;margin-block:auto;padding-top:28px;display:flex;flex-direction:column;gap:28px}
.mh-acces__etape{display:flex;flex-direction:column;gap:10px;max-width:220px}
.mh-acces__etape .mh-reglette span{height:8px}
.mh-acces__etape > span{font-size:13px;color:var(--mh-texte-2);white-space:nowrap}
.mh-acces__tete{display:flex;flex-direction:column;gap:10px}
.mh-acces__titre{margin:0;font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.015em}
[dir="rtl"] .mh-acces__titre{letter-spacing:0}
.mh-acces__chapo{margin:0;font-size:17px;line-height:1.55;color:#334155}
.mh-acces__statut{margin:0;color:var(--mh-turquoise-texte);font-weight:500}
.mh-acces__form{display:flex;flex-direction:column;gap:22px}
.mh-acces__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mh-acces__renvoi{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--mh-texte-2);font-size:15px}
.mh-lien{background:none;border:0;padding:0;font:600 15px var(--mh-police);color:var(--mh-turquoise-texte);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mh-lien:disabled{color:var(--mh-texte-3);text-decoration:none;cursor:default}

.mh-situations{border:0;margin:0;padding:0;display:grid;gap:10px}
.mh-situations legend{font-size:15px;font-weight:600;margin-bottom:12px}
.mh-situation{position:relative;display:grid;grid-template-columns:52px 1fr 28px;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--mh-r-carte);cursor:pointer;transition:background .15s,color .15s}
.mh-situation--apprenant{background:var(--mh-menthe)}
.mh-situation--formateur{background:var(--mh-peche)}
.mh-situation--organisme{background:#E2EFF8}
.mh-situation input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.mh-situation__icone{width:52px;height:52px;border-radius:50%;background:var(--mh-blanc);display:grid;place-items:center;color:var(--mh-marine)}
.mh-situation__texte{display:flex;flex-direction:column;gap:3px}
.mh-situation__texte b{font-size:17px}
.mh-situation__texte span{font-size:14px;line-height:1.45;color:var(--mh-texte-2)}
.mh-situation__choix{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:transparent}
.mh-situation:hover .mh-situation__choix{background:#fff}
.mh-situation:has(input:checked){background:var(--mh-marine);color:#fff}
.mh-situation:has(input:checked) .mh-situation__texte span{color:var(--mh-sur-marine)}
.mh-situation:has(input:checked) .mh-situation__icone{background:var(--mh-turquoise)}
.mh-situation:has(input:checked) .mh-situation__choix{background:var(--mh-orange);color:var(--mh-marine)}
.mh-situation:has(input:focus-visible){outline:3px solid var(--mh-turquoise);outline-offset:2px}

.mh-saisie{display:flex;align-items:center;gap:10px;background:#F1F5F9;border-radius:14px;padding-inline:16px 0;color:var(--mh-texte-3);transition:background .15s,box-shadow .15s}
.mh-saisie:focus-within{background:#fff;box-shadow:0 0 0 3px var(--mh-turquoise);color:var(--mh-turquoise-texte)}
.mh-champ .mh-saisie input{flex:1;min-width:0;background:transparent;border-radius:0;padding-inline:0 16px;outline:none}
.mh-saisie__prefixe{color:var(--mh-texte-2);font-weight:600}
.mh-champ .mh-code{font-size:32px;letter-spacing:.45em;padding-block:16px;max-width:300px;text-align:start}
.mh-champ .mh-code::placeholder{color:#CBD5E1}
.mh-numero{overflow-wrap:anywhere;font-weight:600;color:var(--mh-marine)}
.mh-champ input[dir="ltr"]{text-align:start}
[dir="rtl"] .mh-champ input[dir="ltr"]{text-align:right}
.mh-bouton .mh-icone{margin-inline-start:2px}

.mh-accueil-espace{display:flex;flex-direction:column;gap:10px}
.mh-confiance{background:var(--mh-menthe);border-radius:var(--mh-r-zone);padding:32px 36px;display:grid;gap:20px;max-width:760px}
.mh-confiance h2{margin:0 0 6px;font-size:24px}
.mh-confiance p{margin:0;color:#334155}
.mh-confiance__paliers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:14px;color:var(--mh-texte-2)}
.mh-confiance__paliers .fait{color:var(--mh-turquoise-texte);font-weight:600}
.mh-confiance__paliers .suivant{color:var(--mh-orange-texte);font-weight:600}
.mh-confiance__paliers small{display:block;font-weight:400}

@media (max-width:900px){
  .mh-acces{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .mh-acces__seuil{border-radius:0 0 var(--mh-r-zone) var(--mh-r-zone)}
  .mh-acces__seuil-in{position:static;min-height:0;padding:18px 20px 20px;gap:14px}
  .mh-acces__marque b{font-size:30px}
  .mh-acces__photos{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;min-height:0;max-height:none;align-items:end}
  .mh-arche{position:static;width:auto}
  .mh-arche img{aspect-ratio:1/1;border-radius:120px 120px 18px 18px}
  .mh-acces__photos .mh-arche--2{padding-top:28px}
  .mh-arche--2 img{border:0;aspect-ratio:1/1.15}
  .mh-arche figcaption{font-size:12px}
  .mh-acces__communaute{display:none}
  .mh-acces__scene{padding:10px 20px 48px}
  .mh-acces__contenu{padding-top:4px;margin-block:0;gap:22px}
  .mh-acces__titre{font-size:27px}
  .mh-acces__actions .mh-bouton{width:100%}
  .mh-situation{grid-template-columns:44px 1fr 24px;gap:12px;padding:14px}
  .mh-situation__icone{width:44px;height:44px}
  .mh-confiance{padding:24px 22px}
  .mh-confiance__paliers{font-size:12px}
}