/* ═══════════════════════════════════════════════════════════════════════
   ProfitPilot — couche « application mobile »            (app-mobile.css)
   ───────────────────────────────────────────────────────────────────────
   Cette feuille ne s'applique QU'EN DESSOUS DE 768 px. Elle ne remplace
   rien : elle se charge après style.css et redessine, pour le téléphone
   seulement, la barre du haut, le menu, le héros et les grilles, de façon
   à obtenir la gestuelle d'une application native — barre d'onglets fixe
   en bas, feuille modale qui monte, cartes à ancrage horizontal.

   Trois principes :
   1. Aucune règle ne sort de la media query. Le bureau est intact.
   2. On ne touche à aucun sélecteur de contenu (titres, textes, liens) :
      le HTML, le SEO et les traductions restent inchangés.
   3. Tout est exprimé avec les variables du thème (--purple, --surface,
      --nav-bg-solid…) : les modes sombre et clair suivent d'eux-mêmes.

   RTL : les distances horizontales utilisent les propriétés logiques
   (inset-inline, padding-inline, margin-inline), donc /ar/ est correct
   sans une seule règle dédiée.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  :root {
    --app-bar-h:  56px;   /* hauteur de la barre supérieure               */
    --app-tab-h:  58px;   /* hauteur de la barre d'onglets (hors encoche) */
    --app-safe-b: env(safe-area-inset-bottom, 0px);
    --app-safe-t: env(safe-area-inset-top, 0px);
    --app-radius: 18px;
  }

  /* ── Réglages tactiles généraux ─────────────────────────────────────
     Le halo bleu du navigateur au toucher trahit une page web ; on le
     remplace par un retour d'échelle, qui est le signal attendu sur
     téléphone. `text-size-adjust` empêche iOS de regrossir le texte à la
     rotation, ce qui décalait les cartes du carrousel.                 */
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  a, button, .btn, .pp-tab, .card, .service-card, .blog-card {
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active, .pp-tab:active, .service-card:active,
  .blog-card:active, .portfolio-card:active { transform: scale(0.975); }
  .btn, .pp-tab, .service-card, .blog-card, .portfolio-card {
    transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
  }

  /* La barre d'onglets occupe le bas de l'écran : le pied de page doit
     pouvoir défiler au-dessus d'elle, sinon la dernière ligne est
     inatteignable.                                                      */
  body {
    padding-bottom: calc(var(--app-tab-h) + var(--app-safe-b));
    overscroll-behavior-y: none;
  }

  /* Les révélations au défilement sont neutralisées : dans un carrousel
     horizontal, les cartes hors écran ne croisent jamais le viewport et
     resteraient invisibles à jamais. (main.js pose `.animate-ready` puis
     `.visible` ; on court-circuite le premier état.)                    */
  .fade-up, .fade-up.animate-ready {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* ═══ 1. BARRE SUPÉRIEURE ═══════════════════════════════════════════
     Barre d'application : hauteur fixe, fond opaque dès le premier pixel
     (une barre translucide sur un héros sombre rend le logo illisible),
     et masquage au défilement vers le bas pour rendre l'écran au contenu.
     La classe `.pp-hide` est posée par app-mobile.js.                   */
  .navbar {
    padding: 0;
    height: calc(var(--app-bar-h) + var(--app-safe-t));
    padding-top: var(--app-safe-t);
    background: var(--nav-bg-solid);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    z-index: 1400;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .navbar.scrolled {
    padding: 0;
    box-shadow: var(--shadow-nav);
    border-bottom-color: var(--border-mid);
  }
  .navbar.pp-hide { transform: translateY(-100%); }

  .nav-inner {
    height: var(--app-bar-h);
    padding-inline: 0.9rem;
    gap: 0.5rem;
  }
  .nav-logo img { height: 30px; width: auto; }

  /* ── Bascule de langue dans la barre ──
     Choix revu le 02/09/2026. La version precedente reléguait la langue
     au bas de la feuille du menu : deux gestes — ouvrir le menu, faire
     défiler jusqu'en bas — pour une action que le visiteur arabophone
     arrivé sur une page française veut faire immédiatement, souvent
     avant même d'avoir lu le titre.

     La place existe : à 320 px (le plus petit téléphone encore en
     service) la barre n'occupe que 226 px des 320 — logo 79, recherche
     30, thème 42, hamburger 42, plus les gouttières. Le bouton « FR ⌄»
     en demande une soixantaine. Mesuré, pas estimé.

     Le bouton se pose entre la loupe et la bascule jour/nuit : les trois
     commandes de confort d'affichage forment ainsi un seul groupe, et le
     hamburger reste seul à l'extrémité, là où le pouce le cherche.      */
  .navbar .nav-lang { display: flex; align-items: center; gap: 0.3rem; }

  .navbar .lang-drop-btn {
    min-height: 40px;
    padding: 0.3rem 0.5rem 0.3rem 0.65rem;
    border-radius: 10px;
    font-size: 0.78rem;
  }
  .navbar .lang-caret { width: 11px; height: 11px; }

  /* Repli si main.js n'a pas construit le menu deroulant : style.css ne
     laisse alors qu'une pastille, celle de la langue courante. On lui
     donne la meme cible tactile qu'aux boutons voisins.                 */
  .navbar .nav-lang > .lang-btn {
    min-height: 40px; padding-inline: 0.55rem;
    display: inline-flex; align-items: center;
    border-radius: 10px;
  }

  /* Le panneau s'aligne sur la FIN du bouton et grandit vers l'interieur.
     Avec `inset-inline-start: 0` (la regle de bureau), un panneau de
     132 px accroche a un bouton situe a 60 px du bord depassait l'ecran
     et rendait la page defilable lateralement — le defaut meme que la
     section 8 vient de supprimer partout ailleurs.                      */
  .navbar .lang-drop-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: 172px;
    top: calc(100% + 10px);
  }
  .navbar .lang-drop-menu .lang-btn { min-height: 44px; }

  /* La feuille du menu ne reprend plus la langue : deux points d'entree
     pour la meme action, dont un invisible sans defilement, c'est un
     doublon. Au-dessus de 768 px la barre masque son selecteur (regle
     769–1200 de style.css) et c'est la feuille qui le porte : chaque
     largeur en garde exactement un.                                     */
  .mobile-menu .nav-lang { display: none; }
  .navbar .theme-btn {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
  }
  .nav-inner > div:last-child { gap: 0.25rem !important; }

  .hamburger {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
  }

  /* ═══ 2. MENU : FEUILLE MODALE PAR LE BAS ═══════════════════════════
     Le menu plein écran est remplacé par une feuille qui monte du bas.
     C'est le geste attendu sur téléphone : le pouce atteint le haut de la
     feuille, la page reste visible derrière, et la fermeture se fait par
     glissement vers le bas (géré par app-mobile.js).

     On conserve exactement le HTML et le JS existants : main.js pose et
     retire la classe `.open`, rien d'autre n'est requis.                */
  .pp-scrim {
    position: fixed; inset: 0;
    background: rgba(3, 8, 16, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1490;
  }
  .pp-scrim.on { opacity: 1; pointer-events: auto; }

  .mobile-menu {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    height: auto;
    max-height: 84vh;
    max-height: 84dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--nav-bg-solid);
    border-top: 1px solid var(--border-strong);
    border-radius: var(--app-radius) var(--app-radius) 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.42);
    /* 3,2 rem en haut : la poignée et la croix de fermeture occupent une
       bande à elles seules. Sans cette réserve, la croix se superposait à
       la première entrée du menu.                                        */
    padding: 3.2rem 1rem calc(1rem + var(--app-safe-b));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1500;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(102%);
    transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1),
                visibility 0s linear 0.34s;
  }
  .mobile-menu.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1),
                visibility 0s;
  }

  /* Poignée de préhension : elle annonce que la feuille se tire.        */
  .mobile-menu::before {
    content: "";
    position: absolute;
    top: 0.55rem; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: 99px;
    background: var(--border-btn);
  }

  /* Les entrées deviennent des lignes de liste de 48 px, taille de corps
     et non de titre : à 1.8rem, six entrées ne tenaient pas dans une
     feuille et « Créer une SPAS (start-up labellisée) » passait à la
     ligne trois fois.                                                   */
  .mobile-menu a {
    font-family: var(--font-body);
    font-size: 1.03rem;
    font-weight: 600;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.15rem 0.35rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
  }
  .mobile-menu a:last-of-type { border-bottom: 0; }
  .mobile-menu a:active { background: var(--surface-hover); border-radius: 10px; }

  .mobile-menu a.mobile-sub {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-light);
    min-height: 42px;
    padding-inline-start: 1.1rem;
  }
  .mobile-menu a.mobile-sub svg { width: 17px; height: 17px; opacity: 0.75; }

  .mobile-menu .nav-lang {
    margin-top: 1.1rem !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-mid);
    gap: 0.5rem;
  }
  .mobile-menu .lang-btn {
    min-width: 56px; min-height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    border: 1px solid var(--border-mid);
  }
  .mobile-menu .lang-btn.active {
    background: var(--purple); color: var(--on-brand); border-color: var(--purple);
  }

  .mobile-close {
    position: absolute;
    top: 0.85rem; inset-inline-end: 0.9rem;
    right: auto; left: auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-mid);
    background: var(--surface);
    color: var(--gray-light);
  }
  .mobile-close svg { width: 18px; height: 18px; }

  /* ═══ 3. BARRE D'ONGLETS INFÉRIEURE ═════════════════════════════════
     Injectée par app-mobile.js, jamais écrite dans le HTML : les cinq
     destinations changent de langue et de chemin selon la page, et aucune
     page n'a besoin d'être modifiée.                                    */
  .pp-tabbar {
    position: fixed;
    inset-inline: 0; bottom: 0;
    z-index: 1450;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--nav-bg-solid);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--border-mid);
    padding-bottom: var(--app-safe-b);
    box-shadow: 0 -2px 22px rgba(0, 0, 0, 0.22);
  }
  .pp-tab {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    height: var(--app-tab-h);
    text-decoration: none;
    color: var(--gray);
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.2;
  }
  .pp-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .pp-tab.active { color: var(--purple-light); }
  .pp-tab.active::before {
    content: "";
    position: absolute; top: 0;
    width: 26px; height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: var(--purple-light);
  }

  /* La bulle Chatwoot se pose au même endroit que la barre d'onglets :
     on la relève au-dessus, sinon elle masque deux onglets.            */
  .woot-widget-bubble,
  .woot--bubble-holder,
  .woot-widget-holder {
    bottom: calc(var(--app-tab-h) + var(--app-safe-b) + 12px) !important;
  }

  /* ═══ 4. HÉROS ══════════════════════════════════════════════════════
     `min-height: 100vh` sur téléphone donne un premier écran entièrement
     occupé par le titre : le visiteur ne voit aucun service avant deux
     balayages. On dimensionne le héros à son contenu.                   */
  .hero {
    min-height: auto;
    padding: calc(var(--app-bar-h) + var(--app-safe-t) + 1.6rem) 0 2.2rem;
    align-items: flex-start;
  }
  .hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.25rem); margin-bottom: 0.7rem; }
  /* Le retour à la ligne du titre est composé pour le grand écran : sur
     téléphone il tomberait au milieu d'un mot. On le supprime — mais un
     `<br>` masqué ne laisse AUCUNE espace derrière lui, et les deux mots
     qu'il séparait se collent (« مؤسستكهو », « coûteuseest »). La page doit
     donc écrire une espace AVANT la balise (« …mot <br>mot… ») : elle est
     rognée en fin de ligne sur grand écran, et c'est elle qui sépare les
     mots ici. Invariant à respecter pour tout nouveau titre de héros. */
  .hero h1 br { display: none; }
  .hero-desc { font-size: 0.97rem; line-height: 1.7; }
  .hero-badge { font-size: 0.72rem; padding: 0.35rem 0.7rem; }

  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .hero-actions .btn {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 0.95rem;
  }

  /* Trois chiffres en trois cartes sur une ligne : en colonne (règle à
     480 px de style.css) ils poussaient les services à 1,5 écran.       */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 1.4rem;
    margin-top: 1.4rem;
  }
  .hero-stats .stat-item {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    padding: 0.75rem 0.4rem;
    text-align: center;
  }
  .hero-stats .stat-num { font-size: 1.2rem; }
  .hero-stats .stat-label { font-size: 0.66rem; line-height: 1.35; }

  /* ═══ 5. SECTIONS ET CARROUSELS ═════════════════════════════════════
     Les grilles de cartes deviennent des rubans à ancrage horizontal.
     La carte suivante dépasse volontairement de 16 % : c'est le seul
     indice fiable qu'il y a une suite à balayer.                        */
  .section { padding: 2.6rem 0; }
  .container { padding: 0 1rem; }
  .section-header { margin-bottom: 1.3rem; }
  .section-header h2, .section h2 { font-size: clamp(1.4rem, 5.6vw, 1.8rem); }

  .services-grid,
  .blog-grid,
  .portfolio-grid,
  .testimonials-section .grid-3 {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    gap: 0.8rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding-inline: 1rem;
    margin-inline: -1rem;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar,
  .portfolio-grid::-webkit-scrollbar,
  .testimonials-section .grid-3::-webkit-scrollbar { display: none; }

  .service-card, .blog-card, .portfolio-card, .testimonial-card {
    scroll-snap-align: start;
    border-radius: var(--app-radius);
  }
  .service-card, .testimonial-card { padding: 1.15rem; }

  /* Le bouton « voir tout » de fin de section prend la largeur : c'est la
     cible la plus cliquée d'une section parcourue au pouce.             */
  .section .btn-outline { width: 100%; min-height: 48px; border-radius: 14px; }

  /* La section « à propos » reste empilée : deux colonnes de texte n'ont
     aucun sens à 390 px, et son visuel porte l'argument.                */
  .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .about-content { padding-left: 0; padding-right: 0; }

  /* Le médaillon « années d'expérience » est calé à −1,5 rem hors du cadre
     de la photo. Avec la gouttière de 1 rem retenue ici, il débordait de
     8 px à droite et rendait TOUTE la page défilable horizontalement —
     le symptôme du « la page glisse quand je fais défiler », mesuré le
     16/08/2026 sur /fr/ et /en/ (document 398 px pour une vue de 390).
     On le ramène à l'intérieur du cadre, en propriété logique pour qu'il
     se place du bon côté en arabe.                                      */
  .about-badge {
    right: auto; left: auto;
    inset-inline-end: 0.75rem;
    bottom: -0.9rem;
    padding: 0.8rem 1rem;
  }
  .about-badge .num { font-size: 1.6rem; }

  /* ═══ 6. PIED DE PAGE ═══════════════════════════════════════════════ */
  .footer { padding-bottom: 1.5rem; }
  .footer-grid { gap: 1.6rem; }
  .footer-bottom { font-size: 0.78rem; }

  /* ═══ 7. PAGE D'ENTRÉE (racine / choix de langue) ════════════════════
     La racine du domaine n'a ni barre ni onglets — c'est un sas. On la
     traite en écran d'accueil d'application : trois grandes cibles.     */
  body.pp-door { padding-bottom: 0; }
  .door { padding: 1.6rem 1rem 2.5rem; }
  .door-head { padding: 0.5rem 0 1.6rem; }
  .door-head img { width: 74px; }
  .langs { gap: 0.7rem; margin: 1.6rem 0 2.2rem; grid-template-columns: 1fr; }
  .lang {
    padding: 1.05rem 1.1rem;
    border-radius: var(--app-radius);
    min-height: 64px;
  }
  .lang:active { background: var(--surface-hover); transform: scale(0.985); }
  .grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .card { border-radius: 14px; padding: 1rem 1.1rem; }
  .links { grid-template-columns: 1fr; }
  .links a { min-height: 44px; display: flex; align-items: center; }

  /* ═══ 8. PAGES INTÉRIEURES : SERVICES, GUIDES, BLOG, LÉGAL ══════════
     Jusqu'ici la couche « application » ne redessinait que l'accueil et
     les pages de listing. Les pages de contenu — /services/, /guides/,
     /blog/, /legal/, /boutique/ — gardaient la mise en page de bureau
     rétrécie : en-tête de 144 px, titre de 45 px, et surtout un tableau
     comparatif dont la largeur minimale (590 px mesurée sur le guide
     SARL le 02/09/2026) écartait la grille et rendait TOUTE la page
     défilable latéralement. Les règles qui suivent traitent la cause,
     jamais le symptôme : on ne masque pas le débordement, on borne les
     pistes de grille et on rend les tableaux défilables pour eux-mêmes.
     ══════════════════════════════════════════════════════════════════ */

  /* ── 8.1 En-têtes de page ──
     `.page-header` porte un style EN LIGNE (`padding:9rem 0 3rem`) sur
     303 pages : seul `!important` le reprend. 9 rem sous une barre déjà
     haute, c'est la moitié du premier écran perdue avant le titre.     */
  .page-header[style], .page-header,
  .guide-header {
    padding: calc(var(--app-bar-h) + var(--app-safe-t) + 1.1rem) 0 1.5rem !important;
  }

  /* `h1 { clamp(2.8rem, 6vw, 5rem) }` plafonne à 2,8 rem = 44,8 px sur
     téléphone : la borne basse du clamp n'est jamais atteinte en dessous
     de 747 px. On la redescend au calibre de l'accueil.                */
  .page-header h1, .guide-header h1, .article-header h1 {
    font-size: clamp(1.55rem, 6.6vw, 2.05rem) !important;
    line-height: 1.22;
    margin-bottom: 0.6rem;
  }
  .page-header p, .guide-lead { font-size: 0.97rem; line-height: 1.7; }
  .guide-meta { gap: 0.8rem; margin-top: 1rem; padding-top: 0.9rem; font-size: 0.78rem; }

  /* Le fil d'Ariane défile pour lui-même plutôt que de passer à la ligne
     en trois étages au-dessus du titre.                                */
  .breadcrumb {
    display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    font-size: 0.75rem; white-space: nowrap;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }

  /* ── 8.2 Gabarits à colonnes ──
     `grid-template-columns: 1fr` n'est PAS une piste bornée : `1fr` vaut
     `minmax(auto, 1fr)`, dont le plancher est la largeur minimale du
     contenu. Un tableau large la pousse donc au-delà du viewport. C'est
     l'origine exacte du « la page glisse sur le côté » des guides.
     `minmax(0, 1fr)` supprime ce plancher ; `min-width: 0` fait de même
     pour les enfants, qui sont eux aussi des boîtes de grille.         */
  .article-layout, .blog-layout, .guide-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.8rem !important;
  }
  .article-main, .guide-main, .article-sidebar,
  .guide-side, .guide-toc-col, .sidebar-sticky {
    min-width: 0; max-width: 100%;
    position: static !important;
  }
  .guide-side .sidebar-widget { max-width: 100%; }

  /* ── 8.3 Tableaux ──
     621 tableaux, sous deux balisages : `<table class="data-table">`
     (588) et `<div class="data-table"><table>` (33). Les deux deviennent
     leur propre zone de défilement horizontal. `display: block` sur un
     tableau conserve la mise en page interne (une boîte de tableau
     anonyme est recréée) tout en autorisant `overflow-x`.
     On resserre d'abord cellules et corps : la plupart des tableaux
     rentrent alors sans défilement, et seuls les comparatifs à cinq
     colonnes se balaient.                                              */
  table.data-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  div.data-table {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  div.data-table > table { margin: 0; }
  .data-table th, .data-table td {
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
  }
  .data-table th { font-size: 0.72rem; letter-spacing: 0.03em; }

  /* `overflow-wrap: anywhere` serait ici une fausse bonne idée : cette
     valeur ABAISSE la largeur minimale du contenu, si bien que le
     comparatif SARL/EURL/SPA/SNC rentrait de force dans 358 px en
     coupant « minimum » en « minim / um ». On garde donc `break-word`,
     qui n'agit qu'en cas de mot réellement plus large que sa colonne,
     et on laisse le tableau se balayer quand il est trop large.
     `min-width` sur les cellules empêche les colonnes courtes d'être
     écrasées à deux caractères pour faire tenir les longues.           */
  .data-table td { overflow-wrap: break-word; }
  .data-table th, .data-table td { min-width: 5.5rem; }

  /* Une barre de défilement fine et permanente est le seul indice que le
     tableau se balaie : sans elle, un visiteur ne devine pas qu'il reste
     deux colonnes à droite.                                            */
  table.data-table::-webkit-scrollbar,
  div.data-table::-webkit-scrollbar { height: 4px; }
  table.data-table::-webkit-scrollbar-thumb,
  div.data-table::-webkit-scrollbar-thumb {
    background: var(--border-btn); border-radius: 99px;
  }
  table.data-table::-webkit-scrollbar-track,
  div.data-table::-webkit-scrollbar-track { background: transparent; }

  /* ── 8.4 Corps d'article ──
     Une URL ou une référence sans espace (« décret n° 26-154/AAPI-2026 »)
     déborde sinon la colonne de quelques pixels — mesuré à 398 px pour
     un viewport de 387 sur /blog/business-plan-algerie.html.           */
  .article-body, .guide-main { overflow-wrap: break-word; }
  .article-body a { overflow-wrap: anywhere; }
  .article-body h2, .guide-chapter h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.8rem;
    padding-top: 0.9rem;
  }
  .article-body h3 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
  .article-body p { font-size: 0.98rem; line-height: 1.78; }
  .article-body ul, .article-body ol { padding-inline-start: 1.15rem; }
  .article-meta { gap: 0.7rem 1rem; font-size: 0.78rem; padding: 0.9rem 0; margin-bottom: 1.4rem; }
  .article-header { margin-bottom: 1.6rem; }

  /* ── 8.5 Encadrés ──
     Tous ces blocs ont un rembourrage calé sur une colonne de 760 px.
     Reconduit tel quel sur 358 px de largeur utile, il ne laisse que
     278 px de texte, soit une trentaine de caractères par ligne.       */
  .highlight-box { padding: 1.05rem 1.15rem; margin: 1.5rem 0; border-radius: 0 10px 10px 0; }
  [dir="rtl"] .highlight-box { border-radius: 10px 0 0 10px; }
  .highlight-box p { font-size: 0.95rem; }
  .toc, .guide-toc { padding: 1.1rem 1rem; margin-bottom: 2rem; border-radius: 14px; }
  .toc ol { padding-inline-start: 1.1rem; }
  .guide-toc { max-height: none; }
  .guide-toc a { min-height: 42px; padding: 0.4rem 0.45rem; }
  .step-card { gap: 0.9rem; padding: 1.1rem; border-radius: 14px; }
  .step-num { width: 38px; height: 38px; min-width: 38px; font-size: 0.98rem; }
  .sidebar-widget { padding: 1.2rem 1.1rem; border-radius: 14px; margin-bottom: 1rem; }
  .internal-links-box { padding: 1.15rem !important; border-radius: 14px; }
  .guide-essentials, .guide-sources, .guide-lead-magnet {
    padding: 1.25rem 1.15rem !important;
    border-radius: 14px;
  }
  .guide-cta { padding: 1.5rem 1.15rem !important; margin: 2.2rem 0; border-radius: 16px; }
  .guide-cta-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .guide-cta-actions .btn { width: 100%; min-height: 48px; }
  .ess-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .author-card { padding: 1.2rem; gap: 1rem; border-radius: 14px; }
  .author-photo { width: 60px; height: 60px; }

  /* Les encadrés d'appel construits en style EN LIGNE dans les pages de
     services (« Consultation gratuite ») : leur rembourrage est écrit
     dans l'attribut, il faut le viser par l'attribut.                  */
  [style*="padding:2.5rem"] { padding: 1.5rem 1.15rem !important; }
  [style*="padding:1.8rem 2rem"] { padding: 1.25rem 1.15rem !important; }
  [style*="padding:1.5rem"] { padding: 1.15rem !important; }

  /* ── 8.6 FAQ ── */
  .faq-q { padding: 0.95rem 1rem; font-size: 0.92rem; gap: 0.7rem; }
  .faq-a { padding: 0 1rem 1rem; font-size: 0.89rem; }

  /* ── 8.7 Mots-clés et étiquettes ── */
  .kw-cloud { gap: 0.4rem; margin: 1.1rem 0; }
  .kw-tag { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
  .kw-tag.kw-lg, .kw-tag.lg { font-size: 0.78rem; padding: 0.35rem 0.85rem; }

  /* ── 8.8 Boutique ──
     Les fiches produit sont déjà en `auto-fit minmax(280px, 1fr)` : la
     grille se replie seule. Restent les cibles tactiles du pied de carte
     et le prix, calés sur une carte de bureau.                         */
  .bq-carte { border-radius: var(--app-radius); }
  .bq-pied { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .bq-btn { width: 100%; justify-content: center; min-height: 48px; }
  .bq-fiche-meta div { font-size: 0.8rem; }

  /* ── 8.9 Signature de marque et pied ── */
  .brand-signature { padding: 2.2rem 0 2rem !important; }
}

/* ── Mode « installée » (PWA lancée depuis l'écran d'accueil) ──────────
   En affichage autonome il n'y a plus la barre d'URL : la barre du haut
   ne doit alors jamais se masquer, sous peine de laisser le visiteur sans
   aucun moyen de revenir en arrière.                                    */
@media (max-width: 768px) and (display-mode: standalone) {
  .navbar.pp-hide { transform: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .navbar, .mobile-menu, .pp-scrim { transition: none !important; }
  .btn:active, .pp-tab:active, .service-card:active,
  .blog-card:active, .portfolio-card:active { transform: none; }
  html { scroll-behavior: auto; }
}