/* OrcaCod — société mère. Design « verre » (glassmorphism) sur fond océan : dégradé + halos lumineux, panneaux translucides floutés.
   Mobile d'abord, RTL/LTR, clair/sombre automatique (prefers-color-scheme), AUCUN script. Repli propre si backdrop-filter n'existe pas. */
:root{
  color-scheme:light dark;
  --bg1:#f4f9ff;--bg2:#dcecfb;--text:#0a2236;--muted:#47607a;
  --orb1:rgba(45,212,191,.55);--orb2:rgba(56,130,246,.45);--orb3:rgba(167,139,250,.40);
  --glass:rgba(255,255,255,.52);--glass-strong:rgba(255,255,255,.72);--glass-hover:rgba(255,255,255,.70);
  --glass-line:rgba(255,255,255,.75);--line:rgba(10,34,54,.10);--hi:rgba(255,255,255,.85);
  --shadow:0 10px 40px rgba(18,60,110,.14),0 2px 8px rgba(18,60,110,.06);
  --accent:#0f766e;--accent2:#0369a1;--accent-ink:#ffffff;--ok:#047857;
  --r:26px;--font:"Segoe UI","Noto Sans Arabic","Tahoma","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg1:#050d1a;--bg2:#0a1f36;--text:#eaf4ff;--muted:#a3b8cc;
  --orb1:rgba(45,212,191,.38);--orb2:rgba(56,130,246,.38);--orb3:rgba(139,92,246,.34);
  --glass:rgba(255,255,255,.07);--glass-strong:rgba(255,255,255,.11);--glass-hover:rgba(255,255,255,.12);
  --glass-line:rgba(255,255,255,.20);--line:rgba(160,200,235,.16);--hi:rgba(255,255,255,.22);
  --shadow:0 12px 44px rgba(0,0,0,.40),0 2px 8px rgba(0,0,0,.25);
  --accent:#2dd4bf;--accent2:#38bdf8;--accent-ink:#04202a;--ok:#34d399;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed;color:var(--text);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p{margin:0}
a{color:inherit;text-decoration:none}
.ic{width:22px;height:22px;flex:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:14px}

/* Halos lumineux derrière le verre : sans eux, le flou n'a rien à « montrer » */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow::before,.glow::after,body::before{content:"";position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.glow::before{width:46vmax;height:46vmax;top:-14vmax;inset-inline-start:-10vmax;background:var(--orb1);animation:drift 22s ease-in-out infinite alternate}
.glow::after{width:42vmax;height:42vmax;bottom:-16vmax;inset-inline-end:-8vmax;background:var(--orb2);animation:drift 26s ease-in-out infinite alternate-reverse}
body::before{position:fixed;width:30vmax;height:30vmax;top:38%;inset-inline-end:22%;background:var(--orb3);z-index:0;pointer-events:none;animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vmax,3vmax,0) scale(1.12)}}

/* Brique « verre » : fond translucide + flou + bord lumineux + reflet intérieur */
.top,.hero,.tile,.foot,.err{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 var(--hi);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top,.hero,.tile,.foot,.err{background:var(--glass-strong)}
  :root{--glass-strong:rgba(255,255,255,.94)}
  @media (prefers-color-scheme:dark){:root{--glass-strong:rgba(18,38,62,.96)}}
}

/* En-tête flottant */
.top{position:sticky;top:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1040px;width:calc(100% - 28px);margin:14px auto 0;padding:8px 16px 8px 10px;border-radius:99px}
[dir=rtl] .top{padding:8px 10px 8px 16px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;letter-spacing:.01em}
.brand-mark{border-radius:12px;background:#fff;padding:2px;object-fit:contain;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.lang{min-height:40px;display:inline-grid;place-items:center;padding:0 18px;border:1px solid var(--glass-line);border-radius:99px;background:var(--glass-strong);font-weight:700;font-size:.92rem;transition:background .18s,transform .18s}
.lang:hover{background:var(--glass-hover);transform:translateY(-1px)}

main{position:relative;z-index:1;flex:1;max-width:1040px;width:100%;margin:0 auto;padding:22px 14px 40px}

/* Hero : grand panneau de verre */
.hero{display:grid;justify-items:center;text-align:center;gap:18px;padding:clamp(28px,6vw,56px) clamp(18px,5vw,56px);border-radius:34px;margin-bottom:clamp(30px,6vw,52px)}
.hero-logo{width:min(380px,80vw);height:auto;border-radius:26px;background:#fff;padding:8px 16px;box-shadow:0 20px 50px rgba(10,40,80,.22),0 0 0 1px rgba(255,255,255,.9) inset}
.hero h1{font-size:clamp(1.9rem,6.4vw,3.3rem);line-height:1.22;font-weight:800;max-width:18ch;background:linear-gradient(135deg,var(--text) 25%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:56ch;color:var(--muted);font-size:clamp(1rem,2.6vw,1.15rem)}

.branches-head{display:grid;gap:4px;margin:0 6px 18px}
.branches-head h2{font-size:1.45rem}
.branches-head p{color:var(--muted)}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}

/* Cartes-branches */
.tile{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:232px;padding:24px;border-radius:var(--r);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,0) 42%);opacity:.55}
.tile>*{position:relative}
.tile-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.tile-ic .ic{width:26px;height:26px}
.tile-body{display:grid;gap:6px;align-content:start}
.tile-name{font-size:1.45rem;line-height:1.25}
.tile-tag{color:var(--muted);font-size:.96rem}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pill{padding:3px 13px;border:1px solid var(--line);border-radius:99px;font-size:.8rem;font-weight:700;color:var(--muted);background:var(--glass)}
.pill-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.tile-cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--accent)}
.tile-cta .ic{width:18px;height:18px;transition:transform .18s ease}
[dir=rtl] .tile-cta .ic{transform:scaleX(-1)}

.tile.is-active{border-color:color-mix(in srgb,var(--accent) 60%,var(--glass-line));cursor:pointer;background:var(--glass-strong)}
.tile.is-active:hover{transform:translateY(-6px);background:var(--glass-hover);box-shadow:0 26px 60px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 1px 0 var(--hi)}
.tile.is-active:hover .tile-cta .ic{transform:translateX(4px)}
[dir=rtl] .tile.is-active:hover .tile-cta .ic{transform:scaleX(-1) translateX(4px)}
.tile.is-soon{border-style:dashed;opacity:.8;box-shadow:none}
.tile.is-soon .tile-ic{background:var(--glass-strong);color:var(--muted);border:1px solid var(--line);box-shadow:none}
@media(prefers-reduced-motion:reduce){.glow::before,.glow::after,body::before{animation:none}.tile,.tile-cta .ic,.lang{transition:none}.tile.is-active:hover,.lang:hover{transform:none}html{scroll-behavior:auto}}

/* Pied de page : barre de verre */
.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;max-width:1040px;width:calc(100% - 28px);margin:0 auto 18px;padding:14px 22px;border-radius:22px;color:var(--muted);font-size:.88rem}
.foot-legal{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover,.foot-legal a:focus-visible{color:var(--text)}

/* Page d'erreur */
body.center{place-items:center;justify-content:center}
.err{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 28px;margin:18px;border-radius:30px}
.err-code{font-size:4rem;font-weight:800;line-height:1;color:var(--accent)}
.back{margin-top:10px;padding:10px 24px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);font-weight:800;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent)}