/* Version arabe (de droite à gauche) — chargée UNIQUEMENT par les pages /ar/ (29/10/2026).
   Écrite à partir des CSS actuelles : home.bundle.css, services.bundle.css, conviction.css,
   liens-services.css, agent-welcome.css, p-agents-ia.css, p-automatisation-ia.css, p-ia.css,
   et des styles intégrés des pages mentions légales et 404. Chaque règle reprend un sélecteur
   qui existe dans ces fichiers et en inverse seulement le sens (gauche <-> droite).
   Les décors purement graphiques (orbites, mini-navigateurs, serveurs, cible SEO) ne sont pas inversés. */

/* 1. Police arabe auto-hébergée (IBM Plex Sans Arabic, licence OFL), aucune ressource externe.
   Les faces sont ajoutées aux familles existantes Barlow et Montserrat avec une plage Unicode arabe :
   les lettres latines (MINBIRR, Google, SEO…) gardent Barlow / Montserrat, les lettres arabes
   prennent Plex Arabic, sans réécrire chaque déclaration font-family du site. */
/* Chrome n'associe deux faces d'une même famille (latin + arabe) que si leurs descripteurs de graisse sont
   IDENTIQUES : on reprend donc exactement ceux de home.bundle.css / services.bundle.css
   (Barlow 400, 500, 600 ; Montserrat variable 100 900). */
