/*
Theme Name: ARM Group
Theme URI: https://armgroup.ma
Author: ARM GROUP
Description: Thème WordPress pour bureau d'études design & architecture. Bibliothèque de projets interactive « Star Wahd » (dos de livres), header verre liquide, plans techniques 2D. Pages construites avec Elementor : chaque texte est modifiable au builder. Projets gérés depuis un menu dédié.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: armgroup
Tags: elementor, portfolio, dark, architecture, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   MAM DESIGNER — Design System 2026
   Minimalist Dark Luxury · Noir & Blanc strict
   Interface 100% monochrome — visuels projets en VRAIES COULEURS
   ============================================================ */

:root{
  --black:#000000;
  --ink:#08080A;
  --panel:#111111;
  --panel-2:#1a1a1a;
  --stroke:#333333;
  --stroke-soft:rgba(255,255,255,.12);
  --white:#ffffff;
  --grey-1:rgba(255,255,255,.72);
  --grey-2:rgba(255,255,255,.52);
  --grey-3:rgba(255,255,255,.34);
  --glass:rgba(15,15,15,.65);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.25,1,.5,1);
  --container:1340px;
  --nav-h:82px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body:where(.armgroup-theme){
  background:var(--ink);color:var(--white);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
:where(.armgroup-theme) img{max-width:100%;display:block}
:where(.armgroup-theme) a{color:inherit;text-decoration:none}
:where(.armgroup-theme) button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:#fff;color:#000}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#4a4a4a}

/* Halo lumineux subtil (niveaux de gris uniquement) */
body:where(.armgroup-theme)::before{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 62%);
  mix-blend-mode:screen;
}

/* ---------- Typographie ---------- */
.display{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:500;line-height:1.03;letter-spacing:-.02em}
:where(.armgroup-theme) h1,:where(.armgroup-theme) h2,:where(.armgroup-theme) h3,:where(.armgroup-theme) h4{font-weight:500;letter-spacing:-.015em;line-height:1.1}
:where(.armgroup-theme) h1{font-size:clamp(2.3rem,6.2vw,5.4rem)}
:where(.armgroup-theme) h2{font-size:clamp(1.85rem,3.6vw,3.2rem)}
:where(.armgroup-theme) h3{font-size:clamp(1.1rem,1.7vw,1.45rem)}
:where(.armgroup-theme) p{color:var(--grey-1)}
:where(.armgroup-theme) .lead{font-size:clamp(1rem,1.22vw,1.14rem);color:var(--grey-1);max-width:64ch}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.69rem;letter-spacing:.34em;text-transform:uppercase;color:var(--white);font-weight:600}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,#fff)}
.serif-italic{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400}
.muted{color:var(--grey-2)}

:where(.armgroup-theme) .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
:where(.armgroup-theme) section{position:relative;padding:clamp(70px,9.5vw,146px) 0}
.section-head{max-width:840px;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{margin:1.1rem 0}

/* ============================================================
   HEADER — LIQUID GLASS
   ============================================================ */
.liquid-glass-header{
  position:sticky;top:0;z-index:999;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(15,15,15,.65);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:height .45s var(--ease),background .45s var(--ease);
  overflow:hidden;
}
/* reflet liquide animé */
.liquid-glass-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 62%);
  background-size:260% 100%;animation:liquidSheen 9s linear infinite;
}
@keyframes liquidSheen{from{background-position:180% 0}to{background-position:-80% 0}}
.liquid-glass-header.scrolled{height:64px;background:rgba(10,10,10,.82)}

