:root{
  --navy:#041a2d;--navy2:#062842;--gold:#f1bd3d;--gold2:#ffd45d;
  --white:#f8f8f6;--line:rgba(241,189,61,.95);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#031728;color:var(--white);font-family:Arial,Helvetica,sans-serif}
.site{
  min-height:100svh;display:flex;flex-direction:column;
  background-image:linear-gradient(90deg,rgba(1,16,30,.28),rgba(1,16,30,.02)),url("fond-accueil.png");
  background-size:cover;background-position:center;background-attachment:fixed;
}
.header{
  min-height:86px;padding:10px clamp(24px,4.5vw,72px);display:flex;align-items:center;gap:26px;
  position:relative;z-index:20;background:rgba(2,20,37,.58);backdrop-filter:blur(5px);
  border-bottom:1px solid rgba(255,255,255,.12)
}
.logo{text-decoration:none;white-space:nowrap;line-height:.8}
.logo-alpi,.logo-breizh{font:italic 39px Georgia,serif}.logo-alpi{color:#fff}.logo-breizh{color:var(--gold2);margin-left:7px}
.logo-group{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:10px;font-weight:900;letter-spacing:5px}
.logo-group i,.hero-group i{display:block;height:2px;background:var(--gold);width:47px}
.main-nav{margin-left:auto;display:flex;gap:clamp(18px,2vw,34px)}
.main-nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:600}.main-nav a:hover{color:var(--gold2)}
.header-actions{display:flex;gap:9px;align-items:center}
.login-button,.menu-button{border:1px solid var(--gold);background:rgba(2,25,44,.38);color:#fff;border-radius:9px;height:44px}
.login-button{padding:0 15px;display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700}.user-icon{color:var(--gold2);font-size:20px}
.menu-button{width:44px;color:var(--gold2);font-size:21px;cursor:pointer}
.mobile-menu{position:absolute;right:clamp(24px,4.5vw,72px);top:72px;width:270px;background:#061f35;border:1px solid var(--gold);border-radius:10px;padding:9px;box-shadow:0 18px 40px #0008}
.mobile-menu a{display:block;color:#fff;text-decoration:none;padding:11px;border-radius:7px}.mobile-menu a:hover{background:#ffffff0d;color:var(--gold2)}
main{flex:1}
.hero{min-height:375px;padding:50px clamp(24px,7vw,110px) 20px;display:flex;align-items:flex-start}
.hero-copy{width:min(650px,48vw);text-align:center;text-shadow:0 3px 12px #000c}
.eyebrow{font-size:16px;font-weight:900;letter-spacing:2.2px;color:#ffd51e;margin-bottom:9px}
.welcome{font:bold italic clamp(38px,4vw,57px) Georgia,serif;line-height:1;color:#fff}
.hero-brand{display:flex;justify-content:center;align-items:baseline;gap:10px;line-height:.95;margin-top:2px}
.hero-alpi,.hero-breizh{font:italic clamp(58px,6.6vw,94px) Georgia,serif}.hero-alpi{color:#fff}.hero-breizh{color:var(--gold2)}
.hero-group{display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:18px;font-weight:900;letter-spacing:8px;margin-top:4px}
.hero-group i{width:60px}
.hero-copy p{font:600 17px/1.45 Georgia,serif;margin:15px auto 0;max-width:620px;color:#fff}
.cards{padding:0 clamp(24px,4.5vw,72px) 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.service-card{min-height:315px;padding:14px 16px 15px;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,rgba(1,30,50,.95),rgba(1,24,43,.96));border:1.5px solid var(--line);border-radius:14px;box-shadow:0 13px 35px #0005}
.service-icon{width:105px;height:105px;margin-bottom:4px}.service-icon svg{width:100%;height:100%;fill:none;stroke:var(--gold2);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px #e8a91f)}
.service-icon .lungs{stroke:#fff;stroke-width:3.4}.service-icon .pulse{stroke:#ff3131;stroke-width:3.3}
.service-card h2{margin:0 0 8px;font-size:23px;font-family:Georgia,serif}.service-card h2 em{color:var(--gold2)}.service-card h2 span{color:#fff;font-style:italic}
.service-card p{margin:0 auto 14px;max-width:290px;font:16px/1.35 Georgia,serif;color:#fff}
.card-actions{width:100%;margin-top:auto;display:grid;gap:7px}
.card-button{min-height:43px;padding:8px 14px;border:1px solid var(--gold);border-radius:7px;background:linear-gradient(#ffdc67,#edb62f);color:#111;text-decoration:none;font-weight:900;display:flex;align-items:center;justify-content:center;position:relative}
.card-button b{position:absolute;right:15px;font-size:24px}.card-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.card-button.outline{background:rgba(2,25,44,.35);color:var(--gold2)}
.advantages{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(1,24,43,.96);border-top:1px solid rgba(241,189,61,.5)}
.advantage{min-height:92px;padding:15px 22px;display:flex;align-items:center;justify-content:center;gap:15px;border-right:1px solid rgba(255,255,255,.22)}
.adv-icon{font-size:34px;color:var(--gold2)}.advantage strong{display:block;color:var(--gold2);font:700 17px Georgia,serif}.advantage small{display:block;color:#fff;margin-top:5px;font:13px Georgia,serif}

@media(max-width:1100px){
  .main-nav{display:none}.header-actions{margin-left:auto}
  .hero-copy{width:min(650px,62vw)}.cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .site{background-attachment:scroll;background-position:center top}
  .header{min-height:68px;padding:8px 13px}.logo-alpi,.logo-breizh{font-size:27px}.logo-group{font-size:7px;letter-spacing:3px}.logo-group i{width:28px}
  .login-button{padding:0 10px}.login-button span:last-child{display:none}.menu-button{width:40px;height:40px}
  .mobile-menu{right:13px;top:60px;width:calc(100vw - 26px)}
  .hero{min-height:355px;padding:44px 15px 20px}.hero-copy{width:100%;max-width:520px}
  .eyebrow{font-size:12px;letter-spacing:1.5px}.welcome{font-size:36px}.hero-alpi,.hero-breizh{font-size:58px}.hero-group{font-size:13px;letter-spacing:5px}.hero-copy p{font-size:15px}
  .cards{padding:0 14px 16px;grid-template-columns:1fr}.service-card{min-height:0}.advantages{grid-template-columns:1fr 1fr}
}
@media(max-width:390px){.advantages{grid-template-columns:1fr}.hero-alpi,.hero-breizh{font-size:50px}}


/* === V1.2 — desktop composition locked to validated visual === */
.site{
  background:#031728 !important;
  min-height:100svh;
}
.header{
  position:absolute !important;
  top:0;left:0;right:0;
  background:rgba(2,20,37,.52) !important;
  backdrop-filter:blur(4px);
  border-bottom:0 !important;
}
main{
  flex:0 0 auto !important;
  background-image:
    linear-gradient(90deg,rgba(1,16,30,.18),rgba(1,16,30,.00) 60%),
    url("fond-accueil.png") !important;
  background-size:100% auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  padding-top:86px;
  min-height:720px;
  border:0 !important;
  outline:0 !important;
}
.hero{
  min-height:405px !important;
  padding:70px 0 10px 4.2vw !important;
  display:block !important;
}
.hero-copy{
  width:min(650px,46vw) !important;
  text-align:center !important;
}
.cards{
  width:min(1080px,72vw) !important;
  margin:0 0 18px 3.8vw !important;
  padding:0 !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
.service-card{
  min-height:245px !important;
  padding:9px 11px 10px !important;
  border-width:1.5px !important;
}
.service-icon{width:72px !important;height:72px !important}
.service-card h2{font-size:18px !important;margin-bottom:5px !important}
.service-card p{font-size:13px !important;line-height:1.25 !important;margin-bottom:8px !important}
.card-button{min-height:35px !important;padding:5px 10px !important;font-size:12px !important}
.advantages{
  margin:0 !important;
  border-top:1px solid rgba(241,189,61,.55) !important;
  background:#031f34 !important;
}
.advantage{min-height:86px !important}
main::after{content:none !important}

@media (max-width:1100px){
  .cards{width:92vw !important;margin:0 auto 18px !important;grid-template-columns:repeat(2,1fr) !important}
  .hero-copy{width:min(620px,60vw) !important}
}
@media (max-width:680px){
  .header{position:absolute !important}
  main{
    padding-top:68px;
    background-size:auto 620px !important;
    background-position:center top !important;
    min-height:0 !important;
  }
  .hero{min-height:390px !important;padding:55px 14px 18px !important}
  .hero-copy{width:100% !important}
  .cards{width:auto !important;margin:0 14px 16px !important;grid-template-columns:1fr !important}
}


/* === V1.3 — image HD + recul + plein écran, sans modifier les blocs === */
@media (min-width:1101px){
  body{overflow-x:hidden}
  main{
    position:relative !important;
    height:calc(100svh - 86px) !important;
    min-height:650px !important;
    padding-top:86px !important;
    background-image:
      linear-gradient(90deg,rgba(1,16,30,.12),rgba(1,16,30,0) 62%),
      url("fond-accueil.png") !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }
  .hero{
    min-height:0 !important;
    height:auto !important;
    padding:4.2vh 0 0 4.2vw !important;
  }
  .hero-copy{
    width:min(610px,43vw) !important;
  }
  .eyebrow{font-size:14px !important;margin-bottom:5px !important}
  .welcome{font-size:clamp(34px,3.1vw,48px) !important}
  .hero-alpi,.hero-breizh{font-size:clamp(52px,5vw,76px) !important}
  .hero-group{font-size:14px !important;margin-top:2px !important}
  .hero-copy p{font-size:14px !important;line-height:1.3 !important;margin-top:8px !important;max-width:560px !important}
  .cards{
    position:absolute !important;
    left:3.8vw !important;
    bottom:18px !important;
    width:min(950px,67vw) !important;
    margin:0 !important;
    padding:0 !important;
    gap:9px !important;
  }
  .service-card{min-height:210px !important;padding:8px 10px 9px !important}
  .service-icon{width:58px !important;height:58px !important;margin-bottom:2px !important}
  .service-card h2{font-size:16px !important;margin-bottom:4px !important}
  .service-card p{font-size:11.5px !important;line-height:1.2 !important;margin-bottom:6px !important}
  .card-actions{gap:5px !important}
  .card-button{min-height:30px !important;font-size:11px !important;padding:4px 9px !important}
  .advantages{
    min-height:76px !important;
    flex:0 0 76px !important;
  }
  .advantage{min-height:76px !important;padding:10px 18px !important}
}
/* V1.4 — blocs pilotables depuis le back-office */
.service-card h2{color:#fff;font-style:italic}
.service-card h2::first-line{color:inherit}

/* V1.8 premium/image pictograms */
.service-icon img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 7px rgba(232,169,31,.35));border-radius:12px}
/* V1.9 — vraie zone pictogramme transparente et strictement contenue */
.service-icon{width:76px!important;height:68px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;margin-bottom:4px!important}
.service-icon img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;border:0!important;border-radius:0!important;background:transparent!important;filter:none!important}