@font-face{font-family:Barlow;src:url('/fonts/plex-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Barlow;src:url('/fonts/plex-arabic-400.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Barlow;src:url('/fonts/plex-arabic-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Montserrat;src:url('/fonts/plex-arabic-600.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Arabic";src:url('/fonts/plex-arabic-400.woff2') format('woff2');font-weight:100 500;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url('/fonts/plex-arabic-600.woff2') format('woff2');font-weight:600 900;font-display:swap}

/* 2. Typographie arabe : aucun espacement entre lettres (il casse les liaisons), pas d'italique,
   interlignes plus généreux (titres serrés à 1,04 en latin). La marque garde son espacement latin. */
html[dir=rtl] *:not(.brand-type):not(.brand-type *){letter-spacing:0!important}
html[dir=rtl] *{font-style:normal!important}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{line-height:1.38}
html[dir=rtl] .hero h1{line-height:1.3}
html[dir=rtl] h1 em,html[dir=rtl] h2 em,html[dir=rtl] h3 em{font-family:"Plex Arabic",Montserrat,sans-serif;font-style:normal;font-weight:400;line-height:inherit}
html[dir=rtl] .philosophy-mark-word{font-family:"Plex Arabic",Montserrat,sans-serif;font-style:normal;font-weight:400}
html[dir=rtl] p,html[dir=rtl] li,html[dir=rtl] dd{line-height:1.85}
html[dir=rtl] .service-hero h1{line-height:1.4}
html[dir=rtl] .eyebrow,html[dir=rtl] .micro-label{line-height:1.7}

/* 3. Éléments qui restent de gauche à droite (marque, téléphone, e-mail, adresse d'exemple). */
html[dir=rtl] .brand-type,html[dir=rtl] a[href^="tel:"],html[dir=rtl] [itemprop=telephone],html[dir=rtl] [itemprop=email],html[dir=rtl] .result-origin small,html[dir=rtl] .project-chrome span{direction:ltr;unicode-bidi:isolate}
/* Bloc « coordonnées » des pages de service : sous 580 px, le lien tel: passe en bloc ; il reste à droite comme les autres lignes. */
html[dir=rtl] .service-provider>a[href^="tel:"]{text-align:right}

/* 4. En-tête, menu et navigation (home.bundle.css, services.bundle.css). */
html[dir=rtl] .skip-link{left:auto;right:20px}
html[dir=rtl] .scroll-progress{transform-origin:right}
html[dir=rtl] .desktop-nav a::after{transform-origin:right}
html[dir=rtl] .eyebrow>span:first-child:not(.status-dot){margin-right:0;margin-left:8px}
@media(max-width:900px){html[dir=rtl] .header-tools{margin-left:0;margin-right:auto}}
@media(max-width:850px){html[dir=rtl] .header-contact{margin-left:0;margin-right:auto}}
@media(max-width:580px){html[dir=rtl] .menu-toggle{margin-left:0;margin-right:auto}}

/* 5. Boutons et liens fléchés : l'effet de survol suit le sens de lecture. */
html[dir=rtl] .button-gold::after{transform:translateX(110%)}
html[dir=rtl] .button-gold:hover::after{transform:translateX(-110%)}
html[dir=rtl] .text-link:hover span{transform:translateX(-4px)}
html[dir=rtl] .portfolio-note a>span{padding-left:0;padding-right:12px}
html[dir=rtl] .project-local-link span{padding-left:0;padding-right:9px}
html[dir=rtl] .project-local-link:hover span{transform:translate(-3px,-3px)}
html[dir=rtl] .quality-link{margin-left:0;margin-right:14px}

/* 6. Accueil : haut de page, bandeau, expertises. */
html[dir=rtl] .hero-art{margin-left:0;margin-right:-2%}
@media(max-width:1150px){html[dir=rtl] .hero-art{margin-right:0}}
@media(max-width:580px){html[dir=rtl] .hero-art{margin-right:-5%}}
html[dir=rtl] .art-caption{left:3%;right:18%}
@media(max-width:580px){html[dir=rtl] .art-caption{left:8%;right:16%}}
@media(max-width:850px){html[dir=rtl] .hero-signature{text-align:right}}
html[dir=rtl] .expertise-ribbon::before{left:0}
html[dir=rtl] .expertise-tab{text-align:right}
html[dir=rtl] .tab-arrow{margin-left:6px;margin-right:auto}
html[dir=rtl] .expertise-tab:hover .tab-arrow{transform:translate(-3px,-3px)}
html[dir=rtl] .expertise-tab[aria-selected=true]{padding-left:12px;padding-right:18px;background:linear-gradient(270deg,#d6b5720e,transparent)}
html[dir=rtl]:not([data-theme="nuit"]) .expertise-tab[aria-selected=true]{background:linear-gradient(270deg,rgba(214,181,114,.34),transparent 85%)!important}
html[dir=rtl] .expertise-tab[aria-selected=true]::before{left:auto;right:0}
@media(max-width:850px){html[dir=rtl] .expertise-tab[aria-selected=true]::before{right:13px}}
@media(max-width:580px){html[dir=rtl] .expertise-tabs{margin-right:0;margin-left:-20px}}
@media(min-width:581px) and (max-width:850px){html[dir=rtl] .service-text{padding:28px 0 28px 26px}}
html[dir=rtl] .expertise-panel .service-text>.text-link+.text-link,html[dir=rtl] .expertise-panel .service-text>.text-link:has(+.text-link){margin:0 0 10px 22px}

/* 7. Réalisations (carrousel de projets). La carte suivante arrive par la gauche. */
html[dir=rtl] .project-preview{text-align:right}
html[dir=rtl] .project-view{right:auto;left:21px}
@media(max-width:580px){html[dir=rtl] .project-view{left:14px}}
html[dir=rtl] .project-caption>p{margin-left:40px;margin-right:auto}
html[dir=rtl] .project-index{margin-left:0;margin-right:auto}
html[dir=rtl] .project-deck .project{transform:translateX(-8%) rotateY(12deg) scale(.92)}
html[dir=rtl] .project-deck .project.is-active{transform:translateX(0) rotateY(0) scale(1)}
html[dir=rtl] .project-deck .project.is-previous{transform:translateX(8%) rotateY(-12deg) scale(.92)}
html[dir=rtl] .project-deck .project-scene{border-right:0;border-left:1px solid #c8a86320}
@media(max-width:580px){html[dir=rtl] .project-deck .project-scene{border-left:0}}
html[dir=rtl]:not([data-theme="nuit"]) .project-deck .project-scene{border-right:0;border-left:1px solid rgba(138,100,36,0.349)}
html[dir=rtl] .project-deck .project-caption::after{content:'↖︎';right:auto;left:-10px}
html[dir=rtl] .project-deck .project-index{right:auto;left:30px}
@media(max-width:580px){html[dir=rtl] .project-deck .project-index{left:22px}}
html[dir=rtl] .project-deck .project-view{right:auto;left:20px}
@keyframes caseTextRtl{from{opacity:0;transform:translateX(-25px)}to{opacity:1;transform:none}}
html[dir=rtl] .project-deck .project.is-active .project-caption>div,html[dir=rtl] .project-deck .project.is-active .project-caption>p{animation-name:caseTextRtl}
html[dir=rtl] .project-count{margin-right:0;margin-left:12px}
@media(max-width:580px){html[dir=rtl] .project-count{margin-left:9px}html[dir=rtl] .project-arrows{margin-left:0;margin-right:auto}}
html[dir=rtl] .portfolio-note{padding-right:0;padding-left:165px}
@media(max-width:580px){html[dir=rtl] .portfolio-note{padding-left:54px}}

/* 8. Démonstration SEO et offres. */
html[dir=rtl] .seo-stage-top{left:auto;right:25px}
@media(max-width:580px){html[dir=rtl] .seo-stage-top{right:19px}}
html[dir=rtl] .badge-local{right:auto;left:-18px}
html[dir=rtl] .badge-organic{left:auto;right:19px}
@media(max-width:580px){html[dir=rtl] .badge-local{left:-7px}}
html[dir=rtl] .result-star{margin-left:0;margin-right:auto}
html[dir=rtl] .seo-offers summary>b{margin-left:0;margin-right:auto}
html[dir=rtl] .seo-offers details>p{margin:16px 28px 1px 10px}
@media(max-width:580px){html[dir=rtl] .seo-offers details>p{margin-right:24px;margin-left:10px}}

/* 9. Conviction, méthode, activités déclarées, contact. */
html[dir=rtl] .approach-promises i{padding-right:0;padding-left:8px}
html[dir=rtl] .method-steps>li{padding:35px 0 0 25px}
@media(max-width:850px){html[dir=rtl] .method-steps>li{padding-top:22px}}
@media(max-width:580px){html[dir=rtl] .method-steps>li{padding-left:0}}
html[dir=rtl] .method-steps>li::before{left:auto;right:0}
html[dir=rtl] .activity-list{border-left:0;border-right:1px solid #c8a86328}
html[dir=rtl]:not([data-theme="nuit"]) .activity-list{border-left:0;border-right:1px solid rgba(138,100,36,0.421)}
@media(max-width:580px){html[dir=rtl] .activity-list,html[dir=rtl]:not([data-theme="nuit"]) .activity-list{border-right:0}}
html[dir=rtl] .activity-main::before{left:auto;right:-36px}
@media(max-width:850px){html[dir=rtl] .activity-main::before{right:-27px}}
@media(max-width:580px){html[dir=rtl] .activity-main::before{right:-28px}}
@media(max-width:350px){html[dir=rtl] .activity-main::before{right:-25px}}
html[dir=rtl] .contact-direct span{margin-left:0;margin-right:5px}
html[dir=rtl] .hp{left:auto;right:-10000px}
html[dir=rtl] input[type=email]{direction:ltr;text-align:right}

/* 10. Pied de page : la réserve pour les boutons flottants passe à gauche. */
html[dir=rtl] .footer-services{text-align:right}
html[dir=rtl] .footer-top,html[dir=rtl] .footer-bottom,html[dir=rtl] .hero-bottom{padding-right:0;padding-left:var(--float-gutter)}
@media(max-width:580px){html[dir=rtl] .footer-bottom>a{margin-left:0;margin-right:auto}}

/* 11. Pages de service (services.bundle.css et compléments p-*.css). */
html[dir=rtl] .service-summary::before{right:auto;left:-75px}
html[dir=rtl] .service-prose ul{padding-left:0;padding-right:19px}
html[dir=rtl] .service-faq summary{padding-right:0;padding-left:15px}
html[dir=rtl] .service-checklist li{padding-left:0;padding-right:30px}
html[dir=rtl] .service-checklist li::before{left:auto;right:0}
@media(max-width:760px){html[dir=rtl] .service-footer-row{padding-right:0;padding-left:var(--float-gutter)}}
html[dir=rtl] .pa-note{padding-left:0;padding-right:16px;border-left:0;border-right:2px solid var(--gold)}
html[dir=rtl] .ai-auto .service-prose ol{padding-left:0;padding-right:24px}
html[dir=rtl] .ai-auto .service-prose ol li{padding-left:0;padding-right:4px}
html[dir=rtl] .p-ia-note{border-left:0;border-right:3px solid var(--gold)}

/* 12. Bouton WhatsApp flottant (bundles et styles intégrés des pages légales et 404) : en bas à gauche. */
html[dir=rtl] .quick-whatsapp{right:auto;left:26px}
@media(max-width:580px){html[dir=rtl] .quick-whatsapp{right:auto!important;left:12px!important}}

/* 13. Robot Orbi (agent-welcome.css) : en bas à gauche, bulle et fenêtre inversées. */
html[dir=rtl] .mb-agent{right:auto;left:24px}
html[dir=rtl] .mb-agent-motion{left:auto;right:-24px}
html[dir=rtl] .mb-agent-invitation{right:auto;left:0;border-radius:20px 20px 20px 5px}
html[dir=rtl] .mb-agent-greeting{padding:17px 19px 18px 36px}
html[dir=rtl] .mb-agent-dialog{inset:auto auto 22px 24px}
html[dir=rtl] .mb-agent-header{padding:10px 24px 0 12px}
@media(max-width:580px){html[dir=rtl] .mb-agent{right:auto;left:14px}html[dir=rtl] .mb-agent-dialog{right:auto;left:12px}}
@media(max-height:600px){html[dir=rtl] .mb-agent{right:auto;left:20px}html[dir=rtl] .mb-agent-invitation{right:auto;left:calc(100% + 18px)}}
@media(max-height:600px) and (max-width:580px){html[dir=rtl] .mb-agent-invitation{left:0}}

/* 14. Mentions légales et 404 (styles intégrés dans la page). */
html[dir=rtl] .wrap ul{padding-left:0;padding-right:1.3em}

/* 15. Lisibilité : l'arabe reste lisible au-dessus de 12 px (les petites capitales latines du site descendent à 7-10 px). */
html[dir=rtl] .project-view,html[dir=rtl] .vault-label,html[dir=rtl] .visual-coordinate,html[dir=rtl] .home-faq-links .eyebrow,html[dir=rtl] .dialog-top .micro-label{font-size:12px}