:where(.armgroup-theme) .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%;position:relative;z-index:2}
:where(.armgroup-theme) .brand{display:flex;align-items:center;gap:.8rem}
:where(.armgroup-theme) .brand img{height:36px;width:auto;transition:transform .5s var(--ease)}
:where(.armgroup-theme) .brand:hover img{transform:scale(1.08)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt strong{font-size:.9rem;letter-spacing:.24em;font-weight:600}
.brand-txt span{font-size:.55rem;letter-spacing:.34em;color:var(--grey-3);margin-top:5px}

.nav-menu{display:flex;align-items:center;gap:2.2rem;list-style:none}
.nav-menu a{position:relative;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--grey-1);padding:.45rem 0;transition:color .3s ease}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#fff;transition:width .45s var(--ease)}
.nav-menu a:hover,.nav-menu a.active{color:#fff}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}

.burger{display:none;width:44px;height:44px;place-items:center}
.burger span{display:block;width:24px;height:1.5px;background:#fff;margin:5px 0;transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Boutons noir & blanc ---------- */
.bw-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 2rem;background:transparent;border:2px solid #fff;color:#fff;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  border-radius:4px;overflow:hidden;transition:all .3s ease;
}
.bw-btn span{position:relative;z-index:2}
.bw-btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--ease);z-index:1}
.bw-btn:hover{color:#000;box-shadow:0 0 15px rgba(255,255,255,.3)}
.bw-btn:hover::before{transform:translateY(0)}
.bw-btn.glass{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bw-btn.solid{background:#fff;color:#000;border-color:#fff}
.bw-btn.solid::before{background:#000}
.bw-btn.solid:hover{color:#fff}
.bw-btn.ghost{border-color:rgba(255,255,255,.24)}
.bw-btn.ghost:hover{border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slowZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes shelfScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

.hero-fade-in{animation:fadeInUp 1.2s var(--ease) forwards}
:where(.armgroup-theme) .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
:where(.armgroup-theme) .reveal.in{opacity:1;transform:none}
:where(.armgroup-theme) .reveal.d1{transition-delay:.1s}:where(.armgroup-theme) .reveal.d2{transition-delay:.2s}:where(.armgroup-theme) .reveal.d3{transition-delay:.3s}
:where(.armgroup-theme) .reveal.d4{transition-delay:.4s}:where(.armgroup-theme) .reveal.d5{transition-delay:.5s}:where(.armgroup-theme) .reveal.d6{transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  :where(.armgroup-theme) .reveal{opacity:1;transform:none}
}

/* ============================================================
   HERO — Alto style, immersif
   ============================================================ */
:where(.armgroup-theme) .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;margin-top:calc(-1 * var(--nav-h));padding-top:var(--nav-h)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:slowZoom 14s var(--ease-2) forwards;filter:brightness(.42) contrast(1.05)}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.5) 38%,rgba(8,8,10,.88) 80%,var(--ink) 100%),
             linear-gradient(90deg,rgba(8,8,10,.9),transparent 68%);
}
.hero-inner{position:relative;z-index:2;width:100%}
:where(.armgroup-theme) .hero h1{margin:1.3rem 0 1.5rem;max-width:17ch}
:where(.armgroup-theme) .hero h1 .line{display:block;overflow:hidden}
:where(.armgroup-theme) .hero h1 .line>span{display:block;animation:fadeInUp 1.2s var(--ease) both}
:where(.armgroup-theme) .hero h1 .line:nth-child(2)>span{animation-delay:.14s}
:where(.armgroup-theme) .hero h1 .line:nth-child(3)>span{animation-delay:.28s}
:where(.armgroup-theme) .hero .lead{animation:fadeInUp 1.2s var(--ease) .42s both}
:where(.armgroup-theme) .hero .eyebrow{animation:fadeInUp 1s var(--ease) both}
:where(.armgroup-theme) .hero .btn-row{animation:fadeInUp 1.2s var(--ease) .56s both}
.page-hero{min-height:72svh}

.hero-meta{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,42px);z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;animation:fadeIn 1.4s ease .9s both}
.hero-stats{display:flex;gap:clamp(1.5rem,4vw,3.2rem);flex-wrap:wrap}
.hero-stats div strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1}
.hero-stats div span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-3)}
.scroll-cue{display:flex;align-items:center;gap:.8rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-3)}
.scroll-cue i{position:relative;display:block;width:1px;height:38px;background:rgba(255,255,255,.18);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:#fff;animation:scrollDot 1.9s var(--ease-2) infinite}

/* ============================================================
   QUIZ INTERACTIF DE QUALIFICATION
   ============================================================ */
.quiz{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--stroke);border-radius:8px;
  padding:clamp(26px,3.6vw,52px);position:relative;overflow:hidden;
}
.quiz::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 0%,rgba(255,255,255,.06),transparent 70%);pointer-events:none}
.quiz-q{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.3rem,2.3vw,2rem);margin:.9rem 0 1.8rem;position:relative}
.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative}
.quiz-opt{
  text-align:left;padding:1.4rem 1.5rem;border:1px solid var(--stroke);border-radius:6px;
  background:#111;transition:all .45s var(--ease);position:relative;overflow:hidden;
}
.quiz-opt:hover{transform:translateY(-6px);border-color:#fff;box-shadow:0 10px 30px rgba(255,255,255,.08)}
.quiz-opt.selected{background:#fff;color:#000;border-color:#fff}
.quiz-opt.selected .qo-num,.quiz-opt.selected p{color:rgba(0,0,0,.62)}
.qo-num{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;color:var(--grey-3);line-height:1;margin-bottom:.7rem;transition:color .4s ease}
.quiz-opt h3{font-size:1.02rem;margin-bottom:.3rem}
.quiz-opt p{font-size:.82rem;line-height:1.55;color:var(--grey-2)}
.quiz-result{
  margin-top:1.6rem;padding:1.1rem 1.3rem;border:1px solid var(--stroke);border-left:3px solid #fff;
  border-radius:4px;background:#0d0d0d;font-size:.9rem;display:none;
}
.quiz-result.show{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;animation:fadeInUp .6s var(--ease)}

/* ============================================================
   BIBLIOTHÈQUE ANIMÉE "STAR WAHD" — étagère continue
   ============================================================ */
.shelf{position:relative;overflow:hidden;padding:14px 0 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.shelf-track{display:flex;gap:22px;width:max-content;animation:shelfScroll 60s linear infinite;will-change:transform}
.shelf:hover .shelf-track,.shelf.paused .shelf-track{animation-play-state:paused}
.shelf-rail{height:1px;background:linear-gradient(90deg,transparent,var(--stroke),transparent);margin-top:-16px}

/* Livre */
:where(.armgroup-theme) .book{
  position:relative;flex:0 0 auto;width:250px;cursor:pointer;
  background:var(--panel);border:1px solid var(--stroke);border-radius:6px;overflow:hidden;
  transition:all .5s var(--ease-2);box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform-style:preserve-3d;
}
:where(.armgroup-theme) .book:hover{transform:translateY(-12px) scale(1.03);border-color:#fff;box-shadow:0 22px 46px rgba(0,0,0,.7),0 0 26px rgba(255,255,255,.07)}
.book-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000}
/* VRAIES COULEURS : aucun filtre de désaturation */
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-2)}
:where(.armgroup-theme) .book:hover .book-cover img{transform:scale(1.08)}
.book-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.9));transition:opacity .5s ease}
:where(.armgroup-theme) .book:hover .book-cover::after{opacity:.78}
/* tranche décorative de la carte */
.book-edge{position:absolute;left:0;top:0;bottom:0;width:9px;z-index:3;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 60%,transparent);
  border-right:1px solid rgba(255,255,255,.1)}
