/* =====================================================================================
   Accueil, section « Illustration et graphisme » (#graphic), v4 « le souffle » : les œuvres encadrées
   côte à côte, suspendues dans l'air ; elles se balancent un instant quand on fait défiler (variante A4 choisie
   par le client le 16/09). Chargé UNIQUEMENT par les 4 accueils, avec assets/illustration-accueil-v5.js.
   Généré par docs/generateur/illustration_accueil.py : ne pas éditer à la main.
   - hauteur selon le format (--k), largeur selon le ratio (--r), jamais plus large que le déroulé ;
   - balancement (--tilt, posé par le script selon la vitesse du défilement), halo chaud sous chaque œuvre ;
   - les œuvres entières restent nettes, l'œuvre coupée par le bord passe sous un voile blanc
     (--ill-fl / --ill-fr posées par le script) ; flèches rondes discrètes sur ordinateur.
   Mobile d'abord ; ordinateur dans @media (min-width:720px).
   ===================================================================================== */

@property --ill-fl{syntax:'<length>';inherits:false;initial-value:0px}
@property --ill-fr{syntax:'<length>';inherits:false;initial-value:0px}

/* ---------- la carte photo ---------- */
body.page-home #mainContent #graphic .media-card{height:auto!important;min-height:0!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
body.page-home #mainContent #graphic .section-layout > *{min-width:0}
body.page-home #mainContent #graphic .graphic-lead{flex:none}
body.page-home #mainContent #graphic .ga-r0{--r:0.7000;--k:1}
body.page-home #mainContent #graphic .ga-r1{--r:1.0000;--k:0.9}
body.page-home #mainContent #graphic .ga-r2{--r:0.7556;--k:1}
body.page-home #mainContent #graphic .ga-r3{--r:0.9958;--k:0.9}
body.page-home #mainContent #graphic .ga-r4{--r:1.1667;--k:0.9}
body.page-home #mainContent #graphic .ga-r5{--r:0.7793;--k:1}
body.page-home #mainContent #graphic .ga-r6{--r:0.8174;--k:1}
body.page-home #mainContent #graphic .ga-r7{--r:1.6623;--k:0.8}
body.page-home #mainContent #graphic .ga-r8{--r:2.2378;--k:0.8}
body.page-home #mainContent #graphic .ga-r9{--r:1.5846;--k:0.8}
body.page-home #mainContent #graphic .ga-r10{--r:1.2902;--k:0.8}
body.page-home #mainContent #graphic .ill-roll{--pad:20px;--gap:22px;--frame:7px;--pt:18px;--pb:14px;--sh:440px;--maxw:calc(100cqw - 41px);display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-height:0;min-width:0}
body.page-home #mainContent #graphic .ill-roll img{max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;border-radius:0!important;box-shadow:none!important}

/* ---------- le déroulé : fond blanc, œuvres côte à côte, suspendues ---------- */
body.page-home #mainContent #graphic .ill-view{position:relative;min-width:0;margin-inline:-20px;container-type:inline-size}
body.page-home #mainContent #graphic .ill-track{--ill-fl:0px;--ill-fr:48px;--tilt:0deg;position:relative;display:flex;align-items:center;gap:var(--gap);padding:var(--pt) var(--pad) var(--pb);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 14px,rgba(0,0,0,.5) max(14px,calc(var(--ill-fl) - 18px)),#000 var(--ill-fl),#000 calc(100% - var(--ill-fr)),rgba(0,0,0,.5) calc(100% - max(14px,calc(var(--ill-fr) - 18px))),transparent calc(100% - 14px));
  mask-image:linear-gradient(90deg,transparent 0,transparent 14px,rgba(0,0,0,.5) max(14px,calc(var(--ill-fl) - 18px)),#000 var(--ill-fl),#000 calc(100% - var(--ill-fr)),rgba(0,0,0,.5) calc(100% - max(14px,calc(var(--ill-fr) - 18px))),transparent calc(100% - 14px));
}
body.page-home #mainContent #graphic .ill-track.is-ready{transition:--ill-fl .35s ease,--ill-fr .35s ease}
body.page-home #mainContent #graphic .ill-track::-webkit-scrollbar{display:none}
body.page-home #mainContent #graphic .ill-item{--h:min(calc(var(--sh) * var(--k)),calc((var(--maxw) - 14px) / var(--r) + 14px));position:relative;flex:none;width:calc((var(--h) - 14px) * var(--r) + 14px);height:var(--h);margin:0;scroll-snap-align:start}
/* le souffle : l'œuvre, suspendue au-dessus d'elle, se balance quand on fait défiler puis revient à l'équilibre */
body.page-home #mainContent #graphic .ga-float{height:100%;transform:rotate(var(--tilt));transform-origin:50% -60px;transition:transform 1.25s cubic-bezier(.22,1.65,.42,1)}

