/* AD BUILDER 0.19 : modules des pages Solutions (inc/sol.php). Repris des maquettes validées par FJL le 03/11/2026 (RPS et QVCT, Enquêtes internes). */
/* Maquette page Solutions RPS et QVCT (02/11/2026) */
/* bandeau « Ils nous ont fait confiance » sous le haut de page */

/* ---------- Tableau des solutions : bases communes ---------- */
.sl-ti{flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tint); color:var(--blue); transition:transform .35s var(--ease),background .3s,color .3s}
.sl-ti svg{width:24px; height:24px}
.sl-pt{font:800 clamp(26px,2.4vw,34px)/1.15 var(--f-title); margin:0 0 18px}
.sl-bk h3{font:800 20px/1.25 var(--f-title); margin:0 0 10px; color:var(--blue)}
.sl-bk p{margin:0 0 10px; font-size:17px; line-height:1.6}
.sl-bk ul{list-style:none; margin:4px 0 12px; padding:0; display:grid; gap:9px}
.sl-bk li{position:relative; padding-left:30px; font-size:16.5px; line-height:1.55; opacity:0; transform:translateX(-8px); animation:sl-li .5s var(--ease) forwards; animation-delay:calc(.15s + var(--j,0) * 70ms)}
.sl-bk li:nth-child(2){--j:1} .sl-bk li:nth-child(3){--j:2} .sl-bk li:nth-child(4){--j:3} .sl-bk li:nth-child(5){--j:4} .sl-bk li:nth-child(6){--j:5}
.sl-bk li::before{content:""; position:absolute; left:2px; top:.3em; width:18px; height:18px; border-radius:6px; background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132438' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes sl-li{to{opacity:1; transform:none}}
.sl-bk a{color:inherit; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}
.sl-bk a:hover{color:var(--blue)}
.sl-ps{display:grid}
.sl-p{grid-area:1/1; animation:ix-in .5s var(--ease)}
.sl-p.off{visibility:hidden; animation:none}
.sl-p.off li{animation:none}

/* A : onglets à icône en ligne */

/* B : onglets latéraux */
.sl-b{display:grid; grid-template-columns:330px minmax(0,1fr); gap:40px; align-items:start}
.sl-b .ix-tl{position:sticky; top:110px}
.sl-card{background:#fff; border-radius:28px; padding:38px 40px 40px; box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 20px 50px color-mix(in srgb,var(--blue) 30%,transparent)}
.sl-pb{position:relative}
.sl-bimg{float:right; width:190px; margin:0 0 12px 24px; animation:rd-float 7s ease-in-out infinite}
.sl-pb .sl-bk{margin-top:16px}

/* C : volets qui s'ouvrent */

/* ---------- FAQ (module Accordéon), bandeau d'appel, formations, à jour, contact ---------- */
.sl-car{position:relative; margin-top:clamp(28px,3vw,40px)}
.sl-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:8px 4px 24px}
.sl-track::-webkit-scrollbar{display:none}
.sl-fc{scroll-snap-align:start; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--navy); color:#fff; text-decoration:none; box-shadow:0 18px 40px color-mix(in srgb,var(--navy) 22%,transparent); transition:transform .35s var(--ease)}
.sl-fc:hover{transform:translateY(-6px)}
.sl-fi{display:grid; place-items:center; height:190px; background:var(--tint); overflow:hidden}
.sl-fi img{height:160px; transition:transform .5s var(--ease)}
.sl-fc:nth-child(odd):hover .sl-fi img{transform:scale(1.06) rotate(-3deg)} .sl-fc:nth-child(even):hover .sl-fi img{transform:scale(1.06) rotate(3deg)}
.sl-fk{margin:20px 22px 0; font:800 13px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--yellow)}
.sl-fc b{margin:10px 22px 0; font:800 19px/1.3 var(--f-title); flex:1}
.sl-fm{display:inline-flex; align-items:center; gap:8px; margin:18px 22px 22px; font:800 14px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--blue)}
.sl-fm svg{width:18px; height:18px; transition:transform .3s}
.sl-fc:hover .sl-fm svg{transform:translateX(4px)}
.sl-nav{position:absolute; top:calc(50% - 30px); z-index:2; width:52px; height:52px; border-radius:50%; border:0; background:var(--blue); color:var(--navy); display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 24px color-mix(in srgb,var(--blue) 40%,transparent)}
.sl-nav svg{width:24px; height:24px} .sl-nav.prev{left:-26px} .sl-nav.next{right:-26px} .sl-nav:disabled{opacity:0; pointer-events:none}
.sl-nav:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
.sl-dots{display:flex; justify-content:center; gap:8px; margin-top:4px}
.sl-dots i{width:9px; height:9px; border-radius:50%; background:color-mix(in srgb,var(--navy) 18%,transparent); transition:width .3s,background .3s} .sl-dots i.on{width:26px; border-radius:9px; background:var(--navy)}
.sl-more{display:flex; justify-content:center; margin-top:clamp(24px,3vw,36px)}
.sl-ajg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3vw,40px); margin-top:clamp(28px,3vw,40px)}
.sl-aj h3{font:800 clamp(22px,2vw,26px)/1.2 var(--f-title); margin:0 0 16px; color:var(--blue); text-align:center}
.sl-ajl{display:grid; gap:12px}
.sl-ajc{display:flex; align-items:center; gap:18px; padding:14px; border-radius:20px; background:#fff; text-decoration:none; color:var(--navy); box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 12px 30px color-mix(in srgb,var(--blue) 20%,transparent); transition:transform .3s var(--ease)}
.sl-ajc:hover{transform:translateX(6px)}
.sl-aji{flex:none; width:84px; height:84px; border-radius:16px; background:var(--navy); display:grid; place-items:center}
.sl-aji img{width:60px; filter:brightness(0) invert(1)}
.sl-ajc em{display:block; font:800 12px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; font-style:normal; color:var(--blue); margin-bottom:6px}
.sl-ajc b{font:800 17px/1.3 var(--f-title)}
.sl-form{background:#fff; border-radius:28px; padding:clamp(22px,3vw,36px); color:var(--navy)}

/* barre de la maquette */

@media (max-width:1000px){
  .sl-b{grid-template-columns:minmax(0,1fr)} .sl-b .ix-tl{position:static; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px 6px}
  .sl-track{grid-auto-columns:calc((100% - 24px) / 2)}
  .sl-ajg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sl-track{grid-auto-columns:82%} .sl-nav{display:none}
}
/* titre principal long : taille adaptée, jamais coupé au milieu d'un mot */
/* l'ombre des cartes n'est plus coupée par le bord du carrousel */
.sl-track{padding:24px 24px 44px; margin:-24px -24px -20px; scroll-padding-inline:24px; -webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.sl-nav{top:calc(50% - 46px)}
@media (max-width:640px){.sl-track{padding:16px 16px 36px; margin:-16px -16px -16px; scroll-padding-inline:16px}}
/* téléphone : panneaux à la largeur de l'écran, image au-dessus du texte, boutons longs sur deux lignes */
.sl-ps{grid-template-columns:minmax(0,1fr)}
.sl-pt{overflow-wrap:break-word}
@media (max-width:640px){.sl .btn{white-space:normal!important; padding:12px 20px!important; width:100%; justify-content:center}}
/* maquette 2 : les trois pistes à la suite, chacune marquée */
/* réponses de la FAQ : paragraphes, listes et liens d'origine */
.sl-ans p{margin:0 0 12px} .sl-ans ul{margin:0 0 12px; padding-left:22px} .sl-ans li{margin:0 0 6px}
.sl-ans a{color:inherit; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}
.qa .a .sl-ans{padding:0 24px 22px; color:var(--ink-2)} .qa .a .sl-ans p{padding:0; margin:0 0 12px} .qa .a .sl-ans > :last-child{margin-bottom:0}
.sl-ans ul{list-style:none; padding:0} .sl-ans li{position:relative; padding-left:22px} .sl-ans li::before{content:""; position:absolute; left:4px; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--blue)}
/* retours du 02/11 soir */
/* « sur-mesure » en jaune : un trait jaune se dessine dessous à l'arrivée, puis le mot s'éclaire une fois */
@keyframes sl-pop{0%{transform:none} 45%{transform:translateY(-.06em) scale(1.04)} 100%{transform:none}}
/* formations : vraie image à la une, voilée de bleu comme le blog */
.sl-fi{position:relative; height:200px; background:var(--navy)}
.sl-fi img{width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.05)}
.sl-fi::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 18%,transparent),color-mix(in srgb,var(--navy) 45%,transparent)); transition:opacity .5s}
.sl-fc:hover .sl-fi::after{opacity:.4}
.sl-fc:nth-child(odd):hover .sl-fi img, .sl-fc:nth-child(even):hover .sl-fi img{transform:scale(1.06)}
/* à jour : flux d'articles, podcasts et événements, filtres en pastilles */
.sl-chips{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:clamp(24px,3vw,36px)}
.sl-ch{min-height:44px; padding:0 20px; border-radius:30px; border:0; background:#fff; color:var(--navy); font:800 15px/1 var(--f-body); cursor:pointer; box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 10px 24px color-mix(in srgb,var(--blue) 22%,transparent); transition:background .25s,color .25s}
.sl-ch[aria-pressed=true]{background:var(--navy); color:#fff}
.sl-ch:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
ul.sl-ajg{list-style:none; padding:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px}
.sl-ajc{display:block; padding:0; background:none; box-shadow:none; animation:ix-in .45s var(--ease)}
.sl-ajc[hidden]{display:none}
.sl-ajc:hover{transform:none}
.sl-ajc a{height:100%; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--navy); color:#fff; text-decoration:none; box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 8%,transparent),0 16px 34px color-mix(in srgb,var(--navy) 20%,transparent); transition:transform .35s var(--ease)}
.sl-ajc a:hover{transform:translateY(-6px)}
.sl-ajp{position:relative; height:190px; overflow:hidden; background:var(--navy)}
.sl-ajp img{width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.05); transition:transform .7s var(--ease)}
.sl-ajp::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 18%,transparent),color-mix(in srgb,var(--navy) 45%,transparent)); transition:opacity .5s}
.sl-ajc a:hover .sl-ajp img{transform:scale(1.06)} .sl-ajc a:hover .sl-ajp::after{opacity:.4}
.sl-play{position:absolute; z-index:1; left:18px; bottom:16px; width:52px; height:52px; border-radius:50%; background:var(--yellow); color:var(--navy); display:grid; place-items:center; box-shadow:0 8px 20px color-mix(in srgb,var(--navy) 35%,transparent); transition:transform .3s var(--ease)}
.sl-play svg{width:22px; height:22px; margin-left:3px}
.sl-ajc a:hover .sl-play{transform:scale(1.1)}
.sl-ajb{display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1}
.sl-ajb em{font:800 15px/1.2 var(--f-body); font-style:normal; color:var(--yellow)}
.sl-ajb b{font:600 21px/1.25 var(--f-title); flex:1}
.sl-ajb .sl-fm{margin:6px 0 0}
/* contact : formulaire à la hauteur du titre, bas de l'image au niveau du bas du formulaire */
@media (max-width:1000px){ul.sl-ajg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){ul.sl-ajg{grid-template-columns:minmax(0,1fr)} .sl-ch{padding:0 14px}}
/* textes d'introduction du haut de page : balises h2 d'origine (référencement), présentées comme des chapeaux */
h2.sl-lead{font:400 clamp(18px,1.5vw,21px)/1.55 var(--f-body); letter-spacing:0; margin:0 0 14px}
p.sl-pt{font:800 clamp(26px,2.4vw,34px)/1.15 var(--f-title); margin:0 0 18px}/* ===== maquette 4 ===== */
/* étiquettes des options à comparer (maquette seulement) */
/* chapeau des sections d'orientation, plus grand */