.book-info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;z-index:4}
.book-cat{display:block;font-size:.57rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-2);margin-bottom:.45rem}
.book-info h3{font-family:"Playfair Display",Georgia,serif;font-size:1.12rem;line-height:1.2}
.book-year{position:absolute;top:14px;right:14px;z-index:4;font-size:.6rem;letter-spacing:.18em;padding:.3rem .62rem;border-radius:3px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.book-open{position:absolute;left:14px;top:14px;z-index:4;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-8px);transition:all .5s var(--ease);font-size:.85rem}
:where(.armgroup-theme) .book:hover .book-open{opacity:1;transform:none}
.shelf-hint{display:flex;align-items:center;gap:.7rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3);margin-top:.6rem}
.shelf-ctrl{display:flex;gap:.6rem}
.shelf-ctrl button{width:38px;height:38px;border-radius:50%;border:1px solid var(--stroke);display:grid;place-items:center;transition:all .4s var(--ease)}
.shelf-ctrl button:hover{border-color:#fff;background:#fff;color:#000}

/* Grille de livres (page portfolio) */
.books-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.books-grid .book{width:auto}

/* ============================================================
   MODALE PROJET (ouverture du livre)
   ============================================================ */
.book-detail{display:none}
:where(.armgroup-theme) .modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(12px,3vw,44px);
  background:rgba(0,0,0,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
:where(.armgroup-theme) .modal.open{opacity:1;pointer-events:auto}
.modal-box{
  width:min(1120px,100%);max-height:90vh;overflow-y:auto;border-radius:10px;
  background:var(--panel);border:1px solid var(--stroke);
  box-shadow:0 34px 90px rgba(0,0,0,.8);animation:popIn .6s var(--ease);
}
:where(.armgroup-theme) .modal.open .modal-box{animation:popIn .6s var(--ease)}
.modal-hero{position:relative;aspect-ratio:21/9;overflow:hidden;background:#000}
.modal-hero img{width:100%;height:100%;object-fit:cover}
.modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(17,17,17,.96))}
.modal-title{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,38px);z-index:2}
.modal-title h3{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,3vw,2.6rem);margin-top:.4rem}
.modal-close{position:absolute;top:16px;right:18px;z-index:5;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);font-size:1.1rem;transition:all .4s var(--ease)}
.modal-close:hover{background:#fff;color:#000}
.modal-body{padding:clamp(20px,3vw,40px)}
.modal-body .lead{margin-bottom:1.8rem}
.meta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
:where(.armgroup-theme) .chip{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;padding:.4rem .85rem;border:1px solid var(--stroke);border-radius:30px;color:var(--grey-1)}
.modal-sub{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2);margin:2rem 0 1rem;display:flex;align-items:center;gap:.8rem}
.modal-sub::after{content:"";flex:1;height:1px;background:var(--stroke)}
.modal-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.modal-gallery figure{overflow:hidden;border-radius:5px;aspect-ratio:4/3;border:1px solid var(--stroke);cursor:zoom-in}
.modal-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-2)}
.modal-gallery figure:hover img{transform:scale(1.07)}
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.plan-item{border:1px solid var(--stroke);border-radius:5px;overflow:hidden;background:#fff;cursor:zoom-in}
.plan-item img{width:100%;height:auto}
.plan-item figcaption{padding:.6rem .9rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#000;background:#fff;border-top:1px solid #ddd}
.plan-item img{background:#fff}
.plans-empty{font-size:.88rem;color:var(--grey-2);padding:1.1rem 1.3rem;border:1px dashed var(--stroke);border-radius:5px;background:#0d0d0d}
/* pastille "plans 2D disponibles" sur la couverture du livre */
.book-plans{position:absolute;left:14px;bottom:auto;top:56px;z-index:4;font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:3px;background:#fff;color:#000;font-weight:600}

/* ============================================================
   FILTRES
   ============================================================ */
:where(.armgroup-theme) .filters{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:clamp(26px,3.4vw,44px)}
.filter-btn{padding:.6rem 1.3rem;border-radius:40px;font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--grey-2);border:1px solid var(--stroke);background:#0f0f0f;transition:all .4s var(--ease)}
.filter-btn:hover{color:#fff;border-color:#fff;transform:translateY(-2px)}
.filter-btn.active{background:#fff;color:#000;border-color:#fff;font-weight:600}
.filter-item.hide{display:none}

/* ============================================================
   CARTES / SERVICES
   ============================================================ */
.animated-library-card{background:var(--panel-2);border-radius:8px;overflow:hidden;
  transition:all .5s var(--ease-2);box-shadow:0 10px 30px rgba(0,0,0,.3);border:1px solid var(--stroke)}
.animated-library-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.6);border-color:#fff}
.animated-library-card img{width:100%;height:auto;object-fit:cover;transition:transform .6s ease}
.animated-library-card:hover img{transform:scale(1.08)}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.book-card{background:#111;border:1px solid var(--stroke);transition:all .4s ease;border-radius:6px;
  padding:clamp(24px,3vw,38px);position:relative;overflow:hidden}
.book-card:hover{transform:translateY(-8px);border-color:#fff;box-shadow:0 10px 30px rgba(255,255,255,.08)}
.book-card .idx{font-family:"Playfair Display",Georgia,serif;font-size:2.5rem;color:var(--grey-3);line-height:1;transition:color .4s ease}
.book-card:hover .idx{color:#fff}
.book-card h3{margin:1rem 0 .65rem}
.book-card p{font-size:.89rem}
.book-card ul{list-style:none;margin-top:1.1rem;font-size:.81rem;color:var(--grey-2)}
.book-card li{padding:.3rem 0 .3rem 1.1rem;position:relative}
.book-card li::before{content:"—";position:absolute;left:0;color:#fff}

/* ============================================================
   COMPARATEUR 3D / PLAN 2D
   ============================================================ */
.demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center}
.reveal-compare{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;border:1px solid var(--stroke);
  cursor:ew-resize;user-select:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.reveal-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-top{clip-path:inset(0 0 0 50%);will-change:clip-path;background:#fff}
.rc-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:4;box-shadow:0 0 16px rgba(255,255,255,.45)}
.rc-handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.72);border:1px solid #fff;backdrop-filter:blur(10px);font-size:.9rem}
.rc-tag{position:absolute;bottom:14px;z-index:5;font-size:.59rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.38rem .78rem;border-radius:3px;background:rgba(0,0,0,.7);border:1px solid var(--stroke);backdrop-filter:blur(8px);color:var(--grey-1)}
.rc-tag.l{left:14px}.rc-tag.r{right:14px;border-color:#fff;color:#fff}

.process-list{list-style:none;margin-top:2rem;border-top:1px solid var(--stroke)}
.process-list li{display:grid;grid-template-columns:56px 1fr;gap:1.1rem;align-items:start;padding:1.25rem 0;
  border-bottom:1px solid var(--stroke);transition:padding-left .45s var(--ease),background .45s var(--ease)}
.process-list li:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
.process-list .num{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem}
.process-list h3{font-size:1rem;margin-bottom:.22rem}
.process-list p{font-size:.87rem;line-height:1.62}

/* ============================================================
   MOSAÏQUE
   ============================================================ */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mosaic figure{position:relative;overflow:hidden;border-radius:5px;aspect-ratio:1;cursor:zoom-in;border:1px solid var(--stroke);transition:border-color .5s ease}
.mosaic figure:hover{border-color:#fff}
.mosaic figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-2)}
.mosaic figure:hover img{transform:scale(1.08)}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2;aspect-ratio:auto}

/* ============================================================
   À PROPOS
   ============================================================ */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4.5vw,68px);align-items:center}
.founder-photo{position:relative}
.founder-photo img{width:100%;border-radius:6px;border:1px solid var(--stroke);transition:transform .8s var(--ease)}
.founder-photo:hover img{transform:scale(1.02)}
.founder-photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--stroke);border-radius:6px;z-index:-1}
.founder-badge{position:absolute;right:-16px;bottom:-20px;background:rgba(10,10,10,.9);border:1px solid var(--stroke);
  backdrop-filter:blur(14px);padding:1rem 1.25rem;border-radius:5px}
.founder-badge strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.45rem;line-height:1}
.founder-badge span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3)}

