@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:#F8F7F3;
  --paper-2:#E9EEF3;
  --ink:#0d1b2a;
  --muted:#425466;
  --line:#b9c3cc;
  --dark:#0d1b2a;
  --dark-2:#152a3f;
  --accent:#2ed5ff;
  --accent-soft:#f8dfdb;
  --white:#ffffff;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'IBM Plex Sans', Arial, sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --max:1200px;
  --radius:0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}

.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.eyebrow-light{color:#a7a69e}
h1,h2,h3,p{margin-top:0}
h1,h2{letter-spacing:-.035em;line-height:1.03}
h1{font-size:clamp(2.9rem,6vw,5.7rem);max-width:900px;margin-bottom:24px}
h2{font-size:clamp(2.1rem,4.1vw,3.9rem);max-width:850px;margin-bottom:24px}
h3{line-height:1.16}
em{font-family:var(--sans);font-weight:700;text-decoration:underline;font-style:normal;text-decoration-thickness: 0.13em;text-underline-offset: 0.13em;text-decoration-color: var(--accent);letter-spacing:-.035em}
.hero-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:690px;color:var(--ink)}
.section{padding:90px 0}
.section-dark{background:var(--dark);color:var(--white)}
.section-tint{background:var(--paper-2)}
.section-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;margin-bottom:62px}
.section-heading>p{max-width:510px;color:var(--muted);font-size:1.05rem}
.dark-heading>p{color:#aaa9a0}

/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:#e9eef3cf;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:.5px solid #d3d9df;
}

.header-inner{
  width:100%;
  max-width:1400px;
  height:78px;
  margin:0 auto;
  padding:0 32px;

  display:flex;
  align-items:center;
  gap:40px;
}


/* =========================================================
   LOGO / BRAND
========================================================= */

.header-logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
  color:var(--ink);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.brand-mark{
  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  background:var(--ink);
  color:var(--accent);

  font-size:1.5rem;
  letter-spacing:-.08em;
}

.brand-name{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* =========================================================
   NAVIGATION DESKTOP
========================================================= */

.desktop-nav{
  display:flex;
  align-items:center;
  gap:12px;

  margin-left:auto;
}

.nav-link{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:29px 0;

  border:0;
  background:none;

  color:#4c4a44;

  font-family:inherit;
  font-size:0.9rem;
  font-weight:500;

  text-decoration:none;

  cursor:pointer;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.mega-trigger{
  min-height:48px;
  padding:0 20px;


  background:none;

  color:var(--ink);

  font-weight:650;

  transition:
    transform .2s ease;
}

.mega-trigger:hover,
.mega-trigger[aria-expanded="true"]{
  background:none;
  transform:translateY(-2px);
}

.nav-link:hover{
  color:var(--ink);
}

.nav-arrow{
  display:inline-block;

  font-size:.72rem;

  transition:transform .25s ease;
}

.mega-trigger[aria-expanded="true"] .nav-arrow{
  transform:rotate(180deg);
}


/* =========================================================
   CTA HEADER
========================================================= */

.header-cta{
  min-height:48px;
  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  background:var(--ink);
  color:var(--white);

  font-size:.86rem;
  font-weight:700;

  text-decoration:none;

  transition:
    transform .2s ease,
    background .2s ease;
}

.header-cta:hover{
  transform:translateY(-1px);
}


/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;

  width:100%;

  background:#f7f9fb;

  border-top:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid #d3d9df;

  box-shadow:0 24px 50px rgba(0,0,0,.08);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-8px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;
}

.mega-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:translateY(0);
}


/* =========================================================
   CONTENU DU MEGA MENU
========================================================= */

.mega-menu-inner{
  width:100%;
  max-width:1400px;

  margin:0 auto;
  padding:48px 32px 44px;

  display:grid;
  grid-template-columns:1.2fr 1fr 1.05fr;
  gap:clamp(30px,5vw,70px);
}

.mega-menu-small .mega-menu-inner{
  max-width:1000px;
  grid-template-columns:1fr 1fr;
}

