/* ==========================================================
   ELECTRODIX - design du site (mêmes couleurs que l'application)
   ========================================================== */
:root {
    --navy-950: #0B1220;      /* fond sombre de l'app */
    --navy: #1F3A5F;          /* bleu principal */
    --blue: #2E5A94;          /* bleu moyen */
    --blue-soft: #7BA3D6;
    --sky: #84CAFF;           /* bleu clair */
    --gold: #C9A24B;          /* accent doré */
    --gold-dark: #B38F3E;
    --bg: #F2F4F7;            /* fond de page */
    --card: #FFFFFF;
    --hair: #EAECF0;
    --edge: #D0D5DD;
    --text: #101828;
    --text-2: #344054;
    --text-3: #475467;
    --muted: #667085;
    --green: #12B76A;
    --green-dark: #067647;
    --red: #B42318;
    --radius: 18px;
    --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
    --shadow-lg: 0 2px 4px rgba(16,24,40,.06), 0 18px 40px rgba(16,24,40,.12);
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: var(--text-2);
    background: var(--bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* ---------- Header ---------- */
.rm-header {
    background: rgba(11, 18, 32, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
    z-index: 100;
}
.rm-header .navbar { padding: .7rem 0; }
.rm-header .navbar-brand {
    display: flex; align-items: center; gap: .7rem; margin: 0;
}
.rm-brand-mark { width: 46px; height: 46px; display: block; }
.rm-brand-name { height: 39px; width: auto; display: block; }
.rm-header .nav-link { color: #B6C0D0; font-weight: 600; font-size: .92rem; padding: .5rem .9rem !important; }
.rm-header .nav-link:hover { color: #fff; }
.rm-header .navbar-toggler { border-color: rgba(255,255,255,.2); }

/* ---------- Boutons ---------- */
.btn-rm, .btn-rm-gold, .btn-rm-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.7rem; font-weight: 700; font-size: .98rem;
    border-radius: 14px; text-decoration: none; border: 0; cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn-rm { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(31,58,95,.25); }
.btn-rm:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
.btn-rm-gold { background: var(--gold); color: var(--navy-950); box-shadow: 0 6px 18px rgba(201,162,75,.35); }
.btn-rm-gold:hover { background: #D8B25C; color: var(--navy-950); transform: translateY(-1px); }
.btn-rm-outline { border: 1.5px solid rgba(255,255,255,.35); color: #fff; background: transparent; }
.btn-rm-outline:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.rm-header .btn-rm-gold { padding: .6rem 1.2rem; font-size: .9rem; border-radius: 12px; }

/* ---------- Hero ---------- */
.rm-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 5.5rem 0 5rem;
    background:
        radial-gradient(900px 400px at 85% -10%, rgba(132,202,255,.22), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(201,162,75,.12), transparent 60%),
        linear-gradient(135deg, var(--navy-950) 0%, var(--navy) 60%, var(--blue) 120%);
}
.rm-hero h1 { color: #fff; font-size: 2.8rem; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }
.rm-hero h1 em { font-style: normal; color: var(--sky); }
.rm-hero p.lead-rm { font-size: 1.1rem; color: #C9D6EA; max-width: 560px; line-height: 1.7; }
.rm-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.4rem;
    background: rgba(201,162,75,.14); border: 1px solid rgba(201,162,75,.4);
    color: #E8CF8C; font-size: .8rem; font-weight: 700; letter-spacing: .4px;
}
.rm-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }

.rm-steps {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px; padding: 1.6rem; backdrop-filter: blur(6px);
}
.rm-steps h6 { color: #98A2B3; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.1rem; }
.rm-step { display: flex; gap: 1rem; align-items: flex-start; padding: .8rem 0; }
.rm-step + .rm-step { border-top: 1px solid rgba(255,255,255,.1); }
.rm-step .n {
    flex: none; width: 36px; height: 36px; border-radius: 12px;
    display: grid; place-items: center; font-weight: 800;
    background: rgba(132,202,255,.16); color: var(--sky);
}
.rm-step b { color: #fff; display: block; font-size: .98rem; }
.rm-step span { color: #AAB7CC; font-size: .86rem; }

/* ---------- Sections ---------- */
.rm-section { padding: 4.5rem 0; }
.rm-section.gray { background: var(--bg); }
.rm-section.white { background: #fff; }
.rm-eyebrow { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: .6rem; }
.rm-title { color: var(--text); font-weight: 800; letter-spacing: -.3px; margin-bottom: .5rem; }
.rm-subtitle { color: var(--muted); margin-bottom: 2.6rem; }

/* ---------- Cartes ---------- */
.rm-card {
    background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
    padding: 1.6rem 1.2rem; text-align: center; height: 100%;
    box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #D6E4F5; }
.rm-card .icon {
    width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 16px;
    display: grid; place-items: center; color: var(--navy);
    background: linear-gradient(135deg, #EAF2FB, #D9E8F8);
}
.rm-card .icon svg { width: 28px; height: 28px; }
.rm-card h5 { color: var(--text); font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.rm-card p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; }
.rm-card.device h5 { margin: 0; font-size: .95rem; }
.rm-card.feature { text-align: center; padding: 1.7rem; }
.rm-card.feature .icon { margin: 0 auto 1rem; background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; }

/* ---------- Bandeau final ---------- */
.rm-cta {
    border-radius: 26px; padding: 3.2rem 1.5rem; color: #fff; text-align: center;
    background:
        radial-gradient(600px 260px at 80% 0%, rgba(132,202,255,.2), transparent 60%),
        linear-gradient(135deg, var(--navy-950), var(--navy));
    box-shadow: var(--shadow-lg);
}
.rm-cta h2 { color: #fff; font-weight: 800; }
.rm-cta p { color: #B6C6DD; margin-bottom: 1.6rem; }

/* ---------- Formulaire ---------- */
.rm-form {
    background: var(--card); border: 1px solid var(--hair);
    padding: 2.2rem; border-radius: 24px; box-shadow: var(--shadow-lg);
}
.rm-form .form-label { font-weight: 700; color: var(--text-2); font-size: .88rem; margin-bottom: .4rem; }
.rm-form .form-control, .rm-form .form-select {
    border: 1px solid var(--edge); border-radius: 12px; padding: .7rem .9rem;
    color: var(--text); background-color: #fff; font-size: .95rem;
}
.rm-form .form-control::placeholder { color: #98A2B3; }
.rm-form .form-control:focus, .rm-form .form-select:focus {
    border-color: var(--blue); box-shadow: 0 0 0 .25rem rgba(46,90,148,.16);
}
.rm-form .form-text { color: var(--muted); font-size: .8rem; }
.rm-form .text-danger, .rm-form .field-validation-error { color: var(--red) !important; font-size: .82rem; }
.rm-form .input-validation-error { border-color: #F04438; }
.rm-form .btn-rm-gold, .rm-form .btn-rm { min-width: 260px; }
.rm-form-note { color: var(--muted); font-size: .82rem; margin-top: .9rem; }

/* ---------- Confirmation ---------- */
.rm-ok {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.3rem;
    display: grid; place-items: center; color: var(--green-dark);
    background: #ECFDF3; border: 8px solid #D1FADF;
}
.rm-ok svg { width: 34px; height: 34px; }
.rm-ref {
    display: inline-block; font-size: 1.5rem; font-weight: 800; color: var(--navy);
    letter-spacing: 1.5px; padding: .7rem 1.4rem; border-radius: 14px;
    background: #EFF5FC; border: 1.5px dashed var(--blue-soft);
}

/* ---------- Pied de page ---------- */
.rm-footer { background: var(--navy-950); color: #98A2B3; padding: 3.2rem 0 1.5rem; }
.rm-footer h6 { color: #fff; font-weight: 700; margin-bottom: .9rem; }
.rm-footer p { font-size: .9rem; line-height: 1.7; }
.rm-footer a { color: var(--sky); text-decoration: none; }
.rm-footer hr { border-color: #26324A; opacity: 1; }

@media (max-width: 768px) {
    .rm-hero { padding: 3.2rem 0; }
    .rm-hero h1 { font-size: 2rem; }
    .rm-section { padding: 3rem 0; }
    .rm-form { padding: 1.4rem; }
    .rm-form .btn-rm-gold, .rm-form .btn-rm { width: 100%; }
}

/* ==========================================================
   Langues : sélecteur + arabe (RTL)
   ========================================================== */
.rm-lang {
    display: inline-flex; gap: 2px; padding: 3px;
    border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.rm-lang a {
    color: #B6C0D0; font-size: .8rem; font-weight: 700; line-height: 1;
    padding: .42rem .75rem; border-radius: 999px; text-decoration: none;
    transition: background .15s, color .15s;
}
.rm-lang a:hover { color: #fff; }
.rm-lang a.on { background: var(--gold); color: var(--navy-950); }
.rm-lang a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* police arabe (Open Sans ne contient pas l'arabe) */
html[lang="ar"] body,
html[lang="ar"] .btn-rm, html[lang="ar"] .btn-rm-gold, html[lang="ar"] .btn-rm-outline {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}
/* l'espacement négatif/positif des lettres casse la liaison des lettres arabes */
html[lang="ar"] *:not(.rm-ref) { letter-spacing: 0 !important; }
html[lang="ar"] .rm-hero h1 { line-height: 1.4; }
html[lang="ar"] .rm-hero p.lead-rm, html[lang="ar"] .rm-card p { line-height: 1.85; }

/* numéros, e-mail et référence restent de gauche à droite */
.rm-ref { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .rm-form input[type="tel"] { direction: ltr; text-align: right; }
[dir="rtl"] .rm-form input[type="tel"]::placeholder { text-align: right; }

/* ==========================================================
   Hero : illustration des appareils réparés
   ========================================================== */
.hv { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1.1rem 4%; max-width: 600px; margin-inline: auto; padding-top: .5rem; }
.hv::before {
    content: ""; position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(132,202,255,.22), transparent); pointer-events: none;
}
.hv-item { position: relative; text-align: center; }
.hv-item svg { display: block; width: 100%; height: auto; overflow: visible; }
.hv-oven   { width: 28%; order: 1; z-index: 1; }
.hv-washer { width: 36%; order: 2; z-index: 2; }
.hv-dish   { width: 28%; order: 3; z-index: 1; }
.hv-micro  { width: 38%; order: 4; z-index: 1; }
.hv-fryer  { width: 26%; order: 5; z-index: 1; }
.hv-fan    { transform-origin: 180px 352px; animation: hv-turn 1s linear infinite; }
.hv-mglow  { opacity: .75; animation: hv-glow 2.4s ease-in-out infinite; }
.hv-cap {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem; white-space: nowrap;
    font-size: .8rem; font-weight: 700; color: #DCE7F7;
}
.hv-cap b { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.hv-badge {
    position: absolute; top: -.2rem; inset-inline-end: 4%; width: 74px; height: 74px; z-index: 3;
    filter: drop-shadow(0 0 16px rgba(240,215,145,.4));
}
.hv-gear { transform-origin: 144px 144px; animation: hv-turn 18s linear infinite; }

.hv-ln { fill: none; stroke: #DCE7F7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hv-ln.hv-thin { stroke-width: 2.5; }
.hv-ln.hv-handle { stroke-width: 8; }
.hv-dot { fill: #DCE7F7; }
.hv-shine { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: 5; stroke-linecap: round; }
.hv-wave.a { animation: hv-wave 1.8s linear infinite; }
.hv-wave.b { animation: hv-wave 2.6s linear infinite reverse; }
.hv-clothes { transform-origin: 180px 262px; animation: hv-turn 2.6s linear infinite; }
.hv-bub { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 1.6; opacity: 0; animation: hv-bub 2s ease-in infinite; }
.hv-arm { transform-origin: 180px 230px; animation: hv-arm .6s linear infinite; }
.hv-jet { fill: none; stroke: #4FC3F7; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 7; animation: hv-flow .5s linear infinite; }
.hv-spark { fill: #F3DFA3; animation: hv-spark 2s ease-in-out infinite; }
.hv-knob { fill: none; stroke: #F0D791; stroke-width: 3; stroke-linecap: round; }
.hv-element { fill: none; stroke: #FF7043; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hv-glow { fill: none; stroke: #FF9A3C; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; animation: hv-glow 2.4s ease-in-out infinite; }
.hv-score { fill: none; stroke: #7A5A1E; stroke-width: 3; stroke-linecap: round; }
.hv-steam { fill: none; stroke: #fff; stroke-opacity: .4; stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: hv-steam 2.2s ease-out infinite; }

@keyframes hv-turn  { to { transform: rotate(360deg); } }
@keyframes hv-wave  { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes hv-bub   { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-85px); } }
@keyframes hv-arm   { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes hv-flow  { to { stroke-dashoffset: -22; } }
@keyframes hv-spark { 0%, 100% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@keyframes hv-glow  { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes hv-steam { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-26px); } }
@media (prefers-reduced-motion: reduce) { .hv * { animation: none !important; } .hv-bub, .hv-steam { opacity: .5; } }

/* ---------- Comment ça marche (bandeau sous le hero) ---------- */
.rm-how { padding: 3rem 0; background: #fff; border-bottom: 1px solid var(--hair); }
.rm-how h6 { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; text-align: center; margin-bottom: 1.6rem; }
.rm-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rm-how-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; background: var(--bg); border-radius: 16px; border: 1px solid var(--hair); }
.rm-how-step .n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); }
.rm-how-step b { display: block; color: var(--text); font-size: 1rem; }
.rm-how-step span { color: var(--muted); font-size: .88rem; line-height: 1.55; }
@media (max-width: 768px) {
    .rm-how-steps { grid-template-columns: 1fr; }
    .hv-cap { font-size: .68rem; }
    .hv-badge { width: 56px; height: 56px; }
}


/* ---------- Suivi de la demande ---------- */
.rm-track { background: #fff; border-bottom: 1px solid var(--hair); padding: 1.6rem 0; }
.rm-track-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.rm-track-t b { display: block; color: var(--text); font-size: 1.05rem; }
.rm-track-t span { color: var(--muted); font-size: .88rem; }
.rm-track-in { display: flex; gap: .6rem; flex: 1 1 320px; max-width: 460px; }
.rm-track-in .form-control { border-radius: 12px; padding: .7rem 1rem; border: 1.5px solid var(--edge); letter-spacing: .5px; }
.rm-track-in .btn-rm { white-space: nowrap; border: 0; }

.rm-suivi-box { max-width: 640px; margin: 0 auto; }
.rm-suivi-search { display: flex; gap: .6rem; }
.rm-suivi-search .form-control { border-radius: 12px; padding: .8rem 1rem; border: 1.5px solid var(--edge); letter-spacing: .5px; }
.rm-suivi-search .btn-rm { border: 0; white-space: nowrap; }
.rm-suivi-miss { margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 12px; background: #FEF3F2; border: 1px solid #FECDCA; color: var(--red); font-size: .92rem; }

.rm-suivi-now { text-align: center; padding: 1.6rem 1.4rem; border-radius: 16px; background: #EFF5FC; border: 1px solid #D6E4F5; margin-bottom: 1.8rem; }
.rm-suivi-now small { display: block; color: var(--muted); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; font-size: .72rem; }
.rm-suivi-now .ref { display: inline-block; direction: ltr; unicode-bidi: isolate; font-weight: 800; color: var(--navy); letter-spacing: 1.2px; margin: .2rem 0 .6rem; }
.rm-suivi-now h3 { font-size: 1.35rem; font-weight: 800; margin: .2rem 0 .4rem; }
.rm-suivi-now p { margin: 0; color: var(--text-3); font-size: .93rem; }
.rm-suivi-now.st-Terminé { background: #ECFDF3; border-color: #ABEFC6; }
.rm-suivi-now.st-Annulé { background: #FEF3F2; border-color: #FECDCA; }

.rm-tl-h { font-size: .78rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem; }
.rm-tl { list-style: none; margin: 0; padding: 0; text-align: start; }
.rm-tl-h { text-align: start; }
.rm-tl li { position: relative; padding-inline-start: 2.3rem; padding-bottom: 1.5rem; }
.rm-tl li::before { content: ""; position: absolute; inset-inline-start: 11px; top: 26px; bottom: -2px; width: 2px; background: var(--edge); }
.rm-tl li:last-child { padding-bottom: 0; }
.rm-tl li:last-child::before { display: none; }
.rm-tl .dot { position: absolute; inset-inline-start: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--edge); display: grid; place-items: center; }
.rm-tl .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.rm-tl li.now .dot { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,75,.2); }
.rm-tl li.now .dot::after { background: var(--gold); }
.rm-tl li.st-Terminé.now .dot { border-color: var(--green); box-shadow: 0 0 0 4px rgba(18,183,106,.2); }
.rm-tl li.st-Terminé.now .dot::after { background: var(--green); }
.rm-tl li.st-Annulé.now .dot { border-color: var(--red); box-shadow: 0 0 0 4px rgba(180,35,24,.15); }
.rm-tl li.st-Annulé.now .dot::after { background: var(--red); }
.rm-tl b { display: block; color: var(--text); font-size: 1rem; line-height: 1.3; }
.rm-tl time { display: block; direction: ltr; unicode-bidi: isolate; color: var(--muted); font-size: .84rem; margin-top: .15rem; }
[dir="rtl"] .rm-tl time { text-align: right; }
.rm-tl .rdv { display: inline-block; margin-top: .4rem; padding: .25rem .7rem; border-radius: 999px; background: #FBF4E3; border: 1px solid #EBD9A8; color: #7A5A12; font-size: .82rem; font-weight: 600; }
.rm-tl .rdv bdi { direction: ltr; }

@media (max-width: 575px) {
    .rm-track-in, .rm-suivi-search { flex-direction: column; }
}

/* ---------- Boutons copier / enregistrer l'image (page de confirmation) ---------- */
.rm-ref-box { margin-bottom: .2rem; }
.rm-ref-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .9rem; }
.rm-ref-btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem;
    border: 1.5px solid var(--edge); border-radius: 12px; background: #fff; color: var(--navy);
    font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .15s ease;
}
.rm-ref-btn:hover { border-color: var(--blue); background: #EFF5FC; }
.rm-ref-btn.ok { border-color: var(--green); background: #ECFDF3; color: var(--green-dark); }

/* ---------- Motif d'annulation (suivi) ---------- */
.rm-tl .reason { display: block; margin-top: .4rem; padding: .5rem .8rem; border-radius: 10px; background: #FEF3F2; border: 1px solid #FECDCA; color: var(--red); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.rm-suivi-now .reason { margin: .8rem auto 0; max-width: 460px; padding: .5rem .8rem; border-radius: 10px; background: #fff; border: 1px solid #FECDCA; color: var(--red); font-size: .9rem; overflow-wrap: anywhere; }


/* ---- pied de page : liste de politiques + lien dans les cartes ---- */
.rm-foot-links { list-style: none; padding: 0; margin: 0; font-size: .9rem; line-height: 2; }
.rm-card-link { display: inline-block; margin-top: .8rem; font-weight: 700; font-size: .88rem; color: var(--blue); text-decoration: none; }
.rm-card-link:hover { color: var(--gold-dark); text-decoration: underline; }

/* ---- suivi : demande d'origine (ancienne) + suivi de la réclamation ---- */
.rm-suivi-sec { margin-top: 1.6rem; }
.rm-suivi-sec.old { padding-bottom: 1.4rem; border-bottom: 2px dashed var(--edge); opacity: .88; }
.rm-suivi-sec.rec { padding: 1.2rem 1rem 1.4rem; border: 1.5px solid #EBD9A8; border-radius: 18px; background: #FFFCF4; }
.rm-suivi-tag { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; margin-bottom: .2rem; }
.rm-suivi-tag.old { background: #EAECF0; color: #475467; }
.rm-suivi-tag.rec { background: #FBF4E3; color: #7A5A12; border: 1px solid #EBD9A8; }
.rm-suivi-now.rec { background: #FBF4E3; border-color: #EBD9A8; }
.rm-suivi-now.rec.st-Terminé { background: #ECFDF3; border-color: #ABEFC6; }
.rm-suivi-now.rec.st-Annulé { background: #FEF3F2; border-color: #FECDCA; }
.rm-tl.rec li::before { background: #EBD9A8; }


/* ---- logo plus grand sur mobile ---- */
@media (max-width: 575px) {
    .rm-brand-mark { width: 40px; height: 40px; }
    .rm-brand-name { height: 32px; }
}

/* ---- accueil : actions rapides (remplace le bandeau de suivi) ---- */
.rm-quick { background: #fff; border-bottom: 1px solid var(--hair); padding: 1.8rem 0; }
.rm-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rm-quick-card {
    display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem;
    background: #fff; border: 1.5px solid var(--edge); border-radius: 16px;
    text-decoration: none; color: var(--text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rm-quick-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(16,24,40,.08); color: var(--text); }
.rm-quick-card .ic { flex: 0 0 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #EFF5FC; color: var(--navy); }
.rm-quick-card .ic svg { width: 24px; height: 24px; }
.rm-quick-card .tx { flex: 1; min-width: 0; }
.rm-quick-card .tx b { display: block; font-size: 1.02rem; }
.rm-quick-card .tx small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.rm-quick-card .go { width: 20px; height: 20px; color: var(--gold-dark); flex: 0 0 20px; }
[dir="rtl"] .rm-quick-card .go { transform: scaleX(-1); }
.rm-quick-card.gold { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.rm-quick-card.gold .tx b { color: #fff; }
.rm-quick-card.gold .tx small { color: #B6C0D0; }
.rm-quick-card.gold .ic { background: var(--gold); color: var(--navy-950); }
.rm-quick-card.gold:hover { color: #fff; border-color: var(--gold); }
@media (max-width: 860px) { .rm-quick-grid { grid-template-columns: 1fr; } }

/* ---- pied de page professionnel ---- */
.rm-footer { padding: 0; }
.rm-footer-top { padding: 3.4rem 0 2.4rem; }
.rm-foot-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.rm-foot-brand img:first-child { width: 44px; height: 44px; }
.rm-foot-brand img:last-child { height: 36px; width: auto; }
.rm-foot-desc { max-width: 340px; margin-bottom: 1.2rem; }
.rm-foot-cta { display: inline-block; padding: .6rem 1.2rem; font-size: .9rem; border-radius: 12px; color: var(--navy-950) !important; }
.rm-footer h6 { font-size: .8rem; letter-spacing: 1.4px; text-transform: uppercase; position: relative; padding-bottom: .7rem; margin-bottom: 1.1rem; }
.rm-footer h6::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 28px; height: 2px; background: var(--gold); border-radius: 2px; }
html[lang="ar"] .rm-footer h6 { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.rm-foot-links a { color: #B6C0D0; transition: color .15s, padding .15s; }
.rm-foot-links a:hover { color: var(--gold); }
.rm-foot-contact { list-style: none; padding: 0; margin: 0; }
.rm-foot-contact li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; font-size: .9rem; line-height: 1.6; }
.rm-foot-contact .ic { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(201,162,75,.12); color: var(--gold); }
.rm-foot-contact .ic svg { width: 17px; height: 17px; }
.rm-foot-contact a { color: #B6C0D0; }
.rm-foot-contact a:hover { color: var(--gold); }
.rm-foot-contact b { color: #fff; font-weight: 600; }
.rm-footer-bottom { border-top: 1px solid #26324A; background: rgba(0,0,0,.18); padding: 1rem 0; font-size: .84rem; }
.rm-foot-bottom-links { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.rm-foot-bottom-links a { color: #98A2B3; }
.rm-foot-bottom-links a:hover { color: var(--gold); }

/* ---- horaires (carte premium) ---- */
.rm-hours { margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(160deg, rgba(201,162,75,.10), rgba(255,255,255,.03)); border: 1px solid rgba(201,162,75,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.rm-hours-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding-bottom: .75rem; margin-bottom: .55rem; border-bottom: 1px dashed rgba(255,255,255,.14); }
.rm-hours-title { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: .95rem; }
.rm-hours-title svg { width: 18px; height: 18px; color: var(--gold); }
.rm-hours-now { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; }
.rm-hours-now i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rm-hours-now.on { color: #32D583; background: rgba(18,183,106,.14); }
.rm-hours-now.on i { box-shadow: 0 0 0 0 rgba(50,213,131,.6); animation: rmPulse 2s infinite; }
.rm-hours-now.off { color: #F97066; background: rgba(240,68,56,.14); }
.rm-hours-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .38rem 0; font-size: .9rem; color: #B6C0D0; }
.rm-hours-row b { color: #fff; font-weight: 700; white-space: nowrap; }
.rm-hours-row.off b { color: #F97066; font-weight: 600; }
@keyframes rmPulse { 70% { box-shadow: 0 0 0 7px rgba(50,213,131,0); } 100% { box-shadow: 0 0 0 0 rgba(50,213,131,0); } }
@media (prefers-reduced-motion: reduce) { .rm-hours-now.on i { animation: none; } }

/* ---- boutons réseaux sociaux ---- */
.rm-foot-social-wrap { border-top: 1px solid #26324A; padding: 1.6rem 0 1.5rem; text-align: center; }
.rm-foot-social-title { color: #98A2B3; font-size: .82rem; letter-spacing: .5px; margin: 0 0 1rem; }
.rm-foot-social { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.rm-footer a.rm-soc { --b: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-width: 150px; padding: .72rem 1.3rem; border-radius: 14px; color: #E4E9F2; font-weight: 600; font-size: .92rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: transform .18s, background .18s, border-color .18s, box-shadow .18s, color .18s; }
.rm-soc svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--b); transition: color .18s; }
.rm-footer a.rm-soc.wa { --b: #25D366; } .rm-footer a.rm-soc.fb { --b: #4599FF; } .rm-footer a.rm-soc.ig { --b: #FF5C8A; } .rm-footer a.rm-soc.mp { --b: #EA4335; }
/* survol seulement avec une vraie souris (sur téléphone le « hover » reste collé après le toucher) */
@media (hover: hover) and (pointer: fine) {
    .rm-footer a.rm-soc:hover { transform: translateY(-3px); color: #fff; background: var(--b); border-color: var(--b); box-shadow: 0 10px 24px -8px var(--b); }
    .rm-footer a.rm-soc:hover svg { color: #fff; }
    .rm-footer a.rm-soc.ig:hover { background: linear-gradient(45deg, #F9A03F, #E4405F 55%, #8F3FD0); border-color: transparent; }
}
/* clavier */
.rm-footer a.rm-soc:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; }
/* toucher : petit effet d'appui qui disparaît tout de suite au relâchement */
.rm-footer a.rm-soc { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rm-footer a.rm-soc:active { transform: scale(.96); background: rgba(255,255,255,.10); border-color: var(--b); color: #fff; }
.rm-footer a.rm-soc:active svg { color: var(--b); }
.rm-footer-bottom { border-top: 1px solid #26324A; }

/* ---- pied de page sur téléphone : tout centré proprement ---- */
@media (max-width: 767.98px) {
    .rm-footer-top { padding: 2.6rem 0 2rem; text-align: center; }
    .rm-foot-brand { display: flex; justify-content: center; }
    .rm-foot-desc { margin-left: auto; margin-right: auto; }
    .rm-foot-cta { min-width: 220px; text-align: center; }
    .rm-footer h6::after { inset-inline-start: auto; left: 50%; right: auto; transform: translateX(-50%); }
    .rm-foot-links { line-height: 2.2; }
    .rm-foot-contact li { flex-direction: column; align-items: center; gap: .45rem; text-align: center; margin-bottom: 1.1rem; }
    .rm-hours { max-width: 340px; margin-left: auto; margin-right: auto; }
    .rm-hours-head { justify-content: center; }
    .rm-foot-social { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 460px; margin: 0 auto; }
    .rm-footer a.rm-soc { flex-direction: column; gap: .45rem; min-width: 0; padding: .8rem .2rem; font-size: .72rem; border-radius: 16px; }
    .rm-soc svg { width: 24px; height: 24px; flex-basis: 24px; }
    .rm-footer-bottom .container { text-align: center; }
    .rm-foot-bottom-links { justify-content: center; }
}

/* ---- horaires : bande centrée (ordinateur + téléphone) ---- */
.rm-hours-wrap { border-top: 1px solid #26324A; padding: 2rem 0; }
.rm-hours { margin: 0 auto; width: 100%; max-width: 720px; padding: 1.5rem 1.8rem; border-radius: 20px; text-align: center; }
.rm-hours-head { justify-content: center; gap: .9rem; padding-bottom: 1rem; margin-bottom: 1rem; }
.rm-hours-title { font-size: 1.05rem; }
.rm-hours-title svg { width: 22px; height: 22px; }
.rm-hours-now { font-size: .8rem; padding: .3rem .85rem; }
.rm-hours-body { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.rm-hours-body .rm-hours-row { flex-direction: column; justify-content: center; gap: .3rem; padding: .4rem 1rem; }
.rm-hours-body .rm-hours-row + .rm-hours-row { border-inline-start: 1px solid rgba(255,255,255,.14); }
.rm-hours-body .rm-hours-row span { font-size: .85rem; color: #98A2B3; letter-spacing: .3px; }
.rm-hours-body .rm-hours-row b { font-size: 1.35rem; letter-spacing: .3px; }
.rm-hours-body .rm-hours-row:not(.off) b { color: var(--gold); }
@media (max-width: 767.98px) {
    .rm-hours-wrap { padding: 1.6rem 0; }
    .rm-hours { max-width: 340px; padding: 1.1rem 1.1rem; }
    .rm-hours-body { grid-template-columns: 1fr; }
    .rm-hours-body .rm-hours-row { flex-direction: row; justify-content: space-between; gap: 1rem; padding: .38rem 0; }
    .rm-hours-body .rm-hours-row + .rm-hours-row { border-inline-start: 0; }
    .rm-hours-body .rm-hours-row span { font-size: .9rem; color: #B6C0D0; letter-spacing: 0; }
    .rm-hours-body .rm-hours-row b { font-size: .95rem; }
    .rm-hours-title { font-size: .95rem; }
    .rm-hours-title svg { width: 18px; height: 18px; }
}

/* ---- FAQ (accordéon) ---- */
.rm-faq { margin-top: .6rem; }
.rm-faq details { border-bottom: 1px solid var(--hair); }
.rm-faq details:last-child { border-bottom: 0; }
.rm-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700; color: var(--text); }
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after { content: "+"; flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--gold-dark); background: rgba(201,162,75,.14); transition: transform .2s, background .2s, color .2s; }
.rm-faq details[open] summary::after { content: "\2212"; background: var(--gold); color: var(--navy-950); }
.rm-faq summary:hover { color: var(--navy); }
.rm-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.rm-faq details p { margin: 0 0 1.1rem; color: var(--text-3); line-height: 1.8; }

/* ==========================================================
   Sélecteur de langue (liste déroulante) + détails de l'en-tête
   ========================================================== */
@media (min-width: 768px) {
    .rm-header .nav-link { position: relative; }
    .rm-header .nav-link::after { content: ""; position: absolute; bottom: .15rem; inset-inline: .9rem; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .25s ease; }
    .rm-header .nav-link:hover::after, .rm-header .nav-link:focus-visible::after { transform: scaleX(1); }
}

/* drapeaux */
.rm-flag { display: inline-block; width: 26px; height: 18px; flex: 0 0 26px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.35); }
.rm-flag svg { display: block; width: 100%; height: 100%; }

/* bouton de la liste déroulante */
.rm-langbtn { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .8rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .6px; line-height: 1; cursor: pointer; transition: background .18s, border-color .18s; }
.rm-langbtn:hover, .rm-langbtn[aria-expanded="true"] { background: rgba(201,162,75,.14); border-color: rgba(201,162,75,.55); }
.rm-langbtn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.rm-chev { width: 14px; height: 14px; color: var(--gold); transition: transform .2s; }
.rm-langbtn[aria-expanded="true"] .rm-chev { transform: rotate(180deg); }

/* menu */
.rm-langmenu { min-width: 200px; padding: .4rem; margin-top: .6rem !important; border-radius: 16px; background: #0F1A2E; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 44px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(201,162,75,.12); }
.rm-langitem { display: flex !important; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 11px; color: #D0D8E6; font-weight: 600; font-size: .92rem; transition: background .15s, color .15s; }
.rm-langitem .nm { flex: 1; }
.rm-langitem .ck { width: 17px; height: 17px; color: var(--gold); opacity: 0; }
.rm-langitem:hover, .rm-langitem:focus { background: rgba(255,255,255,.07); color: #fff; }
.rm-langitem.on { background: rgba(201,162,75,.15); color: var(--gold); }
.rm-langitem.on .ck { opacity: 1; }
html[lang="ar"] .rm-langitem .nm, html[lang="ar"] .rm-langbtn { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; }

@media (max-width: 767.98px) {
    .rm-langdd { display: flex; flex-direction: column; align-items: stretch; margin: .4rem 0; }
    .rm-langbtn { justify-content: center; padding: .65rem 1rem; }
    .rm-langmenu { position: static !important; transform: none !important; width: 100%; margin-top: .5rem !important; }
}

/* ==========================================================
   Expérience de navigation premium
   ========================================================== */

/* -- apparition douce au défilement (ajoutée par site.js) -- */
.rv { transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1) !important; }
html.rm-js .rv:not(.in) { opacity: 0; transform: translateY(28px) scale(.985); }

/* -- hero : décor + entrée en scène -- */
.rm-hero > .container { position: relative; z-index: 1; }
.rm-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.3px); background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 35%, #000 0, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 72% 35%, #000 0, transparent 75%); }
.rm-hero::after { content: ""; position: absolute; width: 520px; height: 520px; inset-inline-end: -140px; top: -160px; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,75,.20), transparent 65%); animation: rmFloat 16s ease-in-out infinite alternate; }
@keyframes rmFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px,50px) scale(1.15); } }
@keyframes rmUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rmArt { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.rm-hero .rm-badge { animation: rmUp .7s .05s both; }
.rm-hero h1 { animation: rmUp .8s .15s both; }
.rm-hero p.lead-rm { animation: rmUp .8s .28s both; }
.rm-hero .d-flex.flex-wrap { animation: rmUp .8s .4s both; }
.rm-hero .row > .col-lg-6:last-child { animation: rmArt 1s .3s both; }
/* pendant l'intro, le hero attend : l'animation démarre à la fin de l'intro */
html.rm-intro-on .rm-hero .rm-badge, html.rm-intro-on .rm-hero h1, html.rm-intro-on .rm-hero p.lead-rm,
html.rm-intro-on .rm-hero .d-flex.flex-wrap, html.rm-intro-on .rm-hero .row > .col-lg-6:last-child { animation: none; opacity: 0; }

/* -- titres de section : filet doré -- */
.text-center > .rm-title::after { content: ""; display: block; width: 48px; height: 3px; margin: .75rem auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #E8CF8C); }

/* -- cartes : filet doré + icônes vivantes au survol -- */
.rm-card { position: relative; overflow: hidden; }
.rm-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform .4s ease; }
.rm-card:hover::before { transform: scaleX(1); }
.rm-card .icon { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.rm-card.device:hover .icon { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; transform: translateY(-3px) rotate(-5deg) scale(1.08); box-shadow: 0 12px 24px -8px rgba(31,58,95,.55); }
.rm-card.feature:hover .icon { transform: translateY(-3px) scale(1.08); box-shadow: 0 12px 26px -8px rgba(31,58,95,.6); }

/* -- étapes "comment ça marche" -- */
.rm-how-step .n { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s; }
.rm-how-step:hover .n { transform: scale(1.12) rotate(-4deg); background: var(--gold); color: var(--navy-950); }

/* -- actions rapides : la flèche glisse -- */
.rm-quick-card .go { transition: transform .25s ease; }
.rm-quick-card:hover .go { transform: translateX(5px); }
[dir="rtl"] .rm-quick-card:hover .go { transform: scaleX(-1) translateX(5px); }

/* -- boutons dorés : reflet lumineux au survol -- */
.btn-rm-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-rm-gold::after { content: ""; position: absolute; top: 0; bottom: 0; width: 55%; left: -80%; z-index: -1; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: left .7s ease; }
.btn-rm-gold:hover::after { left: 130%; }
.btn-rm-gold:hover { box-shadow: 0 12px 28px rgba(201,162,75,.5); }

/* -- bandeau final : halo doré discret -- */
.rm-cta { position: relative; overflow: hidden; }
.rm-cta::before { content: ""; position: absolute; width: 380px; height: 380px; inset-inline-start: -120px; bottom: -200px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(201,162,75,.22), transparent 65%); }
.rm-cta > * { position: relative; }

/* -- bouton "haut de page" -- */
.rm-top { position: fixed; inset-inline-end: 1.1rem; bottom: 1.1rem; z-index: 90; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(201,162,75,.55); color: var(--gold); background: rgba(11,18,32,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 12px 28px -10px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .25s, transform .25s, visibility .25s, background .2s, color .2s; }
.rm-top svg { width: 20px; height: 20px; }
.rm-top.show { opacity: 1; visibility: visible; transform: none; }
.rm-top:hover { background: var(--gold); color: var(--navy-950); }
.rm-top:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rm-hero::after { animation: none; }
    .rm-hero .rm-badge, .rm-hero h1, .rm-hero p.lead-rm, .rm-hero .d-flex.flex-wrap, .rm-hero .row > .col-lg-6:last-child { animation: none; }
}