:root{
    --navy:#14224F; --navy-deep:#0e1836; --ivory:#FBF7EC; --white:#fff;
    --teal:#0F9D8C; --teal-dark:#0B6F62; --gold:#D99521; --ink:#141413;
    --slate:#5B6473; --line:#E7E1D2; --maxw:1120px;
    --font:"Segoe UI", system-ui, -apple-system, "Aptos", Roboto, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--ivory); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  img,svg{max-width:100%; display:block}
  h1,h2,h3{color:var(--navy); margin:0; line-height:1.12; letter-spacing:-.015em; text-wrap:balance}
  p{margin:0}
  a{color:var(--teal-dark); text-decoration:none}
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
  .eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--teal-dark)}
  /* Revelation au defilement (selon la position de scroll, sans clic) */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:50px; font:inherit; font-weight:700; font-size:1rem; padding:.86em 1.55em; border-radius:12px; cursor:pointer; border:1.5px solid transparent; background-color:transparent; transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; text-align:center}
  .btn-teal{background-color:var(--teal); color:#052a25; box-shadow:0 14px 30px rgba(15,157,140,.26)}
  .btn-teal:hover{background-color:var(--teal-dark); color:#fff; transform:translateY(-1px); box-shadow:0 18px 36px rgba(11,111,98,.30); text-decoration:none}
  .btn-navy{background-color:var(--navy); color:#fff; box-shadow:0 14px 30px rgba(20,34,79,.16)}
  .btn-navy:hover{background-color:#1d3168; transform:translateY(-1px); text-decoration:none}
  /* Boutons d'action : micro-reseau anime dans le fond */
  .btn-teal,.btn-navy{background-image:radial-gradient(circle 1.4px at 22% 32%, rgba(255,255,255,.36) 99%, transparent), radial-gradient(circle 1px at 72% 22%, rgba(255,255,255,.26) 99%, transparent), radial-gradient(circle 1.6px at 46% 76%, rgba(127,216,203,.4) 99%, transparent), radial-gradient(circle 1px at 86% 62%, rgba(255,255,255,.22) 99%, transparent); background-size:170% 170%,230% 230%,200% 200%,260% 260%; animation:btnnet 14s ease-in-out infinite alternate}
  @keyframes btnnet{0%{background-position:0% 0%,100% 0%,0% 100%,50% 50%}100%{background-position:100% 100%,0% 100%,100% 0%,50% 0%}}
  .btn-line{border-color:rgba(255,255,255,.55); color:#fff}
  .btn-line:hover{background:rgba(255,255,255,.1)}
  .btn-ghost{border-color:var(--line); color:var(--navy)}
  .btn-ghost:hover{border-color:var(--navy)}

  /* Header */
  .hd{position:sticky; top:0; z-index:40; background:rgba(251,247,236,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(20,34,79,.04)}
  @supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){.hd{background:rgba(251,247,236,.98)}}
  .hd .row{display:flex; align-items:center; justify-content:space-between; height:78px; gap:18px; transition:height .3s ease}
  .hd.compact .row{height:64px}
  .hd nav{display:none; gap:30px; align-items:center}
  .hd nav a{color:var(--navy); font-weight:500; font-size:.96rem}
  .hd nav a:hover{color:var(--teal-dark)}
  .nav-link{font:inherit; background:none; border:none; padding:0; cursor:pointer; color:var(--navy); font-weight:500; font-size:.96rem}
  .nav-link:hover{color:var(--teal-dark)}

  /* Logo qui se déploie / se replie (badge K -> Kolytica) */
  .logo-wrap{display:inline-flex; overflow:hidden; width:146px; transition:width .6s ease-out}
  .logo-wrap.collapsed{width:48px}
  .hd.compact .logo-wrap{width:48px}
  .logo-h{height:60px; width:146px; max-width:none; flex:none}
  .logo-f{filter:drop-shadow(0 6px 14px rgba(0,0,0,.30))}

  .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:transparent; border:0; border-radius:10px; padding:0; cursor:pointer; transition:background .15s}
  .nav-toggle:hover{background:rgba(15,157,140,.10)}
  .nav-toggle span{display:block; width:22px; height:2.5px; border-radius:2px; background:var(--teal-dark); margin:0; transition:transform .22s ease, opacity .18s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  @media(min-width:900px){ .hd nav{display:flex} .nav-toggle{display:none} }
  .hdr-contact{min-height:44px; padding:.55em 1.3em; font-size:.95rem; white-space:nowrap; align-self:center}
  @media(max-width:899px){ .hdr-contact{display:none} }

  /* Menus déroulants (desktop) */
  .ndd{position:relative}
  .ndd-btn{font:inherit; background:none; border:none; padding:0; cursor:pointer; color:var(--navy); font-weight:500; font-size:.96rem; display:inline-flex; align-items:center; gap:6px}
  .ndd-btn:hover{color:var(--teal-dark)}
  .ndd-btn svg{width:12px; height:12px; transition:transform .2s ease}
  .ndd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ndd-menu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:320px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(20,34,79,.12); padding:10px; z-index:60}
  .ndd-menu[hidden]{display:none}
  .ndd-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; margin-bottom:8px; border:1px solid var(--line); border-radius:10px; background:#FBF7EC}
  .ndd-tab{min-height:34px; border:0; border-radius:8px; background:transparent; color:var(--slate); font:inherit; font-size:.82rem; font-weight:750; cursor:pointer; transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
  .ndd-tab:hover{color:var(--navy); background:rgba(15,157,140,.07)}
  .ndd-tab.is-active{background:var(--navy); color:#fff; box-shadow:0 8px 18px rgba(20,34,79,.14)}
  .ndd-tab.is-active::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:7px; background:var(--gold); vertical-align:middle}
  .ndd-panel{display:grid; gap:3px}
  .ndd-panel[hidden]{display:none}
  .ndd-item{display:block; width:100%; text-align:left; font:inherit; background:none; border:none; border-radius:8px; padding:9px 10px; cursor:pointer}
  .ndd-item:hover{background:rgba(15,157,140,.06)}
  .ndd-item .n{display:block; color:var(--navy); font-weight:600; font-size:.95rem}
  .ndd-item .d{display:block; color:var(--slate); font-size:.8rem; margin-top:2px}

  #mnav{display:none; border-bottom:1px solid var(--line); background:var(--ivory)}
  #mnav.open{display:block}
  #mnav a,.mnav-link{display:block; width:100%; text-align:left; font:inherit; font-size:1rem; background:none; border:none; cursor:pointer; padding:13px clamp(20px,5vw,44px); color:var(--navy); font-weight:500; border-top:1px solid var(--line)}
  #mnav a[data-open-rap-tab="outils"]{font-weight:850; color:var(--teal-dark); background:rgba(15,157,140,.08)}

  @media (prefers-reduced-motion:reduce){ .hd .row{transition:none} .logo-wrap{transition:none} .ndd-btn svg{transition:none} }

  /* Hero */
  .hero{position:relative; overflow:hidden; background:linear-gradient(125deg,#14224F 0%,#123f4f 52%,#0B6F62 100%); color:#eaf0fb}
  .const{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .k-pop{position:absolute; z-index:4; width:74px; height:74px; pointer-events:none; transform:translate(-50%,-50%); animation:kpop 1.7s cubic-bezier(.2,1.4,.4,1) forwards; filter:drop-shadow(0 0 14px rgba(127,216,203,.55)) drop-shadow(0 0 30px rgba(217,149,33,.35))}
  .k-pop svg{width:100%; height:100%; display:block}
  @keyframes kpop{
    0%{transform:translate(-50%,-50%) scale(0) rotate(-50deg); opacity:0}
    32%{transform:translate(-50%,-50%) scale(1.18) rotate(6deg); opacity:1}
    46%{transform:translate(-50%,-50%) scale(0.98) rotate(0deg)}
    58%{transform:translate(-50%,-50%) scale(1.04)}
    72%{transform:translate(-50%,-50%) scale(1); opacity:1}
    100%{transform:translate(-50%,-50%) scale(1.5); opacity:0}
  }
  @media (prefers-reduced-motion:reduce){ .k-pop{animation:kpopfade 1.2s ease forwards} }
  @keyframes kpopfade{ 0%{opacity:0} 25%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
  .hero .scrim{position:absolute; inset:0; pointer-events:none; background:radial-gradient(115% 100% at 14% 42%, rgba(9,18,42,.74) 0%, rgba(9,18,42,.34) 44%, rgba(9,18,42,0) 74%)}
  .hero .wrap{position:relative; padding-block:clamp(70px,10vw,128px); isolation:isolate}

  .hero .badge{height:84px; width:auto; margin-bottom:28px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
  .hero h1{color:#fff; font-size:clamp(2.3rem,5.4vw,3.7rem); font-weight:750; letter-spacing:-.035em; line-height:1.03; max-width:17ch; text-shadow:0 16px 38px rgba(0,0,0,.18)}
  .hero p.sub{margin-top:22px; max-width:60ch; color:#e6ecf9; font-size:clamp(1.05rem,1.6vw,1.2rem)}
  .hero .act{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; max-width:600px}
  .hero .act .btn{flex:1 1 210px; justify-content:center; text-align:center}
  /* Jeu de UI : la couleur pleine suit le bouton survole, l'autre devient transparent */
  .hero .act:has(.btn-line:hover) .btn-teal{background-color:transparent; color:#fff; border-color:rgba(255,255,255,.55); background-image:none; animation:none}
  .hero .act .btn-line:hover{background-color:var(--teal); color:#052a25; border-color:var(--teal); background-image:radial-gradient(circle 1.4px at 22% 32%, rgba(255,255,255,.36) 99%, transparent), radial-gradient(circle 1px at 72% 22%, rgba(255,255,255,.26) 99%, transparent), radial-gradient(circle 1.6px at 46% 76%, rgba(127,216,203,.4) 99%, transparent), radial-gradient(circle 1px at 86% 62%, rgba(255,255,255,.22) 99%, transparent); background-size:170% 170%,230% 230%,200% 200%,260% 260%; animation:btnnet 14s ease-in-out infinite alternate}

  /* Outil homepage : IA par métier */
  .usecase{scroll-margin-top:86px; padding-block:clamp(46px,6vw,76px); background:linear-gradient(180deg,#FBF7EC 0%,#fff 58%,#FBF7EC 100%); border-bottom:1px solid var(--line)}
  .usecase .wrap{position:relative; border-radius:clamp(22px,3vw,30px); padding-block:clamp(34px,5vw,56px); background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86)); border:1px solid rgba(231,225,210,.9); box-shadow:0 28px 72px rgba(20,34,79,.12)}
  .usecase .wrap::before{content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; opacity:.62; background:radial-gradient(520px 360px at 88% 0%, rgba(15,157,140,.13), transparent 66%),radial-gradient(380px 280px at 8% 8%, rgba(217,149,33,.10), transparent 62%),linear-gradient(120deg, transparent 0 28%, rgba(15,157,140,.055) 28.1% 28.25%, transparent 28.45% 100%)}
  .usecase-head,.usecase-layout{position:relative; z-index:1}
  .usecase-head{display:grid; gap:16px; max-width:870px}
  .usecase-head .eyebrow{color:var(--teal-dark)}
  .usecase-head h2{font-size:clamp(1.9rem,4.2vw,3.18rem); max-width:18ch; color:var(--navy)}
  .usecase-head p{color:var(--slate); font-size:1.07rem; max-width:67ch}
  .proofline{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
  .proofline span{display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--line); border-radius:999px; padding:.35rem .72rem; background:#fff; color:var(--navy); font-size:.86rem; font-weight:700; box-shadow:0 8px 20px rgba(20,34,79,.04)}
  .usecase-layout{display:grid; gap:24px; margin-top:30px}
  .job-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px}
  .job-card{min-width:0; display:flex; flex-direction:column; align-items:flex-start; height:100%; text-align:left; font:inherit; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:16px; padding:16px; cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease}
  .job-card:hover{transform:translateY(-2px); border-color:#bcd8d2; box-shadow:0 16px 36px rgba(20,34,79,.10)}
  .job-card[aria-selected="true"]{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 22px 48px rgba(20,34,79,.18)}
  .job-icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; margin-bottom:10px; border-radius:13px; background:rgba(15,157,140,.08); color:var(--navy); box-shadow:inset 0 0 0 1px rgba(15,157,140,.10)}
  .job-icon svg{width:24px; height:24px; display:block}
  .job-icon .accent{color:var(--gold); stroke:var(--gold)}
  .job-card[aria-selected="true"] .job-icon{background:rgba(255,255,255,.10); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .job-card[aria-selected="true"] .job-icon .accent{color:var(--gold); stroke:var(--gold)}
  .job-card strong{display:block; font-size:.97rem; line-height:1.22; min-height:2.44em; color:inherit}
  .job-card span:last-child{display:block; margin-top:6px; color:var(--slate); font-size:.82rem; line-height:1.4}
  .job-card[aria-selected="true"] span:last-child{color:#cfeee7}
  .job-result{background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(22px,3vw,36px); box-shadow:0 28px 68px rgba(20,34,79,.13)}
  .job-kicker{display:block; color:var(--teal-dark); font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px}
  .job-result h3{font-size:clamp(1.42rem,2.55vw,2.1rem)}
  .job-result .result-lead{margin-top:12px; color:var(--slate); font-size:1.03rem}
  .job-cols{display:grid; gap:18px; margin-top:22px}
  .mini-block{border:1px solid var(--line); border-radius:16px; padding:17px; background:#FFFDF7}
  .mini-block strong{display:block; color:var(--navy); margin-bottom:10px; font-size:.95rem}
  .mini-block ul{margin:0; padding-left:18px; color:var(--ink); font-size:.94rem}
  .prompt-box{margin-top:18px; border:1px solid rgba(15,157,140,.28); border-radius:16px; background:linear-gradient(180deg,rgba(15,157,140,.07),rgba(15,157,140,.035)); padding:17px}
  .prompt-box strong{display:flex; justify-content:space-between; gap:12px; align-items:center; color:var(--navy); font-size:.92rem; margin-bottom:9px}
  .prompt-box p{color:var(--ink); font-size:.94rem}
  .copy-prompt{border:1px solid var(--teal); background:#fff; color:var(--teal-dark); border-radius:999px; font:inherit; font-weight:800; font-size:.78rem; padding:.35rem .65rem; cursor:pointer}
  .job-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
  .job-actions .btn{flex:1 1 220px}
  @media(min-width:900px){
    .usecase-layout{grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); align-items:start}
    .job-grid{grid-template-columns:1fr 1fr; position:sticky; top:86px}
    .job-result{position:sticky; top:86px}
    .job-cols{grid-template-columns:1fr}
  }
  @media(max-width:760px){.usecase{padding-inline:0}.usecase .wrap{border-radius:0; padding-inline:clamp(20px,5vw,44px)}}
  @media(max-width:520px){
    .job-grid{grid-template-columns:1fr 1fr; gap:8px}
    .job-card{padding:12px 10px; border-radius:13px}
    .job-card strong{font-size:.88rem}
    .job-card span:last-child{display:none}
    .proofline span{font-size:.8rem}
  }

  /* Sections interactives : Formation & Accompagnement (index de dossier) */
  .tabsec{padding-block:clamp(46px,6vw,76px); border-block:1px solid var(--line); background:#fff}
  .tabsec h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:12px; max-width:24ch}
  .tabsec .lead{margin-top:14px; color:var(--slate); max-width:62ch; font-size:1.05rem}

  /* Portes : choisir Formation ou Accompagnement avant d'explorer */
  .doors{display:grid; grid-template-columns:1fr; gap:14px; margin-top:32px}
  .door{position:relative; overflow:hidden; min-height:156px; text-align:left; font:inherit; background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 30px; cursor:pointer; transition:border-color .2s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .45s cubic-bezier(.16,1,.3,1)}
  .door::before{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width .4s cubic-bezier(.16,1,.3,1)}
  .door:hover::before{width:100%}
  .door:hover{border-color:#bcd8d2; transform:translateY(-4px); box-shadow:0 24px 50px rgba(20,34,79,.13)}
  .door:focus-visible{outline:2px solid var(--teal); outline-offset:4px}
  .door[aria-expanded="true"]::before{width:100%; background:linear-gradient(90deg,#7fe0d1,var(--gold))}
  .door-k{display:block; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--teal-dark)}
  .door-t{display:block; margin-top:12px; font-size:clamp(1.25rem,2.3vw,1.62rem); font-weight:600; color:var(--navy); line-height:1.2; letter-spacing:-.015em; text-wrap:balance}
  .door-m{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:600; font-size:.92rem; color:var(--teal-dark)}
  .door-m svg{width:20px; height:20px; transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .door[aria-expanded="true"]{background-color:var(--navy); border-color:var(--navy); background-image:radial-gradient(circle 1.4px at 22% 32%, rgba(255,255,255,.34) 99%, transparent), radial-gradient(circle 1px at 72% 22%, rgba(255,255,255,.24) 99%, transparent), radial-gradient(circle 1.6px at 46% 78%, rgba(127,216,203,.4) 99%, transparent), radial-gradient(circle 1px at 86% 60%, rgba(255,255,255,.2) 99%, transparent); background-size:170% 170%,230% 230%,200% 200%,260% 260%; animation:btnnet 16s ease-in-out infinite alternate}
  .door[aria-expanded="true"] .door-k{color:#7fe0d1}
  .door[aria-expanded="true"] .door-t{color:#fff}
  .door[aria-expanded="true"] .door-m{color:#cfeee7}
  .door[aria-expanded="true"] .door-m svg{transform:rotate(90deg)}
  .door[aria-expanded="true"]::after{content:""; position:absolute; left:50%; bottom:-9px; width:16px; height:16px; background:var(--navy); transform:translateX(-50%) rotate(45deg); border-radius:3px}
  @media(max-width:759px){
    .door{padding:22px 20px; border-radius:14px}
    .door-t{font-size:1.16rem; margin-top:8px}
    .door-m{margin-top:14px; width:38px; height:38px; gap:0; justify-content:center; border:1.5px solid var(--line); border-radius:50%}
    .door[aria-expanded="true"] .door-m{border-color:rgba(255,255,255,.35)}
  }
  @media(min-width:760px){ .doors{grid-template-columns:1fr 1fr; gap:18px} }
  .offer{opacity:1; transform:translateY(0) scale(1); transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); will-change:opacity, transform}
  .offer[hidden]{display:none}
  .offer.enter{opacity:0; transform:translateY(22px) scale(.985)}
  .offer .lead{margin-top:30px}
  .offer .folder{transition:opacity .65s cubic-bezier(.16,1,.3,1) .12s, transform .65s cubic-bezier(.16,1,.3,1) .12s}
  .offer.enter .folder{opacity:0; transform:translateY(16px)}
  @media (prefers-reduced-motion:reduce){ .door,.door-m svg,.offer,.offer .folder{transition:none} .offer.enter,.offer.enter .folder{transform:none} }
  /* K flottant : remonte au scroll et se fond dans le logo de l'en-tete (fusion) */
  .flyk{position:fixed; top:0; left:0; z-index:45; pointer-events:none; will-change:left,top,width,opacity}
  .flyk svg{width:100%; height:auto; display:block; filter:drop-shadow(0 10px 22px rgba(9,18,42,.30))}

  .folder{margin-top:28px}

  /* Index : item = barre d'accordéon (mobile) / entrée de liste (desktop) */
  .idx{position:relative; width:100%; text-align:left; font:inherit; background:none; border:none; border-top:1px solid var(--line); padding:16px 4px 16px 6px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:.18s ease}
  .idx-main{display:block}
  .idx-name{display:block; font-weight:600; color:var(--navy); font-size:1.02rem}
  .idx-desc{display:none; margin-top:3px; font-size:.82rem; font-weight:400; color:var(--slate)}
  .idx-chevron{flex:none; width:18px; height:18px; color:var(--slate); transition:transform .2s ease}
  .idx[aria-selected="true"] .idx-name{color:var(--teal-dark)}
  .idx[aria-expanded="true"] .idx-chevron{transform:rotate(180deg)}

  /* Panneau */
  .panel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3.2vw,34px); margin-bottom:8px; opacity:1; transform:translateY(0); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); will-change:opacity, transform}
  .panel[hidden]{display:none}
  .panel.enter{opacity:0; transform:translateY(14px)}
  .panel-desc,.panel-tasks,.panel .proof,.panel .btn{transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1)}
  .panel.enter .panel-desc{opacity:0; transform:translateY(10px); transition-delay:.05s}
  .panel.enter .panel-tasks{opacity:0; transform:translateY(10px); transition-delay:.1s}
  .panel.enter .proof,.panel.enter .btn{opacity:0; transform:translateY(10px); transition-delay:.14s}
  .panel-eyebrow{display:block; margin-bottom:8px}
  .panel-title{font-size:1.5rem; color:var(--navy); font-weight:600; letter-spacing:-.01em; line-height:1.14}
  .panel-desc{margin-top:14px; color:var(--slate); font-size:1.06rem}
  .panel-tasks{margin-top:22px}
  .panel-tasks h4{font-size:1.02rem; margin:0 0 14px; color:var(--navy)}
  .checklist{list-style:none; margin:0; padding:0; display:grid; gap:11px}
  .checklist li{display:flex; gap:11px; align-items:flex-start; color:var(--ink); font-size:.97rem}
  .checklist li::before{content:""; flex:none; width:19px; height:19px; margin-top:1px; border-radius:6px; background-color:rgba(15,157,140,.12); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F9D8C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:12px 12px; background-repeat:no-repeat; background-position:center}
  .proof{margin-top:22px; background:#FFFDF7; border-left:3px solid var(--gold); padding:14px 16px; border-radius:0 8px 8px 0}
  .proof .lbl{display:block; font-size:.68rem; letter-spacing:.18em; font-weight:600; text-transform:uppercase; color:#8a6116; margin-bottom:6px}
  .proof p{font-size:.95rem; color:var(--ink)}
  .panel .btn{margin-top:24px}

  /* Rail + noeud or : masques par defaut (mobile) */
  .rail,.node{display:none}

  @media (prefers-reduced-motion:reduce){ .panel,.panel-desc,.panel-tasks,.panel .proof,.panel .btn{transition:none} .panel.enter,.panel.enter .panel-desc,.panel.enter .panel-tasks,.panel.enter .proof,.panel.enter .btn{transform:none; opacity:1} .idx-chevron{transition:none} .node{transition:none} }

  /* Desktop : index vertical a gauche, panneau a droite */
  @media(min-width:900px){
    .folder{position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); column-gap:clamp(28px,3vw,52px); row-gap:0; margin-top:32px}
    .idx{grid-column:1; align-self:start; border-top:none; border-radius:10px; padding:12px 12px 12px 26px; margin-bottom:2px}
    .idx:hover{background:rgba(15,157,140,.05)}
    .idx[aria-selected="true"]{background:rgba(15,157,140,.06)}
    .idx-desc{display:none}
    .idx[aria-selected="true"] .idx-desc{color:var(--teal-dark)}
    .idx-chevron{display:none}
    .panel{grid-column:2; grid-row:1 / span 99; align-self:start; margin-bottom:0}
    .checklist.cols2{grid-template-columns:1fr 1fr; gap:11px 26px}
    .rail{display:block; position:absolute; left:7px; top:0; width:2px; height:100%; background:var(--line); z-index:0}
    .node{display:block; position:absolute; left:3px; top:0; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(217,149,33,.15); transform:translateY(0); transition:transform .5s cubic-bezier(.16,1,.3,1); z-index:1}
  }
  @media (min-width:900px) and (prefers-reduced-motion:reduce){ .node{transition:none} }
  /* Accompagnement : moins d'items, on aere la liste pour eviter le vide */
  @media(min-width:900px){ #accompagnement .idx{padding-block:20px} }

  /* Bande officielle : carte qui s'ouvre en pleine largeur au scroll */
  .photoband{position:relative; height:clamp(220px,32vw,400px)}
  .pb-frame{position:relative; height:100%; width:100%; margin-inline:auto; overflow:hidden; border-radius:0; box-shadow:0 18px 44px rgba(20,34,79,.14); will-change:width; background:linear-gradient(125deg,#14224F 0%,#123f4f 52%,#0B6F62 100%)}
  @media (prefers-reduced-motion:reduce){ .pb-frame{width:100% !important; border-radius:0 !important} }
  @media(max-width:760px){ .pb-frame{width:100% !important; border-radius:0 !important; will-change:auto} }

  /* Rapports : liste a filets fins, tiroir au clic */
  .rapports{padding-block:clamp(42px,5.5vw,66px); background:var(--white); border-block:1px solid var(--line)}
  .rap-h{font-size:clamp(1.9rem,4vw,2.9rem); margin-top:12px}
  .rap-intro{margin-top:12px; max-width:62ch; color:var(--slate); font-size:1rem}

  .rap-tabs{display:flex; width:100%; gap:8px; padding:8px; margin-top:20px; border:1px solid rgba(15,157,140,.28); border-radius:20px; background:linear-gradient(135deg,rgba(191,233,224,.72),rgba(15,157,140,.14)),#f6fcfa; box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 14px 36px rgba(15,157,140,.10)}
  .rap-tab{flex:1 1 0; min-width:0; min-height:48px; border:0; border-radius:15px; background:rgba(255,255,255,.58); color:var(--teal-dark); font:inherit; font-size:.94rem; font-weight:800; cursor:pointer; transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
  .rap-tab:hover{color:var(--navy); background:#fff; box-shadow:0 8px 20px rgba(15,157,140,.10)}
  .rap-tab.is-active{background:linear-gradient(135deg,var(--teal-dark),var(--teal)); color:#fff; box-shadow:0 12px 26px rgba(15,157,140,.24)}
  .rap-tab.is-active::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:8px; background:var(--gold); vertical-align:middle; box-shadow:0 0 0 3px rgba(217,149,33,.18)}
  .raplist{margin-top:26px; border-top:1px solid var(--line)}
  .rap-row{width:100%; text-align:left; font:inherit; background:none; border:none; border-bottom:1px solid var(--line); padding:24px 8px; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto 36px; align-items:center; gap:8px 22px; transition:background .18s ease, padding-left .18s ease}
  .rap-row:hover{background:rgba(15,157,140,.05); padding-left:16px}
  .rap-row:hover .rr-title{color:var(--teal-dark)}
  .rr-meta{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-dark)}
  .rr-badge{display:inline-flex; align-items:center; min-height:22px; border-radius:999px; padding:.18rem .55rem; background:rgba(15,157,140,.12); color:var(--teal-dark); font-size:.62rem; letter-spacing:.10em; box-shadow:inset 0 0 0 1px rgba(15,157,140,.22)}
  .rr-title{font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:600; color:var(--navy); letter-spacing:-.01em; transition:color .18s ease}
  .rr-desc{grid-column:1 / -1; max-width:58ch; color:var(--slate); font-size:.92rem; line-height:1.45; margin-top:-2px}
  .rr-date{font-size:.9rem; color:var(--slate); font-variant-numeric:tabular-nums}
  .rr-x{width:36px; height:36px; padding:7px; color:var(--navy); border:1px solid var(--line); border-radius:50%; transition:transform .25s ease, border-color .18s ease, color .18s ease, background-color .18s ease}
  .rr-action{display:none}
  .rap-row:hover .rr-x{border-color:var(--teal); color:var(--teal-dark); background-color:rgba(15,157,140,.08)}
  .rap-row[aria-expanded="true"] .rr-x{transform:rotate(45deg); border-color:var(--teal); color:#fff; background-color:var(--teal)}
  @media(max-width:620px){
    .rap-row{grid-template-columns:minmax(0,1fr) auto auto; gap:8px 12px; padding:22px 0}
    .rap-row:hover{padding-left:0}
    .rr-title{font-size:clamp(1.18rem,6.4vw,1.45rem)}
    .rr-desc{font-size:.88rem}
    .rr-x{display:none}
    .rr-action{display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px; border:1px solid rgba(15,157,140,.28); border-radius:999px; background:rgba(15,157,140,.08); color:var(--teal-dark); font-weight:850; font-size:.9rem}
    .rap-row[aria-expanded="true"] .rr-action{background:var(--teal); color:#052a25}
  }
  .rap-drawer{border-bottom:1px solid var(--line); padding:22px 6px 26px; opacity:1; transform:translateY(0); transition:opacity .25s ease, transform .25s ease}
  .rap-drawer[hidden]{display:none}
  .rap-drawer.enter{opacity:0; transform:translateY(8px)}
  .rap-filtered[hidden]{display:none!important}
  .rd-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:center; background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:22px}
  @media(min-width:640px){ .rd-grid{grid-template-columns:132px 1fr; gap:28px} }
  .rap-cover{aspect-ratio:1/1.3; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 20px 50px rgba(20,34,79,.18); background:linear-gradient(150deg,#14224F,#0e2b3d 55%,#0B6F62); color:#fff; padding:26px; display:flex; flex-direction:column; justify-content:space-between}
  .rap-cover .cc{position:absolute; inset:0; opacity:.5}
  .rap-cover .k{position:relative; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#8fe3d5}
  .rap-cover .tag{display:inline-block; background:var(--teal); color:#04211d; font-size:.6rem; font-weight:700; letter-spacing:.12em; padding:5px 9px; border-radius:5px; text-transform:uppercase}
  .rap-cover h3{position:relative; color:#fff; font-size:1.7rem; margin-top:14px; line-height:1.1}
  .rap-cover.mini{padding:14px; border-radius:9px; box-shadow:0 12px 30px rgba(20,34,79,.16); width:100%; max-width:132px}
  .rap-cover.mini h3{font-size:.98rem}
  .rap-cover.mini .k{font-size:.58rem}
  .rd-info p{color:var(--ink); max-width:56ch}
  .rd-meta{margin-top:10px; font-size:.85rem; color:var(--slate)}
  .rd-actions{margin-top:18px; display:flex; flex-wrap:wrap; gap:12px}
  @media (prefers-reduced-motion:reduce){ .rap-drawer,.rr-x{transition:none} .rap-drawer.enter{transform:none} }

  /* Contact : bande de cloture animee (reseau lumineux) */
  .contact{position:relative; overflow:hidden; padding-block:clamp(46px,6vw,78px); background:linear-gradient(135deg,#14224F 0%,#122c50 55%,#0B6F62 140%)}
  .contact .wrap{position:relative}
  .contact .eyebrow{color:#7fe0d1}
  .c-grid{display:grid; grid-template-columns:1fr; gap:38px}
  .c-aside h2{font-size:clamp(1.8rem,3.4vw,2.5rem); color:#fff}
  .c-aside p{margin-top:14px; color:#dbe4f5; max-width:46ch}
  .c-aside .mail{display:inline-block; margin-top:22px; font-weight:700; font-size:1.3rem; color:#fff; border-bottom:2px solid var(--teal); padding-bottom:3px}
  .c-aside .mail:hover{color:#7fe0d1; text-decoration:none}
  form.cf{display:grid; gap:15px; background:#fff; border:none; border-radius:16px; padding:clamp(22px,4vw,34px); box-shadow:0 24px 60px rgba(9,18,42,.35)}
  .field{display:grid; gap:6px}
  .field label{font-size:.86rem; font-weight:600; color:var(--navy)}
  .field input,.field textarea{font:inherit; font-size:1rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%}
  .field textarea{min-height:120px; resize:vertical}
  .field input:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,157,140,.16)}
  .form-status{margin:2px 0 0; font-size:.95rem; padding:12px 15px; border-radius:10px}
  .form-status.ok{background:rgba(15,157,140,.12); color:#0B6F62; border:1px solid rgba(15,157,140,.3)}
  .form-status.err{background:rgba(180,35,24,.08); color:#B42318; border:1px solid rgba(180,35,24,.25)}
  .form-status.err a{color:#B42318; font-weight:600}
  .form-note{font-size:.82rem; color:var(--slate); margin:2px 0 0; line-height:1.5}
  @media(min-width:820px){ .c-grid{grid-template-columns:.9fr 1.1fr; align-items:start} }
  @media(max-width:819px){
    .contact{padding-block:clamp(54px,11vw,74px)}
    .c-grid{gap:26px}
    form.cf{padding:24px 20px; box-shadow:0 14px 40px rgba(9,18,42,.30)}
    .c-aside h2{font-size:clamp(1.6rem,7vw,2rem)}
    .c-aside .mail{font-size:1.15rem}
  }

  /* Footer */
  .ft{background:var(--navy); color:#aab6d2; padding-block:44px}
  .ft .row{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center}
  .ft .logo-f{height:52px}
  .ft small{color:#8593b5}

  /* Bouton flottant contact */
  .fab{position:fixed; right:20px; bottom:20px; z-index:50; background-color:var(--teal); color:#052a25; font-weight:700; font-size:.95rem; padding:.85em 1.3em; border-radius:999px; box-shadow:0 10px 26px rgba(11,111,98,.45); display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; transition:.18s ease; background-image:radial-gradient(circle 1.4px at 22% 32%, rgba(255,255,255,.36) 99%, transparent), radial-gradient(circle 1px at 72% 22%, rgba(255,255,255,.26) 99%, transparent), radial-gradient(circle 1.6px at 46% 76%, rgba(127,216,203,.4) 99%, transparent); background-size:170% 170%,230% 230%,200% 200%; animation:btnnet 14s ease-in-out infinite alternate}
  .fab:hover{background-color:var(--teal-dark); color:#fff; transform:translateY(-2px)}
  .fab svg{width:18px; height:18px}
  @media(min-width:900px){ .fab{right:max(24px, calc((100vw - var(--maxw))/2 + 22px)); bottom:22px} }
  @media(max-width:600px){ .fab{display:none} }

  :where(a,button,input,textarea):focus-visible{outline:2px solid var(--teal); outline-offset:2px}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn-teal,.btn-navy,.fab,.door[aria-expanded="true"]{animation:none} }