/* ================================================================ BARAHEEN v7.5 — Correctifs de mise en page 1. RTL 2. Livre confiné à sa colonne 3. الرد على الشبهات 4. Cartes réseaux sociaux 5. Menu du compte ================================================================ */ /* --------------------------------------------------------------- 1. RTL — filet de sécurité Le correctif principal est dir="rtl" posé sur par inc/v7.php. Ces règles couvrent le cas où un plugin réécrirait l'attribut. --------------------------------------------------------------- */ html[dir="rtl"] body, body.baraheen-rtl { direction: rtl; text-align: start; } /* Le contenu latin (URL, code, chiffres isolés) reste lisible */ body.baraheen-rtl [dir="ltr"], body.baraheen-rtl code, body.baraheen-rtl .ltr { direction: ltr; unicode-bidi: isolate; } /* La barre d'admin WordPress ne doit pas hériter du RTL forcé */ body.baraheen-rtl #wpadminbar { direction: ltr; } /* Colonne latérale : première piste de la grille = à DROITE en RTL. RÉGRESSION CORRIGÉE EN 7.9 — cette règle n'était pas bornée. « body.baraheen-rtl .mid » a une spécificité (0,2,1) supérieure au « .mid » (0,1,0) de la media query mobile de style.css ; or une media query n'ajoute AUCUNE spécificité. La grille à 300 px ne se repliait donc jamais sur téléphone → débordement horizontal et vue tronquée. Elle est désormais explicitement bornée au-dessus de 1080 px. */ @media (min-width: 1081px) { body.baraheen-rtl .mid { grid-template-columns: 300px minmax(0, 1fr); } } /* --------------------------------------------------------------- 2. Le livre ne déborde plus sur la colonne latérale Il vit désormais DANS la colonne des articles (front-page.php). --------------------------------------------------------------- */ .mid > div { min-width: 0; } /* empêche tout débordement de grille */ .book-incol { margin-block: 30px 6px; } .book-incol .in { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 30px 30px; border-radius: 20px; } .book-incol .in::before { font-size: 150px; top: -26px; } .book-incol .cover { transform: scale(.86); transform-origin: center; } .book-incol h2 { font-size: 26px; } .book-incol .desc { font-size: 14px; max-width: none; } .book-incol .cta { gap: 10px; } @media (max-width: 1180px) { .book-incol .in { grid-template-columns: 1fr; text-align: center; padding: 26px 20px; } .book-incol .cover-wrap { margin-inline: auto; } .book-incol .desc, .book-incol .cta { justify-content: center; margin-inline: auto; } } /* --------------------------------------------------------------- 3. الرد على الشبهات --------------------------------------------------------------- */ .shubuhat-block { margin-block: 34px 8px; } .shub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 700px) { .shub-grid { grid-template-columns: 1fr; } } .shub-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 20px 18px; box-shadow: var(--card-shadow); transition: border-color .18s, transform .18s; /* liseré doré côté départ de lecture (droite en RTL) */ border-inline-start: 3px solid color-mix(in srgb, var(--live) 55%, transparent); } .shub-card:hover { border-color: var(--gold); transform: translateY(-3px); } .shub-tag { display: inline-block; font-size: 11.5px; font-weight: 900; color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); border-radius: 999px; padding: 3px 12px; margin-block-end: 10px; } .shub-card h3 { font-size: 16px; font-weight: 900; line-height: 1.65; margin: 0 0 8px; } .shub-card h3 a { color: var(--strong); text-decoration: none; } .shub-card h3 a:hover { color: var(--gold); } .shub-card p { font-size: 13px; color: var(--muted); line-height: 1.85; margin: 0 0 12px; } .shub-more { font-size: 13px; font-weight: 800; color: var(--gold); text-decoration: none; } .shub-more:hover { text-decoration: underline; } /* Carte de rappel dans la colonne latérale */ .shub-side { padding: 20px; } .shub-side h3 { font-weight: 900; font-size: 17px; color: var(--strong); margin-block-end: 8px; } .shub-side p { font-size: 13px; color: var(--muted); line-height: 1.85; margin-block-end: 14px; } .shub-side .btn { width: 100%; justify-content: center; } /* Compteur dans le menu principal */ .nav-shubuhat .nc { font-style: normal; font-size: 10.5px; font-weight: 900; background: var(--live); color: #fff; border-radius: 999px; padding: 1px 7px; margin-inline-start: 5px; vertical-align: middle; } /* Badge « نوع المسألة » sur les fiches question */ .v6-pill.qt { border-color: color-mix(in srgb, var(--live) 45%, transparent); color: var(--live); } /* --------------------------------------------------------------- 4. وسائط التواصل الاجتماعي --------------------------------------------------------------- */ .social-card { padding: 20px; } .social-card h3 { font-weight: 900; font-size: 17px; color: var(--strong); margin-block-end: 4px; } .social-card .sc-sub { font-size: 12.5px; color: var(--muted); margin-block-end: 14px; line-height: 1.8; } .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .sc-item { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 12.5px; transition: .18s; } .sc-item b { font-weight: 800; } .sc-item:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .sc-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; } .sc-ic svg { width: 17px; height: 17px; } /* Couleurs de marque au survol */ .sc-item.youtube:hover { border-color: #FF0000; color: #FF0000; } .sc-item.tiktok:hover { border-color: #25F4EE; color: #25F4EE; } .sc-item.facebook:hover { border-color: #1877F2; color: #1877F2; } .sc-item.twitter:hover { border-color: var(--strong); color: var(--strong); } .sc-item.instagram:hover { border-color: #E1306C; color: #E1306C; } .sc-item.telegram:hover { border-color: #229ED9; color: #229ED9; } .sc-item.whatsapp:hover { border-color: #25D366; color: #25D366; } /* Conteneur du rendu WP Social Ninja — on neutralise ses marges */ .sn-embed .sn-in { margin: 0; max-width: 100%; overflow: hidden; } .sn-embed .sn-in * { max-width: 100%; } /* --------------------------------------------------------------- 5. Menu du compte — état du profil --------------------------------------------------------------- */ .acct-flag { font-style: normal; font-size: 10px; font-weight: 800; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; } /* Profil مساهم : idem — bornée, sinon la fiche ne se replie pas non plus. */ @media (min-width: 1081px) { body.baraheen-rtl .profile { grid-template-columns: 300px minmax(0, 1fr); } } .profile > div { min-width: 0; } /* Bandeau « fiche en attente » visible par son propriétaire */ .profile-pending { background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px dashed var(--gold); border-radius: 14px; padding: 14px 18px; color: var(--strong); font-size: 13.5px; font-weight: 700; margin-block-end: 18px; } /* ================================================================ v7.6 — ESPACE MEMBRE /my-profile/ ================================================================ */ .acct-page { max-width: 880px; padding-block: 34px 60px; } /* ---- En-tête ---- */ .acct-head { display: flex; align-items: center; gap: 18px; margin-block-end: 24px; } .acct-av { width: 78px; height: 78px; border-radius: 50%; flex: none; overflow: hidden; background: radial-gradient(circle at 32% 28%, #2C3C6B, #13213A); border: 2px solid var(--gold); display: grid; place-items: center; color: var(--gold); font-weight: 900; font-size: 30px; } .acct-av img { width: 100%; height: 100%; object-fit: cover; } .acct-head h1 { font-size: 27px; font-weight: 900; color: var(--strong); margin: 2px 0 4px; } .acct-head p { font-size: 13.5px; color: var(--muted); margin: 0; } .acct-head a { color: var(--gold); font-weight: 800; text-decoration: none; } .acct-head .pend { color: var(--gold); } /* ---- Messages ---- */ .acct-msg { border-radius: 12px; padding: 13px 18px; font-size: 13.5px; font-weight: 700; margin-block-end: 12px; border: 1px solid; } .acct-msg.ok { color: #1a7f52; border-color: #1a7f5255; background: #1a7f5214; } .acct-msg.error { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); background: color-mix(in srgb, var(--live) 10%, transparent); } .acct-msg.info { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); } /* ---- Onglets ---- */ .acct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 20px; } .acct-tabs a { padding: 8px 18px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--muted); text-decoration: none; transition: .18s; } .acct-tabs a:hover { border-color: var(--gold); color: var(--gold); } .acct-tabs a.on { background: var(--gold); border-color: var(--gold); color: #0B1220; } /* ---- Cartes de formulaire ---- */ .acct-card { padding: 26px 28px; margin-block-end: 20px; scroll-margin-top: 90px; } .acct-card h2 { font-size: 19px; font-weight: 900; color: var(--strong); margin: 0 0 6px; } .acct-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.8; } .acct-card label { display: block; margin-block-end: 15px; } .acct-card label > span { display: block; font-size: 12.5px; font-weight: 800; color: var(--strong); margin-block-end: 6px; } .acct-card input[type="text"], .acct-card input[type="email"], .acct-card input[type="url"], .acct-card input[type="password"], .acct-card textarea { width: 100%; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--strong); background: var(--bg); border: 1px solid var(--border); border-radius: 11px; transition: border-color .18s, box-shadow .18s; } .acct-card input:focus, .acct-card textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); } .acct-card textarea { line-height: 1.9; resize: vertical; } .acct-card input[type="file"] { width: 100%; font-size: 13px; color: var(--muted); padding: 10px; border: 1px dashed var(--border); border-radius: 11px; } .acct-card .hint { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-block-start: 6px; line-height: 1.7; } .acct-card .hint b { color: var(--gold); } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .f-nets { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .f-row, .f-nets { grid-template-columns: 1fr; } } .acct-card .btn { margin-block-start: 6px; } /* ---- Séparateur « أو » ---- */ .acct-sep { display: flex; align-items: center; gap: 14px; margin-block: 26px 22px; color: var(--muted); } .acct-sep::before, .acct-sep::after { content: ""; height: 1px; flex: 1; background: var(--border); } .acct-sep span { font-size: 12px; font-weight: 800; } .acct-reset p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin: 0 0 14px; } .acct-out { margin-block-start: 24px; padding-block-start: 18px; border-top: 1px solid var(--border); } .acct-out a { font-size: 13px; font-weight: 700; color: var(--live); text-decoration: none; } .acct-out a:hover { text-decoration: underline; } /* ---- Entrée principale du menu du compte ---- */ .acct-pop .acct-primary { font-weight: 900; color: var(--gold); } /* ================================================================ v7.7 — ÉDITEUR D'ARTICLE /my-articles/ ================================================================ */ .arts-page { max-width: 1120px; } .arts-page .acct-head { align-items: flex-start; flex-wrap: wrap; gap: 14px; } /* ---- Liste des articles du membre ---- */ .mine { display: flex; flex-direction: column; gap: 10px; } .mrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; transition: border-color .18s; } .mrow:hover { border-color: var(--gold); } .mmain { flex: 1 1 260px; min-width: 0; } .mtitle { display: block; font-size: 16px; font-weight: 900; color: var(--strong); text-decoration: none; line-height: 1.6; margin-block-end: 7px; } .mtitle:hover { color: var(--gold); } .mmeta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; } .macts { display: flex; gap: 8px; flex: 0 0 auto; } .macts .btn { padding: 7px 16px; font-size: 13px; } .st { font-weight: 900; border-radius: 999px; padding: 2px 11px; font-size: 11.5px; } .st.ok { color: #1a7f52; background: #1a7f5218; } .st.pending { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); } .st.draft { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); } .mine-empty { text-align: center; padding: 46px 20px; } .mine-empty p { margin-block-end: 16px; color: var(--muted); } /* ---- Grille de l'éditeur ---- */ .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } @media (max-width: 900px) { .ed-grid { grid-template-columns: 1fr; } } .ed-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; } @media (max-width: 900px) { .ed-side { position: static; } } /* ---- Titre ---- */ .ed-title { width: 100%; font: inherit; font-size: clamp(19px, 3vw, 25px); font-weight: 900; color: var(--strong); background: transparent; border: none; border-bottom: 2px solid var(--border); border-radius: 0; padding: 10px 2px; margin-block-end: 16px; transition: border-color .18s; } .ed-title::placeholder { color: var(--muted); opacity: .55; font-weight: 700; } .ed-title:focus { outline: none; border-bottom-color: var(--gold); } /* ---- Boîte d'édition ---- */ .ed-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .ed-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 62px; z-index: 5; } .ed-bar button { min-width: 38px; height: 38px; padding: 0 9px; /* cible tactile confortable */ border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 800; cursor: pointer; transition: .15s; } .ed-bar button:hover { background: var(--surface); color: var(--gold); border-color: var(--border); } .ed-bar button:active { transform: scale(.94); } .ed-bar .sep { width: 1px; height: 22px; background: var(--border); margin-inline: 5px; } .ed-area { min-height: 340px; padding: 22px; font-size: 16px; line-height: 2.05; color: var(--strong); outline: none; overflow-wrap: break-word; } .ed-area:empty::before, .ed-area.is-empty > p:only-child::before { content: attr(data-ph); color: var(--muted); opacity: .55; pointer-events: none; } .ed-area.is-empty > p:only-child::before { content: ""; } .ed-area.is-empty::after { content: attr(data-ph); color: var(--muted); opacity: .55; position: absolute; pointer-events: none; } .ed-box { position: relative; } .ed-area { position: relative; } .ed-area h2 { font-size: 21px; font-weight: 900; margin: 22px 0 10px; color: var(--strong); } .ed-area h3 { font-size: 18px; font-weight: 800; margin: 18px 0 8px; color: var(--strong); } .ed-area p { margin: 0 0 14px; } .ed-area ul, .ed-area ol { margin: 0 0 14px; padding-inline-start: 26px; } .ed-area li { margin-block-end: 6px; } .ed-area blockquote { margin: 16px 0; padding: 12px 18px; border-inline-start: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); border-radius: 0 10px 10px 0; color: var(--strong); } .ed-area a { color: var(--gold); } .ed-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--muted); } .ed-foot b { color: var(--gold); } /* ---- Champs annexes ---- */ .ed-field { display: block; margin-block-start: 18px; } .ed-field > span { display: block; font-size: 12.5px; font-weight: 800; color: var(--strong); margin-block-end: 6px; } .ed-field textarea, .ed-field select, .ed-field input[type="text"] { width: 100%; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--strong); background: var(--bg); border: 1px solid var(--border); border-radius: 11px; line-height: 1.85; } .ed-field textarea:focus, .ed-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); } .ed-field .hint { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-block-start: 6px; } /* ---- Cartes latérales ---- */ .ed-card { padding: 18px; } .ed-card h3 { font-size: 15px; font-weight: 900; color: var(--strong); margin: 0 0 12px; } .ed-card .btn { width: 100%; justify-content: center; margin-block-end: 9px; } .ed-card .hint { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.75; } .ed-status { font-size: 13px; color: var(--muted); margin: 0 0 14px; } .ed-thumb { aspect-ratio: 16/10; border: 1px dashed var(--border); border-radius: 12px; display: grid; place-items: center; overflow: hidden; margin-block-end: 10px; color: var(--muted); font-size: 12.5px; } .ed-thumb img { width: 100%; height: 100%; object-fit: cover; } .ed-card input[type="file"] { width: 100%; font-size: 12px; color: var(--muted); } .ed-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-block-start: 9px; } /* ---- Barre de reprise de brouillon ---- */ .restore-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .restore-bar button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } /* ---- Suppression ---- */ .ed-danger { margin-block-start: 26px; padding-block-start: 18px; border-top: 1px solid var(--border); } .ed-danger button { background: transparent; border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); color: var(--live); border-radius: 10px; padding: 9px 20px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: .18s; } .ed-danger button:hover { background: var(--live); color: #fff; } /* ---- Mobile : barre d'outils compacte ---- */ @media (max-width: 560px) { .ed-bar { gap: 2px; padding: 6px; } .ed-bar button { min-width: 34px; height: 34px; font-size: 13px; } .ed-area { padding: 16px; font-size: 15.5px; min-height: 280px; } .macts { width: 100%; } .macts .btn { flex: 1; justify-content: center; } } /* ---- v7.8 : section شبهات vide ---- */ .shub-empty { text-align: center; padding: 34px 22px; border: 1px dashed var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); } .shub-empty p { color: var(--muted); font-size: 14px; margin: 0 0 16px; } .shub-empty .hint { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-block-start: 10px; } /* ---- v7.10 : repli Web TV ---- */ .wtv-card { text-align: center; padding: 34px 22px; border: 1px dashed var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); } .wtv-card p { color: var(--muted); font-size: 14px; margin: 0 0 16px; } .wtv-fallback { margin-block-start: 12px; font-size: 12.5px; color: var(--muted); text-align: center; } .wtv-fallback a { color: var(--gold); font-weight: 800; text-decoration: none; } .wtv-fallback a:hover { text-decoration: underline; } /* ---- v7.11 : sélecteur de catégories de l'éditeur ---- */ .ed-tax { margin-block-end: 16px; } .ed-tax-lbl { display: block; font-size: 12.5px; font-weight: 800; color: var(--strong); margin-block-end: 7px; } .ed-tax select { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--strong); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { position: relative; margin: 0; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip span { display: inline-block; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; transition: .16s; user-select: none; } .chip span:hover { border-color: var(--gold); color: var(--gold); } .chip input:checked + span { background: var(--gold); border-color: var(--gold); color: #0B1220; font-weight: 900; } .chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; } @media (pointer: coarse) { .chip span { padding: 10px 15px; font-size: 13px; } } /* Entrée « écrire » du menu du compte */ .acct-pop .acct-plus { font-style: normal; font-weight: 900; margin-inline-start: 4px; opacity: .8; } /* ---- v7.12 : choix de la rubrique de publication ---- */ .dests { display: flex; flex-direction: column; gap: 7px; } .dest { position: relative; margin: 0; display: block; } .dest input { position: absolute; opacity: 0; width: 0; height: 0; } .dest-in { display: block; padding: 11px 14px; cursor: pointer; border: 1px solid var(--border); border-radius: 12px; transition: .16s; background: var(--bg); } .dest-in b { display: block; font-size: 13.5px; font-weight: 800; color: var(--strong); line-height: 1.5; } .dest-in i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-block-start: 3px; line-height: 1.6; } .dest-in:hover { border-color: var(--gold); } .dest input:checked + .dest-in { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 11%, transparent); box-shadow: inset 0 0 0 1px var(--gold); } .dest input:checked + .dest-in b { color: var(--gold); } .dest input:focus-visible + .dest-in { outline: 2px solid var(--gold); outline-offset: 2px; } @media (pointer: coarse) { .dest-in { padding: 13px 15px; } }