/*
Theme Name: Bensafi Industrial
Theme URI: https://novaqys.com
Author: BENSAFI Mohammed el Bachir
Description: Thème one-page de présentation (industrie automobile), multilingue FR / EN / ES / AR avec lecture de droite à gauche.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bensafi-industrial
*/

:root{--bg:#F7F9FC;--panel:#FFFFFF;--ink:#0B172A;--mute:#64748B;--line:#E2E8F0;--deep:#081521;--deepink:#EEF3F8;--acc:#00A6B2;--accink:#04202A;--gold:#C9A227;--petrol:#123B5D;
--head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A1A2B;--panel:#0F2438;--ink:#E8EFF6;--mute:#93A7BC;--line:#1E3A55;--deep:#050E17}}
:root[data-theme="dark"]{--bg:#0A1A2B;--panel:#0F2438;--ink:#E8EFF6;--mute:#93A7BC;--line:#1E3A55;--deep:#050E17}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.02;margin:0;letter-spacing:.005em}
h2{font-size:clamp(2rem,4.2vw,3.2rem);max-width:18ch}
h3{font-size:1.6rem}
p{margin:0 0 1em;max-width:62ch}
.sec{padding:96px 0;border-top:1px solid var(--line)}
.lead{color:var(--mute);margin-top:20px}

/* en-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--deep);color:var(--deepink);border-bottom:3px solid var(--acc)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{font-family:var(--head);font-weight:700;font-size:1.3rem;text-decoration:none;letter-spacing:.02em}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--acc)}

/* hero */
.hero{background:var(--deep);color:var(--deepink);padding:88px 0 96px;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);max-width:12ch}
.hero p{color:#BFD0E0;margin-top:26px}
.hero p strong{color:#fff;font-weight:600}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;padding:14px 26px;font-weight:600;text-decoration:none;border:2px solid var(--acc);background:var(--acc);color:var(--accink);font-size:1rem}
.btn:hover{background:#2CD4E0;border-color:#2CD4E0}
.btn.alt{background:transparent;color:inherit;border-color:#5E86AD}
.btn.alt:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.dial{width:100%;max-width:440px;justify-self:end}
.dial svg{width:100%;height:auto;display:block;overflow:visible}
.seg{fill:none;stroke-width:26;stroke:#1E4470}
.seg.on{stroke:var(--acc)}
.seg.on.s1{opacity:.45}.seg.on.s2{opacity:.62}.seg.on.s3{opacity:.8}
.tick{stroke:#8FB0D0;stroke-width:2}
.needle{transform-origin:200px 200px;transform:rotate(-90deg);animation:sweep 2.4s cubic-bezier(.2,.8,.2,1) .4s forwards}
@keyframes sweep{0%{transform:rotate(-90deg)}70%{transform:rotate(34deg)}100%{transform:rotate(26deg)}}
.dial figcaption{font-family:var(--head);font-size:1.5rem;line-height:1.15;margin-top:14px;color:#fff}
.dial small{display:block;font:400 .9rem/1.5 var(--body);color:#9DB6CE;margin-top:6px}

/* conviction */
.quote{background:var(--panel);padding:72px 0}
blockquote{margin:0;padding-left:28px;border-left:6px solid var(--acc);font-family:var(--head);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.15;max-width:30ch}
blockquote p{max-width:none;margin:0 0 .5em}

/* à propos */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px}
.q{font-family:var(--head);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;font-weight:600;margin:28px 0 0;max-width:20ch}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.checks li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative;font-size:.98rem}
.checks li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;background:var(--acc)}

/* expertises : fiche technique */
.spec{margin-top:44px;border-top:3px solid var(--ink)}
.row{display:grid;grid-template-columns:260px 1fr;gap:12px 40px;padding:26px 0;border-bottom:1px solid var(--line)}
.row p{margin:0 0 .6em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:.88rem;padding:3px 10px;border:1px solid var(--line);background:var(--panel)}

/* approche : chaîne de stations */
.line{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:st}
.line li{position:relative;padding:44px 22px 0 0;counter-increment:st;border-top:4px solid var(--ink)}
.line li::before{content:counter(st);position:absolute;top:-19px;left:0;width:34px;height:34px;display:grid;place-items:center;background:var(--acc);color:var(--accink);font:700 1.15rem var(--head)}
.line h3{margin-bottom:10px}
.line p{font-size:.98rem;color:var(--mute)}
.goal{margin-top:48px;font-family:var(--head);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;max-width:26ch;line-height:1.12}

/* projets */
.proj{margin-top:44px;display:grid;gap:0;border:1px solid var(--line);background:var(--panel)}
.p{display:grid;grid-template-columns:200px 1fr;gap:16px 40px;padding:34px 32px;border-bottom:1px solid var(--line)}
.p:last-child{border-bottom:0}
.p .name{font-family:var(--head);font-weight:700;font-size:2.6rem;line-height:1;border-left:6px solid var(--acc);padding-left:14px}
.p .name small{display:block;font:500 .85rem/1.35 var(--body);color:var(--mute);margin-top:8px}
.p h3{margin-bottom:10px}
.p p:last-child{margin-bottom:0}
.flow{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 0;padding:0;list-style:none}
.flow li{padding:6px 16px;background:var(--deep);color:#fff;font-weight:600;font-size:.92rem;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);margin-right:-4px;padding-left:22px}
.flow li:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);padding-left:16px}
.flow li:last-child{background:var(--acc);color:var(--accink)}
.mods{margin-top:16px}

/* vision + activités */
.vis{background:var(--deep);color:var(--deepink);padding:96px 0}
.vis h2{max-width:20ch}
.vis .checks{margin-top:36px}
.vis .checks li{border-color:#1F4268}
.vis p{color:#BFD0E0;margin-top:24px}
table{width:100%;border-collapse:collapse;margin-top:40px}
th,td{text-align:left;padding:18px 12px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--head);font-size:1.35rem;font-weight:700;width:34%}
td.code{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;width:110px}
.scroll{overflow-x:auto}

/* collaboration + contact */
.collab{margin-top:36px}
.contact{background:var(--petrol);color:#fff;padding:88px 0}
.contact h2{max-width:14ch}
.contact p{margin-top:20px}
.contact .btn{background:var(--acc);color:var(--accink);border-color:var(--acc);margin-top:10px}
.contact .btn:hover{background:#2CD4E0;border-color:#2CD4E0}
footer{background:var(--deep);color:#A9BED3;padding:36px 0;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}
footer strong{color:#fff}

@media (max-width:900px){
.hero .wrap,.two{grid-template-columns:1fr}
.dial{justify-self:start}
.line{grid-template-columns:1fr 1fr;row-gap:44px}
.row,.p{grid-template-columns:1fr}
.sec,.vis{padding:72px 0}
}
@media (max-width:560px){
.checks{grid-template-columns:1fr}
.line{grid-template-columns:1fr}
nav{gap:14px}
.p{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.needle{animation:none;transform:rotate(26deg)}
}

/* v2 */
.hero{overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px}
header{background:rgba(8,21,33,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:3px solid #1F4268}
.bar{position:absolute;left:0;bottom:-3px;height:3px;width:100%;background:var(--acc);transform-origin:0 50%}
@supports (animation-timeline:scroll()){.bar{transform:scaleX(0);animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.hero h1,.hero p,.hero .btns{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation-delay:.1s}.hero p{animation-delay:.3s}.hero .btns{animation-delay:.5s}
.portrait{position:relative;justify-self:end;width:100%;max-width:400px;margin-right:18px}
.portrait::before{content:"";position:absolute;inset:22px -18px -22px 22px;background:var(--acc);animation:blk 1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes blk{from{transform:translate(-22px,-22px);opacity:0}}
.ph{position:relative;z-index:1;overflow:hidden;aspect-ratio:3/4;background:#0E2236;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.ph::after{content:"";position:absolute;inset:0;background:var(--deep);animation:unc 1.1s .45s cubic-bezier(.7,0,.2,1) forwards}
@keyframes unc{to{transform:translateX(101%)}}
.scan{position:absolute;z-index:2;left:0;right:0;top:0;height:3px;opacity:0;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 20px 5px rgba(0,166,178,.75);animation:scan 2.2s 1.5s ease-in-out forwards}
@keyframes scan{0%{top:0;opacity:0}10%,90%{opacity:1}100%{top:100%;opacity:0}}
.gauge{position:absolute;z-index:3;left:-44px;bottom:-30px;width:196px;margin:0;padding:14px 16px 12px;background:rgba(8,21,33,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #2C5380;color:#fff;animation:rise .9s 1.1s cubic-bezier(.2,.8,.2,1) both}
.gauge svg{width:100%;height:auto;display:block;overflow:visible}
.gauge figcaption{font:600 1rem/1.15 var(--head);margin-top:8px}
.needle{animation-delay:1.7s}
.ticker{background:var(--petrol);color:#fff;overflow:hidden;white-space:nowrap}
.track{display:inline-flex;animation:tick 40s linear infinite}
.track span{display:inline-flex;align-items:center;gap:28px;padding:13px 28px;font:600 1.3rem var(--head)}
.track span::after{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.line li{transition:border-color .6s .35s}
.line li.in{border-top-color:var(--acc)}
.tags span{transition:background .2s,color .2s,border-color .2s,transform .2s}
.tags span:hover{background:var(--acc);border-color:var(--acc);color:var(--accink);transform:translateY(-2px)}
.p{transition:background .3s}
.p:hover{background:var(--bg)}
.p .name{transition:padding-left .3s,border-color .3s}
.p:hover .name{padding-left:22px}
.btn{transition:background .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
nav a{transition:border-color .2s}
@media (max-width:900px){.portrait{justify-self:start;max-width:340px;margin-left:0}.gauge{left:auto;right:-8px;bottom:-26px;width:170px}}
@media (prefers-reduced-motion:reduce){
.track,.hero h1,.hero p,.hero .btns,.gauge,.portrait::before,.scan{animation:none}
.scan{display:none}.ph::after{animation:none;display:none}
.bar{animation:none;transform:none}
.js .rv{opacity:1;transform:none;transition:none}
}

/* v4 */
.hero h1{font-size:clamp(2.3rem,5.2vw,4.2rem);max-width:17ch}
.hero p.role{color:var(--gold);font-weight:600;font-size:1.12rem}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.chips a{font:600 1.15rem var(--head);padding:4px 16px;border:1px solid #2C5380;text-decoration:none;color:#fff;transition:border-color .2s,background .2s}
.chips a:hover{border-color:var(--gold);background:rgba(201,162,39,.12)}
.checks li::before{background:var(--gold)}
.line li.in{border-top-color:var(--gold)}
.line .yr{display:block;font:600 .88rem var(--body);color:var(--mute);margin-bottom:6px}
.tags span:hover{background:var(--gold);border-color:var(--gold);color:#081521}
.sub{display:block;font:500 .9rem var(--body);color:var(--mute);margin-top:8px;letter-spacing:0}
.truths{list-style:none;margin:28px 0 0;padding:0;border-top:3px solid var(--ink)}
.truths li{padding:16px 0;border-bottom:1px solid var(--line);font:600 1.45rem/1.15 var(--head)}
.trio div{padding:14px 0;border-top:1px solid var(--line);color:var(--mute);font-size:.98rem}
.trio strong{display:block;font:700 1.5rem/1 var(--head);color:var(--ink);margin-bottom:4px}
.sigsec{background:var(--deep);color:#fff;padding:110px 0}
.sigsec blockquote{max-width:24ch;border-left-color:var(--gold)}
.sigsec p{color:#fff}
.hero p.role{margin-top:22px}

/* i18n */
.lang{display:flex;gap:4px}
.lang button{font:600 .85rem var(--body);background:transparent;color:#BFD0E0;border:1px solid #2C5380;padding:5px 10px;cursor:pointer;transition:border-color .2s,background .2s}
.lang button:hover{border-color:var(--gold)}
.lang button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--accink)}
[dir="rtl"]{--head:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;--body:"Cairo","Segoe UI",Tahoma,Arial,sans-serif}
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.3;letter-spacing:0}
[dir="rtl"] .hero h1{max-width:18ch}
[dir="rtl"] .checks li{padding:10px 22px 10px 0}
[dir="rtl"] .checks li::before{left:auto;right:0}
[dir="rtl"] blockquote{padding-left:0;padding-right:28px;border-left:0;border-right:6px solid var(--acc)}
[dir="rtl"] .sigsec blockquote{border-right-color:var(--gold)}
[dir="rtl"] .p .name{border-left:0;border-right:6px solid var(--acc);padding-left:0;padding-right:14px}
[dir="rtl"] .p:hover .name{padding-left:0;padding-right:22px}
[dir="rtl"] .line li{padding:44px 0 0 22px}
[dir="rtl"] .line li::before{left:auto;right:0}
[dir="rtl"] .portrait{margin-right:0;margin-left:18px}
[dir="rtl"] .portrait::before{inset:22px 22px -22px -18px}
[dir="rtl"] .gauge{left:auto;right:-44px}
[dir="rtl"] .ticker{direction:ltr}
[dir="rtl"] .flow li{clip-path:polygon(100% 0,10px 0,0 50%,10px 100%,100% 100%,calc(100% - 10px) 50%);margin:0 0 0 -4px;padding:6px 22px 6px 16px}
[dir="rtl"] .flow li:first-child{clip-path:polygon(100% 0,10px 0,0 50%,10px 100%,100% 100%);padding:6px 16px}
@media (max-width:900px){[dir="rtl"] .portrait{margin-left:0}[dir="rtl"] .gauge{right:-8px}}

/* WordPress : barre d'administration */
.admin-bar header{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar header{top:calc(46px + env(safe-area-inset-top,0px))}}