/* ===============================================================
   79° — Julia Stevenson, artiste & muraliste
   Palette and type sampled from the Canva export (Home.png).
   Shared by index.html and the three gallery pages.
   =============================================================== */
/* ===================================================================
   RÉGLAGES  ·  everything you are likely to want to change lives here.
   Edit a value once and every page follows.
   To change ONE page only, use the small <style> block in that page's
   <head> — it overrides anything below, for that page alone.
   =================================================================== */
:root{

  /* --- 1. Couleurs ------------------------------------------------ */
  --blue:#1E1AD4;            /* hero, contact, quote cards           */
  --orange:#FA5A05;          /* big circles                          */
  --magenta:#B424AE;         /* small circles                        */
  --coral:#E65D4A;           /* buttons and the round arrows         */
  --ink:#22384A;             /* headings and body text on white      */
  --muted:#55697a;           /* captions under the artwork           */
  --white:#fff;
  --navy:#0d0b6b;            /* footer bar                           */
  --accent:var(--blue);      /* gallery page title band — override
                                per page to colour-code the sections */
  --coral-hover:#d24f3d;
  --blue-hover:#1713b0;
  --field-border:#c9d2da;    /* contact form inputs                  */
  --field-label:#5b6b7a;

  /* --- 2. Polices -------------------------------------------------- */
  --font-title:'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
  --font-body:'Nunito', 'Avenir Next', system-ui, sans-serif;
  /* Closest free stand-in for Halimum (paid Canva face). If Halimum.otf
     is ever added, declare an @font-face and change this one line —
     nothing else references the script family. */
  --font-script:'Allura', 'Sacramento', 'Snell Roundhand', cursive;

  /* --- 3. Tailles de texte ---------------------------------------- */
  /* clamp(minimum, scales-with-screen, maximum) */
  --text:17px;                          /* body copy                  */
  --text-line:1.6;                      /* line height                */
  --title-track:.10em;                  /* spacing of the small caps  */
  --h2:clamp(30px,3.4vw,44px);          /* A Propos · Réalisations    */
  --h3:clamp(26px,2.8vw,34px);          /* Le Grand Bleu, etc.        */
  --page-title:clamp(32px,4.4vw,54px);  /* gallery page title         */
  --hero-name:clamp(64px,8.4vw,126px);  /* “Julia Stevenson”          */
  --script-quote:clamp(32px,3.6vw,44px);/* the blue script quote      */
  --contact-script:clamp(48px,6.4vw,82px);
  --caption:15px;
  --nav-link:17px;

  /* --- 4. Largeurs et espacements ---------------------------------- */
  --maxw:1188px;             /* width of the content column          */
  --pad:24px;                /* breathing room at the page edges     */
  --gap:24px;                /* between photos in a grid             */
  --section-y:66px;          /* above each gallery                   */
  --apropos-y:78px;          /* above A Propos                       */
  --realisations-y:86px;     /* above Réalisations                   */
  --contact-y:70px;          /* white space before the blue contact  */
  --lead-gap:48px;           /* under a section's big lead photo     */
  --caption-gap:22px;        /* grid -> the caption below it         */
  --piece-gap:30px;          /* photo -> its own caption             */
  --split-gap:56px;          /* text <-> photo in the A Propos rows  */
  --split-y:64px;            /* between those rows                   */
  --quote-gap:34px;          /* around the blue quote cards          */

  /* --- 5. Photos --------------------------------------------------- */
  --radius:64px;             /* the three rounded corners            */
  --radius-sm:40px;          /* the same, on phones                  */

  /* --- 6. Barre de nav, logo, hero --------------------------------- */
  --nav-h:52px;
  --logo-h:34px;             /* logo in the navbar                   */
  --logo-h-footer:38px;      /* logo in the footer                   */
  --hero-photo:620px;        /* width of the hero photo column       */
  --hero-min:600px;          /* minimum hero height                  */
  --hero-indent:90px;        /* left indent of the hero text         */

  /* --- 7. Décor (the botanical sketches and circles) ---------------- */
  --deco-opacity:1;          /* fade every sketch back: .6, .4 …     */
  --circle-lg:400px;         /* big orange circle in the hero        */
  --circle-md:180px;         /* magenta circle beside the photo      */

  /* --- 8. Plein écran ---------------------------------------------- */
  --lb-bg:rgba(8,8,40,.95);  /* the backdrop behind an open artwork  */
  --lb-w:min(92vw,1400px);
  --lb-h:84vh;

  /* --- 9. Page de remerciement ------------------------------------- */
  --merci-script:clamp(64px,9vw,120px);   /* the “Merci !” script     */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:var(--text);
  line-height:var(--text-line);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- typography ---------- */
h1,h2,h3,.smallcaps{
  font-family:var(--font-title);
  font-variant-caps:small-caps;
  font-weight:300;
  letter-spacing:var(--title-track);
  margin:0;
}
h2.section-title{font-size:var(--h2);color:var(--ink);margin:0 0 34px}
.gallery-title{font-size:var(--h3);text-align:center;margin:0 0 34px}
.script{
  font-family:var(--font-script);font-weight:400;line-height:1.05;
  font-variant-caps:normal;letter-spacing:.01em;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--blue);
  min-height:var(--nav-h);
  display:flex;align-items:center;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.nav .logo img{height:var(--logo-h);width:auto}
.nav .logo span{
  font-family:var(--font-title);font-size:17px;letter-spacing:.06em;
  color:#fff;font-weight:600;
}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav a.link{
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.12em;font-size:var(--nav-link);font-weight:300;
  color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .2s;
}
.nav a.link:hover,.nav a.link:focus-visible,.nav a.link[aria-current="page"]{color:#fff}
section[id]{scroll-margin-top:var(--nav-h)}

/* ---------- decoration ---------- */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:var(--deco-opacity)}
.deco.multiply{mix-blend-mode:multiply}
.circle{position:absolute;border-radius:50%;pointer-events:none;z-index:0}

/* ---------- clickable artwork ---------- */
.shot{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;font:inherit;color:inherit;
}
.shot img{width:100%;transition:opacity .2s}
.shot:hover img{opacity:.9}
.shot:focus-visible{outline:3px solid var(--coral);outline-offset:4px}

/* the radius lives on the image, never on the <figure>, so captions
   underneath are not clipped by the rounded corners */
.r1 img{border-radius:0 var(--radius) var(--radius) var(--radius)}
.r2 img{border-radius:var(--radius) 0 var(--radius) var(--radius)}
.r3 img{border-radius:var(--radius) var(--radius) var(--radius) 0}
.r4 img{border-radius:var(--radius) var(--radius) 0 var(--radius)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--blue);color:#fff;overflow:hidden}
.hero-grid{
  position:relative;z-index:2;
  max-width:1366px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-photo));
  align-items:stretch;min-height:var(--hero-min);
}
.hero-copy{padding:70px 40px 60px var(--hero-indent);display:flex;flex-direction:column;justify-content:center}
.hero-kicker{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.14em;font-size:23px;font-weight:300;
}
.hero-kicker .deg{font-size:27px;letter-spacing:.02em}
.hero-kicker .rule{flex:0 0 130px;height:1px;background:rgba(255,255,255,.85)}
.hero-name{
  font-family:var(--font-script);font-variant-caps:normal;letter-spacing:.01em;
  font-size:var(--hero-name);line-height:.86;
  margin:26px 0 0 40px;font-weight:400;
}
.hero-name span{display:block}
.hero-name span:last-child{margin-left:-30px}
.btn{
  display:inline-block;
  background:var(--coral);color:#fff;text-decoration:none;
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.10em;font-size:17px;font-weight:400;
  padding:11px 28px;border-radius:999px;text-align:center;
  transition:transform .2s, background .2s;
}
.btn:hover,.btn:focus-visible{background:var(--coral-hover);transform:translateY(-2px)}
.hero-cta{margin:56px 0 0 110px;align-self:flex-start}
/* item 3 — centred in the blue panel (the column padding is
   asymmetric, so pull the box left to sit on the panel's true centre) */
