/* Pages « pannes courantes » : lecture d'abord, français puis arabe ligne à ligne. */
.pannes { max-width: 820px; line-height: 1.6; color: #233; }
.pannes h1 { font-size: 26px; margin: 6px 0 2px; }
.pannes h2 { font-size: 19px; margin: 0 0 2px; }
.pannes .ar { direction: rtl; text-align: right; color: #445; }
.pannes .titre-ar { font-size: 18px; font-weight: 600; margin-top: 0; }
.pannes .darija { font-size: 14px; color: #667; margin-top: -6px; }
.ariane { font-size: 13px; color: #667; margin-bottom: 8px; }
.ariane a { color: inherit; }

.panne { border-top: 1px solid #e3ebe7; padding: 18px 0 8px; }
.familles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.familles li { background: #f2f8f5; border: 1px solid #d5e8de; border-radius: 8px;
               padding: 6px 10px; font-size: 13.5px; }
.familles .f-fr, .familles .f-ar { display: block; }
.familles .f-ar { direction: rtl; color: #556; font-size: 13px; }

.appel { background: #f2f8f5; border-radius: 12px; padding: 16px 18px; margin: 26px 0; }
.bouton { display: inline-block; background: var(--vert); color: #fff; padding: 10px 18px;
          border-radius: 8px; text-decoration: none; font-weight: 600; }
.bouton-2 { background: #fff; color: var(--vert); border: 2px solid var(--vert); margin-left: 6px; }
.autres-t { margin-top: 26px; }
.autres { columns: 2; padding-left: 18px; }

.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
              gap: 12px; margin-top: 18px; }
.cat { display: block; border: 1px solid #d5e8de; border-radius: 12px; padding: 14px;
       text-decoration: none; color: inherit; }
.cat:hover { border-color: var(--vert); }
.cat-fr { display: block; font-weight: 700; font-size: 16px; }
.cat-ar { display: block; direction: rtl; text-align: right; color: #556; }
.cat-ex { display: block; font-size: 13px; color: #667; margin-top: 6px; }
@media (max-width: 560px) { .autres { columns: 1; } }