.mega-column{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.mega-eyebrow{
  display:block;

  margin-bottom:18px;

  color:#6d7277;

  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}


/* =========================================================
   LIENS PRINCIPAUX MEGA MENU
========================================================= */

.mega-feature{
  width:100%;

  display:flex;
  flex-direction:column;
  gap:4px;

  padding:14px 0;

  color:var(--ink);
  text-decoration:none;

  border-bottom:1px solid rgba(0,0,0,.08);
}

.mega-feature:first-of-type{
  padding-top:0;
}

.mega-feature strong{
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;

  transition:color .2s ease;
}

.mega-feature span{
  max-width:340px;

  color:#666b70;

  font-size:.82rem;
  line-height:1.5;
}

.mega-feature:hover strong{
  color:var(--ink);

  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}


/* =========================================================
   LIENS SIMPLES MEGA MENU
========================================================= */

.mega-simple-link{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:14px 0;

  border-bottom:1px solid rgba(0,0,0,.08);

  color:var(--ink);

  font-size:.9rem;
  font-weight:600;

  text-decoration:none;
}

.mega-simple-link:first-of-type{
  padding-top:0;
}

.mega-simple-link span{
  opacity:.45;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.mega-simple-link:hover span{
  opacity:1;
  transform:translateX(4px);
}


/* =========================================================
   BLOC MIS EN AVANT
========================================================= */

.mega-highlight{
  padding:28px;

  background:var(--ink);
  color:var(--white);
}

.mega-highlight .mega-eyebrow{
  color:rgba(255,255,255,.55);
}

.mega-highlight h3{
  margin:0 0 12px;

  color:var(--white);

  font-size:clamp(1.35rem,2vw,1.8rem);
  line-height:1.08;

  letter-spacing:-.04em;
}

.mega-highlight p{
  margin:0 0 24px;

  color:rgba(255,255,255,.7);

  font-size:.86rem;
  line-height:1.6;
}

.mega-arrow-link{
  color:var(--white);

  font-size:.86rem;
  font-weight:700;

  text-decoration:none;
}

.mega-arrow-link:hover{
  color:var(--accent);
}


/* =========================================================
   FOOTER DU MEGA MENU
========================================================= */

.mega-footer{
  width:100%;
  max-width:1400px;

  margin:0 auto;
  padding:20px 32px;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;

  border-top:1px solid rgba(0,0,0,.08);

  font-size:.84rem;
}

.mega-footer span{
  color:#6d7277;
}

.mega-footer a{
  color:var(--ink);

  font-weight:700;

  text-decoration:none;
}

.mega-footer a:hover{
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}


/* =========================================================
   BOUTON BURGER MOBILE
========================================================= */

.mobile-menu-toggle{
  display:none;

  width:42px;
  height:42px;

  margin-left:auto;
  padding:0;

  border:0;
  background:none;

  cursor:pointer;

  align-items:center;
  justify-content:center;
  flex-direction:column;

  gap:6px;
}

.mobile-menu-toggle span{
  display:block;

  width:24px;
  height:2px;

  margin:0;

  background:var(--ink);

  transition:
    transform .25s ease,
    opacity .25s ease;
}

.mobile-menu-toggle[aria-expanded="true"] span:first-child{
  transform:translateY(4px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:last-child{
  transform:translateY(-4px) rotate(-45deg);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{
  display:none;
}

.mobile-menu-section{
  margin-top:28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .header-inner{
    height:70px;

    padding:0 20px;
  }

  .desktop-nav,
  .header-cta{
    display:none;
  }

  .mobile-menu-toggle{
    display:flex;
  }

  .mega-menu{
    display:none;
  }

  .mobile-menu{
  position:absolute;

  top:100%;
  left:0;
  right:0;

  width:100%;
  height:calc(100dvh - 70px);

  z-index:999;

  display:block;

  padding:8px 20px 40px;

  background:#e9eef3;

  overflow-y:auto;
  overscroll-behavior:contain;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-8px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;
}

  .mobile-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
  }


  /* liens principaux */

  .mobile-main-link,
  .mobile-nav-group summary{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:21px 0;

    border-bottom:1px solid rgba(0,0,0,.12);

    color:var(--ink);

    font-size:clamp(1.25rem,5vw,1.6rem);
    font-weight:700;
    letter-spacing:-.03em;

    text-decoration:none;

    cursor:pointer;
  }

  .mobile-nav-group summary{
    list-style:none;
  }

  .mobile-nav-group summary::-webkit-details-marker{
    display:none;
  }

  .mobile-nav-group summary::marker{
    display:none;
  }


  /* + accordéon */

  .mobile-nav-group summary span{
    font-size:1.6rem;
    font-weight:300;
    line-height:1;

    transition:transform .2s ease;
  }

  .mobile-nav-group[open] summary span{
    transform:rotate(45deg);
  }


  /* contenu accordéon */

  .mobile-nav-content{
    display:flex;
    flex-direction:column;

    padding:8px 0 18px;
  }

  .mobile-nav-content a{
    display:flex;
    flex-direction:column;
    gap:3px;

    padding:13px 0;

    color:var(--ink);

    text-decoration:none;
  }

  .mobile-nav-content strong{
    font-size:.96rem;
    font-weight:700;
  }

  .mobile-nav-content small{
    color:#676b70;

    font-size:.8rem;
    line-height:1.4;
  }


  /* CTA mobile */

  .mobile-cta{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:28px;
    padding:16px 20px;

    background:var(--ink);
    color:var(--white);

    font-size:.9rem;
    font-weight:700;

    text-decoration:none;
  }

}


/* =========================================================
   PETITS MOBILES
========================================================= */

@media(max-width:480px){

  .header-inner{
    padding:0 16px;
  }

  .mobile-menu{
    padding-left:16px;
    padding-right:16px;
  }

  .mega-menu-inner{
    padding-left:16px;
    padding-right:16px;
  }

}


/* =========================================================
   BLOQUE LE SCROLL QUAND LE MENU MOBILE EST OUVERT
========================================================= */

body.menu-open{
  overflow:hidden;
}

.hero{padding:90px 0 105px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.hero-home h1 span{font-weight:500}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid var(--ink);padding:15px 20px;font-weight:800;font-size:.84rem;letter-spacing:.01em;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary span{color:var(--accent)}
.btn-outline{background:transparent}
.btn-light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-large{padding:18px 24px}
.text-link{font-weight:800;border-bottom:1px solid currentColor;padding-bottom:4px}
.text-link span{margin-left:7px}
.hero-note{font-family:var(--mono);font-size:.65rem;color:#85827a;margin-top:50px}
.hero-note span{color:var(--ink);background:var(--accent);padding:2px 4px}

/* Pleine largeur à l’intérieur du container commun */
.hero-home--full .container.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  /* La largeur maximale et les marges restent
     celles de .container pour conserver l’alignement. */
}

.hero-home--full .hero-copy,
.hero-home--full .hero-copy h2,
.hero-home--full .hero-lead {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.hero-home--full .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}
.xray-card{width:min(100%,470px);min-height:420px;background:#1f1f1c;color:var(--white);padding:26px;position:relative;overflow:hidden;border:1px solid #3b3b35}
.xray-top,.xray-footer{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;display:flex;justify-content:space-between;color:#9d9d94}
.xray-lines{margin-top:70px;display:grid;gap:30px}
.xray-line{display:grid;grid-template-columns:1fr 90px 70px;gap:12px;align-items:center;font-family:var(--mono);font-size:.62rem;color:#85857e}
.xray-line b{height:1px;background:#484841;position:relative}
.xray-line b:after{content:"";display:block;width:45%;height:3px;background:#77776e}
.xray-line.active{color:#f4f3ec}.xray-line.active b:after{background:var(--accent);width:75%}
.xray-line.alert{color:#f4f3ec}.xray-line.alert b:after{background:#f4f3ec;width:28%}
.xray-line strong{font-weight:500;text-align:right}
.xray-scan{height:120px;display:flex;align-items:end;gap:12px;margin-top:45px;border-bottom:1px solid #44443e}
.xray-scan i{display:block;flex:1;background:linear-gradient(to top,#50504a,transparent);height:var(--h);opacity:.75}
.xray-scan i:nth-child(1){--h:35%}.xray-scan i:nth-child(2){--h:78%}.xray-scan i:nth-child(3){--h:50%}.xray-scan i:nth-child(4){--h:92%}.xray-scan i:nth-child(5){--h:62%}
.xray-footer{position:absolute;bottom:26px;left:26px;right:26px}
.floating-stamp{position:absolute;right:-14px;bottom:28px;background:var(--accent);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:.72rem;line-height:1.05;padding:14px 13px;transform:rotate(5deg)}

.split-intro{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:end}
.split-intro h2{max-width:650px}
.large-copy{font-size:1.13rem;color:#8d8c87}
.large-copy p{margin-bottom:22px}
.large-copy strong{color:#494948}

.method-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:18px;align-items:stretch}
.method-step{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column}
.method-step span{font-family:var(--mono);font-size:.65rem;color:var(--muted)}
.method-step b{font-size:1.15rem;margin:12px 0 7px}
.method-step small{color:var(--muted);font-size:.8rem}
.method-arrow{display:grid;place-items:center;color:#aaa69b;font-size:1.5rem}
.center-link{text-align:center;margin-top:42px}

.fit-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fit-card{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:260px}
.fit-icon{font-family:var(--mono);font-size:.68rem;background:var(--accent);padding:4px 7px}
.fit-card h3{font-size:1.35rem;margin:36px 0 12px}
.fit-card p{color:var(--muted);font-size:.92rem}

.proof-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.proof-intro h2{font-size:clamp(2.3rem,4vw,4rem)}
.proof-intro>p{color:var(--muted);max-width:560px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat strong{display:block;font-size:2.2rem;letter-spacing:-.06em}
.stat span{display:block;color:var(--muted);font-size:.78rem;margin-top:6px}
.stats-grid-large{grid-template-columns:repeat(3,1fr)}

.before-after{display:grid;grid-template-columns:1fr 80px 1fr;gap:25px;align-items:center}
.ba-label{font-family:var(--mono);font-size:.65rem;color:#9d9c94}
.ba-box{margin-top:12px;border:1px solid #464640;padding:25px;min-height:170px}
.ba-box p{color:#aaa9a1;margin-bottom:9px}
.ba-box-accent{border-color:#5c633a;background:#1A314A;padding:25px;min-height:170px}
.ba-box-accent p{color:var(--white)}
.ba-arrow{font-size:2rem;text-align:center;color:var(--accent)}

.photo-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.photo-band.reverse{grid-template-columns:1.1fr .9fr}
.photo-copy h2{font-size:clamp(2.2rem,4vw,4rem)}
.photo-copy p{color:var(--muted);max-width:560px}
.media-placeholder{min-height:430px;border:1px dashed #969286;background:#dedbd1;display:grid;place-items:center;align-content:center;text-align:center;padding:40px;position:relative;overflow:hidden}
.media-placeholder:before,.media-placeholder:after{content:"";position:absolute;background:#b3afa3}
.media-placeholder:before{width:1px;height:100%;left:50%;top:0}
.media-placeholder:after{height:1px;width:100%;left:0;top:50%}
.placeholder-cross{width:95px;height:95px;border:1px solid #88847a;position:absolute}
.placeholder-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;background:var(--paper);padding:7px 10px;position:relative;z-index:1}
.media-placeholder p{font-size:.82rem;color:#66645d;max-width:310px;position:relative;z-index:1;margin:14px 0 4px}
.media-placeholder small{font-family:var(--mono);font-size:.57rem;color:#77736a;position:relative;z-index:1}
code{font-family:var(--mono)}

.tool-wall{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tool-logo{min-height:100px;display:grid;place-items:center;text-align:center;padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:800;letter-spacing:-.02em}
.tool-logo:nth-child(odd){font-family:var(--serif);font-style:italic;font-size:1.2rem}
.tool-logo:nth-child(even){font-family:var(--mono);font-size:.72rem}
.tool-more{background:var(--ink);color:var(--accent);font-family:var(--mono)!important;font-size:.65rem!important}
.micro-note{font-family:var(--mono);font-size:.6rem;color:#88857b;margin-top:14px}

.cta-section{background:var(--accent);padding:110px 0;text-align:center}
.cta-inner h2{max-width:1050px;margin:0 auto 38px}
.cta-inner .eyebrow{justify-content:center;color:#4f5731}
.cta-inner em{font-family:var(--sans);font-weight:700;text-decoration:underline;font-style:normal;text-decoration-thickness: 0.13em;text-underline-offset: 0.13em;text-decoration-color: var(--dark);letter-spacing:-.035em}

.page-hero{padding:85px 0 90px}
.page-hero.compact{padding-bottom:75px}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end}
.hero-index{border-left:1px solid var(--line);padding-left:28px;font-family:var(--mono);font-size:.63rem;color:var(--muted);display:grid;gap:25px}
.hero-index strong{font-size:1rem;color:var(--ink);line-height:1.6;font-weight:500}
.xray-explain{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.xray-large{height:470px;position:relative;display:grid;place-items:center}
.scan-ring{position:absolute;border:1px solid #55554e;border-radius:50%;width:var(--s);height:var(--s)}
.ring-1{--s:430px}.ring-2{--s:320px}.ring-3{--s:210px;border-style:dashed}
.scan-center{width:110px;height:110px;border-radius:50%;border:1px solid #6e6e65;display:grid;place-items:center;align-content:center;background:#1d1d1a;z-index:1}
.scan-center span{font-size:2.4rem;font-family:var(--serif);font-style:italic;color:var(--accent)}
.scan-center small{font-family:var(--mono);font-size:.55rem}
.scan-label{position:absolute;font-family:var(--mono);font-size:.62rem;color:#a8a79e;background:var(--dark);padding:5px 8px}
.label-a{top:45px;left:8%}.label-b{right:6%;top:130px}.label-c{bottom:85px;left:12%}.label-d{right:8%;bottom:65px;color:var(--accent)}

.timeline{border-top:1px solid var(--line)}
.timeline-item{display:grid;grid-template-columns:90px 1fr 90px;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.timeline-num{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.timeline-item h3{font-size:1.55rem;margin-bottom:8px}
.timeline-item p{color:var(--muted);max-width:680px;margin:0}
.timeline-item>span{font-family:var(--mono);font-size:.58rem;color:#8b887e;text-align:right}

.diagnostic-grid{display:grid;grid-template-columns:1fr 80px 1fr 80px 1fr;align-items:stretch}
.diag-card{border:1px solid var(--line);padding:25px;min-height:220px}
.diag-card span{font-family:var(--mono);font-size:.65rem}
.diag-card h3{margin:35px 0 10px;font-size:1.25rem}
.diag-card p{font-size:.85rem;color:var(--muted)}
.diag-operator{display:grid;place-items:center;font-size:2rem;color:#8f8b80}

.offer-stack{display:grid;gap:14px}
.offer-card{display:grid;grid-template-columns:70px 1fr 180px;gap:30px;border:1px solid var(--line);padding:34px;background:transparent}
.offer-card.featured{background:var(--dark);color:var(--white);border-color:var(--dark)}
.offer-number{font-family:var(--mono);font-size:.7rem;color:#8e8c83}
.offer-main h2{font-size:2.2rem;margin-bottom:10px}
.offer-kicker{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#858278;margin-bottom:10px}
.featured .offer-kicker{color:#b7b6ac}
.offer-main>p{max-width:650px;color:var(--muted)}
.featured .offer-main>p{color:#bbb9b1}
.offer-main ul{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:20px 0 0}
.offer-main li{font-family:var(--mono);font-size:.58rem;border:1px solid var(--line);padding:6px 8px;color:#6f6d64}
.featured .offer-main li{border-color:#494943;color:#b8b7af}
.offer-side{border-left:1px solid var(--line);padding-left:25px;display:flex;flex-direction:column;align-items:flex-start}
.featured .offer-side{border-color:#45453f}
.offer-side span{font-family:var(--mono);font-size:.57rem;color:#89867d}
.offer-side strong{font-size:1.25rem;margin-top:10px}
.offer-side small{color:var(--muted);font-size:.7rem}
.offer-card.featured .offer-side small {color: var(--paper-2)}
.offer-side a{margin-top:auto;font-weight:800;font-size:.8rem;border-bottom:1px solid currentColor;padding-bottom:3px}

.value-equation,.pricing-equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:16px}
.value-equation>div,.pricing-equation>div{font-family:var(--mono);font-size:.62rem;border-top:1px solid #474741;padding-top:16px}
.value-equation strong,.pricing-equation b{color:var(--accent);font-size:1.1rem}
.value-equation .result,.pricing-equation .eq-result{background:var(--accent);color:var(--ink);padding:18px;border:0}
.result strong,.eq-result strong{display:block;color:var(--ink);font-family:var(--sans);font-size:1.2rem;margin-top:5px}

.trigger-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.trigger-grid>div{min-height:170px;padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.trigger-grid span{font-family:var(--mono);font-size:.62rem}
.trigger-grid p{font-size:1rem;margin-top:30px}

.pricing-table-wrap{overflow:auto}
.pricing-table{width:100%;border-collapse:collapse;min-width:850px}
.pricing-table th,.pricing-table td{border:1px solid var(--line);padding:20px;text-align:left;vertical-align:top}
.pricing-table th{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pricing-table td{font-size:.88rem}
.pricing-table td:last-child{white-space:nowrap}
.table-highlight{background:#e8efc8}
.pricing-note{font-size:.75rem;color:var(--muted);margin-top:15px}
.pricing-factors{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pricing-factors>div{padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:190px}
.pricing-factors span{font-family:var(--mono);font-size:.65rem}
.pricing-factors h3{margin:30px 0 8px}
.pricing-factors p{font-size:.8rem;color:var(--muted)}
.cta-box{border:1px solid var(--line);padding:45px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-box h2{font-size:clamp(2rem,4vw,3.7rem);margin-bottom:0}

.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.case-card{border:1px solid var(--line);padding:34px;min-height:430px;display:flex;flex-direction:column}
.case-featured{grid-column:span 2;min-height:390px;background:#e8e4d9}
.case-dark{background:var(--dark);color:var(--white);border-color:var(--dark)}
.case-meta{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:#88857b}
.case-dark .case-meta{color:#aaa9a0}
.case-card h2{font-size:clamp(1.8rem,3vw,3.1rem);max-width:800px;margin:40px 0 25px}
.case-card:not(.case-featured) h2{font-size:2rem}
.case-big-number{font-size:3.8rem;font-weight:800;letter-spacing:-.07em;margin-bottom:20px}
.case-big-number span{color:#858278;font-weight:400}
.case-big-number .unit{font-size:.9rem;letter-spacing:0;color:#858278}
.case-card p{color:var(--muted);max-width:800px}
.case-dark p{color:#bbb9b1}
.case-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:30px}
.case-tags span{font-family:var(--mono);font-size:.55rem;border:1px solid var(--line);padding:5px 7px;color:#77746b}
.case-dark .case-tags span{border-color:#484842;color:#b4b2a9}
.case-metric-row{display:flex;align-items:baseline;gap:12px;margin:5px 0}
.case-metric-row strong{font-size:1.6rem;letter-spacing:-.04em}
.case-metric-row small{font-family:var(--mono);font-size:.58rem;color:#8a877e}

.reference-wall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo-placeholder{min-height:130px;display:grid;place-items:center;align-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.logo-placeholder span{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em}
.logo-placeholder small{font-size:.58rem;color:#858278;margin-top:7px}

.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}
.about-copy h2{font-size:clamp(2.3rem,4vw,4rem)}
.about-copy p{color:var(--muted);font-size:1.03rem}
.about-copy strong{color:var(--ink)}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#44443e}
.principles>div{background:var(--dark);padding:30px;min-height:220px}
.principles span{font-family:var(--mono);font-size:.6rem;color:var(--accent)}
.principles h3{font-size:1.3rem;margin:28px 0 10px}
.principles p{color:#aaa9a1;font-size:.85rem}
.capability-map{height:540px;max-width:720px;margin:20px auto 0;position:relative;display:grid;place-items:center}
.capability-map:before{content:"";position:absolute;inset:60px;border:1px solid var(--line);border-radius:50%}
.capability-map:after{content:"";position:absolute;inset:130px;border:1px dashed #bdb8ac;border-radius:50%}
.cap-core{width:145px;height:145px;border-radius:50%;background:var(--ink);color:var(--accent);display:grid;place-items:center;align-content:center;position:relative;z-index:2}
.cap-core span{font-size:3rem;font-weight:800;letter-spacing:-.1em}
.cap-core small{font-family:var(--mono);font-size:.5rem;color:var(--white)}
.cap-node{position:absolute;font-family:var(--mono);font-size:.65rem;border:1px solid var(--ink);background:var(--paper);padding:10px 12px;z-index:3}
.node-1{top:40px;left:38%}.node-2{top:145px;right:5%}.node-3{bottom:70px;right:15%}.node-4{bottom:25px;left:37%}.node-5{bottom:110px;left:4%}.node-6{top:150px;left:3%}
.quote-block{max-width:900px}
.quote-block blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,4vw,4rem);line-height:1.15;margin:20px 0 35px}
.quote-block>p:last-child{max-width:700px;color:var(--muted)}

.contact-grid{display:grid;grid-template-columns:1fr;gap:100px}
.contact-intro h2{font-size:clamp(2.5rem,4vw,4.2rem)}
.contact-intro>p{color:var(--muted);font-size:1.05rem}
.contact-detail{display:flex;gap:20px;border-top:1px solid var(--line);padding:18px 0}
.contact-detail>span{font-family:var(--mono);font-size:.62rem}
.contact-detail strong{font-size:.9rem}
.contact-detail p{font-size:.82rem;color:var(--muted);margin:5px 0 0}
.contact-form{border:1px solid var(--line);padding:35px;background:#efebe1}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:block;font-size:.74rem;font-weight:700;margin-bottom:18px}
.optional{font-weight:400;color:#8b887e}
.contact-form input:not([type="checkbox"]),.contact-form textarea,.contact-form select{display:block;width:100%;margin-top:7px;border:1px solid #c3bfb4;background:var(--paper);padding:13px 14px;color:var(--ink);outline:none}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent)}
.contact-form textarea{resize:vertical}
.checkbox-label{display:flex!important;align-items:flex-start;gap:10px;font-weight:500!important;color:#5e5b53}
.checkbox-label input{margin-top:3px}
.form-note{font-family:var(--mono);font-size:.55rem;color:#89867d;margin:13px 0 0}
.hidden-field{display:none!important}

.centered-page .eyebrow{justify-content:center}
.centered-page {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-footer{background:var(--dark);color:var(--white);padding:60px 0 22px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:60px}
.footer-brand .brand-mark{background:var(--accent);color:var(--ink)}
.footer-tagline{color:#aaa9a1;font-size:.9rem;margin-top:18px}
.footer-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:#87867e;text-transform:uppercase}
.footer-grid p:not(.footer-label) {
  font-size: .8rem;
  color: #aaa9a1;
}
.footer-grid a{color:#dddcd4}
.site-footer .footer-grid p a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom {
  border-top: 1px solid #3e3e39;
  margin-top: 50px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: .7rem;
  color: #aaa9a1;
}

.footer-bottom-links a:hover {
  text-decoration: underline;
}
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.footer-social-links a {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: .8rem;
}

.footer-social-links a:hover {
  text-decoration: underline;
}

@media (max-width:1000px){
  .main-nav{gap:15px}
  .hero-grid,.page-hero-grid,.proof-section,.about-grid,.contact-grid,.xray-explain{grid-template-columns:1fr}
  .hero-visual{min-height:400px}
  .section-heading{grid-template-columns:1fr;gap:15px}
  .fit-grid{grid-template-columns:repeat(2,1fr)}
  .method-strip{grid-template-columns:1fr 1fr}
  .method-arrow{display:none}
  .offer-card{grid-template-columns:50px 1fr}
  .offer-side{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:15px 0 0;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px}
  .offer-side a{margin-top:0}
  .case-featured{grid-column:auto}
  .reference-wall{grid-template-columns:repeat(3,1fr)}
  .pricing-factors{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .container{width:min(calc(100% - 32px),var(--max))}
  .site-header{position:sticky}
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:78px;background:var(--paper);border-bottom:1px solid var(--line);padding:15px 16px;flex-direction:column;align-items:stretch}
  .main-nav.open{display:flex}
  .main-nav>a{padding:11px 5px}
  .nav-cta{text-align:center}
  .section{padding:82px 0}
  .hero{padding:60px 0 80px}
  h1{font-size:clamp(2.8rem,14vw,4.6rem)}
  .hero-visual{min-height:340px}
  .xray-card{min-height:360px}
  .split-intro,.photo-band,.photo-band.reverse{grid-template-columns:1fr;gap:45px}
  .fit-grid,.stats-grid,.stats-grid-large,.trigger-grid,.pricing-factors,.case-grid,.principles{grid-template-columns:1fr}
  .case-featured{grid-column:auto}
  .case-card{min-height:380px}
  .case-big-number{font-size:2.8rem}
  .tool-wall{grid-template-columns:repeat(2,1fr)}
  .tool-logo{min-height:85px}
  .before-after{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg)}
  .diagnostic-grid{grid-template-columns:1fr}
  .diag-operator{min-height:45px}
  .timeline-item{grid-template-columns:45px 1fr}
  .timeline-item>span{grid-column:2;text-align:left}
  .offer-card{grid-template-columns:1fr}
  .offer-number{display:none}
  .offer-side{grid-column:1;grid-template-columns:1fr 1fr}
  .offer-side span{grid-column:1}.offer-side strong{grid-column:2;grid-row:1}
  .offer-side small{grid-column:1}.offer-side a{grid-column:2;grid-row:2}
  .value-equation,.pricing-equation{grid-template-columns:1fr;gap:14px}
  .value-equation>div,.pricing-equation>div{border-top:0;border-left:1px solid #474741;padding:12px 14px}
  .value-equation>div:not(.result):after,.pricing-equation>div:not(.eq-result):after{content:"";display:block}
  .pricing-table{min-width:720px}
  .cta-box{display:block;padding:30px}
  .cta-box .btn{margin-top:28px}
  .reference-wall{grid-template-columns:repeat(2,1fr)}
  .capability-map{height:440px}
  .capability-map:before{inset:40px}.capability-map:after{inset:90px}
  .node-1{top:15px;left:34%}.node-2{top:100px;right:0}.node-3{bottom:45px;right:4%}.node-4{bottom:5px;left:34%}.node-5{bottom:85px;left:0}.node-6{top:100px;left:0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:25px}
  .footer-bottom{gap:20px;flex-direction:column}
}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}

/* =========================================================
   RESSOURCES
   ========================================================= */

.page-hero {
    padding: 0px 0 90px;
}

.page-hero .hero-intro {
    max-width: 680px;
    margin-top: 32px;
    font-size: 1.2rem;
    line-height: 1.7;
}

.resources-section {
    padding: 0px 0 120px;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* ---------------------------------------------------------
   CARTES
   --------------------------------------------------------- */

.resource-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    padding: 0;
    overflow: hidden;

    background: #f5f3ee;
    border: 1px solid rgba(20, 32, 51, 0.12);

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.resource-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 32, 51, 0.28);

    box-shadow: 0 18px 45px rgba(20, 32, 51, 0.10);
}


/* ---------------------------------------------------------
   PARTIE VISUELLE
   --------------------------------------------------------- */

.resource-card-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    background: #142033;
    color: #f5f3ee;
}

.resource-card-number {
    position: absolute;
    top: 22px;
    left: 24px;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.6;
}

.resource-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    border: 1px solid rgba(245, 243, 238, 0.5);
    border-radius: 50%;

    font-size: 3rem;
    font-weight: 300;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.resource-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 32px;
}

.resource-card-type {
    margin: 0 0 14px;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    opacity: 0.55;
}

.resource-card h2 {
    margin: 0 0 18px;

    font-size: clamp(1.7rem, 2.5vw, 2.4rem);
    line-height: 1.05;
}

.resource-card-content > p:not(.resource-card-type) {
    max-width: 540px;
    margin: 0;

    font-size: 1rem;
    line-height: 1.65;

    opacity: 0.75;
}

.resource-card-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 32px;

    font-size: 0.9rem;
    font-weight: 600;
}


/* ---------------------------------------------------------
   RESSOURCES À VENIR
   --------------------------------------------------------- */

.resource-card--coming {
    cursor: default;
    opacity: 0.58;
}

.resource-card--coming:hover {
    transform: none;
    border-color: rgba(20, 32, 51, 0.12);
    box-shadow: none;
}

.resource-card--coming .resource-card-visual {
    background: #dddcd7;
    color: #142033;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.resource-cta {
    padding: 120px 0;

    background: #142033;
    color: #f5f3ee;
}

.resource-cta h2 {
    max-width: 850px;
    margin: 20px 0 28px;

    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 0.95;
}

.resource-cta p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 36px;

    font-size: 1.1rem;
    line-height: 1.7;

    opacity: 0.75;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .page-hero {
        padding: 100px 0 60px;
    }

    .resources-section {
        padding: 20px 0 80px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card {
        min-height: 400px;
    }

    .resource-cta {
        padding: 80px 0;
    }

}

.iframe-container {
  background: #ffffff;
  width: 100%;
  height: 700px;
  padding: 40px;
  box-sizing: border-box;
  overflow: hidden;
}

.iframe-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.image-frame {
    width: 100%;
    max-width: 900px;
    height: 400px;
    margin: 0 auto;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
}

.image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%; /* point de focalisation */
}

.image-frame-2 {
    width: 100%;
    max-width: 900px;
    height: 400px;
    margin: 0 auto;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
}

.image-frame-2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%; /* point de focalisation */
}



.image-full-frame {
    width: 100%;
    max-width: 900px;
    height: 300px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;

    background: #ffffff;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
}

.image-full-frame h3 {
    flex-shrink: 0;
    text-align: center;
    margin: 0 0 20px 0;
}

.image-full-frame img {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   FAQ
   ========================================= */

.faq-section {
  background: var(--paper);
  padding: 110px 0;
  text-align:center;
  margin: 0 auto 60px;
}

.faq-inner h2 {
    max-width:1050px;
    margin:0 auto 38px
}

.faq-inner .eyebrow {
    justify-content:center;
    color:#4f5731
}

.faq-inner em{
    font-family:var(--sans);
    font-weight:700;
    text-decoration:underline;
    font-style:normal;
    text-decoration-thickness: 0.13em;
    text-underline-offset: 0.13em;
    text-decoration-color: var(--accent);
    letter-spacing:-.035em
}

.faq-list {
  max-width: 900px;
  text-align:left;
  margin: 0 auto;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Question */

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 28px 55px 28px 0;

  cursor: pointer;
  list-style: none;

  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;

  color: var(--ink);

  transition: color 0.2s ease;
}

/* Supprime le triangle natif */

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
}

/* Chevron */

.faq-item summary::after {
  content: "+";

  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  color: var(--ink);

  transition:
    transform 0.3s ease,
    color 0.2s ease;
}

/* Question ouverte */

.faq-item[open] summary {
  color: var(--ink);
}

.faq-item[open] summary::after {
  content: "−";
  transform: translateY(-50%);
}

/* Hover */

.faq-item summary:hover {
  color: var(--accent, #555);
}

/* Réponse */

.faq-answer {
  max-width: 760px;
  padding: 0 55px 30px 0;
  
}

.faq-answer p {
  margin: 0;

  font-size: 16px;
  line-height: 1.75;

  color: var(--muted);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .faq-section {
    padding: 80px 0;
  }

  .faq-section .section-intro {
    margin-bottom: 40px;
  }

  .faq-list {
    width: calc(100% - 40px);
    margin: 0 auto;
  }

  .faq-item summary {
    padding: 22px 45px 22px 0;
    font-size: 17px;
  }

  .faq-item summary::after {
    right: 0;
    width: 28px;
    height: 28px;
    font-size: 22px;
  }

  .faq-answer {
    padding: 0 35px 25px 0;
  }

  .faq-answer p {
    font-size: 15px;
    line-height: 1.7;
  }
}
/* =========================================
   ROUE DES ÉMOTIONS
   ========================================= */

.emotion-list .emotion-level-0 > summary {
  font-size: 24px;
  font-weight: 700;
}

.emotion-list .emotion-level-1 > summary {
  padding-left: 20px;
  font-size: 20px;
  font-weight: 600;
}

.emotion-list .emotion-level-2 > summary {
  padding-left: 40px;
  font-size: 17px;
  font-weight: 500;
}

.emotion-list .emotion-level-1 .faq-answer {
  padding-left: 20px;
}

.emotion-list .emotion-level-2 .faq-answer {
  padding-left: 40px;
}

.emotion-leaf {
  padding: 7px 55px 7px 20px;

  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.emotion-leaf::before {
  content: "—";
  margin-right: 10px;
  color: var(--accent);
}


/* MOBILE */

@media (max-width: 768px) {

  .emotion-list .emotion-level-0 > summary {
    font-size: 21px;
  }

  .emotion-list .emotion-level-1 > summary {
    padding-left: 15px;
    font-size: 18px;
  }

  .emotion-list .emotion-level-2 > summary {
    padding-left: 30px;
    font-size: 16px;
  }

  .emotion-list .emotion-level-1 .faq-answer {
    padding-left: 15px;
  }

  .emotion-list .emotion-level-2 .faq-answer {
    padding-left: 30px;
  }

  .emotion-leaf {
    padding-left: 15px;
    padding-right: 20px;
    font-size: 15px;
  }

}

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
html,
body{
  margin:0;
  min-height:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}

#footer{
  margin-top:auto;
}


/* =========================================
   AVIS GOOGLE
   ========================================= */
  #avis-google .google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    border: 0;
  }
  #avis-google [hidden] { display: none !important; }
  #avis-google .google-review {
    min-width: 0;
    padding: 24px;
    background: var(--white, #fff);
    border: 1px solid #dadce0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgb(60 64 67 / 5%);
    font-family: var(--sans, Arial, sans-serif);
    color: #202124;
  }
  #avis-google .google-review:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  #avis-google .google-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  #avis-google .google-review-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1967d2;
    font-size: 14px;
    font-weight: 600;
  }
  #avis-google .google-review:nth-child(4n + 2) .google-review-avatar { background: #fce8e6; color: #b3261e; }
  #avis-google .google-review:nth-child(4n + 3) .google-review-avatar { background: #e6f4ea; color: #137333; }
  #avis-google .google-review:nth-child(4n + 4) .google-review-avatar { background: #fef7e0; color: #8a5700; }
  #avis-google .google-review-author { min-width: 0; }
  #avis-google .google-review-author h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  #avis-google .google-review-source {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.3px;
  }
  #avis-google .google-review-source span:nth-child(1),
  #avis-google .google-review-source span:nth-child(4) { color: #4285f4; }
  #avis-google .google-review-source span:nth-child(2),
  #avis-google .google-review-source span:nth-child(6) { color: #ea4335; }
  #avis-google .google-review-source span:nth-child(3) { color: #fbbc05; }
  #avis-google .google-review-source span:nth-child(5) { color: #34a853; }
  #avis-google .google-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 14px;
  }
  #avis-google .google-review-stars {
    color: #fbbc04;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  #avis-google .google-review-date { color: #5f6368; font-size: 12px; }
  #avis-google .google-review-text {
    margin: 0;
    color: #3c4043;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  #avis-google .google-reviews-more { min-height: 48px; }
  #avis-google .google-reviews-more:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }
  @media (max-width: 760px) {
    #avis-google .google-reviews-grid { grid-template-columns: minmax(0, 1fr); }
  }

  #avis-google .google-review-photo {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

#avis-google .google-review-stars {
  color: #fbbc04;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   23 CONSULTING — LANDING PAGE 90 JOURS
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES & BASE
   --------------------------------------------------------- */

.offre-90j {
  --accent: #ff802e;
  --lp-orange: #ff802e;
  --lp-orange-hover: #e76e1f;
  --lp-dark: #071922;
  --lp-dark-2: #0d1b2a;
  --lp-dark-3: #102631;
  --lp-white: #ffffff;
  --lp-cream: #f8f7f3;
  --lp-muted: #b7c2c8;
  --lp-border: rgba(255, 255, 255, .15);

  background: var(--lp-dark);
  color: var(--lp-white);
}

.offre-90j *,
.offre-90j *::before,
.offre-90j *::after {
  box-sizing: border-box;
}

.offre-90j main {
  width: 100%;
}

.offre-90j h1,
.offre-90j h2,
.offre-90j h3 {
  color: inherit;
  font-family: var(--sans);
}

.offre-90j h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -.045em;
}

.offre-90j .offre-90j-eyebrow {
  margin: 0;
  color: var(--lp-orange);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.offre-90j .offre-90j-section-heading {
  max-width: 930px;
  margin: 0 auto 52px;
  text-align: center;
}

.offre-90j .offre-90j-section-heading .offre-90j-eyebrow {
  margin-bottom: 18px;
}

.offre-90j .offre-90j-section-heading h2 {
  text-wrap: balance;
}

/* ---------------------------------------------------------
   2. HERO — PHOTO FAMILLE
   --------------------------------------------------------- */

.offre-90j .offre-90j-hero {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  overflow: hidden;
  background: var(--lp-dark);
  color: var(--lp-white);
}

/* Image plein écran */

.offre-90j .offre-90j-hero-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Overlay : sombre sur les côtés, photo visible au centre */

.offre-90j .offre-90j-hero-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 17, 24, .94) 0%,
      rgba(4, 17, 24, .69) 26%,
      rgba(4, 17, 24, .15) 51%,
      rgba(4, 17, 24, .38) 73%,
      rgba(4, 17, 24, .70) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4, 17, 24, .93) 0%,
      transparent 32%,
      transparent 72%,
      rgba(4, 17, 24, .16) 100%
    );

  pointer-events: none;
}

/* ---------------------------------------------------------
   3. HEADER MINIMAL
   --------------------------------------------------------- */

.offre-90j .offre-90j-header {
  position: relative;
  z-index: 2;
  padding: 26px 0 12px;
  background: transparent;
  border: none;
}

.offre-90j .offre-90j-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.offre-90j .offre-90j-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.offre-90j .offre-90j-logo-number {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  background: var(--lp-orange);
  color: var(--lp-dark);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.08em;
}


.offre-90j .offre-90j-logo-name {
  color: var(--lp-white);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.offre-90j .offre-90j-header-note {
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, .88);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  white-space: nowrap;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.offre-90j .offre-90j-header-note:hover {
  transform: translateY(-2px);
}


.offre-90j .offre-90j-header-line {
  display: block;
  width: 23px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------
   4. HERO — CONTENU & FORMULAIRE
   --------------------------------------------------------- */

.offre-90j .offre-90j-hero-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .82fr);
  align-items: center;
  gap: clamp(35px, 5vw, 80px);

  padding-top: 75px;
  padding-bottom: 65px;
}

.offre-90j .offre-90j-hero-content {
  max-width: 610px;
}

.offre-90j .offre-90j-hero-content > .offre-90j-eyebrow {
  margin-bottom: 20px;
}

/* H1 spécifique à la landing page */

.offre-90j .offre-90j-hero h1 {
  max-width: 680px;
  margin: 0 0 23px;

  font-family: var(--sans);
  font-size: clamp(2.5rem, 4.15vw, 4.2rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.055em;

  color: #fff;
}

.offre-90j .offre-90j-hero h1 strong {
  font-weight: 700;
}

.offre-90j .offre-90j-hero h1 span {
  display: block;
  margin-top: 6px;

  font-family: var(--sans);
  font-size: .88em;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.05em;
}

.offre-90j .offre-90j-hero-description {
  max-width: 490px;
  margin: 0;

  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  line-height: 1.7;
}

.offre-90j .offre-90j-hero-rule {
  width: 42px;
  height: 3px;
  margin: 31px 0 25px;
  background: var(--lp-orange);
}

/* Trois engagements sous la promesse */

.offre-90j .offre-90j-hero-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  max-width: 620px;
}

.offre-90j .offre-90j-hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.offre-90j .offre-90j-hero-feature svg {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  color: var(--lp-orange);
}

.offre-90j .offre-90j-hero-feature p {
  margin: 0;
  font-size: .68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .83);
}

.offre-90j .offre-90j-hero-feature strong {
  display: block;
  color: #fff;
  font-size: .71rem;
  font-weight: 700;
}

/* ---------------------------------------------------------
   5. TYPEFORM — PANNEAU DARK
   --------------------------------------------------------- */

.offre-90j .offre-90j-form-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 28px 25px 24px;

  background: rgba(4, 20, 29, .97);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 4px;

  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
}

.offre-90j .offre-90j-form-heading {
  margin-bottom: 15px;
}

.offre-90j .offre-90j-form-heading .offre-90j-eyebrow {
  margin-bottom: 11px;
  font-size: .62rem;
}

.offre-90j .offre-90j-form-heading h2 {
  max-width: 440px;
  margin: 0 0 9px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.offre-90j .offre-90j-form-heading > p:not(.offre-90j-eyebrow) {
  max-width: 440px;
  margin: 0;

  color: var(--lp-muted);
  font-size: .81rem;
  line-height: 1.6;
}

/* Emplacement Typeform */

.offre-90j .offre-90j-typeform {
   display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 24px;
}

.offre-90j .offre-90j-typeform [data-tf-live] {
  display: block;
  width: 100%;
  min-height: 440px;
}

/* Éléments éventuellement créés par le script Typeform */

.offre-90j .offre-90j-typeform .tf-v1-widget {
  width: 100% !important;
  min-height: 440px;
}

.offre-90j .offre-90j-typeform iframe {
  width: 100% !important;
  min-height: 440px;
  border: 0;
}

.offre-90j .offre-90j-form-disclaimer {
  margin: 14px 0 0;

  color: rgba(255, 255, 255, .52);
  font-family: var(--mono);
  font-size: .58rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------------
   6. BÉNÉFICES — DARK
   --------------------------------------------------------- */

.offre-90j .offre-90j-benefits {
  padding: 73px 0 78px;
  background: var(--lp-dark);
  color: #fff;
}

.offre-90j .offre-90j-benefits .offre-90j-section-heading {
  margin-bottom: 44px;
}

.offre-90j .offre-90j-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.offre-90j .offre-90j-benefit {
  min-width: 0;
  padding: 0 25px;
  border-right: 1px solid var(--lp-border);
}

.offre-90j .offre-90j-benefit:first-child {
  padding-left: 0;
}

.offre-90j .offre-90j-benefit:last-child {
  padding-right: 0;
  border-right: none;
}

.offre-90j .offre-90j-benefit svg {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 21px;
  color: var(--lp-orange);
}

.offre-90j .offre-90j-benefit h3 {
  margin: 0 0 10px;

  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.offre-90j .offre-90j-benefit p {
  margin: 0;

  color: var(--lp-muted);
  font-size: .83rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   7. CADEAU 1 000 € — LIGHT
   --------------------------------------------------------- */

.offre-90j .offre-90j-gift {
  padding: 47px 0;
  background: var(--lp-cream);
  color: var(--lp-dark-2);
}

.offre-90j .offre-90j-gift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: center;
}

/* Texte du cadeau */

.offre-90j .offre-90j-gift-content {
  min-width: 0;
}

.offre-90j .offre-90j-gift-content .offre-90j-eyebrow {
  margin-bottom: 16px;
}

.offre-90j .offre-90j-gift-content h2 {
  margin: 0 0 10px;

  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}



.offre-90j .offre-90j-gift-content h3 {
  margin: 0 0 13px;

  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}

.offre-90j .offre-90j-gift-content > p:not(.offre-90j-eyebrow) {
  max-width: 520px;
  margin: 0;

  color: #33404a;
  font-size: .84rem;
  line-height: 1.7;
}

/* Conditions à droite */

.offre-90j .offre-90j-gift-conditions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;

  min-height: 140px;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 128, 46, .65);
}

.offre-90j .offre-90j-gift-conditions svg {
  width: 31px;
  height: 31px;
  color: var(--lp-orange);
}

.offre-90j .offre-90j-gift-conditions p {
  margin: 0;
  color: var(--lp-dark-2);
  font-size: .76rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   8. MÉTHODE — DARK
   --------------------------------------------------------- */

.offre-90j .offre-90j-method {
  padding: 76px 0 65px;
  background: var(--lp-dark);
  color: #fff;
}

.offre-90j .offre-90j-method .offre-90j-section-heading {
  max-width: 810px;
  margin-bottom: 57px;
}

.offre-90j .offre-90j-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 55px;
}

.offre-90j .offre-90j-method-step {
  display: flex;
  align-items: flex-start;
  gap: 23px;

  min-width: 0;
  padding: 0 32px;
  border-right: 1px solid var(--lp-border);
}

.offre-90j .offre-90j-method-step:first-child {
  padding-left: 0;
}

.offre-90j .offre-90j-method-step:last-child {
  padding-right: 0;
  border-right: none;
}

.offre-90j .offre-90j-method-number {
  flex-shrink: 0;

  color: var(--lp-orange);
  font-family: var(--sans);
  font-size: 2.7rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.06em;
}

.offre-90j .offre-90j-method-step h3 {
  margin: 4px 0 11px;
  color: #fff;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.4;
}

.offre-90j .offre-90j-method-step p {
  margin: 0;
  color: var(--lp-muted);
  font-size: .81rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   9. JALONS — J+45 / J+90
   --------------------------------------------------------- */

.offre-90j .offre-90j-milestones {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap: 0;
  align-items: center;
  margin: 0 auto;
}

.offre-90j .offre-90j-milestone {
  min-width: 0;
  min-height: 120px;
  padding: 23px 24px;

  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .025);
}

.offre-90j .offre-90j-milestone-day {
  display: block;
  margin-bottom: 6px;

  color: var(--lp-orange);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
}

.offre-90j .offre-90j-milestone strong {
  display: block;

  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.offre-90j .offre-90j-milestone p {
  margin: 6px 0 0;
  color: var(--lp-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.offre-90j .offre-90j-milestone-connector {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}

.offre-90j .offre-90j-milestone-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-orange);
}

.offre-90j .offre-90j-milestone-line {
  flex: 1;
  height: 1px;
  background: var(--lp-orange);
}

.offre-90j .offre-90j-milestone-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--lp-orange);
}

.offre-90j .offre-90j-method-footnote {
  max-width: 730px;
  margin: 29px auto 0;

  color: rgba(255, 255, 255, .55);
  font-size: .73rem;
  line-height: 1.65;
  text-align: center;
}

/* ---------------------------------------------------------
   10. CTA FINAL + FAQ — DEUX COLONNES
   --------------------------------------------------------- */

.offre-90j .offre-90j-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 390px;
}

/* Partie claire */

.offre-90j .offre-90j-final-cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 65px clamp(30px, 6vw, 105px);

  background: var(--lp-cream);
  color: var(--lp-dark-2);
}

.offre-90j .offre-90j-final-cta-inner {
  width: 100%;
  max-width: 505px;
}

.offre-90j .offre-90j-final-cta .offre-90j-eyebrow {
  margin-bottom: 19px;
}

.offre-90j .offre-90j-final-cta h2 {
  margin: 0 0 17px;
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
}

.offre-90j .offre-90j-final-cta > div > p:not(.offre-90j-eyebrow) {
  max-width: 430px;
  margin: 0 0 25px;

  color: #43505c;
  font-size: .88rem;
  line-height: 1.7;
}

/* Bouton orange */

.offre-90j .offre-90j-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;

  min-height: 55px;
  padding: 16px 26px;

  border: 1px solid var(--lp-orange);
  border-radius: 4px;

  background: var(--lp-orange);
  color: #111b22;

  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.offre-90j .offre-90j-btn:hover {
  background: var(--lp-orange-hover);
  border-color: var(--lp-orange-hover);
  color: #111b22;
  transform: translateY(-2px);
}

.offre-90j .offre-90j-btn span {
  font-size: 1.25rem;
  font-weight: 400;
}

.offre-90j .offre-90j-final-cta small {
  display: block;
  margin-top: 14px;

  color: #65717a;
  font-family: var(--mono);
  font-size: .62rem;
}

/* Partie FAQ sombre */

.offre-90j .offre-90j-final-faq {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  padding: 65px clamp(30px, 6vw, 105px);

  background: var(--lp-dark);
  color: #fff;
}

.offre-90j .offre-90j-final-faq-inner {
  width: 100%;
  max-width: 530px;
}

.offre-90j .offre-90j-final-faq .offre-90j-eyebrow {
  margin-bottom: 24px;
}

.offre-90j .offre-90j-faq-list {
  width: 100%;
}

.offre-90j .offre-90j-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.offre-90j .offre-90j-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;

  padding: 16px 0;

  color: #f7f7f7;
  font-size: .81rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;

  list-style: none;
}

.offre-90j .offre-90j-faq-item summary::-webkit-details-marker {
  display: none;
}

.offre-90j .offre-90j-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--lp-muted);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
}

.offre-90j .offre-90j-faq-item[open] summary::after {
  content: "−";
  color: var(--lp-orange);
}

.offre-90j .offre-90j-faq-item summary:hover {
  color: var(--lp-orange);
}

.offre-90j .offre-90j-faq-item p {
  margin: 0;
  padding: 0 20px 20px 0;

  color: var(--lp-muted);
  font-size: .78rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   11. FOOTER MINIMAL
   --------------------------------------------------------- */

.offre-90j .offre-90j-footer {
  padding: 29px 0;
  background: #041219;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--lp-muted);
}

.offre-90j .offre-90j-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.offre-90j .offre-90j-footer-brand {
  color: #fff;
  font-family: var(--sans);
  font-size: .81rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  white-space: nowrap;
}

.offre-90j .offre-90j-footer-inner > p {
  margin: 0;
  color: var(--lp-muted);
  font-size: .72rem;
  text-align: center;
}


.offre-90j .offre-90j-footer nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.offre-90j .offre-90j-footer nav a {
  color: var(--lp-muted);
  font-size: .71rem;
  white-space: nowrap;
  text-decoration: none;
}

.offre-90j .offre-90j-footer nav a:hover,
.offre-90j .offre-90j-footer-brand:hover {
  color: var(--lp-orange);
}

/* ---------------------------------------------------------
   12. ACCESSIBILITÉ
   --------------------------------------------------------- */

.offre-90j a:focus-visible,
.offre-90j summary:focus-visible {
  outline: 2px solid var(--lp-orange);
  outline-offset: 4px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .offre-90j .offre-90j-btn {
    transition: none;
  }
}

/* =========================================================
   RESPONSIVE — TABLETTES
   ========================================================= */

@media (max-width: 1100px) {

  .offre-90j .offre-90j-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: 35px;
    padding-top: 55px;
  }

  .offre-90j .offre-90j-hero h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  }

  .offre-90j .offre-90j-hero-features {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .offre-90j .offre-90j-hero-feature p {
    font-size: .76rem;
  }

  .offre-90j .offre-90j-gift-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 30px;
  }

  .offre-90j .offre-90j-gift-conditions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 128, 46, .4);
  }

  .offre-90j .offre-90j-method-step {
    flex-direction: column;
    gap: 14px;
    padding: 0 23px;
  }

  .offre-90j .offre-90j-final-cta,
  .offre-90j .offre-90j-final-faq {
    padding: 55px 40px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE / TABLETTE PORTRAIT
   ========================================================= */

@media (max-width: 800px) {

  /* HERO */

  .offre-90j .offre-90j-hero {
    min-height: auto;
  }

  .offre-90j .offre-90j-hero-image {
    object-position: 48% center;
  }

  .offre-90j .offre-90j-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 17, 24, .6) 0%,
        rgba(4, 17, 24, .54) 16%,
        rgba(4, 17, 24, .7) 42%,
        rgba(4, 17, 24, .97) 78%,
        rgba(4, 17, 24, 1) 100%
      );
  }

  .offre-90j .offre-90j-header {
    padding: 21px 0 8px;
  }

  .offre-90j .offre-90j-hero-grid {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 68px;
    padding-bottom: 50px;
  }

  .offre-90j .offre-90j-hero-content {
    max-width: 650px;
  }

  .offre-90j .offre-90j-hero h1 {
    font-size: clamp(2.5rem, 7vw, 4rem);
  }

  .offre-90j .offre-90j-hero-description {
    max-width: 570px;
  }

  .offre-90j .offre-90j-hero-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .offre-90j .offre-90j-form-card {
    max-width: 630px;
    margin-inline: auto;
  }

  /* BÉNÉFICES */

  .offre-90j .offre-90j-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 37px;
  }

  .offre-90j .offre-90j-benefit,
  .offre-90j .offre-90j-benefit:first-child,
  .offre-90j .offre-90j-benefit:last-child {
    padding: 0 20px;
  }

  .offre-90j .offre-90j-benefit:nth-child(2) {
    border-right: none;
  }

  /* MÉTHODE */

  .offre-90j .offre-90j-method-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 45px;
  }

  .offre-90j .offre-90j-method-step,
  .offre-90j .offre-90j-method-step:first-child,
  .offre-90j .offre-90j-method-step:last-child {
    flex-direction: row;
    gap: 20px;
    padding: 0 0 25px;
    border-right: 0;
    border-bottom: 1px solid var(--lp-border);
  }

  .offre-90j .offre-90j-method-step:last-child {
    border-bottom: 0;
  }

  /* CTA / FAQ */

  .offre-90j .offre-90j-final {
    grid-template-columns: 1fr;
  }

  .offre-90j .offre-90j-final-cta,
  .offre-90j .offre-90j-final-faq {
    justify-content: center;
  }

  .offre-90j .offre-90j-final-cta-inner,
  .offre-90j .offre-90j-final-faq-inner {
    max-width: 650px;
  }

  /* FOOTER */

  .offre-90j .offre-90j-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 13px;
  }
}

/* =========================================================
   RESPONSIVE — PETITS ÉCRANS
   ========================================================= */

@media (max-width: 600px) {

  .offre-90j h2 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }

  .offre-90j .offre-90j-eyebrow {
    font-size: .6rem;
    letter-spacing: .11em;
  }

  /* HEADER */

  .offre-90j .offre-90j-header {
    padding: 19px 0 6px;
  }

  .offre-90j .offre-90j-header-note {
    display: none;
  }

  .offre-90j .offre-90j-logo-number {
    font-size: 1.8rem;
  }

  .offre-90j .offre-90j-logo-name {
    font-size: .78rem;
  }

  /* HERO */

  .offre-90j .offre-90j-hero-grid {
    padding-top: 65px;
    padding-bottom: 38px;
    gap: 35px;
  }

  .offre-90j .offre-90j-hero h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.25rem);
    line-height: 1.09;
  }

  .offre-90j .offre-90j-hero h1 span {
    margin-top: 8px;
    font-size: .82em;
  }

  .offre-90j .offre-90j-hero-description {
    font-size: .94rem;
    line-height: 1.65;
  }

  .offre-90j .offre-90j-hero-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .offre-90j .offre-90j-hero-feature p {
    font-size: .77rem;
  }

  .offre-90j .offre-90j-hero-rule {
    margin: 25px 0 23px;
  }

  /* TYPEFORM */

  .offre-90j .offre-90j-form-card {
    padding: 23px 17px 20px;
  }

  .offre-90j .offre-90j-form-heading h2 {
    font-size: 1.55rem;
  }


  /* BÉNÉFICES */

  .offre-90j .offre-90j-benefits {
    padding: 62px 0 68px;
  }

  .offre-90j .offre-90j-benefits .offre-90j-section-heading {
    margin-bottom: 34px;
  }

  .offre-90j .offre-90j-benefits-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .offre-90j .offre-90j-benefit,
  .offre-90j .offre-90j-benefit:first-child,
  .offre-90j .offre-90j-benefit:last-child {
    padding: 0 0 25px;
    border-right: none;
    border-bottom: 1px solid var(--lp-border);
  }

  .offre-90j .offre-90j-benefit:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .offre-90j .offre-90j-benefit svg {
    margin-bottom: 13px;
  }

  .offre-90j .offre-90j-benefit h3 {
    margin-bottom: 7px;
    font-size: 1rem;
  }

  /* CADEAU */

  .offre-90j .offre-90j-gift {
    padding: 40px 0 45px;
  }

  .offre-90j .offre-90j-gift-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .offre-90j .offre-90j-gift-visual {
    height: 230px;
  }

  .offre-90j .offre-90j-gift-content h2 {
    font-size: clamp(2.35rem, 9vw, 3.3rem);
    white-space: normal;
  }

  .offre-90j .offre-90j-gift-conditions {
    grid-column: auto;
  }

  /* MÉTHODE */

  .offre-90j .offre-90j-method {
    padding: 62px 0 57px;
  }

  .offre-90j .offre-90j-method .offre-90j-section-heading {
    margin-bottom: 38px;
  }

  .offre-90j .offre-90j-method-number {
    font-size: 2.3rem;
  }

  /* JALONS */

  .offre-90j .offre-90j-milestones {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .offre-90j .offre-90j-milestone {
    min-height: 0;
    padding: 22px 24px;
  }

  .offre-90j .offre-90j-milestone-connector {
    flex-direction: column;
    height: 48px;
  }

  .offre-90j .offre-90j-milestone-dot {
    width: 6px;
    height: 6px;
  }

  .offre-90j .offre-90j-milestone-line {
    width: 1px;
    height: 100%;
    min-height: 24px;
    flex: 1;
  }

  .offre-90j .offre-90j-milestone-arrow {
    transform: rotate(90deg);
    font-size: 1.35rem;
    line-height: 1;
    margin-left: 0;
    margin-top: -4px;
  }

  /* CTA / FAQ */

  .offre-90j .offre-90j-final-cta,
  .offre-90j .offre-90j-final-faq {
    padding: 55px 24px;
  }

  .offre-90j .offre-90j-final-cta h2 {
    font-size: clamp(2rem, 7.5vw, 2.8rem);
  }

  .offre-90j .offre-90j-btn {
    width: 100%;
    gap: 15px;
  }

  /* FOOTER */

  .offre-90j .offre-90j-footer nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }
}
/* =========================================
   HERO — CADRAGE PHOTO DESKTOP
   ========================================= */

@media (min-width: 801px) {

  .offre-90j .offre-90j-hero-image {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }

  .offre-90j .offre-90j-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(4, 17, 24, .94) 0%,
        rgba(4, 17, 24, .55) 25%,
        rgba(4, 17, 24, .08) 50%,
        rgba(4, 17, 24, .55) 78%,
        rgba(4, 17, 24, 1) 100%
      ),
      linear-gradient(
        0deg,
        rgba(4, 17, 24, .9) 0%,
        transparent 35%
      );
  }

}
/* =========================================
   HERO MOBILE — PHOTO DERRIÈRE LE TEXTE
   ========================================= */

@media (max-width: 800px) {

  .offre-90j .offre-90j-hero {
    display: grid;
    grid-template-columns:
      minmax(16px, 1fr)
      minmax(0, 650px)
      minmax(16px, 1fr);

    grid-template-areas:
      ". header ."
      "photo photo photo"
      ". form .";

    background: var(--lp-dark);
  }

  /* Header séparé de la photo */
  .offre-90j .offre-90j-header {
    grid-area: header;
  }

  .offre-90j .offre-90j-hero-grid {
    display: contents;
  }

  /* Photo derrière le texte */
  .offre-90j .offre-90j-hero-image {
    grid-area: photo;
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 60% 75%;
  }

  /* Dégradé pour garder le texte lisible */
  .offre-90j .offre-90j-hero-overlay {
    grid-area: photo;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;

    background: linear-gradient(
      180deg,
      rgba(4, 17, 24, .58) 0%,
      rgba(4, 17, 24, .45) 35%,
      rgba(4, 17, 24, .70) 65%,
      rgba(4, 17, 24, 1) 100%
    );
  }

  /* Titre + description au-dessus de la photo */
  .offre-90j .offre-90j-hero-content {
    grid-area: photo;
    position: relative;
    z-index: 2;

    width: min(calc(100% - 32px), 650px);
    max-width: 650px;
    margin: 0 auto;
    padding: 65px 0 40px;
  }

  /* Typeform sur fond bleu nuit, sous la photo */
  .offre-90j .offre-90j-form-card {
    grid-area: form;
    position: relative;
    z-index: 2;
    height: fit-content;
    margin: 25px 0 45px;
  }
}

/* CTA ORANGE — OFFRE 90 JOURS */

.btn-offre-90j {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 26px;

  background: #FF802E;
  border: 1px solid #FF802E;
  border-radius: 4px;
  color: #111B22;

  font-weight: 700;
  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.btn-offre-90j:hover {
  background: #E76E1F;
  border-color: #E76E1F;
  color: #111B22;
  transform: translateY(-2px);
}

/* CTA ORANGE — MENU MOBILE */

.mobile-nav .mobile-cta-offre-90j {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 16px 20px;

  background: #FF802E;
  border: 1px solid #FF802E;
  border-radius: 4px;
  color: #111B22;

  font-weight: 700;
  text-align: center;
  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.mobile-nav .mobile-cta-offre-90j:hover {
  background: #E76E1F;
  border-color: #E76E1F;
  color: #111B22;
  transform: translateY(-2px);
}

/* CTA ORANGE — MEGA MENU DESKTOP */

.mega-highlight {
  display: flex;
  flex-direction: column;
}

.mega-highlight .mega-offre-90j {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  margin-top: auto;
  padding: 16px 20px;

  background: #FF802E;
  border: 1px solid #FF802E;
  border-radius: 4px;
  color: #111B22;

  font-weight: 700;
  text-align: center;
  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.mega-highlight .mega-offre-90j:hover {
  background: #E76E1F;
  border-color: #E76E1F;
  color: #111B22;
  transform: translateY(-2px);
}

/* EM — MÊME STYLE QUE LE SITE PRINCIPAL, ACCENT ORANGE */

.offre-90j h1 em,
.offre-90j h2 em,
.offre-90j .offre-90j-gift-content h2 em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  color: inherit;

  text-decoration: underline;
  text-decoration-color: #FF802E;
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.13em;
}


/* =========================================
   LP 90 JOURS — AVIS GOOGLE DARK
   ========================================= */

.offre-90j .offre-90j-reviews {
  padding: 90px 0;
  background: var(--lp-dark-2);
  color: #fff;
}

/* TITRE CENTRÉ */

.offre-90j .offre-90j-reviews .offre-90j-section-heading {
  max-width: 850px;
  margin: 0 auto 48px;
  text-align: center;
}

.offre-90j .offre-90j-reviews h2 {
  margin: 0 auto 18px;
}

.offre-90j .offre-90j-reviews-intro {
  max-width: 600px;
  margin: 0 auto;
  color: #b7c2c8;
  font-size: .95rem;
  line-height: 1.7;
}

/* GRILLE */

.offre-90j .offre-90j-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* CARTE */

.offre-90j .offre-90j-review {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;

  background: var(--lp-dark-3);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;

  color: #fff;
  text-decoration: none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.offre-90j .offre-90j-review:hover {
  transform: translateY(-3px);
  border-color: rgba(255,128,46,.65);
  background: #142d3a;
  color: #fff;
}

/* ÉTOILES */

.offre-90j .offre-90j-review-stars {
  margin-bottom: 20px;
  color: var(--lp-orange);
  font-size: 1.1rem;
  letter-spacing: .15em;
  line-height: 1;
}

/* TEXTE DE L'AVIS */

.offre-90j .offre-90j-review-text {
  flex: 0 1 auto;
  margin: 0 0 28px;

  color: #e0e7eb;
  font-size: .84rem;
  line-height: 1.75;
  white-space: normal;
}

/* AUTEUR */

.offre-90j .offre-90j-review-footer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.offre-90j .offre-90j-review-footer img,
.offre-90j .offre-90j-review-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.offre-90j .offre-90j-review-avatar {
  display: grid;
  place-items: center;
  background: #294454;
  color: var(--lp-orange);
  font-weight: 700;
}

.offre-90j .offre-90j-review-footer strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.offre-90j .offre-90j-review-footer > div > span {
  display: block;
  color: #9fadb7;
  font-size: .7rem;
}

/* PIED DE SECTION */

.offre-90j .offre-90j-reviews-bottom {
  margin-top: 38px;
  text-align: center;
}

.offre-90j .offre-90j-reviews-bottom p {
  margin: 0 0 12px;
  color: #b7c2c8;
  font-size: .8rem;
}

.offre-90j .offre-90j-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-orange);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.offre-90j .offre-90j-reviews-link:hover {
  color: #ffad72;
}

/* TABLETTE */

@media (max-width: 1000px) {
  .offre-90j .offre-90j-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .offre-90j .offre-90j-reviews {
    padding: 65px 0;
  }

  .offre-90j .offre-90j-reviews-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .offre-90j .offre-90j-review {
    padding: 24px 21px;
  }

  .offre-90j .offre-90j-review-text {
    font-size: .85rem;
  }

  .offre-90j .offre-90j-reviews .offre-90j-section-heading {
    margin-bottom: 35px;
  }
}

/* =========================================
   LP 90J — AVIS : AUTEUR EN HAUT
   ========================================= */

/* Avatar + nom */

.offre-90j .offre-90j-review-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.offre-90j .offre-90j-review-header img,
.offre-90j .offre-90j-review-header .offre-90j-review-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.offre-90j .offre-90j-review-header strong {
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
}

/* Étoiles + date */

.offre-90j .offre-90j-review-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.offre-90j .offre-90j-review-meta .offre-90j-review-stars {
  margin: 0;
  color: var(--lp-orange);
  font-size: 1rem;
  letter-spacing: .08em;
}

.offre-90j .offre-90j-review-date {
  color: #9fadb7;
  font-size: .72rem;
}

/* Texte des témoignages */

.offre-90j .offre-90j-review-body p {
  margin: 0 0 16px;
  color: #e0e7eb;
  font-size: .84rem;
  line-height: 1.75;
}

.offre-90j .offre-90j-review-body p:last-child {
  margin-bottom: 0;
}

/* Cartes adaptées à leur contenu */

.offre-90j .offre-90j-reviews-grid {
  align-items: start;
}


/* Calendrier déroulant */


/* Panneau invisible mais calendrier déjà dimensionné */
.offre-90j-calendar-panel {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: visible;

  transition:
    height 0.5s cubic-bezier(.22, 1, .36, 1),
    opacity 0.3s ease;
}

/* Ouverture de la carte */
.offre-90j-calendar-panel.is-open {
  height: 724px;
  opacity: 1;
  pointer-events: auto;
}

/* Calendly conserve toujours ses 700px */
.offre-90j-calendar-inner {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 700px;
  overflow: hidden;
}

#offre-90j-calendar-widget {
  width: 100%;
  min-width: 0;
  height: 700px;
  margin: 0;
}


/* Animation de la flèche */

#offre-90j-calendar-trigger span {
  display: inline-block;
  transition: transform 0.3s ease;
}

#offre-90j-calendar-trigger[aria-expanded="true"] span {
  transform: rotate(90deg);
}


/* ==========================================
   GALERIE 90 JOURS — DOUBLE MARQUEE
   ========================================== */

.offre-90j-gallery {
  --duration: 120s;
  --image-width: 24vw;

  position: relative;
  width: 100vw;
  max-width: none;
  height: 50vh;
  height: 50svh;

  margin: 0 0 0 calc(50% - 50vw);
  padding: 0;

  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));

  overflow: hidden;
  isolation: isolate;
}

/* Chaque ligne occupe exactement 50 % */
.offre-90j-gallery-row {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Bande horizontale */
.offre-90j-gallery-track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: 0;
  will-change: transform;
}

/* Ensemble de photos */
.offre-90j-gallery-group {
  display: flex;
  flex: none;
  height: 100%;
  gap: 0;
}

/* Photos */
.offre-90j-gallery-group img {
  display: block;

  width: var(--image-width);
  min-width: var(--image-width);
  max-width: none;
  height: 100%;

  flex: 0 0 var(--image-width);

  object-fit: cover;
  object-position:
    var(--focus-x, 50%)
    var(--focus-y, 50%);

  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* Sens gauche */
.offre-90j-gallery-track.gallery-left.is-ready {
  animation: galerie-gauche var(--duration) linear infinite;
}

/* Sens droite */
.offre-90j-gallery-track.gallery-right.is-ready {
  animation: galerie-droite var(--duration) linear infinite;
}

@keyframes galerie-gauche {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-80%, 0, 0); }
}

@keyframes galerie-droite {
  from { transform: translate3d(-80%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

  .offre-90j-gallery {
    --image-width: 50vw;

    height: 60vh;
    height: 60svh;
  }

}

.offre-90j-gallery-photo {
  width: var(--image-width);
  height: 100%;
  flex: 0 0 var(--image-width);
  overflow: hidden;
}

.offre-90j-gallery-group .offre-90j-gallery-photo img {
  width: 100%;
  min-width: 0;
  height: 100%;
  flex: none;

  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
}


/* =========================================
   01 — VARIABLES ET FOND
   ========================================= */

body.links23-page {
  --links23-navy: #0d1b2a;
  --links23-surface: #14263a;
  --links23-surface-hover: #1a3047;
  --links23-cream: #f8f7f3;
  --links23-cyan: #2ed5ff;
  --links23-orange: #ff9055;
  --links23-stroke: rgba(248, 247, 243, .19);
  --links23-soft: rgba(248, 247, 243, .68);

  margin: 0;
  min-height: 100vh;
  min-height: 100svh;

  background:
    radial-gradient(
      ellipse 500px 340px at 50% -100px,
      rgba(46, 213, 255, .10),
      transparent 78%
    ),
    radial-gradient(
      ellipse 410px 360px at 90% 105%,
      rgba(255, 144, 85, .065),
      transparent 80%
    ),
    var(--links23-navy);

  color: var(--links23-cream);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.links23-page,
body.links23-page *,
body.links23-page *::before,
body.links23-page *::after {
  box-sizing: border-box;
}

.links23-page a {
  color: inherit;
  text-decoration: none;
}

.links23-page p,
.links23-page h1 {
  margin: 0;
}


/* =========================================
   02 — CONTENEUR
   ========================================= */

.links23-shell {
  width: min(100% - 36px, 510px);
  margin-inline: auto;

  padding-block:
    clamp(38px, 7vh, 82px)
    max(30px, env(safe-area-inset-bottom));
}

.links23-skip {
  position: absolute;
  z-index: 20;
  left: 16px;
  top: -100px;

  background: var(--links23-cream);
  color: var(--links23-navy) !important;
  padding: 12px 15px;
  font-weight: 600;
}

.links23-skip:focus {
  top: 12px;
}


/* =========================================
   03 — HEADER
   ========================================= */

.links23-header {
  text-align: center;
}


.links23-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0;
  line-height: 1;
}

.links23-brand__square {
  display: grid;
  place-items: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;

  background: #ffffff;
  color: #0d1b2a;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: 1;
}

.links23-brand__wordmark {
  color: #ffffff;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.075em;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .links23-brand {
    gap: 13px;
  }

  .links23-brand__square {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
    font-size: 40px;
  }

  .links23-brand__wordmark {
    font-size: 19px;
    letter-spacing: 0.045em;
  }
}


.links23-eyebrow,
.links23-group__label,
.links23-card__kicker,
.links23-footer {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .10em;
}

.links23-eyebrow {
  margin-top: 33px !important;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--links23-cyan);
}

.links23-title {
  margin-top: 9px !important;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.1vw, 3.9rem);
  letter-spacing: -.035em;
  line-height: 1.03;
}

.links23-title em {
  font-weight: 700;
  font-style: normal;
}

.links23-intro {
  max-width: 330px;
  margin: 16px auto 0 !important;

  color: var(--links23-soft);
  font-size: 14px;
  line-height: 1.6;
}


/* =========================================
   04 — GROUPES DE LIENS
   ========================================= */

.links23-main {
  margin-top: 35px;
}

.links23-nav {
  display: grid;
  gap: 30px;
}

.links23-group {
  display: grid;
  gap: 10px;
}

.links23-group__label {
  margin: 0 0 2px !important;

  color: var(--links23-soft);
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
}


/* =========================================
   05 — CARTES : STYLE COMMUN
   ========================================= */

.links23-card {
  --links23-card-bg: var(--links23-surface);
  --links23-card-ink: var(--links23-cream);
  --links23-card-muted: rgba(248, 247, 243, .64);
  --links23-glow: rgba(46, 213, 255, .20);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 78px;
  padding: 17px 19px;

  border: 1px solid var(--links23-stroke);
  border-radius: 2px;
  overflow: hidden;

  background: var(--links23-card-bg);
  color: var(--links23-card-ink) !important;

  isolation: isolate;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;

  -webkit-tap-highlight-color: transparent;
}

.links23-card__content {
  position: relative;
  z-index: 1;

  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;

  min-width: 0;
  text-align: left;
}

.links23-card__kicker {
  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--links23-cyan);
}

.links23-card__title {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.018em;
}

.links23-card__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--links23-card-muted);
}

.links23-card__arrow {
  position: relative;
  z-index: 1;

  display: grid;
  flex: 0 0 33px;
  width: 33px;
  height: 33px;

  place-items: center;
  align-self: center;



  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  opacity: .82;

  transition: transform .22s ease;
}


/* =========================================
   06 — PRIORITÉ 1 : CTA ORANGE
   ========================================= */

.links23-card--primary {
  --links23-card-bg: var(--links23-orange);
  --links23-card-ink: var(--links23-navy);
  --links23-card-muted: rgba(13, 27, 42, .84);
  --links23-glow: rgba(255, 144, 85, .30);

  min-height: 135px;
  padding: 21px 20px;
  border-color: transparent;
}

.links23-card--primary .links23-card__kicker {
  color: var(--links23-navy);
  opacity: .78;
}

.links23-card--primary .links23-card__title {
  max-width: 350px;
  font-size: clamp(19px, 4.7vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.links23-card--primary .links23-card__description {
  margin-top: 5px;
  font-size: 12px;
}


/* =========================================
   07 — PRIORITÉ 2 : CTA BLEU
   ========================================= */

.links23-card--secondary {
  border-color: rgba(46, 213, 255, .55);
}

.links23-card--secondary .links23-card__arrow {
  color: var(--links23-cyan);
}


/* =========================================
   08 — PRIORITÉ 3 : LIENS CLASSIQUES
   ========================================= */

.links23-card--tertiary {
  min-height: 74px;
  --links23-card-bg: rgba(248, 247, 243, .055);
}

.links23-card--tertiary .links23-card__title {
  font-size: 14px;
}

.links23-card--tertiary .links23-card__arrow,
.links23-card--quiet .links23-card__arrow {
  border: 0;
  width: 24px;
  flex-basis: 24px;
  opacity: .7;
}


/* =========================================
   09 — PRIORITÉ 4 : LIEN DISCRET
   ========================================= */

.links23-card--quiet {
  min-height: 58px;
  padding-block: 12px;

  border-color: rgba(248, 247, 243, .12);
  background: var(--accent);
}

.links23-card--quiet .links23-card__title {
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
}

.links23-card--quiet .links23-card__arrow {
  color: var(--dark);
}


/* =========================================
   10 — HOVER ET ACCESSIBILITÉ
   ========================================= */

.links23-page a:focus-visible {
  outline: 3px solid var(--links23-cyan);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {

  .links23-card:hover {
    transform: translateY(-2px);
    border-color: rgba(248, 247, 243, .55);
  }

  .links23-card--primary:hover {
    border-color: transparent;
    box-shadow: 0 13px 34px rgba(255, 144, 85, .19);
  }

  .links23-card--secondary:hover {
    border-color: var(--links23-cyan);
  }

  .links23-card:hover .links23-card__arrow {
    transform: translate(2px, -2px);
  }

  .links23-card--quiet:hover .links23-card__title {
    color: var(--dark);
  }
}


/* =========================================
   11 — ANIMATION : HALO
   ========================================= */

.links23-effect--halo {
  animation: links23-halo 5s ease-in-out infinite;
}

@keyframes links23-halo {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--links23-glow);
  }

  50% {
    box-shadow: 0 0 20px 1px var(--links23-glow);
  }
}


/* =========================================
   12 — ANIMATION : SHIMMER
   ========================================= */

.links23-effect--shimmer::before {
  content: "";
  position: absolute;
  z-index: 0;

  inset: 0 auto 0 -100%;
  width: 65%;

  pointer-events: none;

  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .12) 48%,
    transparent 100%
  );

  transform: skewX(-20deg);

  animation: links23-shimmer 8s ease-in-out infinite;
}

@keyframes links23-shimmer {
  0%, 12% {
    left: -100%;
  }

  34%, 100% {
    left: 145%;
  }
}


/* =========================================
   13 — ANIMATION : PULSE
   ========================================= */

.links23-effect--pulse {
  animation: links23-pulse 4.8s ease-in-out infinite;
}

@keyframes links23-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}


/* =========================================
   14 — ANIMATION : BORDURE
   ========================================= */

.links23-card.links23-effect--border {
  border: 1px solid transparent;

  background:
    linear-gradient(
      var(--links23-card-bg),
      var(--links23-card-bg)
    ) padding-box,

    linear-gradient(
      105deg,
      var(--links23-cyan),
      var(--links23-orange),
      var(--links23-cyan)
    ) border-box;

  background-size: 100% 100%, 250% 100%;

  animation: links23-border-flow 6s linear infinite;
}

@keyframes links23-border-flow {
  0% {
    background-position: 0 0, 0% 50%;
  }

  100% {
    background-position: 0 0, 100% 50%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .links23-effect--pulse:hover {
    animation-play-state: paused;
    transform: translateY(-2px);
  }
}


/* =========================================
   15 — FOOTER
   ========================================= */

.links23-footer {
  margin-top: 41px;

  color: rgba(248, 247, 243, .48);
  text-align: center;
  font-size: 8px;
  line-height: 1.6;
}

.links23-footer__rule {
  display: block;
  width: 26px;
  height: 1px;

  margin: 0 auto 15px;

  background: var(--links23-orange);
  opacity: .7;
}

.links23-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================
   16 — RESPONSIVE
   ========================================= */

@media (min-width: 640px) {

  .links23-shell {
    padding-top: 74px;
  }

  .links23-main {
    margin-top: 41px;
  }

  .links23-nav {
    gap: 34px;
  }

  .links23-card {
    padding-inline: 22px;
  }

  .links23-card--primary {
    padding-block: 23px;
  }
}

@media (max-width: 359px) {

  .links23-shell {
    width: calc(100% - 26px);
  }

  .links23-card {
    padding-inline: 14px;
  }

  .links23-card--primary .links23-card__title {
    font-size: 18px;
  }

  .links23-title {
    font-size: 38px;
  }
}


/* =========================================
   17 — RÉDUCTION DES ANIMATIONS
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .links23-page *,
  .links23-page *::before,
  .links23-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}