/* ---------------------------------------------------------------------------
   Version arabe : lecture de droite à gauche.
   La page est réellement inversée ; seuls les rubans pilotés en JavaScript
   (carrousel des projets, miniatures de la galerie) gardent leur sens d'origine,
   sinon leur défilement horizontal se briserait.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Cairo';
  src:url(/assets/cairo-arabic.woff2) format('woff2');
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
:root{
  --display:'Roboto Condensed','Cairo','Arial Narrow',Arial,sans-serif;
  --sans:'Montserrat','Cairo',Arial,sans-serif;
}
/* L'arabe n'accepte pas l'interlettrage : il casse les ligatures. */
html[lang=ar] *{letter-spacing:0}
html[lang=ar] .langues a{letter-spacing:1.6px}
html[lang=ar] .langues a[lang=ar]{letter-spacing:0}
html[lang=ar] :is(p,li,dd,label,.human-narrative p,.production-detail p,.studio-panel p,.metier p){line-height:1.85}
html[lang=ar] :is(h1,h2,h3){line-height:1.25}

/* ---- éléments positionnés en absolu : on les renvoie de l'autre côté ---- */
html[dir=rtl] .hero-title{left:auto;right:7%}
html[dir=rtl] .heart-stage{right:auto;left:-5%}
html[dir=rtl] .experience-orb{right:auto;left:6%}
html[dir=rtl] .reel-code{left:auto;right:30px}
html[dir=rtl] .reel-photo-count{right:auto;left:30px}
html[dir=rtl] .reel-copy{left:auto;right:35px}
html[dir=rtl] .reel-open{right:auto;left:30px}
html[dir=rtl] .emotion-code{left:auto;right:22px}
html[dir=rtl] .emotion-caption{left:auto;right:22px}
html[dir=rtl] .emotion-arrow{right:auto;left:22px}
html[dir=rtl] .collection-count{left:auto;right:14px}
html[dir=rtl] .collection-open{right:auto;left:14px}
html[dir=rtl] .collection-number{right:auto;left:0}
html[dir=rtl] .mapping-image-caption{left:auto;right:18px}
html[dir=rtl] .mapping-film span{left:auto;right:20px}
html[dir=rtl] .mapping-film svg{right:auto;left:18px}
html[dir=rtl] .screen-caption{left:auto;right:25px}
html[dir=rtl] .top-left{left:auto;right:18px}
html[dir=rtl] .bottom-right{right:auto;left:18px}
html[dir=rtl] .director-picture-label{left:auto;right:16px}
html[dir=rtl] .human-portrait-label{left:auto;right:16px}
html[dir=rtl] .production-cue{right:auto;left:26px}
html[dir=rtl] .production-board-copy{left:auto;right:30px}
html[dir=rtl] .production-board-top{direction:rtl}
html[dir=rtl] .finale-screen-top,html[dir=rtl] .finale-screen-bottom{direction:rtl}
html[dir=rtl] .show-arena-top,html[dir=rtl] .director-console-top{direction:rtl}
html[dir=rtl] .skip{left:auto;right:20px}

/* ---- rubans pilotés en JavaScript : sens d'origine conservé ---- */
html[dir=rtl] :is(.project-reel,.reel-window,#gallery-thumbs,.collection-filters,.hero-progress){direction:ltr}
html[dir=rtl] :is(.reel-card,.collection-item,#gallery-thumbs button){direction:rtl}

/* ---- flèches de navigation : elles doivent pointer dans le bon sens ---- */
html[dir=rtl] :is(#hero-prev,#hero-next,#reel-prev,#reel-next,#gallery-prev,#gallery-next,#brief-back) .ui-icon{transform:scaleX(-1)}

/* ---- formulaires ---- */
html[dir=rtl] :is(input,textarea,select){text-align:right}
html[dir=rtl] :is(input[type=email],input[type=tel],input[type=date],input[type=url]){direction:ltr;text-align:right}
html[dir=rtl] .form-piege{right:-9999px;left:auto}

/* ---- détails ---- */
html[dir=rtl] .red-line{margin-right:0;margin-left:12px}
html[dir=rtl] .live-dot{margin-right:0;margin-left:8px}
html[dir=rtl] .header-location>span:last-child{padding-left:0;padding-right:14px}
html[dir=rtl] header sup{margin-left:0;margin-right:3px}
html[dir=rtl] .footer-word{direction:ltr}

/* Numéros de téléphone et adresses e-mail : toujours lus de gauche à droite. */
html[dir=rtl] :is(a[href^="tel:"],a[href^="mailto:"],.contact-main-phone,.footer-phone,.page-phone){direction:ltr;unicode-bidi:embed}