/* V7 — polices officielles fournies par A+B */
@font-face{font-family:'Pangram';src:url('fonts/Pangram-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Pangram';src:url('fonts/Pangram-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Hairline.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-HairlineItalic.ttf') format('truetype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fonts/Lato-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}

:root{
  --side:272px;
  --blue:#0aa8db;
  --blue2:#12a9da;
  --yellow:#ffd300;
  --ink:#262626;
  --muted:#808080;
  --line:#ececec;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}
body{padding-left:var(--side)}
a{color:inherit;text-decoration:none}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--side);background:#fff;
  padding:38px 42px 28px;z-index:50;border-right:1px solid #f4f4f4;overflow-y:auto
}
.logo img{display:block;width:165px;height:auto;margin:0 0 36px}
.sidebar nav{display:flex;flex-direction:column;gap:18px;margin-bottom:82px}
.sidebar nav a{font-size:12px;letter-spacing:2.2px;width:max-content;padding-bottom:5px}
.sidebar nav a.active{border-bottom:1px solid #333}
.sidebar-bottom{font-family:Georgia,serif;font-size:14px;color:#555}
.social{font-family:Arial,sans-serif;margin-bottom:18px}
.separator{height:1px;background:var(--line);margin:0 0 28px}
.stay{margin:0 0 26px}
.stay label{display:block;font-size:16px;margin-bottom:18px}
.stay input{width:100%;border:0;border-bottom:1px solid var(--line);padding:0 0 10px;background:transparent;font:13px Georgia,serif;outline:none}
.legal{font-size:12px;line-height:1.75;font-style:italic}
.legal-en{margin-top:12px}
.content{min-height:100vh;width:100%;position:relative}
.home-slider{height:100vh;min-height:100vh;position:relative;overflow:hidden;background:var(--blue)}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide-prev,.slide-next{position:absolute;top:50%;transform:translateY(-50%);border:0;background:transparent;color:white;font-size:50px;font-weight:200;cursor:pointer;z-index:3}
.slide-prev{left:22px}.slide-next{right:22px}
.slide-dots{position:absolute;right:24px;bottom:22px;display:flex;gap:7px;z-index:3}
.slide-dots button{width:8px;height:8px;border-radius:50%;border:1px solid white;background:transparent;padding:0}
.slide-dots button.active{background:var(--yellow);border-color:var(--yellow)}
.video-panel{background:var(--blue2);min-height:38vh;display:flex;align-items:center;justify-content:center;position:relative;padding:34px}
.blue-decoration{position:absolute;left:8%;bottom:18%;color:#fff;opacity:.8;font-size:25px;letter-spacing:8px}
.video-wrap{width:min(800px,78vw);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.video-wrap video{display:block;width:100%;background:#111}
.pale{background:#f5f8f8}
.top-blue{height:115px;background:var(--blue2)}
.about{max-width:1050px;margin:0 auto;padding:78px 70px 90px}
.about h1{font-family:Georgia,serif;font-weight:400;font-size:22px;letter-spacing:1px;margin:0 0 42px}
.about-layout{display:grid;grid-template-columns:240px 1fr;gap:45px}
.about-tabs{display:flex;flex-direction:column;align-items:flex-end}
.about-tabs button{background:none;border:0;padding:15px 0;font-size:10px;letter-spacing:1.3px;color:#333;cursor:default}
.about-tabs button.active{border-right:2px solid #33c3e9;padding-right:28px}
.about-text{font-family:Georgia,serif;font-size:14px;line-height:1.7;color:#555;padding-top:7px}
.about h2{font-family:Georgia,serif;font-size:15px;font-weight:400;text-align:center;margin:52px 0 34px;text-decoration:underline;text-underline-offset:8px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 60px;text-align:center;font-size:10px;letter-spacing:.7px}
.services span{display:block;font-size:30px;margin-bottom:10px}
.white{background:white}
.portfolio-grid{max-width:980px;margin:0 auto;padding:55px 35px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:62px 24px}
.portfolio-card{cursor:pointer}
.portfolio-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px;display:block}
.portfolio-card h3{font:16px Georgia,serif;font-weight:400;margin:13px 8px 0}
.project-modal{position:fixed;inset:0 0 0 var(--side);background:white;z-index:90;display:none;padding:42px 60px}
.project-modal.open{display:grid;grid-template-columns:330px 1fr;gap:55px;align-items:center}
.modal-close{position:absolute;right:24px;top:15px;background:none;border:0;font-size:38px;cursor:pointer}
.project-info h1{font:24px Georgia,serif;font-weight:400;margin:0 0 38px}
.project-info dl{font-size:12px}
.project-info dt{color:#777;margin-top:17px}
.project-info dd{margin:4px 0 0;font-family:Georgia,serif}
.project-gallery{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px}
.project-gallery img{max-width:100%;max-height:75vh;margin:auto;display:block}
.gallery-prev,.gallery-next{border:0;background:none;font-size:44px;cursor:pointer;color:#777}
.contact-page{background:var(--blue2);min-height:100vh;position:relative;overflow:hidden}
.contact-visual{position:absolute;inset:0}
.contact-visual img{width:100%;height:100%;object-fit:cover;object-position:left center}
.contact-card{position:absolute;left:51%;top:16%;color:white;z-index:2;font-size:16px;line-height:1.7}
.contact-card h1{font-size:18px;letter-spacing:1.8px;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:8px;margin-bottom:42px}
.contact-card a{color:white}
.contact-address{margin-top:48px;font-size:13px}
.legal-page{max-width:850px;padding:90px 80px}
.mobile-menu{display:none}
@media(max-width:900px){
  :root{--side:0px}
  body{padding-left:0}
  .sidebar{transform:translateX(-100%);transition:transform .25s;width:275px}
  .sidebar.open{transform:translateX(0)}
  .mobile-menu{display:block;position:fixed;right:18px;top:18px;z-index:120;border:0;background:var(--yellow);width:44px;height:44px;border-radius:50%;font-size:21px}
  .home-slider{height:100vh;min-height:100vh}
  .video-panel{min-height:45vh}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);padding-top:80px}
  .project-modal{inset:0;padding:70px 25px 30px;overflow:auto}
  .project-modal.open{display:block}
  .project-info{margin-bottom:30px}
  .contact-card{left:45%;top:20%;font-size:14px}
}
@media(max-width:560px){
  .portfolio-grid{grid-template-columns:1fr}
  .about{padding:55px 24px}
  .about-layout{grid-template-columns:1fr}
  .about-tabs{align-items:flex-start}
  .about-tabs button.active{border-right:0;border-left:2px solid #33c3e9;padding-left:14px}
  .services{grid-template-columns:repeat(2,1fr)}
  .contact-visual{opacity:.62}
  .contact-card{left:24px;right:24px;top:22%;text-shadow:0 1px 2px rgba(0,0,0,.25)}
}


/* V4 — vidéo en tête de la page À propos, volontairement plus basse que l'écran */
.about-video{
  width:100%;
  height:70vh;
  min-height:500px;
  max-height:760px;
  background:#0aa8db;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 5%;
}
.about-video video{
  display:block;
  width:min(1120px, 88%);
  max-width:100%;
  max-height:100%;
  aspect-ratio:16/9;
  background:#000;
  object-fit:contain;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.about-panel{display:none}
.about-panel.active{display:block}
.about-tabs button{transition:opacity .2s ease}
.about-tabs button:not(.active){opacity:.72}
@media(max-width:900px){
  .about-video{
    height:58vh;
    min-height:360px;
    padding:70px 18px 20px;
  }
  .about-video video{width:100%}
}
@media(max-width:560px){
  .about-video{
    height:auto;
    min-height:0;
    padding:78px 12px 24px;
  }
}
.project-gallery{position:relative}.project-gallery img{max-width:100%;max-height:82vh;object-fit:contain}.gallery-count{position:absolute;right:18px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;padding:5px 9px;font-size:12px}.portfolio-card img{aspect-ratio:4/3;object-fit:cover}
/* V6 — responsive bilingual rebuild */
html,body{font-family:Lato,"Segoe UI",Arial,sans-serif}.sidebar-bottom,.about h1,.about-text,.portfolio-card h3,.project-info h1{font-family:Pangram,Lato,"Segoe UI",Arial,sans-serif}.lang{display:flex;gap:7px;align-items:center;margin:0 0 24px;font-size:11px}.lang button{border:0;background:none;padding:0;cursor:pointer;color:#888}.lang button.active{color:#111;font-weight:700}.email-row{display:flex;border-bottom:1px solid var(--line)}.email-row input{border:0;flex:1}.email-row button{border:0;background:none;font-size:20px;cursor:pointer}.form-status{display:block;margin-top:8px;min-height:16px}.en{display:none}html[data-lang="en"] .fr{display:none!important}html[data-lang="en"] .en{display:block!important}
.hero-copy{position:absolute;z-index:4;color:#fff;left:48%;top:35%;width:44%;font-size:15px;line-height:1.25}.hero-copy h1{font-size:30px;font-weight:400;margin:0 0 14px}.hero-copy h1 span{color:var(--yellow)}.hero-copy-2{top:41%}.hero-copy .more{display:inline-block;border:1px solid #fff;padding:7px 11px;margin:28px 0 0 120px;font-weight:700}.hero-motif{position:absolute;z-index:2;left:0;bottom:0;width:56%;height:auto;pointer-events:none}.slide{background-size:cover;background-position:center}.contact-card{left:46%;top:9%;width:390px}.contact-card h1{border-top:1px solid rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.75);width:max-content;padding:7px 0;margin:0 0 42px;font-size:27px}.contact-line{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:20px;margin:14px 0;font-size:26px}.contact-line img{width:66px;height:66px;object-fit:contain}.contact-rule{height:1px;background:rgba(255,255,255,.7);margin:28px 0 36px 90px}.contact-card address{font-style:normal;font-size:20px;line-height:1.3;margin-left:90px}.legal-page h1{font-weight:400;letter-spacing:1px}.legal-page h2{font-size:15px;margin-top:35px}.legal-page p{line-height:1.7}.legal-page a{text-decoration:underline}
@media(max-width:900px){.hero-copy{left:43%;top:30%;width:50%;font-size:14px}.hero-copy h1{font-size:25px}.hero-copy .more{margin-left:0}.hero-motif{width:70%}.contact-card{left:39%;right:25px;width:auto;top:15%}.contact-line{font-size:20px;grid-template-columns:58px 1fr}.contact-line img{width:54px;height:54px}.contact-card address{font-size:17px}.legal-page{padding:90px 30px 50px}}
@media(max-width:560px){.slide{background-size:auto 100%;background-position:38% center}.hero-motif{width:105%;left:-20%;opacity:.95}.hero-copy{left:24px;right:24px;top:auto;bottom:12%;width:auto;background:rgba(10,168,219,.74);padding:18px}.hero-copy h1{font-size:24px}.hero-copy p{font-size:14px}.hero-copy br+br{display:none}.hero-copy .more{margin:14px 0 0}.contact-visual img{object-position:24% center}.contact-card{left:22px;right:22px;top:16%;background:rgba(10,168,219,.70);padding:18px}.contact-card h1{font-size:21px}.contact-line{font-size:16px;grid-template-columns:46px 1fr;gap:12px}.contact-line img{width:44px;height:44px}.contact-rule{margin-left:58px}.contact-card address{margin-left:58px;font-size:15px}}

/* V8 corrections */
@media(min-width:901px){
.slide{background-position:left center;background-size:cover}
.hero-motif{z-index:3;left:-1.5%;width:57%}
.hero-copy{z-index:5}
}
.services b{font:inherit;font-weight:inherit}

/* Version définitive — accueil : visuels volontairement décalés vers la gauche
   afin de conserver une zone bleue nette sous les textes. */
@media(min-width:901px){
  .home-slider .slide{background-position:calc(50% - 8vw) center;background-color:var(--blue);background-repeat:no-repeat}
  .hero-copy{left:50%;width:43%}
  .hero-motif{left:-2.5%;width:58%;z-index:4}
  .hero-copy{z-index:5}
}
@media(min-width:901px) and (max-width:1250px){
  .home-slider .slide{background-position:calc(50% - 10vw) center}
  .hero-copy{left:52%;width:43%}
}

/* V9 — corrections finales marketing */
:root{--ab-blue:#39bafb}
.about,.about-text,.about h1,.about h2,.about-panel,.about-tabs{font-family:Lato,"Segoe UI",Arial,sans-serif!important}
.portfolio-card h3{color:#39bafb;font-family:Pangram,Lato,"Segoe UI",Arial,sans-serif}
@media(min-width:901px){.home-slider .slide{background-size:105% auto;background-position:35% center}.hero-copy{left:52%;width:42%}}


/* V11 FINAL — corrections marketing, mobile, galerie et SEO visuel */
:root{--ab-blue:#39bafb;--blue:#39bafb;--blue2:#39bafb}
html,body{font-family:Lato,"Segoe UI",Arial,sans-serif}
.logo img{width:182px;max-width:100%;margin-left:-6px}
.about,.about-text,.about h1,.about h2,.about-panel,.about-tabs,.about-tabs button{font-family:Lato,"Segoe UI",Arial,sans-serif!important}
.about h2{display:table;margin:52px auto 34px;text-decoration:none;background:linear-gradient(transparent 54%,#ffd300 54%,#ffd300 91%,transparent 91%);padding:0 5px}
.services div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:125px}
.services img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 12px}
.services b{font-family:Lato,"Segoe UI",Arial,sans-serif;font-size:10px;letter-spacing:.7px;font-weight:700}
.portfolio-card h3{color:#111!important;font-family:Pangram,Lato,"Segoe UI",Arial,sans-serif!important}
.project-info h1{color:#39bafb;font-family:Pangram,Lato,"Segoe UI",Arial,sans-serif!important}
.project-info dt,.project-info dd{font-family:Lato,"Segoe UI",Arial,sans-serif!important}
.project-info dt{text-transform:none}
.project-gallery #p-image{cursor:zoom-in}
.contact-email{white-space:nowrap}

/* Visionneuse plein écran */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:220;display:none;align-items:center;justify-content:center;padding:24px 70px}
.lightbox.open{display:flex}.lightbox img{max-width:100%;max-height:94vh;object-fit:contain;touch-action:pan-y}
.lightbox-close{position:absolute;right:22px;top:16px;width:48px;height:48px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;cursor:pointer;border-radius:50%}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#fff;font-size:58px;cursor:pointer;padding:18px}
.lightbox-prev{left:10px}.lightbox-next{right:10px}.lightbox-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;background:rgba(0,0,0,.35);padding:5px 9px}
@media(max-width:900px){
  .mobile-menu{z-index:150}
  .project-modal{z-index:130;padding-top:82px}
  .project-modal .modal-close{z-index:2;left:18px;right:auto;top:16px;width:46px;height:46px;background:#fff;border:1px solid #ddd;border-radius:50%;line-height:38px}
  .project-gallery{grid-template-columns:36px minmax(0,1fr) 36px}
  .project-gallery img{max-height:60vh}
  .lightbox{padding:65px 10px 45px}
  .lightbox-close{right:14px;top:12px}
  .lightbox-prev,.lightbox-next{font-size:42px;padding:12px;background:rgba(0,0,0,.18)}
}
@media(max-width:560px){
  .logo img{width:178px}
  .services{gap:28px 30px}
  .services img{width:64px;height:64px}
  .project-info{margin-bottom:18px}
  .project-info h1{font-size:22px;margin-bottom:18px}
  .project-info dl{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;margin-bottom:14px}
  .project-info dt{margin-top:5px}.project-info dd{margin-top:5px}
  .project-gallery img{max-height:52vh}
  .contact-line{grid-template-columns:42px minmax(0,1fr);gap:9px}
  .contact-line .contact-email{font-size:clamp(11px,3.5vw,16px);letter-spacing:-.15px}
}