.timeline{list-style:none;margin-top:2.2rem;position:relative;padding-left:1.6rem}
.timeline::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,#fff,transparent)}
.timeline li{position:relative;padding:0 0 1.4rem}
.timeline li::before{content:"";position:absolute;left:-1.6rem;top:.55rem;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.timeline h3{font-size:.97rem;margin-bottom:.18rem}
.timeline p{font-size:.85rem}
.timeline .yr{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(26px,4vw,60px)}
.info-list{list-style:none;margin-top:2rem}
.info-list li{display:flex;gap:1.05rem;padding:1.1rem 0;border-bottom:1px solid var(--stroke);align-items:flex-start}
.info-ico{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke);background:#0f0f0f;transition:all .45s var(--ease)}
.info-list li:hover .info-ico{background:#fff;color:#000;border-color:#fff}
.info-list b{display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-3);font-weight:500}
.info-list a,.info-list span{color:#fff;font-size:.96rem}
.info-list a:hover{text-decoration:underline}

.form-wrap{padding:clamp(24px,3.2vw,42px);background:#111;border:1px solid var(--stroke);border-radius:8px}
:where(.armgroup-theme) .field{margin-bottom:1.25rem}
:where(.armgroup-theme) .field label{display:block;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-3);margin-bottom:.5rem}
:where(.armgroup-theme) .field input,:where(.armgroup-theme) .field select,:where(.armgroup-theme) .field textarea{width:100%;padding:.92rem 1.05rem;background:#0b0b0b;border:1px solid var(--stroke);
  border-radius:4px;color:#fff;font-size:.93rem;font-family:inherit;transition:border-color .4s ease,box-shadow .4s ease}
:where(.armgroup-theme) .field textarea{resize:vertical;min-height:128px}
:where(.armgroup-theme) .field input::placeholder,:where(.armgroup-theme) .field textarea::placeholder{color:rgba(255,255,255,.25)}
:where(.armgroup-theme) .field input:focus,:where(.armgroup-theme) .field select:focus,:where(.armgroup-theme) .field textarea:focus{
  outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.1),0 0 18px rgba(255,255,255,.18)}
:where(.armgroup-theme) .field select option{background:#111;color:#fff}
.form-note{font-size:.73rem;color:var(--grey-3);margin-top:.9rem}
.form-ok{display:none;padding:1rem;border:1px solid #fff;border-radius:4px;background:rgba(255,255,255,.07);font-size:.86rem;margin-top:1rem}
.form-ok.show{display:block;animation:fadeInUp .7s var(--ease)}

.map-strip{margin-top:1.3rem;border:1px solid var(--stroke);border-radius:6px;overflow:hidden;aspect-ratio:21/7;
  position:relative;background:#0d0d0d;display:grid;place-items:center;text-align:center}
.map-strip .grid-bg{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:42px 42px;-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent)}
.map-strip .pin{position:relative;z-index:2}
.map-strip .pin strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.45rem}
.map-strip .pin span{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-3)}

/* ============================================================
   CTA / FOOTER
   ============================================================ */
.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,#0d0d0d,var(--ink));text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.07),transparent 70%)}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{margin:1.1rem auto 1.2rem;max-width:19ch}
.cta-band .lead{margin-inline:auto}
.cta-band .btn-row{justify-content:center}

.site-footer{background:#050505;padding:clamp(54px,7vw,88px) 0 0;border-top:1px solid var(--stroke)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,46px)}
.foot-brand img{height:52px;margin-bottom:1.2rem}
.foot-grid h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:1.2rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.65rem}
.foot-grid a{font-size:.87rem;color:var(--grey-2);transition:color .3s ease,padding-left .35s var(--ease)}
.foot-grid a:hover{color:#fff;padding-left:6px}
.socials{display:flex;gap:.65rem;margin-top:1.3rem}
.socials a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke);color:var(--grey-1);transition:all .45s var(--ease)}
.socials a:hover{border-color:#fff;color:#000;background:#fff;transform:translateY(-3px)}
.foot-bottom{margin-top:clamp(36px,5vw,62px);padding:1.5rem 0;border-top:1px solid var(--stroke);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--grey-3)}
.foot-bottom a:hover{color:#fff}

.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,12,12,.8);border:1px solid var(--stroke);backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transform:translateY(14px);transition:all .5s var(--ease)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:#fff;color:#000;border-color:#fff}
:where(.armgroup-theme) .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1200;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.5)}