.hero-tag{
  margin:52px 0 0 -50px;text-align:center;
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.15em;font-size:19px;font-weight:300;
}
.hero-photo{position:relative;padding-bottom:56px}
.hero-photo .shot,.hero-photo .shot img{height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero .c-orange{width:var(--circle-lg);height:var(--circle-lg);background:var(--orange);left:-150px;top:-72px}
/* item 1 — one magenta circle, always beside the photo, never under it */
.hero .c-magenta{
  width:var(--circle-md);height:var(--circle-md);background:var(--magenta);
  right:calc(var(--hero-photo) + 16px);bottom:96px;
}
.hero .d-palm{right:calc(var(--hero-photo) + 24px);top:78px;width:190px}
.hero .d-plant{left:-34px;bottom:56px;width:285px}

/* ---------- a propos ---------- */
.apropos{position:relative;padding:var(--apropos-y) 0 60px;overflow:hidden}
.apropos .d-left{left:0;top:120px;width:268px}
.apropos .d-left2{left:0;top:1880px;width:250px}
.apropos .d-right{right:0;top:60px;width:304px}
.lede{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:2}
.lede p{margin:0 0 22px}
.script-quote{
  font-family:var(--font-script);color:var(--blue);
  font-size:var(--script-quote);line-height:1.15;
  text-align:center;margin:34px auto;max-width:660px;
}
.figure-center{max-width:680px;margin:44px auto 0;position:relative;z-index:2}
/* item 6 — the quote cards no longer sit on top of the photos */
.quote-card{
  background:var(--blue);color:#fff;
  font-style:italic;font-weight:600;text-align:center;
  padding:22px 30px;border-radius:14px;
  max-width:430px;margin:var(--quote-gap) auto 0;position:relative;z-index:3;
  line-height:1.45;font-size:17px;
}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center;
  max-width:920px;margin:var(--split-y) auto 0;position:relative;z-index:2;
}
.split p{margin:0}
.split.reverse .txt{order:2}
.split.reverse .pic{order:1}