/* ---------- les cadres : noir, chêne, ivoire, noyer ---------- */
body.page-home #mainContent #graphic .ga-art{box-sizing:border-box;width:100%;height:100%;padding:var(--frame);background:#171412;box-shadow:0 1px 2px rgba(30,20,10,.10),0 10px 22px -18px rgba(30,20,10,.35)}
body.page-home #mainContent #graphic .ga-f1 .ga-art{background:linear-gradient(135deg,#c9a06a,#a97b45 55%,#cfa774)}
body.page-home #mainContent #graphic .ga-f2 .ga-art{background:#f3ece1;box-shadow:inset 0 0 0 1px rgba(120,90,60,.22),0 1px 2px rgba(30,20,10,.10),0 10px 22px -18px rgba(30,20,10,.35)}
body.page-home #mainContent #graphic .ga-f3 .ga-art{background:linear-gradient(135deg,#6b4630,#4b2f1f 60%,#6e4a33)}
body.page-home #mainContent #graphic .ga-art img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff}

/* ---------- les vignettes sous le déroulé (comme les diapos), l'active est cerclée ---------- */
body.page-home #mainContent #graphic .ill-thumbs{position:relative;min-width:0;margin-top:6px}
body.page-home #mainContent #graphic .ill-thumbs-in{display:flex;justify-content:safe center;gap:10px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:6px 4px 10px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
body.page-home #mainContent #graphic .ill-thumbs-in::-webkit-scrollbar{display:none}
body.page-home #mainContent #graphic .ill-thumb{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 auto;width:56px;height:56px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#efe5d8;cursor:pointer;opacity:.55;scroll-snap-align:center;transition:opacity .2s ease,box-shadow .2s ease}
body.page-home #mainContent #graphic .ill-thumb img{display:block;width:100%!important;height:100%!important;object-fit:cover!important}
body.page-home #mainContent #graphic .ill-thumb.is-active{opacity:1;box-shadow:0 0 0 2px #fffaf2,0 0 0 4px #a8825f}
body.page-home #mainContent #graphic .ill-thumb:focus-visible{outline:3px solid rgba(155,107,53,.85);outline-offset:3px}

/* ---------- les flèches, rondes et discrètes, posées sur le voile ---------- */
body.page-home #mainContent #graphic .ill-arrow{-webkit-appearance:none;appearance:none;position:absolute;z-index:2;top:calc(50% - (var(--pb) - var(--pt)) / 2);transform:translateY(-50%);display:inline-grid;place-items:center;width:40px;height:40px;min-width:0;min-height:0;margin:0;padding:0 0 3px;border-radius:50%;border:1px solid rgba(120,90,60,.16);background:rgba(255,255,255,.86);color:#3a2e25;font:400 23px/1 inherit;letter-spacing:0;text-transform:none;box-shadow:0 6px 18px -8px rgba(40,28,18,.3);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s ease,opacity .25s ease}
body.page-home #mainContent #graphic .ill-prev{left:8px}
body.page-home #mainContent #graphic .ill-next{right:8px}
body.page-home #mainContent #graphic .ill-arrow:hover{background:#fff}
body.page-home #mainContent #graphic .ill-arrow:disabled{opacity:0;pointer-events:none}

/* ---------- clavier ---------- */
body.page-home #mainContent #graphic .ill-track:focus-visible{outline:3px solid rgba(155,107,53,.85);outline-offset:-3px}
body.page-home #mainContent #graphic .ill-arrow:focus-visible{outline:3px solid rgba(155,107,53,.85);outline-offset:3px}

/* téléphone tactile : on fait glisser au doigt, les flèches se retirent */
@media (hover:none) and (max-width:719px){
  body.page-home #mainContent #graphic .ill-arrow{display:none}
}

/* ---------- ordinateur ---------- */
@media (min-width:720px){
  body.page-home #mainContent #graphic .ill-thumb{width:64px;height:64px}
  body.page-home #mainContent #graphic .ill-roll{--pad:52px;--gap:44px;--pt:22px;--pb:18px;--sh:min(452px,calc(100vh - 400px));--maxw:calc(100cqw - 2 * var(--pad))}
}

@media (prefers-reduced-motion:reduce){
  body.page-home #mainContent #graphic .ga-float{transform:none;transition:none}
  body.page-home #mainContent #graphic .ill-track.is-ready,
  body.page-home #mainContent #graphic .ill-arrow{transition:none}
}