.lightbox{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.95);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:4vw;opacity:0;pointer-events:none;transition:opacity .45s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:94vw;max-height:88vh;border:1px solid var(--stroke);border-radius:5px;animation:fadeInUp .6s var(--ease)}
.lightbox .close{position:absolute;top:22px;right:26px;font-size:1.6rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .books-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .demo-grid,.founder,.contact-grid{grid-template-columns:1fr}
  .services-grid,.quiz-options{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .modal-gallery{grid-template-columns:repeat(2,1fr)}
  .founder-badge{right:10px}
}
@media(max-width:760px){
  .burger{display:grid}
  .nav-menu{position:fixed;inset:0;flex-direction:column;justify-content:center;background:rgba(6,6,6,.97);
    backdrop-filter:blur(20px);gap:2rem;transform:translateX(100%);transition:transform .6s var(--ease)}
  .nav-menu.open{transform:none}
  .nav-menu a{font-size:1.05rem;letter-spacing:.24em}
  :where(.armgroup-theme) .nav .bw-btn{display:none}
  .books-grid{grid-template-columns:repeat(2,1fr)}
  :where(.armgroup-theme) .book{width:200px}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .plans-grid,.modal-gallery{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-meta{flex-direction:column;align-items:flex-start}
  .scroll-cue{display:none}
}
@media(max-width:460px){
  .books-grid{grid-template-columns:1fr}
}

/* ============================================================
   ÉTAGÈRE UNIQUE « STAR WAHD » — dos de livres verticaux
   ============================================================ */
.bookshelf-wrap{position:relative;padding:8px 0 0}
.bookshelf-row{
  display:flex;gap:15px;overflow-x:auto;padding:20px 0;justify-content:center;
  scrollbar-width:thin;perspective:1400px;
}
.bookshelf-row::-webkit-scrollbar{height:6px}
.bookshelf-row::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:6px}

.book-spine{
  position:relative;flex:0 0 auto;
  width:55px;height:380px;
  background:#151515;border:1px solid #333;border-radius:4px;
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:center;justify-content:center;
  color:#fff;letter-spacing:1px;
  transition:all .4s cubic-bezier(.25,1,.5,1);
  cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.5);
  padding:18px 0;overflow:hidden;
}
.book-spine:hover,.book-spine:focus-visible{
  transform:translateY(-15px) scale(1.03);
  border-color:#fff;background:#222;outline:none;
  box-shadow:0 18px 34px rgba(0,0,0,.75),0 0 22px rgba(255,255,255,.08);
}
/* nervures de reliure */
.book-spine::before,.book-spine::after{
  content:"";position:absolute;left:6px;right:6px;height:1px;background:rgba(255,255,255,.16)
}
.book-spine::before{top:44px}
.book-spine::after{bottom:44px}
/* reflet vertical */
.book-spine .sp-title{
  font-family:"Playfair Display",Georgia,serif;font-size:.95rem;font-weight:500;
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:250px;
}
.book-spine .sp-num{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  writing-mode:horizontal-tb;font-size:.6rem;letter-spacing:.1em;color:var(--grey-3);
}
.book-spine .sp-foot{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  writing-mode:horizontal-tb;font-size:.53rem;letter-spacing:.08em;color:var(--grey-3);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.book-spine:hover .sp-num,.book-spine:hover .sp-foot{color:rgba(255,255,255,.8)}
.sp-plans{background:#fff;color:#000;font-weight:700;border-radius:2px;padding:0 3px;font-size:.48rem}

/* variation tonale : une étagère réelle n'est jamais uniforme */
.book-spine:nth-child(3n){background:#121212}
.book-spine:nth-child(4n){background:#181818}
.book-spine:nth-child(5n){background:#101010}

/* planche de l'étagère */
.shelf-plank{position:relative;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.shelf-plank::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:22px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);filter:blur(5px)}
.shelf-caption{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:1.5rem;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-3)}

/* ============================================================
   NAVIGATION — liens, CTA lumineux, sous-menu Fade Down
   ============================================================ */
.nav-menu>li>a{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  transition:color .5s var(--ease),transform .5s var(--ease),text-shadow .5s var(--ease);
}
/* survol : le lien se soulève et s'illumine */
.nav-menu>li>a:hover{
  color:#fff;transform:translateY(-2px);
  text-shadow:0 0 18px rgba(255,255,255,.55),0 0 34px rgba(255,255,255,.18);
}
.caret{
  width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.6;
  transition:transform .5s var(--ease),opacity .4s ease;
}
.has-sub:hover .caret{transform:rotate(225deg) translateY(-2px);opacity:1}

.has-sub{position:relative}
/* zone tampon : évite la fermeture du menu en descendant la souris */
.has-sub>a::before{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:24px}

.nav-sub{
  position:absolute;top:calc(100% + 20px);left:50%;
  min-width:310px;list-style:none;padding:.5rem;border-radius:10px;
  background:rgba(12,12,12,.78);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 60px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.07);
  /* état fermé : au-dessus + invisible → apparition en FADE DOWN */
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-14px) scale(.97);
  transition:opacity .48s var(--ease),transform .55s var(--ease),visibility 0s linear .55s;
  z-index:60;
}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity .48s var(--ease),transform .55s var(--ease),visibility 0s;
}
/* petite flèche de liaison */
.nav-sub::before{
  content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(12,12,12,.9);
  border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);
}
.nav-sub li{margin:0;opacity:0;transform:translateY(-8px);transition:all .45s var(--ease)}
.has-sub:hover .nav-sub li,.has-sub:focus-within .nav-sub li{opacity:1;transform:none}
.has-sub:hover .nav-sub li:nth-child(1){transition-delay:.06s}
.has-sub:hover .nav-sub li:nth-child(2){transition-delay:.12s}
.has-sub:hover .nav-sub li:nth-child(3){transition-delay:.18s}