/* item 8 — the botanical carries on off the photo onto the white.
   Both come from the same export, so the strokes line up as long as
   the photo renders at its natural width; below 1100px the decoration
   is hidden rather than allowed to drift. */
.mur{position:relative;width:700px;max-width:100%;margin:44px auto 0;z-index:2}
.mur .shot{position:relative;z-index:2}
.mur .d-mur{left:538px;top:114px;width:516px;z-index:1}

/* ---------- réalisations ---------- */
.realisations{padding:var(--realisations-y) 0 60px;position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:#fff;
  border-radius:0 0 16px 16px;overflow:hidden;
  transition:transform .25s;
}
.card:hover,.card:focus-visible{transform:translateY(-5px)}
.card-img{aspect-ratio:376/352;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px}
.card-foot .t{
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.10em;font-size:20px;font-weight:300;line-height:1.15;
}
.card-foot .arrow{
  flex:0 0 auto;width:62px;height:38px;border-radius:999px;
  background:var(--coral);display:grid;place-items:center;
}
.card-foot .arrow svg{width:24px;height:14px;stroke:#fff;fill:none;stroke-width:1.6}
.card.blue .card-foot{background:var(--blue)}
.card.magenta .card-foot{background:var(--magenta)}
.card.orange .card-foot{background:var(--orange)}

/* ---------- galleries ---------- */
.gallery{padding:var(--section-y) 0 30px;position:relative;overflow:hidden}
.gallery.no-title{padding-top:76px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,384px));gap:44px 104px;justify-content:center}
.grid2-tight{display:grid;grid-template-columns:repeat(2,minmax(0,480px));gap:36px;justify-content:center}
.gallery figure{margin:0}
/* items 11, 14, 16 — lead photos centred, no specificity surprises */
.gallery .wide,.gallery .tall{margin-left:auto;margin-right:auto;margin-bottom:0}
.gallery .wide{max-width:764px}
.gallery .wide.xl{max-width:864px}
.gallery .tall{max-width:684px}
/* items 12, 14, 16 — even vertical rhythm under a lead photo */
.gallery .after-lead{margin-top:var(--lead-gap)}
.gallery .grid3 img,.gallery .grid2 img,.gallery .grid2-tight img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
}
.caption{margin:var(--caption-gap) 0 0;color:var(--muted);font-size:var(--caption);line-height:1.55;position:relative;z-index:2}
/* items 15, 16 — breathing room between an artwork and its own caption */
.grid2 .caption{margin-top:var(--piece-gap)}
.caption .piece{display:block;font-weight:700;font-style:italic;color:var(--ink);margin-bottom:2px}
.gallery .d-fan-l{left:0;top:24px;width:120px}
.gallery .d-giraffe{right:16px;top:250px;width:215px}
/* item 13 */
.gallery .d-ev-left{left:0;top:-60px;width:268px}
.gallery .d-ev-right{right:0;top:520px;width:81px}
/* item 14 */
.gallery .d-ju-left{left:0;top:-40px;width:330px}
.gallery .d-ju-right{right:0;top:1180px;width:156px}

