:root{
  --blue:#1E3A8A;
  --purple:#6D28D9;
  --purple-hover:#5B21B6;
  --text:#111827;
  --muted:#4B5563;
  --border:#E2E8F0;
  --surface-soft:#F8FAFC;
  --yellow:#FFF7D6;
  --yellow-border:#E6B800;
  --footer:#E5E7EB;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --radius:12px;
  /* Type scale: every font-size in this file should reference one of these */
  --fs-2xs:13px;
  --fs-xs:15px;
  --fs-sm:16px;
  --fs-icon:17px;
  --fs-base:18px;
  --fs-md:21px;
  --fs-heading:22px;
  --fs-heading-lg:26px;
  --fs-2xl:34px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--text);
  background:#EEF2F7;
}
a{color:var(--purple);text-underline-offset:3px}
a:hover{color:var(--purple-hover)}
button,input{font:inherit}
img{max-width:100%}
.container{width:min(1400px,calc(100% - 40px));margin:auto}
.site-shell{background:#fff;min-height:100vh;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:12px 16px;z-index:9999}
.flex {display:flex;}
.justicenter {justify-content:center;}
header{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:90px;
  padding:16px 40px;
  border-bottom:2px solid var(--border);
  background:#fff;
}
.logo-link{display:flex;align-items:center;flex:0 0 auto}
.logo-link img{height:40px;width:auto;display:block}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 12px}
.nav-menu{display:flex;align-items:center;gap:16px;list-style:none;padding:0;margin:0 0 0 auto}
.nav-menu a{
  color:var(--text);text-decoration:none;font-weight:650;padding:9px 10px;border-radius:7px
}
.nav-menu a:hover,.nav-menu a.active{
  color:var(--blue);background:#EFF6FF;text-decoration:underline
}
.btn-affilie{
  background:var(--purple);color:#fff!important;text-decoration:none;font-weight:750;
  padding:12px 22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;white-space:nowrap;
  align-self: flex-end;
  margin-top: auto;
}
.btn-affilie:hover{background:var(--purple-hover)}

.hero{
  position:relative;overflow:hidden;
  color:#fff;text-align:center;padding:48px 40px;
  background:linear-gradient(135deg,var(--blue),#1E1B4B)
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,15%),rgba(255,255,255,.10),transparent 70%);
  transition:background .3s ease
}
.hero h1,.hero p{position:relative}
.hero h1{font-size:clamp(32px,4vw,42px);line-height:1.15;margin:0 0 12px}
.hero p{font-size:var(--fs-md);margin:0;opacity:.95}

.main-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding:40px
}
.main-layout.full-width{grid-template-columns:1fr}
.content{text-align:justify}
.content section{margin-bottom:38px}
.content h2{color:var(--blue);font-size:var(--fs-heading-lg);line-height:1.25;margin:0 0 16px}
.content h3{color:var(--blue)}
.sidebar{display:flex;flex-direction:column;gap:22px}
.sidebar-card{
  border:2px solid var(--border);border-radius:var(--radius);padding:24px;background:#fff
}
.sidebar-card h2,.sidebar-card h3{
  color:var(--blue);font-size:var(--fs-heading);margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--border)
}
.phone{
  font-size:var(--fs-heading);font-weight:800;color:var(--blue);margin:0 0 16px
}
.address{margin-top:0}
.claim{
  background:var(--surface-soft);border-left:5px solid var(--blue);border-radius:0 8px 8px 0
}
.claim h3{border-bottom:0;padding-bottom:0}

.piliers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.card{
  border:2px solid var(--border);border-radius:var(--radius);padding:25px;background:#fff;box-shadow:var(--shadow)
}
.card h2{font-size:var(--fs-heading);color:var(--blue);margin:0 0 16px;text-align:left}
.news-list{padding-left:22px;text-align:left}
.news-list li{margin-bottom:14px}
.news-details{display:none}
.news-details.expanded{display:block}
.news-read-more-btn{display:inline}