/* --- résultat commun --- */
.mtq-rw{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:center}
.mtq-ch{width:100%; height:auto}
.mtq-ch .z1{fill:var(--tint)} .mtq-ch .z2{fill:color-mix(in srgb,var(--blue) 35%,#fff)} .mtq-ch .z3{fill:color-mix(in srgb,var(--yellow) 55%,#fff)}
.mtq-gr line{stroke:#fff; stroke-width:1}
.mtq-ch .ax{font:700 13px var(--f-body); fill:var(--navy)} .mtq-ch .zl{font:800 15px var(--f-body); fill:var(--navy)}
.mtq-pt{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)} .mtq-pt circle{fill:var(--navy)} .mtq-pt .h{fill:#fff; stroke:var(--navy); stroke-width:3; animation:mtq-pl 2.4s ease-out 1.2s 2}
@keyframes mtq-pl{0%{r:15; opacity:1} 100%{r:30; opacity:0}}
.mtq-k{display:block; font:800 15px/1 var(--f-body); color:var(--blue); margin-bottom:6px}
.mtq-lv{margin:0 0 10px; font:800 clamp(26px,2.6vw,36px)/1.15 var(--f-title)}
.mtq-ap{margin:0 0 18px; font-size:18px; line-height:1.55}
.mtq-bars{display:grid; gap:10px; margin-bottom:16px}
.mtq-bar{display:grid; grid-template-columns:44px minmax(0,1fr) 72px; grid-template-areas:"i l v" "i t v"; column-gap:14px; row-gap:6px; align-items:center; padding:12px 16px; border-radius:18px; background:var(--tint)}
.mtq-bi{grid-area:i; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--navy); color:var(--yellow)}
.mtq-bi svg{width:24px; height:24px}
.mtq-bar:nth-child(even) .mtq-bi{background:var(--blue); color:var(--navy)}
.mtq-bl{grid-area:l; font:800 16px/1.2 var(--f-body)}
.mtq-bt{grid-area:t; height:10px; border-radius:10px; background:#fff; overflow:hidden}
.mtq-bt i{display:block; height:100%; width:0; border-radius:10px; background:var(--navy); transition:width 1.1s cubic-bezier(.2,.8,.2,1) .3s}
.mtq-bar:nth-child(even) .mtq-bt i{background:var(--blue)}
.mtq-bv{grid-area:v; justify-self:end; font:800 22px/1 var(--f-title); white-space:nowrap} .mtq-bv span{font-size:30px}
.mtq-gap{margin:0 0 16px; font-size:16px; line-height:1.5}
.mtq-cta{display:flex; flex-wrap:wrap; gap:12px}
.mtq-more{display:flex; flex-wrap:wrap; gap:10px 28px; margin:18px 0 0}
.mtq-re, .mtq-art{display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; color:var(--navy); font:800 15px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px; cursor:pointer}
.mtq-re svg, .mtq-art svg{width:18px; height:18px; flex:none}
.mtq-re:focus-visible, .mtq-art:focus-visible{outline:3px solid var(--blue); outline-offset:3px}

/* --- option A : bouton animé et fenêtre façon Typeform --- */
.mtf-go-w{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(28px,3vw,40px)}
.mtf-go{position:relative; min-height:64px; padding:0 40px; font-size:17px}
.mtf-go::after{content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid var(--blue); opacity:0; pointer-events:none}
.vis .mtf-go::after{animation:mtf-wave 2.6s ease-out 1s infinite}
@keyframes mtf-wave{0%{inset:-4px; opacity:.9} 100%{inset:-22px; opacity:0}}
.mtf-hint{margin:0; font-size:16px; color:#fff}
.mtf{border:0; padding:0; width:min(920px,calc(100vw - 32px)); max-height:calc(100vh - 32px); border-radius:28px; background:#fff; color:var(--navy); box-shadow:0 40px 90px color-mix(in srgb,#000 45%,transparent)}
.mtf::backdrop{background:color-mix(in srgb,var(--navy) 82%,transparent); backdrop-filter:blur(3px)}
.mtf[open]{animation:mtf-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mtf-in{from{opacity:0; transform:translateY(24px) scale(.98)}}
.mtf-in{padding:clamp(20px,3vw,36px) clamp(20px,4vw,52px) clamp(18px,2.5vw,28px); display:flex; flex-direction:column; min-height:min(560px,calc(100vh - 32px))}
.mtf-top{display:grid; grid-template-columns:44px 1fr 44px; gap:16px; align-items:center}
.mtf-bk, .mtf-x{width:44px; height:44px; border-radius:50%; border:0; background:var(--tint); color:var(--navy); display:grid; place-items:center; cursor:pointer}
.mtf-bk svg, .mtf-x svg{width:20px; height:20px} .mtf-bk[disabled]{visibility:hidden}
.mtf-bk:focus-visible, .mtf-x:focus-visible, .mtf-b:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.mtf-pg{height:8px; border-radius:8px; background:var(--tint); overflow:hidden} .mtf-pg i{display:block; height:100%; width:0; background:var(--blue); border-radius:8px; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mtf-q{flex:1; display:grid; align-items:center; overflow:hidden}
.mtf-s{grid-area:1/1; padding:clamp(20px,4vw,48px) 0}
.mtf-s.off{visibility:hidden; pointer-events:none}
.mtf-s.in{animation:mtf-up .55s cubic-bezier(.2,.8,.2,1)} .mtf-s.out{visibility:visible; animation:mtf-out .35s ease-in forwards}
.mtf-s.in.back{animation-name:mtf-down}
@keyframes mtf-up{from{opacity:0; transform:translateY(46px)}} @keyframes mtf-down{from{opacity:0; transform:translateY(-46px)}}
@keyframes mtf-out{to{opacity:0; transform:translateY(-36px)}}
.mtf-ax{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:20px; background:var(--navy); color:#fff; font:800 15px/1 var(--f-body)}
.mtf-ax svg{width:20px; height:20px; color:var(--yellow)}
.mtf-n{margin:18px 0 6px; font:800 15px/1 var(--f-body); color:var(--blue)}
.mtf-t{margin:0 0 28px; font:700 clamp(24px,2.6vw,34px)/1.25 var(--f-title); max-width:30ch}
.mtf-ch{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:560px}
.mtf-b{height:76px; border-radius:20px; border:0; background:#fff; color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy); cursor:pointer; font:800 26px/1 var(--f-title); transition:background .2s,color .2s,transform .2s}
.mtf-b:hover{background:var(--tint); transform:translateY(-3px)}
.mtf-b[aria-checked=true]{background:var(--navy); color:#fff; animation:mtf-pick .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mtf-pick{50%{transform:scale(1.08)}}
.mtf-lg{display:flex; justify-content:space-between; max-width:560px; margin:10px 0 0; font:800 15px/1 var(--f-body); color:var(--blue)}
.mtf-k{margin:12px 0 0; text-align:center; font-size:15px}
.mtf-r{padding:24px 0 6px; animation:mtf-up .6s cubic-bezier(.2,.8,.2,1)}

/* --- option B : questionnaire dans la page, lignes nettes et animées --- */
.mtq{max-width:1040px; margin:clamp(28px,3vw,40px) auto 0; background:#fff; color:var(--navy); border-radius:28px; padding:clamp(22px,3vw,40px); box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 24px 60px color-mix(in srgb,var(--blue) 30%,transparent)}
.mtq-pg{display:flex; align-items:center; gap:14px; margin-bottom:22px} .mtq-pgt{flex:1; height:8px; border-radius:8px; background:var(--tint); overflow:hidden} .mtq-pgt i{display:block; height:100%; width:0; border-radius:8px; background:var(--blue); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mtq-pg b{font:800 16px/1 var(--f-body); white-space:nowrap}
.mtq-st.off{display:none} .mtq-st{animation:ix-in .45s var(--ease)}
.mtq-hd{display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px; margin-bottom:14px}
.mtq-ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--navy); color:var(--yellow)} .mtq-ic svg{width:24px; height:24px}
.mtq-st[data-st="1"] .mtq-ic{background:var(--blue); color:var(--navy)}
.mtq-hd h3{margin:0; font:800 clamp(20px,1.8vw,24px)/1.2 var(--f-title)}
.mtq-lg{display:flex; justify-content:space-between; width:232px; font:800 15px/1 var(--f-body); color:var(--blue)}
.mtq-q{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:18px; padding:14px 16px; border-radius:18px; background:var(--tint); transition:background .3s, box-shadow .3s}
.mtq-q + .mtq-q{margin-top:10px}
.mtq-q:hover, .mtq-q:focus-within{box-shadow:inset 0 0 0 2px var(--navy)}
.mtq-q.done{background:#fff; box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 10px 24px color-mix(in srgb,var(--blue) 22%,transparent)}
.mtq-no{position:relative; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; font:800 16px/1 var(--f-body)}
.mtq-no svg{position:absolute; width:22px; height:22px; opacity:0; transform:scale(.4); transition:opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1)}
.mtq-q.done .mtq-no{background:var(--yellow)} .mtq-q.done .mtq-no b{opacity:0} .mtq-q.done .mtq-no svg{opacity:1; transform:none}
.mtq-no b{transition:opacity .2s}
.mtq-t{margin:0; font-size:17px; line-height:1.5}
.mtq-sc{display:flex; gap:8px}
.mtq-b{width:52px; height:52px; border-radius:16px; border:0; background:#fff; color:var(--navy); font:800 18px/1 var(--f-body); cursor:pointer; box-shadow:inset 0 0 0 2px var(--navy); transition:background .2s,color .2s,transform .2s}
.mtq-b:hover{background:var(--navy); color:#fff}
.mtq-b[aria-checked=true]{background:var(--navy); color:#fff; animation:mtf-pick .35s cubic-bezier(.2,.8,.2,1)}
.mtq-b:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.mtq-ft{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:20px}
.mtq .btn[disabled]{opacity:.45; cursor:default; pointer-events:none}
.mtq-st[data-st="2"]{padding-top:4px}

/* bandeau « Nos consultant·es » : deux traitements de « sur-mesure » à comparer */

@media (max-width:820px){
  .mtq-rw{grid-template-columns:minmax(0,1fr)} .mtq-ch{max-width:340px; margin:0 auto}
  .mtq-q{grid-template-columns:36px minmax(0,1fr); gap:10px 14px} .mtq-sc{grid-column:1/-1; justify-content:space-between} .mtq-b{flex:1; max-width:72px}
  .mtq-no{width:36px; height:36px}
  .mtq-lg{display:none} .mtq-hd{grid-template-columns:44px 1fr}
  .mtq-sc::before{content:"Pas du tout"; align-self:center; font:800 13px var(--f-body); color:var(--blue)} .mtq-sc::after{content:"Tout à fait"; align-self:center; font:800 13px var(--f-body); color:var(--blue)}
  .mtf-b{height:64px}
}
@media (max-width:640px){
  .mtq .btn, .mtf .btn, .mtf-go{white-space:normal!important; width:100%; justify-content:center; text-align:center; padding:12px 20px!important}
  .mtq-ft{flex-direction:column-reverse; align-items:stretch} .mtq-ft > span{display:none}
  .mtq-bar{grid-template-columns:40px minmax(0,1fr) auto; padding:10px 12px} .mtq-bi{width:40px; height:40px}
  .mtf{width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0} .mtf-in{min-height:100%}
}
.mtf{overflow:auto; overscroll-behavior:contain}
/* ===== maquette 5 ===== */
/* graphique du résultat : axes de 4 à 16, zones nettes, la sienne qui s'éclaire, étiquette « Vous » */
.mtq-ch .bg{fill:var(--tint)}
.mtq-ch .zs polygon{transition:opacity .6s ease .9s} .mtq-ch .z1{fill:var(--tint)} .mtq-ch .z2{fill:color-mix(in srgb,var(--blue) 30%,#fff)} .mtq-ch .z3{fill:color-mix(in srgb,var(--yellow) 50%,#fff)}
.mtq-ch .zs:has(.hit) polygon:not(.hit){opacity:.45}
.mtq-ch .zs .z1.hit{fill:color-mix(in srgb,var(--blue) 22%,#fff)} .mtq-ch .zs .z2.hit{fill:color-mix(in srgb,var(--blue) 55%,#fff)} .mtq-ch .zs .z3.hit{fill:var(--yellow)}
.mtq-gr line{stroke:#fff; stroke-width:1; opacity:.7}
.mtq-ch .zb{stroke:#fff; stroke-width:3; stroke-linecap:round}
.mtq-ch .tk{font:700 12px var(--f-body); fill:var(--navy)} .mtq-ch .ax{font:800 13px var(--f-body); fill:var(--navy)}
.mtq-ch .zl rect{fill:#fff} .mtq-ch .zl text{font:800 13px var(--f-body); fill:var(--navy)}
.mtq-pt .you{opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1)} .mtq-pt.on .you{opacity:1; transform:none}
.mtq-pt .you rect{fill:var(--navy)} .mtq-pt .you text{font:800 13px var(--f-body); fill:#fff}
/* questionnaire sur la section marine : carte blanche à l'ombre bleu nuit, chapeau blanc */
/* « Nos consultant·es » : titre un peu plus petit, « sur-mesure » surligné comme le pied de page */
.mtq-ch .zl > g{transition:opacity .4s ease 1s} .mtq-ch .zl > g.hit{opacity:0}


/* ===== Page Enquêtes internes (maquette 1, 03/11/2026) ===== */
/* marque des passages de la FAQ à valider (maquette) */

/* --- Section 2 : frise du processus --- */
.fr{margin-top:clamp(28px,3vw,44px)}
.fr-tw{position:relative; margin-bottom:26px}
.fr-line{position:absolute; left:calc(50% / var(--n,4)); right:calc(50% / var(--n,4)); top:34px; height:6px; border-radius:6px; background:var(--tint)}
.fr-line i{display:block; height:100%; width:0; border-radius:6px; background:var(--blue); transition:width .7s cubic-bezier(.2,.8,.2,1)}
.fr-tabs{position:relative; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:12px}   /* 0.25 : toutes les phases sur une ligne (jusqu’à 6) */
.fr-t{display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 6px 6px; border:0; background:none; cursor:pointer; color:var(--navy); text-align:center}
.fr-n{position:relative; width:74px; height:74px; border-radius:24px; display:grid; place-items:center; background:#fff; color:var(--blue); box-shadow:inset 0 0 0 2px var(--tint),0 10px 24px color-mix(in srgb,var(--blue) 25%,transparent); transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.fr-n svg{width:32px; height:32px}
.fr-n b{position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font:800 14px/1 var(--f-body); box-shadow:0 0 0 3px #fff}
.fr-t:hover .fr-n{transform:translateY(-3px)}
.fr-t.done .fr-n{background:var(--tint); color:var(--navy)}
.fr-t.done .fr-n b{background:var(--blue); color:var(--navy)}
.fr-t[aria-selected=true] .fr-n{background:var(--navy); color:var(--yellow); box-shadow:0 14px 30px color-mix(in srgb,var(--navy) 30%,transparent)}
.fr-t[aria-selected=true] .fr-n b{background:var(--yellow); color:var(--navy)}
.fr-t:nth-child(odd)[aria-selected=true] .fr-n svg{transform:rotate(-6deg)} .fr-t:nth-child(even)[aria-selected=true] .fr-n svg{transform:rotate(6deg)}
.fr-n svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fr-lb{font:800 18px/1.25 var(--f-title)}
.fr-c{font:700 15px/1 var(--f-body); color:var(--blue)}
.fr-t:focus-visible{outline:3px solid var(--blue); outline-offset:4px; border-radius:18px}
.fr-ps{display:grid}
.fr-p{grid-area:1/1; background:#fff; border-radius:28px; padding:clamp(24px,3vw,40px); box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 24px 60px color-mix(in srgb,var(--blue) 30%,transparent); animation:ix-in .5s var(--ease)}
.fr-p.off{display:none}
.fr-ph{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.fr-k{padding:6px 12px; border-radius:20px; background:var(--yellow); color:var(--navy); font:800 15px/1 var(--f-body)}
.fr-pt{margin:0; font:800 clamp(24px,2.4vw,32px)/1.15 var(--f-title)}
.fr-l{list-style:none; margin:0; padding:0; display:grid; gap:14px}
ol.fr-l{font:inherit}
.fr-l.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fr-i{display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; padding:16px 18px; border-radius:20px; background:var(--tint); opacity:0; transform:translateY(10px); animation:fr-in .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.08s + var(--j) * 90ms)}
@keyframes fr-in{to{opacity:1; transform:none}}
.fr-ii{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--navy); color:var(--yellow)} .fr-ii svg{width:24px; height:24px}
.fr-i h3{margin:4px 0 0; font:700 18px/1.4 var(--f-body)}
.fr-i.rich h3{font:800 19px/1.3 var(--f-title); margin:2px 0 8px}
.fr-i p{margin:0 0 8px; font-size:16.5px; line-height:1.6} .fr-i p:last-child{margin-bottom:0}
.fr-i ul{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:6px} .fr-i li{position:relative; padding-left:20px; font-size:16.5px} .fr-i li::before{content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--blue)}
.fr-nx{display:flex; justify-content:flex-end; margin-top:18px}
.fr-go{display:inline-flex; align-items:center; gap:8px; border:0; background:none; color:var(--navy); font:800 16px/1.3 var(--f-body); cursor:pointer; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:5px}
.fr-go svg{width:18px; height:18px; transition:transform .3s} .fr-go:hover svg{transform:translateX(3px)}
.fr-go:focus-visible{outline:3px solid var(--blue); outline-offset:3px}

/* --- Interaction 1 : signalement reçu --- */
.sg{max-width:880px; margin:clamp(28px,3vw,40px) auto 0; background:#fff; color:var(--navy); border-radius:28px; padding:clamp(22px,3vw,40px); box-shadow:0 24px 60px rgba(5,12,22,.55)}
.sg-top{display:flex; align-items:center; gap:16px; margin-bottom:8px}
.sg-bk{width:44px; height:44px; border-radius:50%; border:0; background:var(--tint); color:var(--navy); display:grid; place-items:center; cursor:pointer} .sg-bk svg{width:20px; height:20px} .sg-bk[disabled]{visibility:hidden}
.sg-pg{flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:6px} .sg-pg i{height:8px; border-radius:8px; background:var(--tint); transition:background .4s} .sg-pg i.on{background:var(--blue)}
.sg-q{border:0; margin:0; padding:clamp(14px,2vw,24px) 0 0; min-width:0; animation:mtf-up .5s cubic-bezier(.2,.8,.2,1)} .sg-q.off{display:none}
.sg-q legend{padding:0; display:flex; flex-direction:column; gap:6px; margin-bottom:20px}
.sg-n{font:800 15px/1 var(--f-body); color:var(--blue)}
.sg-t{font:700 clamp(22px,2.2vw,28px)/1.25 var(--f-title)}
.sg-ch{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.sg-b{display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 18px; border:0; border-radius:18px; background:#fff; color:var(--navy); text-align:left; font:700 17px/1.35 var(--f-body); cursor:pointer; box-shadow:inset 0 0 0 2px var(--navy); transition:background .2s,color .2s,transform .2s}
.sg-b i{flex:none; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px currentColor; position:relative}
.sg-b:hover{background:var(--tint); transform:translateY(-2px)}
.sg-b.on{background:var(--navy); color:#fff} .sg-b.on i{background:var(--yellow); box-shadow:none} .sg-b.on i::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--navy)}
.sg-b:focus-visible, .sg-bk:focus-visible, .sg-re:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.sg-r{padding-top:10px; animation:mtf-up .55s cubic-bezier(.2,.8,.2,1)}
.sg-rk{display:block; font:800 15px/1 var(--f-body); color:var(--blue); margin-bottom:8px}
.sg-rt{margin:0 0 18px; font:800 clamp(22px,2.2vw,28px)/1.25 var(--f-title)}
.sg-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:sg}
.sg-s{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 16px; border-radius:18px; background:var(--tint); opacity:0; transform:translateX(-10px); animation:sg-in .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.1s + var(--j) * 120ms)}
@keyframes sg-in{to{opacity:1; transform:none}}
.sg-s::before{counter-increment:sg; content:counter(sg); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font:800 16px/1 var(--f-body)}
.sg-s.hot::before{background:var(--yellow); color:var(--navy)}
.sg-s b{display:block; font:800 17px/1.35 var(--f-body); margin:2px 0 4px} .sg-s span{font-size:16px; line-height:1.55}
.sg-w{align-self:start; padding:6px 10px; border-radius:20px; background:#fff; font:800 13px/1.2 var(--f-body); white-space:nowrap}
.sg-s.hot .sg-w{background:var(--navy); color:#fff}
.sg-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:22px}
.sg-re{display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; color:var(--navy); font:800 15px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px; cursor:pointer} .sg-re svg{width:18px; height:18px}
.sg-legal{margin:16px 0 0; font-size:15px; line-height:1.5}

/* --- Interaction 2 : garanties en cartes à retourner --- */
.gq{margin-top:clamp(24px,3vw,36px)}
.gq-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.gq-pg{display:flex; align-items:center; gap:12px; flex:1; max-width:420px} .gq-pgt{flex:1; display:flex; gap:6px} .gq-pgt i{flex:1; height:10px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--blue) 45%,transparent); transition:background .4s, box-shadow .4s} .gq-pgt i.on{background:var(--blue); box-shadow:none}
.white .gq-pgt i:not(.on), .sec-white .gq-pgt i:not(.on){background:var(--tint)}
.gq-pg b{font:800 15px/1 var(--f-body); white-space:nowrap}
.gq-all{border:0; background:none; padding:0; color:var(--navy); font:800 15px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px; cursor:pointer}
.gq-l{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; perspective:1400px}
.gq-c{opacity:0; transform:translateY(16px)} .vis .gq-c{animation:fr-in .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--j) * 80ms)}
.gq-in{position:relative; display:grid; width:100%; min-height:270px; color:var(--navy); transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gq-in[data-on=true]{transform:rotateY(180deg)}
.gq-in[data-on=true] .gq-f, .gq-in:not([data-on=true]) .gq-b{pointer-events:none}
.gq-f, .gq-b{grid-area:1/1; display:flex; flex-direction:column; border-radius:24px; padding:24px; backface-visibility:hidden; -webkit-backface-visibility:hidden; min-width:0}
.gq-f{border:0; margin:0; font:inherit; color:var(--navy); text-align:left; cursor:pointer; background:#fff; box-shadow:0 2px 4px color-mix(in srgb,var(--navy) 6%,transparent),0 18px 44px color-mix(in srgb,var(--blue) 28%,transparent); transition:transform .3s}
.gq-f:hover{transform:translateY(-4px)}
.gq-b{background:var(--navy); color:#fff; transform:rotateY(180deg); box-shadow:0 18px 44px color-mix(in srgb,var(--navy) 30%,transparent)}
.gq-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.gq-no{font:800 56px/1 var(--f-title); color:var(--tint); -webkit-text-stroke:2px var(--blue)}
.gq-ic{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--navy); color:var(--yellow); flex:none; transition:transform .35s cubic-bezier(.2,.8,.2,1)} .gq-ic svg{width:28px; height:28px}
.gq-c:nth-child(odd) .gq-f:hover .gq-ic{transform:rotate(-6deg)} .gq-c:nth-child(even) .gq-f:hover .gq-ic{transform:rotate(6deg)}
.gq-f > b{font:800 24px/1.2 var(--f-title)}
.gq-s{display:block; margin-top:10px; font-size:17px; line-height:1.5; color:var(--navy)}
.gq-hint{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; align-self:flex-start; font:800 15px/1 var(--f-body); color:var(--navy); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:5px} .gq-hint svg{width:18px; height:18px; color:var(--navy)}
.gq-b > b{font:800 20px/1.25 var(--f-title); color:var(--yellow); margin-bottom:10px}
.gq-b > p{margin:0; font-size:17px; line-height:1.55}
.gq-b > p a{color:#fff; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:4px}
.gq-b > p a:hover{text-decoration-color:#fff}
.gq-bk{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding:16px 0 0; border:0; background:none; color:#fff; font:800 15px/1 var(--f-body); cursor:pointer; align-self:flex-start} .gq-bk svg{width:18px; height:18px; color:var(--yellow)}
.gq-f:focus-visible, .gq-bk:focus-visible{outline:3px solid var(--blue); outline-offset:4px; border-radius:24px}
.gq-bk:focus-visible{border-radius:6px}
.gq-src{margin:22px auto 0; text-align:center; font-size:16px; max-width:60ch}
.gq-src a{color:inherit; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}

@media (max-width:1000px){
  .gq-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-tabs{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:10px 16px 6px}
  .fr-line{display:none}
}
@media (max-width:640px){
  .fr-l.two{grid-template-columns:minmax(0,1fr)}
  .fr-i{grid-template-columns:40px minmax(0,1fr); padding:14px} .fr-ii{width:40px; height:40px}
  .sg-ch{grid-template-columns:minmax(0,1fr)}
  .sg-s{grid-template-columns:36px minmax(0,1fr)} .sg-s::before{width:36px; height:36px} .sg-w{grid-column:2; justify-self:start}
  .sg .btn{white-space:normal!important; width:100%; justify-content:center; text-align:center; padding:12px 20px!important}
  .gq-l{grid-template-columns:minmax(0,1fr)} .gq-in{min-height:200px}
}
@media (prefers-reduced-motion:reduce){.fr-i,.sg-s,.gq-c,.vis .gq-c{animation:none; opacity:1; transform:none}.gq-in{transition:none}.sg-q,.sg-r,.fr-p{animation:none}}
/* employeur privé / public : un seul jeu de textes visible ; les deux restent dans la page */
body:not(.emp-pub) [data-emp="pub"], body.emp-pub [data-emp="priv"]{display:none!important}
.emp{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:6px; border-radius:40px; background:color-mix(in srgb,#fff 8%,transparent)}
.emp-l{padding:0 8px 0 12px; font:800 15px/1 var(--f-body); color:#fff}
.emp-b{min-height:44px; padding:0 18px; border:0; border-radius:30px; background:transparent; color:#fff; font:800 15px/1 var(--f-body); cursor:pointer; box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 35%,transparent); transition:background .25s,color .25s}
.emp-b[aria-pressed=true]{background:var(--yellow); color:var(--navy); box-shadow:none}
.emp-b:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
/* 0.24 : profils de visiteur. Sans profil choisi, le serveur marque déjà le profil par défaut (data-pfon) */
body:not(.editing) [data-prof]:not([data-pfon]), body:not(.editing) .pfv > [data-pk]:not([data-pfon]){display:none!important}
body.editing [data-prof]{outline:1px dashed var(--blue); outline-offset:4px}
body.editing [data-prof]::before{content:"Affiché pour : " attr(data-prof); display:block; width:max-content; margin:0 0 6px; padding:3px 9px; border-radius:20px; background:var(--tint); color:var(--navy); font:800 13px/1.3 var(--f-body)}
.gq-c{position:relative; display:grid}
.gq-l{grid-auto-rows:1fr}
.emp-pf{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:10px; max-width:640px; padding:0; border-radius:0; background:none}
.emp-pf.n3 .emp-b:last-child, .emp-pf.n5 .emp-b:last-child{grid-column:1/-1}
.emp-pf .emp-l{grid-column:1/-1; padding:0 0 2px; font:800 16px/1.2 var(--f-body)}
.emp-pf .emp-b{position:relative; display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 18px 10px 14px; border-radius:16px; text-align:left; line-height:1.25; background:color-mix(in srgb,#fff 6%,transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#fff 30%,transparent); transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.emp-pf .emp-b::before{content:""; flex:none; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 55%,transparent); transition:box-shadow .25s,background .25s}
.emp-pf .emp-b:hover{box-shadow:inset 0 0 0 1.5px #fff; transform:translateY(-1px)}
.emp-pf .emp-b[aria-pressed=true]{background:var(--yellow); color:var(--navy); box-shadow:none}
.emp-pf .emp-b[aria-pressed=true]::before{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCC00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; box-shadow:none}
@keyframes pf-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.hero-anim .emp-pf .emp-l, .hero-anim .emp-pf .emp-b{animation:pf-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.75s + var(--j,0) * 90ms)}
/* entrée des boutons : seulement avec l'animation du haut de page (coupée si moins d'animations, aux tests et en modification) */
.emp-pf .emp-b:nth-of-type(1){--j:1} .emp-pf .emp-b:nth-of-type(2){--j:2} .emp-pf .emp-b:nth-of-type(3){--j:3} .emp-pf .emp-b:nth-of-type(4){--j:4} .emp-pf .emp-b:nth-of-type(5){--j:5}
@media (prefers-reduced-motion:reduce){.emp-pf .emp-l, .emp-pf .emp-b{animation:none}}
.editing .emp-pf .emp-l, .editing .emp-pf .emp-b{animation:none}
@media (max-width:520px){.emp-pf{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px} .emp-pf .emp-b{padding:10px 12px; gap:8px; font-size:15px; min-height:58px} .emp-pf .emp-b::before{width:16px; height:16px}}
.gq-ln{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:#fff; font:800 15px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:5px} .gq-ln svg{width:18px; height:18px; flex:none}
.gq-ln:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}
.emp-fp{margin:14px 0 0} .emp-fp a{display:inline-flex; align-items:center; gap:8px; color:#fff; font:800 16px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:5px} .emp-fp svg{width:18px; height:18px}

/* ===== réglages propres au moteur ===== */
/* texte riche */
.rt p{margin:0 0 12px} .rt > :last-child, .rt > div:last-child > :last-child{margin-bottom:0}
.rt ul{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px} .rt li{position:relative; padding-left:22px} .rt li::before{content:""; position:absolute; left:4px; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--blue)}
.rt a{color:inherit; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}
.dark .rt a{text-decoration-color:var(--yellow)}
.rt-ed{white-space:pre-wrap}
.qa .a .acc-rt{padding:0 24px 22px; color:var(--ink-2)}
.sl-bk .rt li{padding-left:30px} .sl-bk .rt li::before{left:2px; top:.3em; width:18px; height:18px; border-radius:6px; background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132438' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
/* employeur privé / public : une seule version visible ; en modification, les deux */
body:not(.emp-pub):not(.editing) [data-emp="pub"], body.emp-pub:not(.editing) [data-emp="priv"]{display:none!important}
/* titre en chapeau (balise h2 gardée pour le référencement), titre surligné comme le pied de page, phrase étoilée */
.fx-h.fx-ld.fx-ld{font:400 clamp(18px,1.5vw,21px)/1.55 var(--f-body); letter-spacing:0; word-spacing:0; text-transform:none; margin:0 0 14px}
.fx-sm .hl{position:relative; z-index:0; display:inline-block; white-space:nowrap; padding:0 .12em; color:inherit; transition:color .4s ease .9s}
.fx-sm .hl::before{content:""; position:absolute; z-index:-1; inset:.08em 0 .02em; border-radius:.14em; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.2,.8,.2,1) .5s}
.sec.free.vis .fx-h.fx-sm .hl, .editing .sec .fx-h.fx-sm .hl{color:var(--navy)} .vis .fx-sm .hl::before, .editing .fx-sm .hl::before{transform:scaleX(1)}
.fx-st{font-weight:700} .fx-stars{color:var(--yellow); letter-spacing:.12em; margin-right:2px}
/* cartes blanches posées sur une section marine : ombre bleu nuit */
.dark .mtq, .dark .sg{box-shadow:0 24px 60px rgba(5,12,22,.55)}
.dark .mtq-gap, .dark .gq-src{color:inherit}
/* ligne titre + image à côté d'un formulaire : le formulaire au niveau du titre, le bas de l'image au niveau du bas du formulaire */
.fx-r:has(.fx-form){align-items:stretch}
.fx-r:has(.fx-form) > .fx-c:has(> .fxt-image){display:flex; flex-direction:column} .sec .fx-r:has(.fx-form) > .fx-c > .fx-m.fxt-image.fxt-image{margin-top:auto}
/* modification : tous les panneaux visibles, cartes à plat */
.editing .sl-p, .editing .fr-p{grid-area:auto} .editing .sl-ps, .editing .fr-ps{gap:18px}
.editing .fr-i, .editing .gq-c{opacity:1; transform:none; animation:none}
.editing .gq-ed{transform:none} .editing .gq-ed .gq-f, .editing .gq-ed .gq-b{grid-area:auto; backface-visibility:visible; transform:none; position:static}
.editing .gq-ed{display:grid; gap:8px}
.mtf-w{text-align:center}

/* H1 long (plus de 60 signes, pages Solutions) : taille de la maquette validée, jamais coupé au milieu d'un mot */
.sec.free .fx-r .fx-h.fx-h1.fx-long:not(.big):not(.cta){font-size:clamp(40px,4.4vw,66px); overflow-wrap:normal; word-break:normal; hyphens:manual}
/* ligne du formulaire de contact (pages Solutions) : titre plus compact, image calée en bas, à la hauteur du formulaire */
.fx-r:has(.fx-form) .fx-h.fx-h2{font-size:clamp(30px,3vw,44px)}
.fx-r:has(.fx-form) > .fx-c > .fxt-image .fx-fig{margin-bottom:0}
/* 0.20 : l'image prend toute la place laissée sous le titre, jusqu'au bas du formulaire */
.sec .fx-r:has(.fx-form) > .fx-c > .fx-m.fxt-image.fxt-image{flex:1 1 0; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end}
.fx-r:has(.fx-form) > .fx-c > .fxt-image .fx-fig{flex:1 1 0; min-height:0; display:flex; align-items:flex-end; justify-content:flex-start}
.fx-r:has(.fx-form) > .fx-c > .fxt-image .fx-img{height:100%; max-height:440px; width:auto; max-width:100%; object-fit:contain; object-position:left bottom}
.fx-m.fxt-title:has(.fx-sm) + .fx-m.fxt-button{margin-top:32px}
/* chapeaux en H2 sous le H1 : l'espace d'un texte, pas celui d'un titre suivi d'une grille */
.fx-m.fxt-title.fxs-n + .fx-m.fxt-title.fxs-n:has(> .fx-ld){margin-top:18px}
.fx-m.fxt-title.fxs-n:has(> .fx-ld) + .fx-m.fxt-title.fxs-n:has(> .fx-ld){margin-top:2px}
.fx-m.fxt-title.fxs-n + .fx-m.fxt-empsel:not(.fxt-text):not(.fxt-button){margin-top:24px}
/* sélecteur d'employeur sur téléphone : le libellé au-dessus, les deux choix côte à côte (jamais un choix seul sur sa ligne) */
@media (max-width:520px){ .emp{display:grid; grid-template-columns:1fr 1fr; border-radius:22px; width:100%} .emp-l{grid-column:1/-1; padding:4px 10px 2px} .emp-b{justify-content:center; text-align:center} }
/* téléphone : illustration du panneau au-dessus du titre, H1 long qui tient dans l'écran, bouton long sur deux lignes au besoin */
@media (max-width:640px){
  .sl-b .sl-bimg{float:none; display:block; width:110px; margin:0 0 10px}
  .sec.free .fx-r .fx-h.fx-h1.fx-long:not(.big):not(.cta){font-size:clamp(28px,8.2vw,40px)}
  .sec .fx-m.fxt-button .btn, .sl-more .btn, .sg-cta .btn, .mtq-cta .btn, .sec .fx-m.fxt-button .btn span, .sl-more .btn span, .sg-cta .btn span, .mtq-cta .btn span, .fx-form .btn, .fx-form .btn span{white-space:normal !important; text-align:center; max-width:100%} .sec .fx-m.fxt-button .btn, .sl-more .btn, .sg-cta .btn, .mtq-cta .btn, .fx-form .btn{padding-block:12px; padding-inline:20px}
}

/* ---------- 0.20 : démo de tableau de bord (module dashdemo) ---------- */

.dv{box-sizing:border-box; width:100%; min-width:0; max-width:min(1120px,100%); margin:clamp(24px,3vw,40px) auto 0; padding:clamp(18px,2.4vw,30px); text-align:left; background:#fff; border-radius:24px; box-shadow:0 22px 50px -24px rgba(19,36,56,.4)}
.dv-tabs{display:flex; gap:10px; padding:8px; margin:0 0 20px; border-radius:999px; background:var(--tint); overflow-x:auto; scrollbar-width:none}
.dv-tab{flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 22px 0 8px; border:0; border-radius:999px; background:#fff; color:var(--navy); font:800 16px/1 var(--f-body); cursor:pointer; box-shadow:0 6px 16px -10px rgba(19,36,56,.45); transition:background .25s, color .25s, box-shadow .25s, transform .2s}
.dv-tab:hover{transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(19,36,56,.5)}
.dv-tab[aria-selected=true]{background:var(--navy); color:#fff; box-shadow:0 12px 24px -12px rgba(19,36,56,.75)}
.dv-ti{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--tint); transition:background .25s}
.dv-ti svg{width:20px; height:20px; overflow:visible; transform:scale(.82); fill:none; stroke:var(--navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dv-tab[aria-selected=true] .dv-ti{background:var(--yellow)}
.dv-ctl{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; margin-bottom:20px}
.dv-g{display:flex; align-items:center; gap:10px; min-width:0; max-width:100%}
.dv-l{font:800 13px/1 var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:var(--navy)}
.dv-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px; min-width:0; max-width:100%}
.dv-chips button, .dv-seg button{flex:none; height:38px; padding:0 14px; border-radius:999px; border:2px solid var(--navy); background:#fff; color:var(--navy); font:700 15px/1 var(--f-body); cursor:pointer; transition:background .2s, color .2s}
.dv-chips button:hover, .dv-seg button:hover{background:var(--tint)}
.dv-chips button[aria-pressed=true], .dv-seg button[aria-pressed=true]{background:var(--navy); color:#fff}
.dv-seg{display:flex; gap:6px}
.dv-seg button[data-v="0"][aria-pressed=true]{background:var(--blue); border-color:var(--blue); color:var(--navy)}
.dv-seg button[data-v="1"][aria-pressed=true]{background:var(--yellow); border-color:var(--yellow); color:var(--navy)}
.dv[data-tab="1"] .dv-ctl{display:none} .dv[data-tab="2"] .dv-gt{display:none}
.dv-p{animation:dv-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes dv-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.dv-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 18px}
.dv-kpi{display:grid; gap:6px; padding:18px 20px; border-radius:18px; background:var(--tint)}
.dv-kpi:first-child{background:var(--navy)} .dv-kpi:first-child *{color:#fff}
.dv-kl{font:700 15px/1.25 var(--f-body); color:var(--navy)}
.dv-kv{font:800 clamp(34px,3.6vw,48px)/1 var(--f-title); color:var(--navy); font-variant-numeric:tabular-nums}
.dv-ks{font-size:15px; color:var(--navy)}
.dv-kpi:first-child .dv-ks b{color:var(--yellow)}
.dv-charts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.dv-c{margin:0; padding:16px 16px 8px; border-radius:18px; box-shadow:inset 0 0 0 2px var(--tint)}
.dv-c figcaption{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-items:baseline; margin-bottom:6px}
.dv-c figcaption b{font:800 17px/1.2 var(--f-title); color:var(--navy)}
.dv-lg{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:15px; color:var(--navy)}
.dv-lg i{display:inline-block; width:18px; height:4px; border-radius:2px; margin-left:8px}
.dv-lg i.me{background:var(--navy)} .dv-lg i.avg{height:0; border-top:3px dashed var(--blue)} .dv-lg i.nat{height:0; border-top:3px dotted var(--yellow); width:20px}
.dv-lg i.t0, .dv-lg i.t1, .dv-lg i.t2{height:12px; width:12px; border-radius:3px} .dv-lg i.t0{background:var(--blue)} .dv-lg i.t1{background:var(--yellow)} .dv-lg i.t2{background:var(--navy)}
.dv svg{display:block; width:100%; height:auto; overflow:visible}
.dv svg text{font:600 13px var(--f-body); fill:var(--navy)}
.dv svg .gr{stroke:var(--tint); stroke-width:1.5}
.dv svg .me{fill:none; stroke:var(--navy); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; transition:d .7s cubic-bezier(.2,.7,.2,1)}
.dv svg .area{fill:url(#dvg); transition:d .7s cubic-bezier(.2,.7,.2,1)}
.dv svg .avg{fill:none; stroke:var(--blue); stroke-width:3; stroke-dasharray:7 6; transition:d .7s cubic-bezier(.2,.7,.2,1)}
.dv svg .nat{stroke:var(--yellow); stroke-width:3; stroke-dasharray:2 6; stroke-linecap:round; transition:all .7s cubic-bezier(.2,.7,.2,1)}
.dv svg .natl{font:800 13px var(--f-body)}
.dv svg .dot{fill:var(--yellow); stroke:var(--navy); stroke-width:3; transition:cx .7s cubic-bezier(.2,.7,.2,1), cy .7s cubic-bezier(.2,.7,.2,1)}
.dv svg .vl{font:800 15px var(--f-body); transition:all .7s cubic-bezier(.2,.7,.2,1)}
.dv svg rect{transition:x .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1), fill .3s}
.dv svg rect.t0{fill:var(--blue)} .dv svg rect.t1{fill:var(--yellow)} .dv svg rect.t2{fill:var(--navy)} .dv svg rect.dim{fill:var(--tint)}
.dv svg .pc{font:800 13px var(--f-body); pointer-events:none}
/* bulles */
.dv-wide{padding:18px}
.dv svg .bz{fill:var(--yellow); opacity:.16}
.dv svg .bzl{font:800 13px var(--f-body)}
.dv svg .ax{stroke:var(--navy); stroke-width:1.5; opacity:.35}
.dv svg .ref{stroke:var(--blue); stroke-width:2.5; stroke-dasharray:7 6}
.dv svg .b{cursor:pointer}
.dv svg .b circle{fill:var(--blue); stroke:#fff; stroke-width:3; transition:r .5s cubic-bezier(.2,.7,.2,1), fill .25s; transform-box:fill-box; transform-origin:center}
.dv svg .b.on circle{fill:var(--navy)} .dv svg .b.on text.bn{fill:#fff}
.dv svg .b:hover circle{fill:color-mix(in srgb,var(--navy) 70%,var(--blue))}
.dv svg .b text{font:800 14px var(--f-body); pointer-events:none}
.dv svg .b .bv{font:700 13px var(--f-body)}
/* simulateur */
.dv-sim{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:stretch}
.dv-sl{display:grid; gap:20px; align-content:start; padding:20px; border-radius:18px; box-shadow:inset 0 0 0 2px var(--tint)}
.dv-r{display:grid; gap:10px; font-size:16px; color:var(--navy)}
.dv-r output{float:right; padding:3px 10px; border-radius:999px; background:var(--navy); color:#fff; font:800 14px/1.2 var(--f-body)}
.dv-r input{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:6px; background:linear-gradient(90deg,var(--yellow) var(--p,40%),var(--tint) var(--p,40%)); outline:none; cursor:pointer}
.dv-r input::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 4px 10px -4px rgba(19,36,56,.5)}
.dv-r input::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--navy)}
.dv-r input:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.dv-hint{margin:0; font-size:15px; color:var(--navy)}
.dv-out{display:grid; gap:8px; align-content:start; padding:24px; border-radius:18px; background:var(--tint); color:var(--navy); position:relative; overflow:hidden}
.dv-out .dv-kl, .dv-out .dv-ks{color:var(--navy)} .dv-out .dv-ks b{display:inline-block; padding:2px 10px; border-radius:999px; background:var(--yellow); color:var(--navy)}
.dv-big{font:800 clamp(52px,6vw,84px)/1 var(--f-title); color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.dv-ppl{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 6px; min-height:34px}
.dv-ppl i{width:22px; height:30px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Ccircle cx='11' cy='6' r='5' fill='%23132438'/%3E%3Cpath d='M2 29v-8a9 9 0 0 1 18 0v8z' fill='%23132438'/%3E%3C/svg%3E"); animation:dv-pop .35s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 40ms)}
@keyframes dv-pop{from{transform:scale(.3); opacity:0}}
.dv-gauge{margin-top:8px} .dv-out svg text{font-size:16px} .dv-gl{font:700 15px var(--f-body)}
.dv-out svg text{fill:var(--navy)} .dv-out svg .gb{fill:#fff} .dv-out svg .gn{fill:var(--blue); transition:width .7s cubic-bezier(.2,.7,.2,1)} .dv-out svg .go{fill:var(--navy); opacity:.22; transition:width .7s cubic-bezier(.2,.7,.2,1)}
.dv-out svg .gm{stroke:var(--navy); stroke-width:3} .dv-out svg .gmt{font:800 13px var(--f-body); fill:var(--navy)}
.dv-read{display:flex; gap:12px; align-items:baseline; margin:18px 0 0; padding:14px 18px; border-radius:14px; background:var(--tint); font-size:17px; color:var(--navy)}
.dv-rk{flex:none; font:800 13px/1 var(--f-body); letter-spacing:.07em; text-transform:uppercase}
.dv-note{margin:12px 0 0; font-size:15px; color:var(--navy)}
@media (max-width:860px){ .dv-charts, .dv-sim{grid-template-columns:minmax(0,1fr)} .dv-ctl{justify-content:flex-start} .dv-tab{flex:1 0 auto; font-size:15px} }
@media (max-width:640px){ .dv-ctl, .dv-g{min-width:0; max-width:100%} .dv-chips{max-width:calc(100vw - 96px)} .dv-kpis{grid-template-columns:minmax(0,1fr)} .dv-g{flex-direction:column; align-items:flex-start; width:100%} .dv-seg{flex-wrap:wrap} .dv-read{flex-direction:column; gap:6px} .dv-tab{flex:1 1 0; height:auto; min-height:50px; padding:6px 8px; white-space:normal; text-align:center; line-height:1.2; font-size:14px} .dv-tabs{gap:4px} .dv-ti{display:none} .dv[data-tab="1"] .dv-ctl{display:none} }
@media (max-width:640px){ .dv svg.dv-line text, .dv svg.dv-stack text{font-size:21px} .dv svg.dv-stack .pc{font-size:19px} .dv .dv-out svg text{font-size:24px} .dv svg.dv-line .vl{font-size:24px} .dv svg.dv-line .natl{font-size:19px} }
@media (prefers-reduced-motion:reduce){ .dv *, .dv svg *{transition:none !important; animation:none !important} }
.dv-ed{padding:22px; text-align:left} .dv-ed p{margin:0 0 8px}
/* 0.20 : contact simple : la carte du formulaire s'étire jusqu'au bas de l'image, le champ du message grandit */
.fx-r:has(.fx-form) > .fx-c:has(.fx-form){display:flex; flex-direction:column}
.fx-r:has(.fx-form) > .fx-c > .fxt-form{flex:1 1 auto; display:flex; flex-direction:column}
.fx-r:has(.fx-form) .fx-form:has(.form.fx-ct){flex:1 1 auto; display:flex; flex-direction:column}
.fx-form .form.fx-ct{flex:1 1 auto; grid-template-rows:repeat(var(--r2,3),auto) minmax(120px,1fr) auto}   /* 0.21 : nombre de lignes écrit par form_html (deux colonnes, puis une seule) ; le message prend la place qui reste */
@media (max-width:760px){.fx-form .form.fx-ct{grid-template-rows:repeat(var(--r1,6),auto) minmax(120px,1fr) auto}}
.fx-form .form.fx-ct .fld.ta, .fx-form .form.fx-ct .fld.ta textarea{height:100%}
/* 0.22 : section repliée, ouverte par un lien vers son ancre ; croix pour la refermer ; signalée dans l'éditeur */
.sec.fold:not(.open){display:none}
.sec.fold > .wrap{position:relative}
.sec.fold .fold-x{position:absolute; top:0; right:20px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; background:#fff; color:var(--navy); box-shadow:0 6px 18px rgba(19,36,56,.14); transition:transform .15s var(--ease)}
.sec.fold.dark .fold-x{background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.sec.fold .fold-x:hover{transform:translateY(-1px)} .sec.fold .fold-x:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.sec.fold .fold-x svg{width:20px; height:20px}
@media (max-width:760px){ .sec.fold .fold-x{position:static; margin:0 0 12px auto} }
.sec.fold-ed{outline:2px dashed var(--blue); outline-offset:-6px}
.sec.fold-ed::before{content:"Section repliée en ligne : elle s’ouvre par un lien vers son ancre"; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; font:700 13px/1 var(--f-body); background:var(--blue); color:var(--navy); padding:6px 12px; border-radius:999px; white-space:nowrap}

/* 0.22.2 : bouton d’un onglet (« Lire l’article… ») détaché du texte qui précède, même après une liste */
.sl-p > .btn{margin-top:28px}

/* ---------- 0.23 : démo d'AD MAP (module croise) : onglets et choix en pilules, tableau poste / tolérances, résultats compacts ---------- */
.cx{padding:clamp(20px,2.6vw,34px); text-align:left; color:var(--navy)}
.cx-hd{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:16px}
.cx-tabs{display:inline-flex; gap:4px; background:var(--tint); border-radius:999px; padding:4px}
.cx-t{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 22px; border:0; border-radius:999px; background:transparent; font:800 16px var(--f-body); color:var(--navy); cursor:pointer}
.cx-t:hover{background:#fff}
.cx-t[aria-selected="true"]{background:var(--navy); color:#fff}
.cx-t:focus-visible, .cx-pos:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.cx-bd{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:var(--yellow); color:var(--navy); font-size:14px; font-weight:800}
.cx-bd[hidden]{display:none}
.cx-sel{position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 8px 0 18px; border-radius:999px; background:var(--navy); color:#fff; max-width:100%}
.cx-k{font-weight:800; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--yellow)}
.cx-pos{-webkit-appearance:none; appearance:none; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/18px; color:#fff; font:700 16px var(--f-body); padding:10px 38px 10px 0; cursor:pointer; min-width:0; max-width:100%; text-overflow:ellipsis}
.cx-pos option{color:var(--navy); background:#fff}
.cx-sub{font-size:16px; margin:0 0 14px}
.cx-tb{border-radius:16px; background:var(--tint); padding:4px 14px 8px}
.cx-row{display:grid; align-items:center; padding:9px 0}
.cx-row + .cx-row{border-top:0}
.cx-th{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding-bottom:2px}
.cx-c b{font-size:16px}
.cx-go{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; margin-top:14px}
.cx-re, .cx-back{background:none; border:0; padding:6px 0; font:700 15px var(--f-body); color:var(--navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.cx-p[hidden]{display:none}
.cx-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,2.4vw,32px); align-items:center}
.cx-r{margin:0}
.cx-svg{display:block; width:100%; height:auto; max-height:360px}
.cx-grid{fill:none; stroke:var(--tint); stroke-width:1.5}
.cx-ax{stroke:var(--tint); stroke-width:1.5}
.cx-lab{font:700 14px var(--f-body); fill:var(--navy)}
.cx-lab.nb{font-size:20px; font-weight:800}
.cx-svg .cx-po{fill:rgba(77,180,232,.28); stroke:var(--blue); stroke-width:3; stroke-linejoin:round}
.cx-li{fill:none; stroke:var(--navy); stroke-width:2.5; stroke-dasharray:7 6; stroke-linejoin:round}
.cx-dot.bad{fill:var(--yellow); stroke:var(--navy); stroke-width:2.5}
.cx-dot.warn{fill:#fff; stroke:var(--navy); stroke-width:2.5}
.cx-lg{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:15px; font-weight:600; margin-top:4px} .cx-lg > span{white-space:nowrap}
.cx-lg i{display:inline-block; width:22px; height:10px; margin-right:6px; vertical-align:middle; border-radius:3px}
.cx-lg i.po{background:rgba(77,180,232,.28); box-shadow:inset 0 0 0 2px var(--blue)}
.cx-lg i.li{height:0; border-top:3px dashed var(--navy); border-radius:0}
.cx-lg i.ex{width:14px; height:14px; border-radius:50%; background:var(--yellow); box-shadow:inset 0 0 0 2px var(--navy)}
.cx-nl{margin:10px 0 0; padding-left:24px; font-size:15px; columns:2; column-gap:20px} .cx-nl li{margin:2px 0; break-inside:avoid}
.cx-res{background:var(--tint); border-radius:16px; padding:14px 16px}
.cx-sum{margin:0; font-size:16px}
.cx-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.cx-list:empty{display:none}
.cx-i{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; background:#fff; border-radius:12px; padding:10px 12px}
.cx-pill{display:inline-block; border-radius:999px; padding:3px 10px; font-weight:800; font-size:15px; white-space:nowrap}
.cx-i.bad .cx-pill{background:var(--yellow); color:var(--navy)}
.cx-i.warn .cx-pill{background:#fff; color:var(--navy); box-shadow:inset 0 0 0 2px var(--blue)}
.cx-i b{display:block; font-size:16px}
.cx-d, .cx-pi{display:block; font-size:15px; margin-top:1px}
.cx-back{margin-top:8px}
.cx-ft{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-top:16px}
.cx-note{margin:0; font-size:15px; font-weight:600}
@media (max-width:900px){ .cx-g{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .cx-i{grid-template-columns:minmax(0,1fr)} .cx-i .cx-pill{justify-self:start} .cx-t{padding:0 16px} .cx-sel{width:100%} .cx-pos{flex:1} }
/* 0.23 : deux curseurs par contrainte (poste en jaune, personne en bleu) */
.cx-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:6px 26px}
.cx-th i.cx-sw{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:-1px}
.cx-sw.po{background:var(--yellow)} .cx-sw.pe{background:var(--blue)}
.cx-s{display:grid; gap:2px}
.cx-s input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; margin:0; cursor:pointer; --x:0%; --c:var(--yellow)}
.cx-s.pe input[type=range]{--c:var(--blue)}
.cx-s input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:8px; background:linear-gradient(90deg,var(--c) 0 var(--x),#fff var(--x) 100%)}
.cx-s input[type=range]::-moz-range-track{height:8px; border-radius:8px; background:linear-gradient(90deg,var(--c) 0 var(--x),#fff var(--x) 100%)}
.cx-s input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 2px 6px rgba(19,36,56,.2)}
.cx-s input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--navy)}
.cx-s input[type=range]:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:8px}
.cx-s output{font-size:15px; font-weight:700}
@media (max-width:900px){ .cx-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .cx-row > .cx-c{grid-column:1 / -1} .cx-th > :first-child{display:none} .cx-th > :nth-child(3){display:block} }
.cx-th{align-items:end}
/* 0.23 : cotation plus compacte : valeur écrite à côté du curseur, lignes resserrées */
.cx-tb{padding:2px 14px 6px}
.cx-row{padding:4px 0}
.cx-th{padding:6px 0 0}
.cx-s{grid-template-columns:minmax(0,1fr) 9.5em; align-items:center; gap:10px}
.cx-s output{line-height:1.2}
.cx-sub{margin-bottom:10px}
@media (max-width:900px){ .cx-s{grid-template-columns:minmax(0,1fr)} .cx-s output{font-size:14px} .cx-row{padding:6px 0} }

/* ---------- 0.25 : modèle PCS en onglets (pz-) ---------- */
.pz{padding:clamp(18px,2.6vw,30px); border-radius:28px; background:#fff; color:var(--navy); text-align:left}
.pz-tabs{display:flex; align-items:stretch; gap:8px; padding:6px; border-radius:22px; background:var(--tint)}
.pz-t{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:10px; padding:7px 12px; border:0; border-radius:16px; background:transparent; color:var(--navy); text-align:left; cursor:pointer; transition:background .2s, box-shadow .2s}
.pz-t:hover{background:#fff}
.pz-t[aria-selected=true]{background:#fff; box-shadow:0 6px 18px color-mix(in srgb,var(--blue) 30%,transparent)}
.pz-t:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.pz-L{flex:none; width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:var(--navy); color:var(--yellow); font:800 24px/1 var(--f-title)}
.pz-t1 .pz-L{background:var(--blue); color:var(--navy)} .pz-t2 .pz-L{background:var(--yellow); color:var(--navy)}
.pz-tl{min-width:0} .pz-tl b{display:block; font:800 18px/1.2 var(--f-title)} .pz-tl small{display:block; margin-top:2px; font-size:15px; line-height:1.3}
.pz-ar{flex:none; align-self:center; width:14px; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132438' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/14px no-repeat}
.pz-b{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(16px,2.4vw,30px); margin-top:clamp(12px,1.6vw,20px); align-items:start}
.pz-grs{display:grid; gap:12px}
.pz-gt{display:block; margin:0 0 7px; font:800 15px/1.2 var(--f-body)}
.pz-gr ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.pz-i{display:inline-flex; align-items:center; min-height:36px; padding:6px 13px; border:0; border-radius:22px; background:#fff; color:var(--navy); font:700 15px/1.2 var(--f-body); text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--navy) 22%,transparent); transition:background .2s, color .2s, box-shadow .2s, transform .2s}
.pz-gres .pz-i, .pz-gpos .pz-i{box-shadow:inset 0 0 0 1.5px var(--blue)}
.pz-i:hover{box-shadow:inset 0 0 0 1.5px var(--navy); transform:translateY(-1px)}
.pz-i[aria-pressed=true]{background:var(--navy); color:#fff; box-shadow:none}
.pz-i:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.pz-inl{flex:1 1 100%; list-style:none}
.pz-p{position:sticky; top:110px; border-radius:22px; padding:18px 20px; background:var(--navy); color:#fff; min-height:180px}
.pz-hint{margin:0; font-size:17px; line-height:1.5}
.pz-lv{display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:10px; padding:5px 12px; border-radius:20px; background:var(--yellow); color:var(--navy); font:800 15px/1.25 var(--f-body)}
.pz-dt{display:block; font:800 22px/1.25 var(--f-title); color:var(--yellow)}
.pz-dx, .pz-df, .pz-da{margin:8px 0 0; font-size:16.5px; line-height:1.5} .pz-df b, .pz-da b{font-weight:800}
@media (max-width:900px){.pz-b{grid-template-columns:minmax(0,1fr)} .pz-p{position:static; min-height:0} .pz-inl .pz-p{margin:4px 0 6px; padding:16px 18px} .pz-tl small{display:none} .pz-t{flex-direction:column; align-items:center; text-align:center; gap:6px; padding:8px 6px} .pz-tl b{font-size:15px} .pz-ar{display:none}}

/* ---------- 0.25 : simulateur du calendrier (cg-) ---------- */
.cg{padding:clamp(20px,3vw,34px); border-radius:28px; background:#fff; color:var(--navy); text-align:left}
.cg-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,3vw,40px); align-items:start}
.cg-f{display:grid; gap:20px}
.cg-k{display:block; margin-bottom:10px; font:800 16px/1.2 var(--f-body)}
.cg-eff{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:10px; background:linear-gradient(90deg,var(--yellow) var(--p,43%),var(--tint) var(--p,43%)); cursor:pointer}
.cg-eff::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 2px 6px color-mix(in srgb,var(--navy) 25%,transparent)}
.cg-eff::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--navy)}
.cg-eff:focus-visible{outline:3px solid var(--blue); outline-offset:6px}
.cg-ev{display:inline-block; margin-top:10px; padding:5px 12px; border-radius:20px; background:var(--navy); color:#fff; font:800 15px/1.2 var(--f-body)}
.cg-seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:5px; border-radius:16px; background:var(--tint)}
.cg-s{min-height:44px; border:0; border-radius:12px; background:transparent; color:var(--navy); font:800 15px/1.2 var(--f-body); cursor:pointer}
.cg-s[aria-pressed=true]{background:var(--navy); color:#fff}
.cg-ms{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.cg-m{display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; border:0; border-radius:14px; background:#fff; color:var(--navy); font:700 15px/1.25 var(--f-body); text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--navy) 22%,transparent)}
.cg-m::before{content:""; flex:none; width:20px; height:20px; border-radius:6px; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--navy) 40%,transparent)}
.cg-m[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--navy)}
.cg-m[aria-pressed=true]::before{box-shadow:none; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132438' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.cg-m:focus-visible, .cg-s:focus-visible, .cg-pa:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.cg-sv{display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:var(--navy); font:800 15px/1.3 var(--f-body); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:5px} .cg-sv svg{width:18px; height:18px}
.cg-sw{display:flex; align-items:center; justify-content:space-between; gap:12px} .cg-sw .cg-k{margin:0}
.cg-pa{flex:none; position:relative; width:52px; height:30px; border:0; border-radius:30px; background:color-mix(in srgb,var(--navy) 25%,transparent); cursor:pointer; transition:background .2s}
.cg-pa span{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .2s}
.cg-pa[aria-checked=true]{background:var(--blue)} .cg-pa[aria-checked=true] span{transform:translateX(22px)}
.cg-sum{margin:0 0 16px; font-size:17px; line-height:1.5} .cg-mo{font:800 clamp(26px,2.6vw,34px)/1.1 var(--f-title); display:block; margin-bottom:4px}
.cg-gt{position:relative; padding-top:26px; --lw:150px}
.cg-ax{position:absolute; top:0; left:0; right:0; height:22px; margin-left:var(--lw)}
.cg-ax span{position:absolute; left:var(--a); top:0; font:800 13px/1 var(--f-body); color:var(--navy); padding-left:4px; border-left:1.5px solid color-mix(in srgb,var(--navy) 25%,transparent); height:22px}
.cg-rows{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cg-row{display:grid; grid-template-columns:var(--lw) minmax(0,1fr); align-items:center; gap:0}
.cg-pn{font:700 15px/1.2 var(--f-body); padding-right:10px}
.cg-tr{position:relative; height:28px; border-radius:8px; background:var(--tint)}
.cg-tr i{position:absolute; top:0; bottom:0; left:var(--a); width:var(--w); border-radius:8px; background:var(--navy); transition:left .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1)}
.cg-row.pa .cg-tr i{background:var(--blue)}
.cg-jl{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; font-size:16px; line-height:1.4}
.cg-jl li{position:relative; padding-left:22px} .cg-jl li::before{content:""; position:absolute; left:0; top:.35em; width:12px; height:12px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 2px var(--navy)}
.cg-warn{margin:14px 0 0; padding:12px 16px; border-radius:14px; background:var(--tint); font-size:16px; line-height:1.45}
.cg-note{margin:22px 0 0; font-size:15px; line-height:1.45}
@media (prefers-reduced-motion:reduce){.cg-tr i{transition:none}}
@media (max-width:860px){.cg-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.cg-ms{grid-template-columns:minmax(0,1fr)} .cg-gt{--lw:0px} .cg-row{grid-template-columns:minmax(0,1fr); gap:4px} .cg-pn{font-size:15px}}
/* fenêtre du simulateur */
.cg-dlg{width:min(1000px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:28px; background:var(--tint); color:var(--navy); box-shadow:0 30px 80px color-mix(in srgb,var(--navy) 40%,transparent); overflow:auto}
.cg-dlg::backdrop{background:color-mix(in srgb,var(--navy) 60%,transparent)}
.cg-dh{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px 10px 22px; background:var(--tint)}
.cg-dh b{font:800 clamp(19px,1.7vw,22px)/1.2 var(--f-title)}
.cg-x{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer} .cg-x svg{width:22px; height:22px}
.cg-x:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .cg-x:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.cg-dlg .cg{margin:0 16px 16px}
.cg-popn{margin:10px auto 0; max-width:52ch; text-align:center; font:700 15px/1.4 var(--f-body)}
@media (max-width:520px){.cg-dlg{border-radius:20px} .cg-dlg .cg{margin:0 8px 8px; padding:16px}}

.cg-dlg .cg{padding:clamp(16px,2vw,24px)} .cg-dlg .cg-in{gap:clamp(16px,2.4vw,30px)} .cg-dlg .cg-f{gap:16px}
.cg-dlg .cg-mo{font-size:clamp(22px,2.2vw,28px)} .cg-dlg .cg-sum{margin-bottom:10px; font-size:16px}
.cg-dlg .cg-rows{gap:6px} .cg-dlg .cg-tr{height:22px} .cg-dlg .cg-jl{margin-top:12px; gap:4px; font-size:15px} .cg-dlg .cg-note{margin-top:12px}
@media (max-width:1300px){.pz-tl small{display:none}}
.cg-ind{display:inline-block; margin-bottom:8px; padding:4px 11px; border-radius:20px; background:var(--yellow); color:var(--navy); font:800 15px/1.2 var(--f-body)}
.pz-gl{position:relative; padding-left:28px}
.pz-gl::before, .pz-leg i{content:""; position:absolute; left:11px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 2px var(--navy)}
.pz-i.pz-gl[aria-pressed=true]::before{box-shadow:0 0 0 2px #fff}
.pz-leg{position:relative; margin:12px 0 0; padding-left:22px; font-size:15px; line-height:1.45}
.pz-leg i{left:2px; top:.72em}
.pz-glb{position:relative; display:block; margin:6px 0 0; padding-left:20px; color:#fff; font:800 15px/1.3 var(--f-body)}
.pz-glb::before{content:""; position:absolute; left:2px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--yellow)}
.pz-glb[hidden]{display:none}
.pz .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* 0.25 : icônes de la banque dans les tuiles d’icônes (onglets, frise, cartes, test) */
.sic-im{display:block; width:100%; height:100%; object-fit:contain}
:is(.gq-ic, .fr-n, .fr-ii, .ix-ti, .mtf-ax, .mtq-bi, .mtq-ic, .sl-ti):has(> .sic-im){background:#fff; padding:6px}
/* 0.25.1 : le bouton qui ouvre le simulateur est centré par défaut ; « Alignement » du module le place à gauche ou à droite */
.fxt-calsim .cg-open{display:flex; width:max-content; max-width:100%; margin-inline:auto}
.fxt-calsim.fxa-r .cg-open{margin-right:0}

/* ===== 0.26 : portail formation (recherche, catalogue) et satisfaction (bande, tableau) ===== */

/* ---------- maquette portail : recherche du haut de page ---------- */
.fo-hs{position:relative; margin-top:28px; max-width:560px}
.fo-hl{display:block; font:700 15px/1.3 var(--f-body); color:#fff; margin-bottom:10px}
.fo-hf{display:flex; align-items:center; gap:8px; background:#fff; border-radius:var(--r-pill); padding:6px 6px 6px 20px; box-shadow:0 16px 40px rgba(14,28,44,.35)}
.fo-hf .fo-hi{width:22px; height:22px; color:var(--navy); flex:none}
.fo-hf input{flex:1; min-width:0; border:0; outline:0; font:500 17px/1.2 var(--f-body); color:var(--navy); background:transparent; height:48px}
.fo-hf input::placeholder{color:var(--navy); opacity:.6}
.fo-hf:focus-within{box-shadow:0 0 0 3px var(--blue),0 16px 40px rgba(14,28,44,.35)}
.fo-hf .btn{min-height:48px!important; padding:0 22px!important; box-shadow:none!important} .fo-ba{display:none; width:22px; height:22px; position:relative; z-index:1}
.fo-hsug{position:absolute; left:0; right:0; top:calc(100% - 40px); z-index:30; margin:0; padding:8px; list-style:none; background:#fff; border-radius:18px; box-shadow:var(--e2)}
.fo-hsug li a{display:block; padding:10px 14px; border-radius:12px; color:var(--navy); text-decoration:none; font:600 16px/1.35 var(--f-body)}
.fo-hsug li a small{display:block; font:500 14px/1.3 var(--f-body); color:var(--navy); opacity:.75; margin-top:2px}
.fo-hsug li a:hover,.fo-hsug li a:focus-visible,.fo-hsug li a[aria-selected=true]{background:var(--tint); outline:0}
.fo-hsug .fo-hall a{font-weight:800; color:var(--navy)}
.fo-hq{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.fo-qk{font:700 15px/1 var(--f-body); color:#fff; background:transparent; border:2px solid rgba(255,255,255,.55); border-radius:var(--r-pill); padding:9px 14px; cursor:pointer; transition:border-color .2s, background .2s}
.fo-qk:hover,.fo-qk:focus-visible{border-color:#fff; background:rgba(255,255,255,.1); outline:0}
/* ---------- catalogue ---------- */
.fo{margin-top:34px; text-align:left}
.fo-bar{display:flex; flex-direction:column; gap:12px; align-items:center}
.fo-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.fo-lb{font:800 15px/1 var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:var(--navy)}
.fo-seg{display:flex; gap:6px; padding:6px; border-radius:var(--r-pill); background:#fff; box-shadow:var(--e1); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
.fo-pf{font:700 15px/1 var(--f-body); color:var(--navy); background:transparent; border:0; border-radius:var(--r-pill); padding:12px 16px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s}
.fo-pf:hover{background:var(--tint)} .fo-pf[aria-pressed=true]{background:var(--navy); color:#fff}
.fo-pf:focus-visible,.fo-fm:focus-visible,.fo-t:focus-visible,.sx-d:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.fo-sf{position:relative; display:flex; align-items:center; width:340px; max-width:100%}
.fo-sf .fo-si{position:absolute; left:16px; width:20px; height:20px; color:var(--navy); pointer-events:none}
.fo-sf input{width:100%; height:48px; border:2px solid var(--navy); border-radius:var(--r-pill); padding:0 44px 0 46px; font:500 16px/1 var(--f-body); color:var(--navy); background:#fff; outline:0}
.fo-sf input::placeholder{color:var(--navy); opacity:.6} .fo-sf input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 45%,transparent)}
.fo-sf input::-webkit-search-cancel-button{display:none}
.fo-qx{position:absolute; right:8px; width:32px; height:32px; border:0; border-radius:50%; background:var(--tint); color:var(--navy); cursor:pointer; display:grid; place-items:center}
.fo-qx svg{width:16px; height:16px}
.fo-fms{display:flex; gap:6px; padding:6px; border-radius:var(--r-pill); background:#fff; box-shadow:var(--e1); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
.fo-fm{display:inline-flex; align-items:center; gap:7px; font:700 15px/1 var(--f-body); color:var(--navy); background:transparent; border:0; border-radius:var(--r-pill); padding:0 14px; height:40px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s}
.fo-fm svg{width:19px; height:19px} .fo-fm:hover{background:var(--tint)} .fo-fm[aria-pressed=true]{background:var(--navy); color:#fff}
.fo-tabs{display:grid; grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); gap:10px; margin:30px 0 0}
.fo-t{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px 14px; background:#fff; border:0; border-radius:20px; box-shadow:var(--e1); color:var(--navy); cursor:pointer; text-align:center; transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s}
.fo-t svg{width:30px; height:30px; color:var(--blue); transition:transform .3s var(--ease)}
.fo-t:hover{transform:translateY(-2px); box-shadow:var(--e2)} .fo-t:hover svg{transform:rotate(-6deg)} .fo-t:nth-child(even):hover svg{transform:rotate(6deg)}
.fo-tn{font:800 16px/1.2 var(--f-body)}
.fo-tc{font:800 15px/1 var(--f-body); min-width:30px; padding:6px 8px; border-radius:var(--r-pill); background:var(--tint); color:var(--navy)}
.fo-t[aria-selected=true]{background:var(--navy); color:#fff; box-shadow:var(--e2)} .fo-t[aria-selected=true] svg{color:var(--yellow)}
.fo-t[aria-selected=true] .fo-tc{background:var(--yellow); color:var(--navy)}
.fo-t[aria-selected=true]::after{content:""; position:absolute; left:50%; bottom:-9px; width:18px; height:18px; background:var(--navy); transform:translateX(-50%) rotate(45deg); border-radius:3px}
.fo-t.fo-z .fo-tc{opacity:.55}
.fo-res{margin:26px 0 12px; text-align:center; font:700 17px/1.4 var(--f-body); color:var(--navy)}
.fo-board{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:22px; position:relative; align-items:start}
.fo-c{position:relative; background:var(--tint); border-radius:var(--r-card); padding:20px 16px 18px}
.fo-c + .fo-c::before{content:""; position:absolute; left:-22px; top:34px; width:22px; height:4px; background:var(--yellow); border-radius:0}
.fo-ch{display:flex; gap:12px; align-items:flex-start; padding:0 4px 14px}
.fo-cn{flex:none; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--yellow); display:grid; place-items:center; font:800 19px/1 var(--f-title)}
.fo-ch h3{margin:2px 0 4px; font:800 clamp(20px,1.8vw,24px)/1.15 var(--f-title); color:var(--navy)}
.fo-ch p{margin:0; font:500 15px/1.4 var(--f-body); color:var(--navy)}
.fo-cl{display:flex; flex-direction:column; gap:10px}
.fo-k{display:block; position:relative; background:#fff; border-radius:16px; padding:14px 40px 12px 16px; color:var(--navy); text-decoration:none; box-shadow:0 1px 2px rgba(19,36,56,.06); transition:transform .2s var(--ease), box-shadow .2s; animation:fo-in .35s var(--ease) both; animation-delay:calc(var(--i,0) * 35ms)}
.fo-k:hover,.fo-k:focus-visible{transform:translateY(-2px); box-shadow:var(--e2); outline:0} .fo-k:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.fo-k::after{content:""; position:absolute; right:14px; top:16px; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; color:var(--blue); transition:transform .2s var(--ease)}
.fo-k:hover::after{transform:translateX(3px)}
.fo-kt{display:block; font:700 16px/1.35 var(--f-body)}
.fo-kt mark,.fo-hsug mark{background:transparent; color:inherit; box-shadow:inset 0 -.2em 0 var(--yellow)} .fo-hf input::-webkit-search-cancel-button{display:none}
.fo-km{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px}
.fo-kp{font:700 15px/1 var(--f-body); color:var(--navy); background:var(--tint); border-radius:var(--r-pill); padding:5px 9px}
.fo-kd{font:800 15px/1 var(--f-body); color:#fff; background:var(--navy); border-radius:var(--r-pill); padding:5px 9px}
.fo-kf{display:inline-flex; gap:4px; margin-left:auto; color:var(--navy)} .fo-kf svg{width:19px; height:19px}
.fo-ce{margin:4px 4px 0; font:500 15px/1.45 var(--f-body); color:var(--navy)}
.fo-rs{font:700 15px/1.45 var(--f-body); color:var(--navy); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fo-foot{margin:26px 0 0; text-align:center; font:500 17px/1.5 var(--f-body); color:var(--navy)}
.fo-foot a{font-weight:800; color:var(--navy); text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px}
@keyframes fo-in{from{opacity:0; transform:translateY(8px)}}
@media (max-width:1060px){.fo-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} .fo-t[aria-selected=true]::after{display:none}}
@media (max-width:860px){.fo-board{grid-template-columns:1fr; gap:16px} .fo-c + .fo-c::before{left:38px; top:-16px; width:4px; height:16px}}
@media (max-width:560px){.fo-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .fo-hf{padding-left:14px} .fo-hf .btn span{display:none} .fo-hf .btn{padding:0!important; width:48px; flex:none} .fo-hf .fo-ba{display:block}
  .fo-sf{width:100%} .fo-row{width:100%} .fo-seg{width:100%} .fo-lb{width:100%; text-align:center}}
/* ---------- satisfaction (bande du portail) ---------- */
.sx{margin-top:26px; text-align:center}
.sx-ds{display:inline-flex; gap:6px; padding:6px; border-radius:var(--r-pill); background:#fff; box-shadow:var(--e1); max-width:100%; overflow-x:auto; scrollbar-width:none}
.sx-d{font:700 15px/1 var(--f-body); color:var(--navy); background:transparent; border:0; border-radius:var(--r-pill); padding:12px 15px; cursor:pointer; white-space:nowrap}
.sx-d:hover{background:var(--tint)} .sx-d[aria-pressed=true]{background:var(--navy); color:#fff}
.sx-ks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:14px 0 0}
.sx-v{margin:30px auto 0; display:table; font:800 14px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; background:var(--navy); color:#fff; padding:7px 12px; border-radius:var(--r-pill)}
.sx-k{background:#fff; border-radius:var(--r-card); padding:24px 20px 22px; box-shadow:var(--e1); display:flex; flex-direction:column; align-items:center; text-align:center}
.sx-g{position:relative; display:grid; place-items:center}
.sx-r .sx-g svg{width:150px; height:150px} .sx-j .sx-g svg{width:180px; height:auto}
.sx-tk{fill:none; stroke:var(--tint); stroke-width:13} .sx-vl{fill:none; stroke:var(--blue); stroke-width:13; stroke-dasharray:0 100; transition:stroke-dasharray .7s var(--ease)}
.sx-j .sx-tk,.sx-j .sx-vl{stroke-width:15; stroke-linecap:round} .sx-k:nth-child(even) .sx-vl{stroke:var(--yellow)}
.sx-n{margin:0; font:800 40px/1 var(--f-title); color:var(--navy); font-variant-numeric:tabular-nums}
.sx-r .sx-n{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.sx-j .sx-n{position:absolute; left:0; right:0; bottom:0}
.sx-n small{font-size:.5em; margin-left:2px}
/* 0.29.2 : chiffre masqué sous le seuil : la tuile dit pourquoi, jauge vide sans point */
.sx-few{display:none; margin:0; font:700 15px/1.3 var(--f-body); color:var(--navy)}
.sx-j .sx-few{position:absolute; left:0; right:0; bottom:2px; padding:0 34px}
.sx-k[data-few] .sx-few{display:block} .sx-k[data-few] .sx-n{visibility:hidden} .sx-k[data-few] .sx-vl{visibility:hidden}
.sx-l{margin:14px 0 0; font:700 17px/1.35 var(--f-body); color:var(--navy)}
.sx-s{margin:auto 0 0; padding-top:10px; font:600 15px/1.3 var(--f-body); color:var(--navy)}
.sx-m{margin:20px 0 0; font:600 16px/1.5 var(--f-body); color:var(--navy)}
.sx-bt{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.sx-meth{max-width:820px; margin:18px auto 0; text-align:left; background:#fff; border-radius:20px; padding:20px 24px; box-shadow:var(--e1); font:500 16px/1.55 var(--f-body); color:var(--navy)}
.sx-meth ul{margin:0 0 10px; padding-left:20px} .sx-meth li{margin:0 0 8px} .sx-meth a{font-weight:800; color:var(--navy); text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px}
@media (max-width:960px){.sx-ks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sx-ks{grid-template-columns:1fr}}
#infos .vg{--n:2!important; height:100%; grid-auto-rows:1fr; gap:18px}
#infos .fx-r.n2{align-items:stretch} #infos .fx-r.n2 > .fx-c{display:flex; flex-direction:column} #infos .fx-r.n2 > .fx-c > .fx-m{flex:1}
#infos .fx-acc{height:100%; display:flex; flex-direction:column; justify-content:space-between} #infos .fx-acc .qa{margin:0}
#infos .vg-c{padding:0 20px 22px} #infos .vg-c p{font-size:16px}
@media (max-width:1060px){#infos .vg{--n:1!important}}
@media (max-width:860px){#infos .vg{--n:2!important}}
@media (max-width:520px){#infos .vg{--n:1!important}}
@media (prefers-reduced-motion:reduce){.fo-k{animation:none}}
/* onglets de la pédagogie sur fond marine */
.sec.dark .ix-t{color:#fff} .sec.dark .ix-t:hover{background:rgba(255,255,255,.1)}
.sec.dark .ix-t[aria-selected=true]{background:#fff; color:var(--navy)}
.sec.dark .ix-tp :is(h3,p){color:var(--navy)}
.sec.dark .ix-t[aria-selected=false] .ix-ti{color:var(--navy)}
.sec.dark .ix-tp .btn-o{color:var(--navy)!important; border-color:transparent!important; box-shadow:inset 0 0 0 2px var(--navy)!important; margin-top:8px} .sec.dark .ix-tp .btn-o::before{background:var(--navy)!important} .sec.dark .ix-tp .btn-o:hover{color:#fff!important}

.zt{margin-top:0; text-align:left}
.zt-bar{display:flex; flex-direction:column; align-items:center; gap:14px}
.zt-pts{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.zt-pt{position:relative; font:800 clamp(18px,1.6vw,22px)/1 var(--f-title); color:var(--navy); background:#fff; border:0; border-radius:var(--r-pill); padding:16px 26px; box-shadow:var(--e1); cursor:pointer; transition:background .2s, color .2s, transform .2s var(--ease)}
.zt-pt:hover{transform:translateY(-1px); box-shadow:var(--e2)} .zt-pt[aria-selected=true]{background:var(--navy); color:#fff}
.zt-pt[aria-disabled=true]{cursor:default; opacity:.55; box-shadow:none; background:var(--tint)} .zt-pt[aria-disabled=true]:hover{transform:none}
.zt-pt small{display:inline-block; margin-left:8px; font:800 13px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; background:var(--yellow); color:var(--navy); padding:4px 7px; border-radius:var(--r-pill); vertical-align:2px}
.zt-f{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:100%}
.zt-seg{display:inline-flex; gap:4px; padding:5px; border-radius:var(--r-pill); background:var(--tint); max-width:100%; overflow-x:auto; scrollbar-width:none}
.zt-b{font:700 15px/1 var(--f-body); color:var(--navy); background:transparent; border:0; border-radius:var(--r-pill); padding:11px 14px; cursor:pointer; white-space:nowrap}
.zt-b:hover{background:#fff} .zt-b[aria-pressed=true]{background:var(--navy); color:#fff}
.zt-b:focus-visible,.zt-pt:focus-visible,.zt-fx:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.zt-meta{margin:20px 0 0; text-align:center; font:600 16px/1.5 var(--f-body); color:var(--navy)}
.zt-kn.zt-kf{font:700 19px/1.25 var(--f-body); color:#fff; align-self:end}
.zt-ks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px}
.zt-k{background:var(--navy); color:#fff; border-radius:var(--r-card); padding:22px 20px 20px; display:grid; grid-template-rows:auto 1fr; gap:8px}
.zt-kn{margin:0; font:800 clamp(40px,4vw,56px)/1 var(--f-title); color:#fff; font-variant-numeric:tabular-nums}
.zt-kn small{font-size:.45em; margin-left:3px; color:var(--yellow)}
.zt-kl{margin:0; font:700 16px/1.35 var(--f-body); color:#fff}
.zt-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
.zt-g{background:#fff; border-radius:var(--r-card); padding:22px 24px 18px; box-shadow:var(--e1); min-width:0; animation:zt-in .35s var(--ease) both}
.zt-g.w{grid-column:1/-1}
.zt-gh{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.zt-gh h3{margin:0; font:800 clamp(20px,1.8vw,24px)/1.2 var(--f-title); color:var(--navy); flex:1 1 260px}
.zt-fxs{display:inline-flex; gap:3px; padding:4px; border-radius:var(--r-pill); background:var(--tint)}
.zt-fx{display:inline-flex; align-items:center; gap:6px; font:700 15px/1 var(--f-body); color:var(--navy); background:transparent; border:0; border-radius:var(--r-pill); padding:9px 12px; cursor:pointer; white-space:nowrap}
.zt-fx svg{width:18px; height:18px} .zt-fx:hover{background:#fff} .zt-fx[aria-pressed=true]{background:var(--navy); color:#fff}
.zt-note{margin:14px 0 0; font:500 15px/1.45 var(--f-body); color:var(--navy)}
.zt-leg{display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0; padding:0; list-style:none; font:600 15px/1.3 var(--f-body); color:var(--navy)}
.zt-leg li{display:flex; align-items:center; gap:7px} .zt-leg i{width:14px; height:14px; border-radius:4px; flex:none}
/* barres empilées */
.zt-r{display:grid; grid-template-columns:minmax(150px,34%) 1fr; gap:6px 16px; align-items:center; margin:0 0 10px}
.zt-rl{font:600 15px/1.3 var(--f-body); color:var(--navy)}
.zt-rc{grid-template-columns:minmax(96px,22%) 1fr; margin-bottom:14px} .zt-rc .zt-rl{font-weight:800}
.zt-gap{margin:18px 0 0; padding:14px 16px; border-radius:14px; background:var(--tint); font:600 16px/1.45 var(--f-body); color:var(--navy)} .zt-gap b{font-weight:800}
#haut .st{max-width:440px; margin-inline:auto}
.zt-tr{position:relative; height:30px}
.zt-st{position:absolute; top:0; bottom:0; display:flex; border-radius:8px; overflow:hidden}
.zt-sg{height:100%; display:flex; align-items:center; justify-content:center; font:800 14px/1 var(--f-body); color:var(--navy); min-width:2px; transition:width .5s var(--ease); cursor:default}
.zt-sg.dk{color:#fff}
.zt-ax{position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--navy); border-radius:2px}
.zt-v{position:absolute; top:50%; transform:translateY(-50%); font:800 15px/1 var(--f-body); color:var(--navy); white-space:nowrap}
.zt-hd{display:grid; grid-template-columns:minmax(150px,34%) 1fr; gap:16px; margin-bottom:8px; font:800 14px/1.2 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--navy)}
.zt-hd span{position:relative; height:16px} .zt-hd b{position:absolute; top:0; white-space:nowrap; font-weight:800}
/* barres simples */
.zt-hb{display:grid; grid-template-columns:minmax(150px,40%) 1fr 48px; gap:6px 12px; align-items:center; margin:0 0 9px}
.zt-hbt{height:22px; background:var(--tint); border-radius:6px; overflow:hidden} .zt-hbt i{display:block; height:100%; background:var(--blue); border-radius:6px; min-width:3px; transition:width .5s var(--ease)}
.zt-hbv{font:800 15px/1 var(--f-body); color:var(--navy); text-align:right; font-variant-numeric:tabular-nums}
/* anneau, haltères, courbe */
.zt-ring{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.zt-ring svg{width:170px; height:170px; flex:none}
.zt-ring .c1{font:800 38px/1 var(--f-title); fill:var(--navy)} .zt-ring .c2{font:700 15px/1 var(--f-body); fill:var(--navy)}
.zt-db{margin:6px 0 30px} .zt-dbl{font:700 16px/1.3 var(--f-body); color:var(--navy); margin:0 0 30px}
.zt-dbt{position:relative; height:34px; margin:0 14px}
.zt-dbt::before{content:""; position:absolute; left:0; right:0; top:15px; height:4px; border-radius:2px; background:var(--tint)}
.zt-dbs{position:absolute; top:15px; height:4px; background:var(--navy); border-radius:2px}
.zt-dot{position:absolute; top:6px; width:22px; height:22px; margin-left:-11px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(19,36,56,.25); transition:left .5s var(--ease)}
.zt-dot b{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font:800 16px/1 var(--f-body); color:var(--navy); white-space:nowrap}
.zt-dbx{display:flex; justify-content:space-between; margin:4px 14px 0; font:600 14px/1 var(--f-body); color:var(--navy)}
.zt-ln svg{width:100%; height:auto; display:block; overflow:visible}
.zt-ln text{font:600 14px/1 var(--f-body); fill:var(--navy)} .zt-ln .gl{stroke:var(--tint); stroke-width:1}
.zt-ln .pv{font:800 14px/1 var(--f-body); fill:#fff}
.zt-tip{position:fixed; z-index:80; pointer-events:none; background:var(--navy); color:#fff; font:600 15px/1.4 var(--f-body); padding:8px 12px; border-radius:10px; max-width:280px; box-shadow:var(--e2)}
@keyframes zt-in{from{opacity:0; transform:translateY(8px)}}
/* animations : à l'arrivée de la section puis à chaque changement de filtre */
.zt:not(.zt-calm) .zt-g:not(.zt-on) :is(.zt-st,.zt-hbt i,.zt-ln path,.zt-ln circle,.zt-ln rect,.zt-ln .pv,.zt-dot,.zt-dbs,.zt-ring circle+circle,.zt-gap){visibility:hidden}
.zt-on .zt-st{animation:zt-clip .8s var(--ease) both} .zt-on .zt-hbt i{animation:zt-clip .8s var(--ease) both}
.zt-on .zt-r:nth-child(2) .zt-st,.zt-on .zt-hb:nth-child(2) i{animation-delay:.06s} .zt-on .zt-r:nth-child(3) .zt-st,.zt-on .zt-hb:nth-child(3) i{animation-delay:.12s} .zt-on .zt-r:nth-child(4) .zt-st,.zt-on .zt-hb:nth-child(4) i{animation-delay:.18s} .zt-on .zt-r:nth-child(n+5) .zt-st,.zt-on .zt-hb:nth-child(n+5) i{animation-delay:.24s}
.zt-on .zt-ring circle+circle{animation:zt-ring 1s var(--ease) both}
.zt-on .zt-ln path:nth-of-type(2){stroke-dasharray:1; animation:zt-draw 1.2s var(--ease) both} .zt-on .zt-ln path:nth-of-type(1){animation:zt-fade 1.2s ease both}
.zt-on .zt-ln circle,.zt-on .zt-ln rect,.zt-on .zt-ln .pv{animation:zt-fade .5s ease .9s both}
.zt-on .zt-dot{animation:zt-dot .9s var(--ease) both} .zt-on .zt-dbs{animation:zt-clip .9s var(--ease) both}
.zt-on .zt-gap{animation:zt-fade .5s ease .5s both}
@keyframes zt-clip{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes zt-ring{from{stroke-dasharray:0 999}}
@keyframes zt-draw{from{stroke-dashoffset:1}}
@keyframes zt-dot{from{left:0; opacity:0}}
@keyframes zt-fade{from{opacity:0}}
.zt-calm *{animation:none!important}
@media (prefers-reduced-motion:reduce){.zt-g{animation:none} .zt-sg,.zt-hbt i,.zt-dot{transition:none}}
@media (max-width:960px){.zt-ks{grid-template-columns:repeat(2,minmax(0,1fr))} .zt-grid{grid-template-columns:1fr}}
@media (max-width:600px){.zt-r,.zt-hd{grid-template-columns:1fr; gap:6px} .zt-hd{display:none} .zt-hb{grid-template-columns:1fr 48px} .zt-hb .zt-rl{grid-column:1/-1} .zt-g{padding:18px 16px 16px} .zt-pts{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; max-width:100%; padding:4px 2px 8px} .zt-pt{padding:13px 16px; font-size:17px; flex:none} .zt-pt small{display:none}}
@media (max-width:420px){.zt-k{padding:16px 14px} .zt-kn{font-size:34px} .zt-kl{font-size:15px}}

.fo-kd{display:none} .fo[data-dall] .fo-kd{display:inline-block}
.fo-k.fo-nl::after{display:none} .fo-k.fo-nl{padding-right:16px; cursor:default} .fo-k.fo-nl:hover{transform:none; box-shadow:0 1px 2px rgba(19,36,56,.06)}
.fo-k[hidden]{display:none}
.zt-ed{padding:18px; border-radius:18px; background:#fff}
/* 0.26 : onglets à icône (itabs) sur fond marine : libellés blancs, onglet choisi blanc, pictos inactifs marine, bouton à contour lisible sur la carte blanche */
.sec.dark .ix-t{color:#fff} .sec.dark .ix-t:hover{background:rgba(255,255,255,.1)}
.sec.dark .ix-t[aria-selected=true]{background:#fff; color:var(--navy)}
.sec.dark .ix-t[aria-selected=false] .ix-ti{color:var(--navy)}
.sec.dark .ix-tp :is(h3,p,li){color:var(--navy)}
.sec.dark .ix-tp .btn-o{color:var(--navy)!important; border-color:transparent!important; box-shadow:inset 0 0 0 2px var(--navy)!important; margin-top:8px}
.sec.dark .ix-tp .btn-o::before{background:var(--navy)!important} .sec.dark .ix-tp .btn-o:hover{color:#fff!important}