/* ---------- sub-page header ---------- */
.page-hero{background:var(--accent);color:#fff;padding:54px 0 58px;position:relative;overflow:hidden}
.page-hero .c-orange{width:300px;height:300px;background:var(--orange);left:-170px;top:-70px}
.page-hero .c-magenta{width:118px;height:118px;background:var(--magenta);right:6%;bottom:18px}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumb{margin:0 0 10px;font-size:15px;letter-spacing:.04em}
.page-hero .crumb a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.page-hero .crumb a:hover{color:#fff}
.page-title{font-size:var(--page-title);margin:0}
.back-link{display:block;text-align:center;margin:10px 0 76px;position:relative;z-index:2}
.back-link a{
  font-family:var(--font-title);font-variant-caps:small-caps;letter-spacing:.10em;
  font-size:18px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(34,56,74,.35);padding-bottom:2px;
}
.back-link a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- contact ---------- */
.contact{position:relative;background:var(--blue);color:#fff;padding:0 0 84px;overflow:hidden;margin-top:var(--contact-y)}
.contact .c-orange{width:320px;height:320px;background:var(--orange);left:-160px;top:-40px;z-index:1}
.contact .label{
  position:relative;z-index:3;margin:0;
  font-family:var(--font-title);font-variant-caps:small-caps;
  letter-spacing:.12em;font-size:30px;font-weight:300;
  padding:52px 0 0 32px;
}
.contact .script-big{
  font-family:var(--font-script);text-align:center;
  font-size:var(--contact-script);line-height:1;
  margin:12px auto 44px;position:relative;z-index:3;max-width:760px;
}
.contact-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-grid p{margin:0;max-width:390px}
/* item 17 — no clipped magenta bar at the top right; the sketches sit
   fully inside the section instead of being sliced by its edges */
.contact .c-magenta-2{width:150px;height:150px;background:var(--magenta);right:40px;bottom:24px;z-index:2}
.contact .d-starfish{left:0;bottom:0;width:430px}
.contact .d-coral{right:24px;top:26px;width:386px}

.form-card{background:#fff;color:var(--ink);padding:26px 28px 30px;border-radius:4px}
.form-card label{display:block;font-size:13px;color:var(--field-label);margin:0 0 6px}
.form-card .field{margin:0 0 20px}
.form-card input,.form-card textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--field-border);border-radius:3px;padding:9px 10px;background:#fff;
}
.form-card textarea{min-height:96px;resize:vertical}
.form-card input:focus,.form-card textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form-card button{
  width:100%;border:0;cursor:pointer;background:var(--blue);color:#fff;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  padding:11px 16px;border-radius:3px;transition:background .2s;
}
.form-card button:hover{background:var(--blue-hover)}
.form-note{margin:14px 0 0;font-size:12px;color:#8b98a4;text-align:center}

/* ---------- merci (form success page) ---------- */
.merci{
  position:relative;background:var(--blue);color:#fff;overflow:hidden;
  min-height:calc(100vh - var(--nav-h) - 92px);
  display:grid;align-items:center;padding:90px 0 110px;text-align:center;
}
.merci .wrap{position:relative;z-index:3}
.merci .c-orange{
  width:var(--circle-lg);height:var(--circle-lg);background:var(--orange);
  left:-190px;top:-120px;
}
.merci .c-magenta{
  width:var(--circle-md);height:var(--circle-md);background:var(--magenta);
  right:-50px;bottom:-40px;
}
.merci .d-starfish{left:-60px;bottom:-40px;width:430px}
.merci .d-coral{right:0;top:20px;width:386px}
.merci-script{
  font-size:var(--merci-script);line-height:1;margin:0;
  font-variant-caps:normal;letter-spacing:.01em;
}
.merci-lead{
  margin:26px auto 0;max-width:520px;font-size:19px;line-height:1.55;
  color:rgba(255,255,255,.92);
}
.merci-actions{margin:40px 0 0}
.merci-note{margin:34px 0 0;font-size:15px;color:rgba(255,255,255,.72)}
.merci-note a{border-bottom:1px solid rgba(255,255,255,.45);text-decoration:none}
.merci-note a:hover{color:#fff}
@media (max-width:860px){
  .merci{padding:64px 0 76px;min-height:0}
  .merci .d-starfish,.merci .d-coral,.merci .c-magenta{display:none}
  .merci-lead{font-size:17px}
}

/* ---------- footer ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.75);padding:26px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .f-brand{display:flex;align-items:center;gap:14px}
footer .f-brand img{height:var(--logo-h-footer);width:auto}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.insta{display:inline-flex;align-items:center;gap:8px}
.insta svg{width:18px;height:18px;fill:currentColor}

:where(a,button,input,textarea):focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------- lightbox (item 10) ---------- */
.lb{
  position:fixed;inset:0;z-index:200;
  background:var(--lb-bg);
  display:grid;place-items:center;padding:56px 64px;
}
.lb[hidden]{display:none}
/* the figure owns the box; object-fit lets a small extraction scale up
   to fill it without distorting — swap in the hi-res originals and the
   same rule shows them at full quality */
.lb figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;
  width:var(--lb-w);height:var(--lb-h);
}
.lb img{
  flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain;
  border-radius:6px;
}
.lb figcaption{
  flex:0 0 auto;
  color:rgba(255,255,255,.88);font-size:15px;line-height:1.5;text-align:center;
  max-width:760px;
}
.lb figcaption .piece{display:block;font-weight:700;font-style:italic;color:#fff}
.lb button{
  position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;border-radius:999px;display:grid;place-items:center;
  transition:background .2s;font-family:var(--font-body);
}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb-close{top:20px;right:20px;width:46px;height:46px;font-size:22px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1;padding-bottom:5px}
.lb-prev{left:16px}
.lb-next{right:16px}
body.lb-open{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the tokens are simply restated for narrower screens, so a value you
     override in a page's <style> block still wins at every size */
  :root{
    --hero-photo:44%;
    --hero-indent:50px;
  }
  .hero-copy{padding:60px 30px 50px var(--hero-indent)}
  .hero-tag{margin-left:-20px}
  .hero .d-palm{display:none}
  .apropos .d-left,.apropos .d-left2,.apropos .d-right,
  .gallery .d-giraffe,.gallery .d-ev-right,.gallery .d-ju-right,
  .mur .d-mur{display:none}
  .grid2{gap:34px 48px}
}
@media (max-width:860px){
  :root{
    --text:16px;
    --nav-link:15px;
    --logo-h:30px;
    --lead-gap:32px;
    --hero-indent:26px;
  }
  .nav ul{gap:20px}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:54px 26px 40px;text-align:center}
  .hero-kicker{justify-content:center}
  .hero-kicker .rule{flex-basis:70px}
  .hero-name{margin:22px 0 0}
  .hero-tag{margin-left:0}
  .hero-name span:last-child{margin-left:0}
  .hero-cta{margin:34px auto 0;align-self:center}
  /* Mobile: let the hero image keep its natural proportions instead of
     forcing it into a fixed-height box. This prevents portrait artwork
     from being zoomed and cropped by object-fit: cover. */
  .hero-photo{padding:0;height:auto}
  .hero-photo .shot,.hero-photo .shot img{height:auto}
  .hero-photo img{width:100%;height:auto;object-fit:contain;object-position:center;display:block}

  /* Mobile galleries should show the complete artwork. Desktop keeps the
     square editorial crop, while smaller screens use the image's natural
     aspect ratio so important details are not cut off. */
  .gallery .grid3 img,.gallery .grid2 img,.gallery .grid2-tight img{
    height:auto;aspect-ratio:auto;object-fit:contain;display:block;
  }

  .hero .c-magenta,.hero .d-plant{display:none}
  .split,.split.reverse{grid-template-columns:1fr;gap:26px;margin-top:46px}
  .split.reverse .txt,.split.reverse .pic{order:initial}
  .cards{grid-template-columns:1fr;gap:20px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid2-tight{grid-template-columns:minmax(0,420px);gap:30px}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .contact-grid p{max-width:none}
  .contact .d-starfish,.contact .d-coral,.contact .c-magenta-2,
  .gallery .d-fan-l,.gallery .d-ev-left,.gallery .d-ju-left{display:none}
  .lb{padding:44px 16px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
}
@media (max-width:560px){
  :root{--hero-name:62px}
  .grid3{grid-template-columns:1fr}
  .r1 img,.r2 img,.r3 img,.r4 img{border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm)}
  .nav{min-height:0;padding:8px 0}
  .nav .wrap{flex-wrap:wrap;justify-content:center;gap:6px 16px;padding:0 14px}
  .nav ul{gap:16px;flex-wrap:wrap;justify-content:center}
  .nav a.link{font-size:14px;letter-spacing:.08em}
  .hero-copy{padding:40px 20px 34px}
  .hero-kicker{font-size:16px;letter-spacing:.10em;gap:8px}
  .hero-kicker .deg{font-size:19px}
  .hero-kicker .rule{display:none}
  .hero-tag{font-size:16px;letter-spacing:.12em;margin-top:26px}
  .btn{font-size:15px;padding:10px 22px}
  .contact .label{padding-left:0;text-align:center}
  .contact .c-orange{left:-190px}
  .quote-card{max-width:none}
  footer .wrap{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ================================================================
   MOBILE IMAGE FIX — all artwork/photos
   Keep the complete image visible and preserve its natural ratio.
   ================================================================ */
@media (max-width: 860px){

  /* General artwork */
  .shot img{
    width:100%;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    display:block;
  }

  /* A Propos images */
  .figure-center .shot img,
  .split .pic .shot img,
  .mur .shot img{
    width:100%;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }

  /* Réalisations cards */
  .card-img{
    height:auto !important;
    aspect-ratio:auto !important;
    overflow:hidden;
  }

  .card-img img{
    width:100%;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    display:block;
  }

  /* Gallery lead/wide images */
  .gallery .wide .shot img,
  .gallery .grid3 .shot img,
  .gallery .grid2 .shot img,
  .gallery .grid2-tight .shot img{
    width:100%;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    display:block;
  }
}

@media (max-width:560px){

  /* Make every actual artwork/photo use its complete natural shape */
  .shot img,
  .card-img img{
    width:100%;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }

  /* Don't let the card container create a stretched/cropped image */
  .card-img{
    height:auto !important;
    aspect-ratio:auto !important;
  }

  /* Keep the rounded corners on the actual image */
  .r1 img,
  .r2 img,
  .r3 img,
  .r4 img{
    height:auto !important;
  }
}