.nav-sub a{
  display:flex;align-items:center;gap:.85rem;padding:.8rem .95rem;border-radius:6px;
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-1);
  transition:background .4s var(--ease),color .4s ease,padding-left .4s var(--ease);
}
.nav-sub a::after{display:none}
.nav-sub a:hover{background:#fff;color:#000;padding-left:1.2rem}
.ns-n{font-family:"Playfair Display",Georgia,serif;font-size:.8rem;letter-spacing:0;opacity:.45}
.nav-sub a:hover .ns-n{opacity:.7}

/* CTA « Démarrer un projet » — lueur douce au survol */
/* CTA lumineux — la lueur passe par box-shadow : pas besoin de overflow:visible,
   qui laissait fuir le voile blanc de .bw-btn::before hors du bouton. */
.cta-glow{position:relative;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.cta-glow:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(255,255,255,.34),0 0 54px rgba(255,255,255,.14)}

/* ============================================================
   PAGES SERVICES
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px)}
.svc-item{border:1px solid var(--stroke);border-radius:6px;padding:clamp(20px,2.6vw,32px);
  background:#0f0f0f;transition:all .45s var(--ease)}
.svc-item:hover{border-color:#fff;transform:translateY(-6px)}
.svc-item .n{font-family:"Playfair Display",Georgia,serif;font-size:1.6rem;color:var(--grey-3)}
.svc-item h3{margin:.7rem 0 .5rem;font-size:1.05rem}
.svc-item p{font-size:.88rem}

.faq{border-top:1px solid var(--stroke)}
.faq details{border-bottom:1px solid var(--stroke)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 0;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;font-size:1rem;transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--grey-2);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:#fff}
.faq summary:hover{color:#fff}
.faq p{padding:0 0 1.35rem;font-size:.9rem;max-width:78ch}

.breadcrumb{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-3);margin-bottom:1rem}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{margin:0 .5rem}

@media(max-width:1024px){ .svc-grid{grid-template-columns:1fr} }
@media(max-width:760px){
  .bookshelf-row{justify-content:flex-start;padding-inline:4px}
  .book-spine{height:320px}
  .nav-sub{position:static;transform:none;opacity:1;visibility:visible;background:none;
    border:0;box-shadow:none;min-width:0;padding:.4rem 0 0}
  .has-sub:hover .nav-sub{transform:none}
  .nav-sub a{text-align:center;font-size:.68rem}
}


/* ============================================================
   LIVRE DÉTACHÉ DE L'ÉTAGÈRE — état « featured »
   Le dos sort du rang et révèle sa couverture en vraies couleurs.
   ============================================================ */
.bookshelf-row{align-items:flex-end;padding-top:76px}

.book-spine{
  transition:width .75s var(--ease),height .75s var(--ease),transform .75s var(--ease),
             background .6s ease,border-color .6s ease,box-shadow .6s ease;
}
.sp-cover{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  writing-mode:horizontal-tb;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease) .12s;
}
.sp-cover img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.sp-cover::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 34%,rgba(0,0,0,.93));
}
.sp-cover-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:.28rem;text-align:left;
}
.sp-cover-txt em{font-style:normal;font-size:.56rem;letter-spacing:.24em;color:var(--grey-3)}
.sp-cover-txt b{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:1.02rem;line-height:1.2}
.sp-cover-txt s{text-decoration:none;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.sp-cover-txt u{
  text-decoration:none;margin-top:.5rem;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:#000;background:#fff;border-radius:3px;padding:.34rem .6rem;align-self:flex-start;
}

/* ---- le livre mis en avant : il se détache et s'ouvre ---- */
.book-spine.featured{
  width:212px;height:436px;
  transform:translateY(-46px);
  background:#0d0d0d;border-color:rgba(255,255,255,.55);
  box-shadow:0 40px 70px rgba(0,0,0,.85),0 0 42px rgba(255,255,255,.1);
  padding:0;cursor:pointer;
}
.book-spine.featured .sp-num,
.book-spine.featured .sp-title,
.book-spine.featured .sp-foot{opacity:0;transition:opacity .25s ease}
.book-spine.featured::before,.book-spine.featured::after{opacity:0}
.book-spine.featured .sp-cover{opacity:1}
/* socle lumineux sous le livre détaché */
.book-spine.featured .sp-cover-txt::before{
  content:"";position:absolute;left:16px;right:16px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}

/* le survol d'un autre dos ne casse pas la mise en avant */
.book-spine:not(.featured):hover{transform:translateY(-15px) scale(1.03)}

.shelf-plank{transition:none}

@media(max-width:760px){
  .bookshelf-row{padding-top:60px}
  .book-spine.featured{width:170px;height:360px;transform:translateY(-34px)}
  .sp-cover-txt b{font-size:.9rem}
  .nav-extra{display:none}
}

/* ============================================================
   WIDGETS INTERACTIFS DES PAGES DE SPÉCIALITÉ
   Comparateur à glissière : 2D→3D · Jour/Nuit · Filaire→Réel
   ============================================================ */
.xfade{
  --p:50%;
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:5px;
  border:1px solid var(--stroke);background:#0d0d0d;
  cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.xfade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.xf-top{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--p)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0);
  will-change:clip-path}
