:root{--navy:#062b63;--navy2:#0a3c78;--gold:#c98516;--gold2:#dfa63b;--ink:#102d55;--muted:#526b88;--line:#dce7f0;--ice:#f4f9fd;--white:#fff;--shadow:0 12px 34px rgba(9,44,83,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:12px;z-index:99}.header{height:92px;display:flex;align-items:center;gap:28px;padding:0 clamp(22px,4vw,72px);position:sticky;top:0;z-index:30;background:linear-gradient(100deg,#edf8ff 0%,rgba(255,255,255,.98) 42%,#edf8ff 100%);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand img{display:block;width:185px;height:auto}.header nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);margin-left:auto;font-size:13px;font-weight:600}.header nav a{padding:36px 0 30px;border-bottom:3px solid transparent;white-space:nowrap}.header nav a:hover,.header nav a.active{color:var(--navy);border-color:var(--gold)}.menu{display:none;border:0;background:transparent}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:12px 20px;border-radius:7px;font-size:14px;font-weight:750;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-1px)}.primary{background:linear-gradient(135deg,#b97812,#d89c2d);color:#fff;box-shadow:0 7px 18px rgba(173,113,15,.18)}.secondary{border:1.5px solid var(--navy);background:#fff;color:var(--navy)}.header-cta{margin-left:12px;white-space:nowrap}
.hero{min-height:500px;display:grid;grid-template-columns:minmax(0,49%) minmax(0,51%);background:linear-gradient(100deg,#f1f9ff 0%,#fff 56%);overflow:hidden}.hero-copy{padding:62px clamp(28px,5vw,86px)}.kicker{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:12px;font-weight:800;letter-spacing:3.2px;color:var(--navy)}.kicker>span{display:inline-block;width:42px;height:2px;background:var(--gold)}h1,h2{color:var(--navy);letter-spacing:-1.6px}.hero h1{margin:0;font-size:clamp(42px,3.6vw,64px);line-height:1.04}.hero em,.journey em,.engagement em{font-style:normal;color:var(--gold)}.lead{max-width:640px;margin:18px 0 0;font-size:18px;line-height:1.55;color:#3c5877}.hero-actions{display:flex;gap:16px;margin:27px 0 35px}.hero-points{display:flex;flex-wrap:wrap;gap:0;font-size:12px;font-weight:700}.hero-points span{display:flex;align-items:center;gap:8px;padding:0 20px;border-right:1px solid #cad9e6}.hero-points span:first-child{padding-left:0}.hero-points span:last-child{border:0}.hero-points svg{width:27px;height:27px;stroke:var(--gold);fill:none;stroke-width:1.7}.hero-media{position:relative;min-height:500px;overflow:hidden}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-media:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.3) 12%,transparent 28%,transparent 100%)}.hero-slogan{position:absolute;right:5%;bottom:8%;z-index:2;padding:18px 20px;color:#fff;background:rgba(4,38,81,.82);border-radius:10px;font-family:Georgia,serif;font-size:19px;font-style:italic;line-height:1.38;text-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 12px 28px rgba(0,0,0,.14)}.hero-slogan strong{color:#fff}.hero-slogan i,.engagement blockquote i{display:block;width:80px;margin:7px 0 0 auto;border-bottom:3px solid var(--gold);transform:rotate(-7deg)}
.journeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:22px clamp(18px,2.5vw,48px);background:#f7fafc}.journey{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.card-main{height:360px;display:grid;grid-template-columns:58% 42%;overflow:hidden}.card-copy{position:relative;z-index:2;padding:22px 8px 18px 22px;background:linear-gradient(90deg,#fff 0%,#fff 83%,rgba(255,255,255,.86) 100%)}.audience-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:linear-gradient(135deg,#b97812,#d89c2d);color:#fff}.audience-icon.blue{background:var(--navy)}.audience-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.overline{margin:0 0 8px;font-size:10px;font-weight:850;letter-spacing:1.25px;color:var(--navy)}.card-copy h2{margin:0 0 10px;font-size:clamp(23px,1.55vw,30px);line-height:1.04}.card-copy>p:not(.overline){margin:0 0 16px;font-size:13.5px;line-height:1.43;color:#294967}.card-copy .button{min-height:42px;padding:10px 15px;font-size:12.5px}.card-photo{position:relative;overflow:hidden}.card-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.35) 18%,transparent 44%)}.card-photo img{width:100%;height:100%;object-fit:cover;object-position:center}.benefit-row{min-height:126px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;border-top:1px solid #edf2f6}.benefit{display:grid;grid-template-columns:36px 1fr;gap:10px;align-content:center;padding:17px 12px;border-right:1px solid var(--line)}.benefit:last-child{border:0}.benefit>svg{width:32px;height:32px;fill:none;stroke:var(--gold);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.benefit span{min-width:0}.benefit strong{display:block;margin-bottom:5px;font-size:12px;line-height:1.24;color:var(--navy)}.benefit small{display:block;font-size:10.5px;line-height:1.35;color:var(--muted)}
.engagement{padding:68px clamp(22px,5vw,88px);text-align:center}.kicker.centered{justify-content:center}.engagement h2{margin:0 0 50px;font-size:clamp(31px,2.7vw,44px)}.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.25fr;gap:26px;align-items:center}.values>div{display:flex;flex-direction:column;align-items:center;gap:7px}.values svg{width:39px;height:39px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.values strong{font-size:13px;color:var(--navy)}.values small{font-size:12px;color:var(--muted)}.engagement blockquote{margin:0;padding-left:30px;border-left:1px solid #cbd9e5;text-align:left;font-family:Georgia,serif;font-size:19px;font-style:italic;line-height:1.4;color:var(--navy);transform:rotate(-2deg)}
.contact{min-height:185px;display:flex;align-items:center;justify-content:space-between;padding:42px clamp(24px,5vw,90px);color:#fff;background:linear-gradient(110deg,#0b5b94 0%,#073a73 48%,#061f4c 100%)}.contact h2{margin:0;color:#fff;font-size:30px}.contact p{margin:6px 0 0;font-size:21px;color:#e7f1fb}footer{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px clamp(22px,4vw,72px);border-top:1px solid var(--line);font-size:11px;color:#5d738b}footer img{width:145px}footer div{display:flex;gap:22px}footer a:hover{color:var(--navy)}
@media(max-width:1180px){.header nav{gap:12px;font-size:11px}.header-cta{display:none}.journeys{grid-template-columns:1fr}.card-main{height:340px;grid-template-columns:56% 44%}.benefit-row{min-height:110px}}
@media(max-width:780px){.header{height:76px;padding:0 20px}.brand img{width:145px}.menu{display:flex;margin-left:auto;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px}.menu span{display:block;width:22px;height:2px;background:var(--navy)}.header nav{display:none;position:absolute;top:76px;left:0;right:0;padding:18px 22px;background:#fff;box-shadow:0 16px 28px rgba(8,42,78,.14);flex-direction:column;align-items:flex-start}.header nav.open{display:flex}.header nav a{width:100%;padding:9px 0;border:0}.hero{grid-template-columns:1fr}.hero-copy{padding:42px 24px}.hero h1{font-size:39px}.hero-actions,.hero-points{gap:12px}.hero-points span{border:0;padding:0}.hero-media{min-height:330px}.journeys{padding:14px}.card-main{height:auto;grid-template-columns:1fr}.card-copy{padding:24px}.card-photo{height:260px}.card-photo:before{background:linear-gradient(180deg,#fff 0%,transparent 25%)}.benefit-row{grid-template-columns:1fr}.benefit{min-height:86px;border-right:0;border-bottom:1px solid var(--line);padding:15px 20px}.values{grid-template-columns:1fr 1fr}.engagement blockquote{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:25px 0 0;text-align:center}.contact{display:block}.contact .button{margin-top:24px}footer{flex-direction:column;text-align:center}footer div{flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* ===== V4 — TYPOGRAPHIE & EDITORIAL LAYOUT ===== */
.hero-copy{
  padding-top:68px;
  padding-right:clamp(46px,6vw,108px);
  max-width:820px;
}
.hero h1{
  max-width:760px;
  font-size:clamp(43px,3.35vw,60px);
  line-height:1.055;
  letter-spacing:-2.2px;
  text-wrap:balance;
}
.headline-line{display:block;white-space:nowrap}
.headline-line.accent{color:var(--gold)}
.lead{
  max-width:590px;
  margin-top:22px;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.1px;
}
.hero-actions{margin-top:29px}
.hero-points{margin-top:4px}
.hero-points span{font-size:11.5px;line-height:1.3}

/* Give the editorial copy a real column. The photo starts after it. */
.card-main{
  grid-template-columns:minmax(0,64%) minmax(0,36%);
  height:370px;
}
.card-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:23px 22px 21px 22px;
  background:#fff;
}
.card-copy .audience-icon{flex:0 0 auto}
.card-copy .overline{
  margin:0 0 9px;
  font-size:9.5px;
  line-height:1.25;
  letter-spacing:1.35px;
}
.card-copy h2{
  width:100%;
  margin:0 0 12px;
  font-size:clamp(22px,1.38vw,27px);
  line-height:1.08;
  letter-spacing:-.8px;
  text-wrap:balance;
}
.card-copy h2 span{display:block}
.card-copy>p:not(.overline){
  max-width:390px;
  margin:0 0 17px;
  font-size:12.8px;
  line-height:1.55;
  color:#355473;
}
.card-copy .button{margin-top:auto}
.card-photo:before{
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 7%,rgba(255,255,255,.18) 20%,transparent 35%);
}
.card-photo img{object-position:center center}

/* Benefits: larger readable copy, consistent iconography and breathing room. */
.benefit-row{min-height:132px}
.benefit{
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  padding:18px 14px;
}
.benefit>svg{width:31px;height:31px}
.benefit strong{
  font-size:11.5px;
  line-height:1.28;
  letter-spacing:-.05px;
}
.benefit small{
  margin-top:4px;
  font-size:10.3px;
  line-height:1.4;
}

/* Clean visual rhythm on desktop. */
.journeys{gap:20px}
.journey{border-radius:14px}
.engagement h2{letter-spacing:-1.1px}

@media(max-width:1500px){
  .headline-line{white-space:normal}
  .hero h1{font-size:clamp(40px,3.3vw,54px)}
  .card-main{grid-template-columns:62% 38%}
  .card-copy{padding-right:17px}
  .card-copy h2{font-size:23px}
  .card-copy>p:not(.overline){font-size:12px}
}
@media(max-width:1180px){
  .hero-copy{max-width:none;padding-right:45px}
  .card-main{grid-template-columns:58% 42%}
  .card-copy h2{font-size:26px}
  .card-copy>p:not(.overline){font-size:13px}
}
@media(max-width:780px){
  .hero-copy{padding:42px 24px}
  .headline-line{white-space:normal}
  .hero h1{font-size:38px;line-height:1.08;letter-spacing:-1.5px}
  .lead{font-size:16px;line-height:1.55}
  .card-main{display:flex;flex-direction:column;height:auto}
  .card-copy{padding:25px 22px 23px}
  .card-copy h2{font-size:27px}
  .card-copy>p:not(.overline){font-size:14px;max-width:100%}
  .card-copy .button{margin-top:4px}
  .card-photo{height:255px}
  .benefit strong{font-size:13px}
  .benefit small{font-size:12px}
}

/* =========================================================
   V5 PREMIUM — composition finale, plus éditoriale et haut de gamme
   ========================================================= */
:root{
  --navy:#062b63;
  --gold:#c98516;
  --gold-soft:#e1a43b;
  --ink:#173554;
  --muted:#5a718a;
  --ice:#f5f9fc;
  --line:#dce7f0;
}

/* Header plus calme et premium */
.header{
  height:88px;
  padding-inline:clamp(28px,4.5vw,86px);
  box-shadow:0 5px 22px rgba(9,42,78,.035);
}
.brand img{width:174px}
.header nav{font-size:12.5px;font-weight:650}

/* HERO : colonne éditoriale volontairement centrée verticalement,
   texte toujours aligné à gauche pour une lecture premium. */
.hero{
  min-height:520px;
  grid-template-columns:48% 52%;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px clamp(46px,5.2vw,100px);
}
.hero-copy .kicker{margin-bottom:24px}
.hero h1{
  max-width:690px;
  font-size:clamp(45px,3.25vw,61px);
  line-height:1.035;
  letter-spacing:-2.4px;
}
.lead{
  max-width:570px;
  margin-top:22px;
  font-size:16.5px;
  line-height:1.65;
}
.hero-actions{margin:28px 0 33px}
.hero-points{
  max-width:610px;
  justify-content:flex-start;
}
.hero-points span{
  min-height:34px;
  padding-inline:17px;
}
.hero-media{min-height:520px}
.hero-slogan{
  right:5.5%;
  bottom:7%;
  min-width:205px;
  padding:18px 22px;
  font-size:18px;
}

/* Trois cartes : même grille, même rythme, aucun retour aléatoire */
.journeys{
  padding:30px clamp(24px,3vw,58px) 36px;
  gap:22px;
}
.journey{
  border-radius:16px;
  box-shadow:0 14px 38px rgba(9,44,83,.075);
  transition:transform .2s ease, box-shadow .2s ease;
}
.journey:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 46px rgba(9,44,83,.11);
}
.card-main{
  height:390px;
  grid-template-columns:62% 38%;
}
.card-copy{
  justify-content:center;
  padding:27px 24px 27px 27px;
}
.audience-icon{
  width:48px;
  height:48px;
  margin-bottom:17px;
}
.card-copy .overline{
  margin-bottom:10px;
  font-size:9.4px;
  letter-spacing:1.45px;
}
.card-copy h2{
  max-width:390px;
  margin-bottom:13px;
  font-size:clamp(24px,1.45vw,29px);
  line-height:1.07;
  letter-spacing:-1px;
}
.card-copy>p:not(.overline){
  max-width:390px;
  margin-bottom:20px;
  font-size:13px;
  line-height:1.55;
}
.card-copy .button{
  margin-top:0;
  min-height:43px;
  padding-inline:17px;
}
.card-photo:before{
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.70) 8%,rgba(255,255,255,.16) 23%,transparent 38%);
}

/* La ligne bénéfices est volontairement très structurée.
   L'icône est au-dessus : plus d'air, aucune collision avec le texte. */
.benefit-row{
  min-height:148px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.benefit{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  padding:19px 18px 20px;
}
.benefit>svg{
  flex:0 0 auto;
  width:29px;
  height:29px;
  margin-bottom:1px;
}
.benefit strong{
  min-height:30px;
  margin:0;
  font-size:11.7px;
  line-height:1.28;
}
.benefit small{
  max-width:150px;
  margin:0;
  font-size:10.5px;
  line-height:1.4;
}

/* Engagement : centré car ce sont des messages courts */
.engagement{
  padding-top:76px;
  padding-bottom:78px;
  background:#fff;
}
.engagement h2{
  margin-bottom:55px;
  font-size:clamp(34px,2.55vw,43px);
}
.values{gap:34px}
.values>div{gap:9px}
.values svg{width:42px;height:42px;margin-bottom:5px}
.values strong{font-size:13.2px}
.values small{font-size:11.8px}

/* CTA final */
.contact{
  min-height:190px;
  padding-inline:clamp(34px,6vw,110px);
}
.contact h2{font-size:32px;letter-spacing:-.8px}

/* Écrans intermédiaires : on évite d'écraser les cartes en trois colonnes */
@media(max-width:1380px){
  .journeys{grid-template-columns:1fr}
  .card-main{height:350px;grid-template-columns:58% 42%}
  .card-copy{padding-left:34px}
  .card-copy h2{font-size:29px}
  .card-copy>p:not(.overline){font-size:13.5px}
  .benefit-row{min-height:118px}
  .benefit{
    display:grid;
    grid-template-columns:38px 1fr;
    align-items:center;
    align-content:center;
    gap:11px;
  }
  .benefit>svg{margin:0}
  .benefit strong{min-height:0}
  .benefit small{max-width:none;margin-top:4px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:48px 30px}
  .hero-media{min-height:360px}
  .headline-line{white-space:normal}
}
@media(max-width:780px){
  .header{height:76px}
  .hero-copy{padding:42px 24px}
  .hero h1{font-size:39px}
  .hero-points{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-points span{padding:0}
  .card-main{display:flex;height:auto}
  .card-copy{padding:28px 24px}
  .card-photo{height:280px}
  .benefit-row{display:grid;grid-template-columns:1fr}
  .benefit{
    display:grid;
    grid-template-columns:40px 1fr;
    min-height:90px;
    padding:17px 22px;
  }
  .benefit strong{font-size:13px}
  .benefit small{font-size:12px}
}

/* V58 — logo ALTEC HD transparent : rendu net et sans contour parasite */
.brand img, footer img { object-fit: contain; image-rendering: auto; }