.faq{display:flex;flex-direction:column;gap:10px;text-align:left}
.faq-item{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.faq-question{
  width:100%;border:0;background:#F8F5FF;color:var(--purple);font-weight:700;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer
}
.faq-arrow{transition:transform .18s ease;font-size:var(--fs-xs)}
.faq-question[aria-expanded="true"] .faq-arrow{transform:rotate(90deg)}
.faq-answer{display:none;padding:14px;color:var(--muted);border-top:1px solid var(--border)}
.faq-answer.open{display:block}

.home-lower{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:36px;align-items:stretch}
.home-lower .sidebar-card,.home-lower .good-to-know{height:100%;box-sizing:border-box}
.home-lower .good-to-know{margin-top:0;display:flex;flex-direction:column}
.home-lower .good-to-know-row{flex:1 1 auto;align-items:stretch;flex-direction:column;gap:16px}
.home-lower .good-to-know-row p{flex:0 0 auto}
.home-lower .good-to-know-row .btn-affilie{align-self:flex-end}
.good-to-know{
  background:var(--yellow);border:2px solid var(--yellow-border);border-radius:var(--radius);
  padding:24px 26px;margin-top:28px;text-align:left
}
.good-to-know h3{color:#7C5B00;margin:0 0 10px;font-size:var(--fs-heading)}
.good-to-know p{margin:0 0 16px}
.good-to-know-row{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.good-to-know-row p{margin:0;flex:1 1 380px}
.good-to-know-row .btn-affilie{flex:0 0 auto}

.good-to-know-content { flex:1 1 380px; }
.good-to-know-text-long { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.good-to-know-text-long.expanded { display: block; }
.read-more-btn { display: none; margin-top: 4px; padding: 0; border: none; background: none;
    color: #005A9C; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; text-decoration: underline; }

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rate-box{border:2px solid var(--border);border-radius:10px;padding:21px}
.rate-box.full{border-top:6px solid #10B981}
.rate-box.early{border-top:6px solid #F59E0B}
.rate-box ul{padding-left:24px}
.timeline-wrap{margin:24px 0;padding:22px;background:var(--surface-soft);border-radius:10px;text-align:center}
.timeline{display:flex;justify-content:space-around;position:relative;margin-top:22px}
.timeline:before{content:"";position:absolute;top:18px;left:15%;right:15%;height:4px;background:var(--blue)}
.timeline-item{position:relative;z-index:1;text-align:center}
.timeline-point{
  width:42px;height:42px;border-radius:50%;border:4px solid var(--blue);background:#fff;
  display:flex;align-items:center;justify-content:center;margin:auto;font-weight:800;color:var(--blue)
}
.timeline-label{margin-top:10px;font-weight:700}

.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);z-index:1000;
  padding:40px 16px;overflow-y:auto
}
/* Modal taller than the viewport just grows and the backdrop scrolls, instead of clipping off the top/bottom */
.modal-backdrop.open{display:block}
.modal{
  width:min(560px,calc(100% - 32px));max-height:none;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.3)
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid var(--border)
}
.modal-header h2{margin:0;color:var(--blue);font-size:var(--fs-heading-lg)}
.modal-close{border:0;background:#F1F5F9;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:24px}
.modal-body{padding:24px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:0}
th,td{padding:9px 11px;border:1px solid var(--border);text-align:left}
th{background:var(--blue);color:#fff}
tbody tr:nth-child(even){background:#F8FAFC}

.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card{background:var(--surface-soft);border:2px solid var(--border);border-radius:10px;padding:21px;text-align:center}
.step-number{width:42px;height:42px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-weight:800}
.formula{background:#EFF6FF;border:2px dashed var(--blue);padding:24px;border-radius:10px;text-align:center;font-weight:800;color:var(--blue);font-size:var(--fs-md)}
.change-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

footer{background:var(--footer);color:#374151;padding:27px 20px;margin-top:30px}
.footer-links{display:flex;justify-content:center;gap:16px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.footer-links a{color:#374151;text-decoration:none;font-size:var(--fs-sm)}
.footer-links a:hover{text-decoration:underline;color:#111827}

@media(max-width:1050px){
  header{flex-wrap:wrap;padding:14px 22px}
  .nav-toggle{display:block}
  .nav-menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;margin:0}
  .nav-menu.open{display:flex}
  .nav-menu a{display:block}
  header>.btn-affilie{display:none}
  .main-layout{grid-template-columns:1fr;padding:28px}
  .piliers-grid,.grid-2,.home-lower,.stepper,.change-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:100%}
  .site-shell{box-shadow:none}
  .hero{padding:36px 22px}
  .main-layout{padding:22px 18px}
  body{background:#fff}
}


/* Icônes Font Awesome en style flat */
.title-with-icon{display:flex;align-items:center;gap:11px;text-align:left}
.flat-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#EDE9FE;color:var(--purple);font-size:var(--fs-icon);
}
.sidebar-card .flat-icon{width:34px;height:34px;flex-basis:34px;font-size:var(--fs-xs);background:#DBEAFE;color:var(--blue)}
.good-to-know .flat-icon{background:#FDE68A;color:#7C5B00}
.claim .flat-icon{background:#DBEAFE;color:var(--blue)}
.timeline-top{margin:0 0 30px}
.modal-body table{font-size:var(--fs-sm)}
.modal-body th:last-child,.modal-body td:last-child{text-align:center}
@media(max-width:640px){
  .modal-backdrop{padding:16px}
  .modal-header{padding:16px 18px}
  .modal-header h2{font-size:var(--fs-md)}
  .modal-body{padding:18px}
}

/* ============ Smart Brochure UX layer ============ */

/* Native cross-fade between full page loads; no-op (silently ignored) on unsupported browsers */
@view-transition{
  navigation: auto;
}

/* Typography polish: no lonely wrapped words, no horizontal overflow from long strings */
body{overflow-wrap:break-word}
h1,h2,h3,.card-cta,.step-card h3,.faq-question,.timeline-label{text-wrap:balance}
.content p,.faq-answer p,.good-to-know p,.rate-box p,td,.card p,.step-card p{text-wrap:pretty}

/* Full page load fades in; no transform (would change the containing block for the fixed-position modal) */
body{animation:page-enter .45s ease both}
@keyframes page-enter{from{opacity:0}to{opacity:1}}

/* Scroll-progress indicator, sits right under the header */
header{position:relative}
.scroll-progress{position:absolute;left:0;right:0;bottom:-2px;height:3px;background:transparent;overflow:hidden}
.scroll-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--purple))}

/* Scroll reveal (opacity + rise), with automatic stagger for grid/list children */
.reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .55s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1)}
.reveal.is-visible{opacity:1;transform:none}
.piliers-grid>.reveal:nth-child(2),.grid-2>.reveal:nth-child(2),.stepper>.reveal:nth-child(2),.change-grid>.reveal:nth-child(2),.home-lower>.reveal:nth-child(2){transition-delay:.1s}
.piliers-grid>.reveal:nth-child(3),.stepper>.reveal:nth-child(3){transition-delay:.2s}

/* Nav: animated underline + material-style ripple (injected by script.js on click) */
.nav-menu a{position:relative;text-decoration:none;overflow:hidden}
.nav-menu a:hover,.nav-menu a.active{text-decoration:none}
.nav-menu a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease
}
.nav-menu a:hover::after,.nav-menu a.active::after{transform:scaleX(1)}
.nav-ripple{
  position:absolute;border-radius:50%;background:rgba(30,58,138,.18);
  transform:scale(0);animation:nav-ripple-anim .5s ease-out forwards;pointer-events:none
}
@keyframes nav-ripple-anim{to{transform:scale(2.6);opacity:0}}

/* Card / step-card / sidebar-card micro-interactions */
.card,.step-card,.sidebar-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue)}
.sidebar-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.10)}
.flat-icon{transition:transform .22s ease,background-color .22s ease}
.card:hover .flat-icon,.step-card:hover .flat-icon,.sidebar-card:hover .flat-icon{transform:translateY(-2px) scale(1.06)}
/* Any icon badge reacts on its own hover too, so icons outside cards (e.g. good-to-know) aren't stiff */
.flat-icon:hover{transform:translateY(-2px) scale(1.08)}

/* Buttons: subtle lift on hover, settle on press */
.btn-affilie{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.btn-affilie:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(109,40,217,.28)}
.btn-affilie:active{transform:translateY(0)}
.btn-affilie.is-confirmed{background:#10B981}

/* Card CTA links with a moving arrow */
.card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;color:var(--purple);text-decoration:none;white-space:nowrap}
.card-cta .fa{transition:transform .2s ease}
.card-cta:hover .fa,.card-cta:focus-visible .fa{transform:translateX(4px)}

/* Hesitation nudge: a one-shot wiggle after lingering on a clickable icon, skipped on a quick hover */
@keyframes icon-wiggle{
  0%,100%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(-10deg) scale(1.08)}
  50%{transform:rotate(0deg) scale(1.1)}
  75%{transform:rotate(10deg) scale(1.08)}
}
a:hover .fa,button:hover .fa{animation:icon-wiggle .45s ease .55s 1}

/* Modal trigger link: looks clickable, small icon ties it visually to the age explorer */
.barometer-link{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--purple);
  text-decoration:none;transition:gap .2s ease;
  font-size:var(--fs-sm);
}
.barometer-link:hover{gap:10px}
.barometer-link .fa{transition:transform .2s ease}
.barometer-link:hover .fa{transform:scale(1.15)}

/* FAQ: clickability cues, stronger arrow rotation, smooth open/close */
.faq-item{transition:box-shadow .22s ease,transform .22s ease}
.faq-item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.faq-question{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.faq-question:hover{background:#F1EBFF;box-shadow:inset 0 0 0 2px #DDD6FE}
.faq-question[aria-expanded="true"]{background:#F1EBFF;color:var(--purple-hover);box-shadow:inset 0 0 0 2px #C4B5FD}
.faq-arrow{display:inline-flex;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.faq-question[aria-expanded="false"]:hover .faq-arrow{transform:translateX(3px)}
.faq-question[aria-expanded="true"] .faq-arrow{transform:rotate(90deg)}
.faq-answer{
  display:block;max-height:0;opacity:0;overflow:hidden;padding:0 14px;border-top:0 solid var(--border);
  transition:max-height .35s ease,opacity .3s ease,padding .35s ease
}
.faq-answer.open{max-height:420px;opacity:1;padding:14px;border-top-width:1px}

/* Stepper: connecting line + active state as the user scrolls the journey */
.stepper{position:relative}
.stepper .step-card{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stepper .step-card:not(:last-child)::after{
  content:"";position:absolute;top:21px;left:100%;width:20px;height:2px;background:var(--border);transition:background-color .3s ease
}
.stepper .step-card.is-active{border-color:var(--purple);box-shadow:var(--shadow)}
.stepper .step-card.is-active .step-number{background:var(--blue)}
.stepper .step-card.is-active:not(:last-child)::after{background:var(--purple)}
@media(max-width:1050px){
  .stepper .step-card::after{display:none}
}

/* Keeps the barème link left-aligned so its justified paragraph doesn't stretch the icon/text gap */
.barometer-wrap{text-align:left}

/* Respect reduced-motion preferences across the whole UX layer */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}