.xfade.is-animating .xf-top{transition:clip-path .9s var(--ease),-webkit-clip-path .9s var(--ease)}

/* poignée */
.xf-handle{
  position:absolute;top:0;bottom:0;left:var(--p);width:2px;z-index:6;
  background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);
  transform:translateX(-1px);border:0;padding:0;cursor:ew-resize;
  box-shadow:0 0 18px rgba(255,255,255,.5);
}
.xfade.is-animating .xf-handle{transition:left .9s var(--ease)}
.xf-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(12,12,12,.62);border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.6);
  transition:transform .4s var(--ease),background .4s ease;
}
.xf-handle::before{
  content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;font-size:.9rem;letter-spacing:.14em;color:#fff;pointer-events:none;
}
.xfade:hover .xf-handle::after,.xf-handle:focus-visible::after{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,255,255,.14)}
.xf-handle:focus-visible{outline:none}
.xf-handle:focus-visible::after{box-shadow:0 0 0 3px rgba(255,255,255,.35)}

/* étiquettes */
.xf-tag{
  position:absolute;top:16px;z-index:5;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:3px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);background:rgba(10,10,10,.6);color:#fff;
  transition:opacity .4s ease;
}
.xf-tag.l{left:16px}
.xf-tag.r{right:16px}

/* bandeau de commande sous le widget */
.xf-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-3);
}
.xf-modes{display:flex;gap:.5rem}
.xf-mode{
  padding:.5rem 1.1rem;border-radius:40px;border:1px solid var(--stroke);background:#0f0f0f;
  color:var(--grey-2);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:all .45s var(--ease);
}
.xf-mode:hover{color:#fff;border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.xf-mode.on{background:#fff;color:#000;border-color:#fff;font-weight:600}

/* halo LED sur la vue de nuit */
.xf-led{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(60% 40% at 50% 72%,rgba(255,214,150,.2),transparent 70%);
  mix-blend-mode:screen;transition:opacity .8s ease}
.xfade[data-led="1"][data-night="1"] .xf-led{opacity:1;animation:ledPulse 4.5s ease-in-out infinite}
@keyframes ledPulse{0%,100%{opacity:.75}50%{opacity:1}}

/* légende explicative */
.xf-note{margin-top:.9rem;font-size:.78rem;color:var(--grey-2);max-width:72ch}
.xf-note b{color:#fff;font-weight:500}

@media(max-width:760px){
  .xfade{aspect-ratio:4/3}
  .xf-tag{font-size:.5rem;padding:.3rem .55rem;top:10px}
  .xf-tag.l{left:10px}.xf-tag.r{right:10px}
  .xf-handle::after{width:52px;height:52px}
  .xf-bar{justify-content:center;text-align:center}
}

/* ============================================================
   ADAPTATION MOBILE & TABLETTE — ARM GROUP
   Ajoutée après toutes les règles pour prendre le dessus.
   ============================================================ */

/* ---------- Tablette ---------- */
@media (max-width:1024px){
  :root{ --nav-h:74px; }
  :where(.armgroup-theme) .container{ padding-inline:clamp(16px,4vw,30px); }
  .books-grid{ grid-template-columns:repeat(2,1fr); }
  .modal-gallery{ grid-template-columns:repeat(2,1fr); }
  .plans-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .book-spine.featured{ width:190px; height:400px; }
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{ --nav-h:66px; }
  body:where(.armgroup-theme):where(.armgroup-theme){ font-size:15px; }

  /* Titres : on évite le débordement */
  :where(.armgroup-theme) h1,.display{ word-break:break-word; hyphens:auto; }
  :where(.armgroup-theme) .hero h1,.page-hero h1{ font-size:clamp(1.9rem,8.5vw,2.7rem); line-height:1.12; }
  :where(.armgroup-theme) h2,.section-head h2{ font-size:clamp(1.5rem,6.5vw,2rem); }
  :where(.armgroup-theme) .lead{ font-size:.95rem; }

  /* Header */
  .liquid-glass-header .container.nav{ min-height:var(--nav-h); }
  :where(.armgroup-theme) .brand img{ height:34px; }
  .brand-txt strong{ font-size:.8rem; letter-spacing:.2em; }
  .brand-txt span{ font-size:.48rem; }
  .cta-glow{ display:none; }

  /* Hero */
  :where(.armgroup-theme) .hero,.page-hero{ min-height:auto; padding-top:calc(var(--nav-h) + 54px); padding-bottom:54px; }
  .hero-inner{ text-align:center; }
  :where(.armgroup-theme) .hero .btn-row,.page-hero .btn-row{ justify-content:center; }
  /* le hero s'empile : le bandeau de statistiques repasse dans le flux */
  :where(.armgroup-theme) .hero,.page-hero{
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  }
  :where(.armgroup-theme) .hero>.container,.page-hero>.container{ width:100%; max-width:100%; flex:0 0 auto; }
  .hero-meta{
    position:static; margin-top:34px; flex-direction:column;
    align-items:center; gap:0; animation:none;
  }
  .hero-stats{
    display:grid; grid-template-columns:repeat(2,1fr); gap:18px 14px;
    width:100%; text-align:center;
    padding-top:26px; border-top:1px solid var(--stroke);
  }
  .hero-stats div strong{ font-size:1.35rem; }
  .hero-stats div span{ font-size:.55rem; letter-spacing:.16em; }
  .scroll-cue,.hero-bas{ display:none; }

  /* Étagère « Star Wahd » : défilement horizontal confortable */
  .bookshelf-row{
    justify-content:flex-start;
    padding-inline:16px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px;
  }
  .book-spine{ scroll-snap-align:center; height:300px; width:50px; }
  .book-spine .sp-title{ font-size:.85rem; max-height:190px; }
  .book-spine.featured{ width:172px; height:340px; transform:translateY(-28px); }
  .sp-cover-txt{ padding:12px 12px 14px; }
  .sp-cover-txt b{ font-size:.86rem; }
  .sp-cover-txt u{ font-size:.5rem; }
  .shelf-caption{ font-size:.58rem; letter-spacing:.14em; }
  /* le survol n'existe pas au doigt : on neutralise l'effet de levée */
  @media (hover:none){
    .book-spine:not(.featured):hover{ transform:none; }
  }

  /* Grilles */
  .books-grid{ grid-template-columns:1fr; }
  .services-grid,.svc-grid,.demo-grid,.contact-grid,.founder,.avantages{ grid-template-columns:1fr!important; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic figure.w2,.mosaic figure.h2{ grid-column:auto; grid-row:auto; }
  :where(.armgroup-theme) .filters{ gap:.4rem; }
  .filter-btn{ padding:.5rem .9rem; font-size:.58rem; }

  /* Modale : plein écran */
  :where(.armgroup-theme) .modal{ padding:0; }
  .modal-box{
    max-width:100%; width:100%; max-height:100svh; height:100svh;
    border-radius:0; border-left:0; border-right:0;
  }
  .modal-hero{ height:min(40vh,260px); }
  .modal-title h3{ font-size:1.25rem; }
  .modal-body{ padding:18px 16px 46px; }
  .modal-gallery{ grid-template-columns:1fr; }
  .modal-close{ top:12px; right:12px; width:40px; height:40px; }
  .modal-sub{ font-size:.58rem; }

  /* Plans techniques : lisibles au doigt */
  .plans-grid{ grid-template-columns:1fr; }
  .plan-item img{ width:100%; height:auto; }
  .plan-item figcaption{ font-size:.62rem; padding:.5rem .7rem; }

  /* Formulaire */
  .form-wrap{ padding:20px 16px; }
  :where(.armgroup-theme) .field input,:where(.armgroup-theme) .field select,:where(.armgroup-theme) .field textarea{ font-size:16px; } /* évite le zoom iOS */

  /* Pied de page */
  .foot-grid{ grid-template-columns:1fr; gap:26px; text-align:left; }
  .foot-bottom{ flex-direction:column; gap:.5rem; font-size:.68rem; }

  /* Confort tactile : cibles d'au moins 44px */
  .nav-menu a,.filter-btn,.shelf-ctrl button,.socials a,.to-top{ min-height:44px; }
  .to-top{ right:14px; bottom:14px; }
}

/* ---------- Petits mobiles ---------- */
@media (max-width:420px){
  .mosaic{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:14px 10px; }
  .hero-stats div strong{ font-size:1.15rem; }
  .book-spine.featured{ width:158px; height:320px; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .bw-btn{ width:100%; justify-content:center; }
}

/* ---------- Écrans tactiles : pas d'effets de survol ---------- */
@media (hover:none){
  :where(.armgroup-theme) .book:hover,.book-card:hover,.univ:hover{ transform:none; }
  .nav-menu>li>a:hover{ transform:none; text-shadow:none; }
}

/* ---------- Elementor : colonnes empilées proprement ---------- */
@media (max-width:767px){
  .elementor-section .elementor-container{ flex-wrap:wrap; }
  .elementor-column{ width:100%!important; }
  .elementor-widget-html .services-grid,
  .elementor-widget-html .svc-grid,
  .elementor-widget-html .demo-grid,
  .elementor-widget-html .contact-grid,
  .elementor-widget-html .founder,
  .elementor-widget-html .avantages{ grid-template-columns:1fr!important; }
  .elementor-widget-html .reveal-compare{ aspect-ratio:4/3; }
}