/* Polices de spts.ch (SPTS Fiduciaire), copiées telles que next/font les sert (build du 15.10.2026,
   C:/spts-fiduciaire/.next/static). Mêmes fichiers, mêmes plages, mêmes métriques de secours.
   Aucune requête vers Google : le navigateur ne contacte que le site. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/942b71451b22.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/a7f3e73668cc.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/009e52d835e4.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/b6a22966401b.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/07df696d36de.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/8bc9dee39dea.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/m/dd8a4575be98.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter Fallback;src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/7b8f3c05ad94.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/8aad6b1a7b6b.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/7e845bedc71b.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/ab5554b73a31.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/d802c9d18988.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/m/011e0ca2bd14.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/70cc942deab2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/0d80484ffba8.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/94be9743efdc.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/653070ebe149.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/c9299a71605a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/m/2a24bad466f0.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4 Fallback";src:local(Times New Roman);ascent-override:87.87%;descent-override:28.41%;line-gap-override:0.0%;size-adjust:117.91%}

/* ===== Prototype YC Feedback ===== */
/* ================================================================
   Prototype YC Feedback · direction « Le fil de mission »
   Feuille de la direction, cantonnee aux pages pilotes (.yc) et a de
   legers reglages de l'en-tete et du pied de page communs.
   Parente avec spts.ch : palette du groupe, Source Serif 4 et Inter.
   Signature propre au Portage : le fil cyan a points d'attache.
   ================================================================ */
.yc{
  --marine:#10416C; --marine-f:#0C3355; --encre:#0F2C43; --corps:#2A4560; --second:#4A6480;
  --cyan:#45BDDF; --cyan-c:#81CEE2; --cyan-l:#266E8A;
  --doux:#F1F6FA; --doux-2:#E4EDF5; --bord:#D9E4EE; --bord-f:#B9CDDF; --blanc:#fff;
  --sur-sombre:#D5E3EF;
  --inter:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gout:max(20px,4.6vw);
  --larg:1320px;
  color:var(--corps); font-family:var(--inter); font-size:16px; line-height:1.55;
}
.yc:not(.v2) *{box-sizing:border-box}

/* Parcours en quatre temps, sur le fil */
.yc:not(.v2) .parcours-tete{display:flex;justify-content:space-between;align-items:end;gap:16px 40px;flex-wrap:wrap}

/* Garanties, en registre */
.yc:not(.v2) .registre{margin-top:clamp(36px,4.4vw,56px);border-top:2px solid var(--encre)}

/* ---------------- Tablette et mobile ---------------- */




@keyframes yc-fondu{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------- En-tete et pied de page communs ---------------- */
header .hcta,#stick .btn{border-radius:4px}
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#45BDDF}
footer .fh{letter-spacing:.04em}

#pay-fr-simulation{padding-top:0}

/* ================================================================
   Passe 2 (04.10.2026) : promesse en titre, rythme varie, preuves en
   bande, regle du franc a echelle commune, notes de revue hors parcours.
   Ajoutee apres yc.css, qu'elle precise.
   ================================================================ */
/* Premier ecran : la promesse porte le titre, la question oriente */
.yc:not(.v2) .ouv{padding-top:clamp(36px,5vw,80px)}
/* Pourquoi : quatre arguments en ligne, sans filets */
.yc:not(.v2) .pourquoi-t{max-width:17em}
/* Groupe : bande courte, sans liste a filets */
.yc:not(.v2) .groupe-bande{background:#fff;border-top:1px solid var(--bord);padding-block:clamp(44px,5vw,72px)}
/* Roles : SPTS en panneau marine, face au consultant */
.yc:not(.v2) .roles-tete{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:16px 64px;align-items:end}
/* Chaque franc : une echelle, une barre, un decompte */
.yc:not(.v2) .franc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px)}
/* Preuves : bande marine, une preuve principale et deux secondaires */
.yc:not(.v2) .preuves{background:var(--marine);color:#fff;padding-block:clamp(64px,7.4vw,112px)}
/* Appel final de la page Portage : clair, apres la bande marine des preuves */
.yc:not(.v2) .appel{padding-block:clamp(52px,6vw,88px)}





/* ---------------- Panneau de revue (local seulement) ---------------- */
#revue-yc{display:none}
html.mode-interne #revue-yc{display:block;position:fixed;right:16px;bottom:16px;z-index:9000;font:14px/1.5 Inter,Arial,sans-serif;color:#0F2C43}
#revue-yc>button{background:#8A5A00;color:#fff;border:0;border-radius:4px;padding:10px 14px;font:600 13.5px/1 Inter,Arial;cursor:pointer;box-shadow:0 6px 20px -8px rgba(0,0,0,.4)}
#revue-yc .rv-p{position:absolute;right:0;bottom:48px;width:min(440px,calc(100vw - 32px));max-height:min(72vh,660px);overflow:auto;background:#fff;border:1px solid #D9A74A;border-radius:6px;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);padding:16px 18px}
#revue-yc .rv-p[hidden]{display:none}
#revue-yc h2{font:600 15px/1.3 Inter,Arial;margin:0 0 4px}
#revue-yc .rv-note{font-size:12.5px;color:#4A6480;margin:0 0 6px}
#revue-yc .rv-i{border-top:1px solid #EADBB9;padding:12px 0}
#revue-yc .rv-i b{display:block;font-size:13.5px}
#revue-yc .rv-i p{margin:4px 0;font-size:13px;color:#2A4560}
#revue-yc .rv-i a{color:#10416C}
#revue-yc .rv-i button{background:none;border:1px solid #10416C;color:#10416C;border-radius:3px;padding:5px 9px;font:600 12px/1 Inter,Arial;cursor:pointer;margin-top:4px}
.rv-cible{outline:3px dashed #D9A74A !important;outline-offset:6px}

@media (max-width:900px){html.mode-interne #revue-yc{bottom:92px}}

/* ================================================================
   Declinaison du site (04.10.2026) : composants des pages interieures,
   decompte mobile, simulateur et pages legales restyles.
   Ajoutee apres yc.css et yc-passe2.css.
   ================================================================ */

/* ---------- Decompte salarial, mobile : une ligne = un poste ---------- */


.yc:not(.v2) .faq summary::-webkit-details-marker{display:none}
.yc:not(.v2) .fil6 summary::-webkit-details-marker{display:none}
/* Exemples de calcul : tableau ouvert, plus de carrousel */
.yc:not(.v2) .exemples{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:20px;font-size:15.5px}

/* ---------- Trois cas, trois colonnes avec etiquette ---------- */
.yc:not(.v2) .cas3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(28px,3.4vw,44px)}

/* ---------- Paiement : un chiffre, deux precisions ---------- */
.yc:not(.v2) .paiement-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.yc:not(.v2) .quand li:nth-child(3n+2),.yc:not(.v2) .quand li:nth-child(3n){padding-left:28px;border-left:1px solid var(--bord)}

/* ---------- Groupe et appel, reutilises ---------- */
.yc:not(.v2) .appel-g .contacts a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(69,189,223,.6)}

/* ---------- Tablette et mobile des composants ---------- */




/* ================================================================
   Simulateur, restyle sans toucher au balisage dont depend le script
   ================================================================ */
main.page.sim{font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:#2A4560}
main.page.sim .simhead h1{font:500 clamp(36px,4.6vw,64px)/1.05 "Source Serif 4",Georgia,serif;letter-spacing:-.02em;color:#0F2C43}
main.page.sim .prog{display:flex;align-items:center;gap:0;margin:28px 0 30px}
main.page.sim .prog .pstep{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:#4A6480;background:none;border:0;padding:0;white-space:nowrap}
main.page.sim .prog .pstep + .pstep::before{content:"";flex:none;width:clamp(24px,6vw,72px);height:2px;background:#D9E4EE;margin:0 14px}
main.page.sim .prog .pstep b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #B9CDDF;background:#fff;color:#4A6480;font:600 12.5px/1 Inter,Arial}
main.page.sim .prog .pstep.on{color:#0F2C43}
main.page.sim .prog .pstep.on b{background:#10416C;border-color:#10416C;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #45BDDF}
main.page.sim .prog .pstep.past b{background:#45BDDF;border-color:#45BDDF;color:#0F2C43}
main.page.sim .prog .pstep.past + .pstep::before{background:#45BDDF}
main.page.sim .f .fl{font-weight:600;font-size:15px;color:#0F2C43}
main.page.sim .f .req{font-style:normal;font-weight:500;font-size:13px;color:#4A6480;background:none;padding:0;margin-left:8px}
main.page.sim .f input,main.page.sim .f select,main.page.sim .f textarea{font:500 16.5px/1.3 Inter,Arial,sans-serif;color:#0F2C43;border:1.5px solid #B9CDDF;border-radius:4px;background-color:#fff;padding:14px 16px}
main.page.sim .f input:focus,main.page.sim .f select:focus,main.page.sim .f textarea:focus{outline:0;border-color:#10416C;box-shadow:0 0 0 4px rgba(69,189,223,.35)}
main.page.sim .f .fh{font-size:13px;color:#4A6480;text-transform:none;letter-spacing:0}
main.page.sim .ferr{color:#B42318;border-left:3px solid #B42318;padding-left:12px;font-weight:500;background:none}
main.page.sim .btn{border-radius:4px}
main.page.sim .btn-p{background:#10416C}
main.page.sim .simaside{background:#F1F6FA;border:0;border-left:3px solid #45BDDF;border-radius:0}
main.page.sim .simaside h2{font:500 26px/1.15 "Source Serif 4",Georgia,serif;color:#0F2C43}
main.page.sim .step.done h2{font:500 clamp(30px,3.4vw,44px)/1.1 "Source Serif 4",Georgia,serif;color:#0F2C43}

/* ================================================================
   Pages legales, restylees : sommaire colle a gauche, articles lisibles
   ================================================================ */
main.page[id^="cg"] h1,main.page[id^="cu"] h1,main.page[id^="pd"] h1{font:500 clamp(36px,4.4vw,60px)/1.06 "Source Serif 4",Georgia,serif;letter-spacing:-.02em;color:#0F2C43}
main.page[id^="cg"] .lead,main.page[id^="cu"] .lead,main.page[id^="pd"] .lead{font-size:18px;color:#4A6480}
@media (min-width:1024px){
  main.page[id^="cg"] section.tight>.wrap,main.page[id^="cu"] section.tight>.wrap,main.page[id^="pd"] section.tight>.wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start}
  main.page .legal-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:2px solid #45BDDF;padding-left:18px;max-height:calc(100vh - 120px);overflow:auto}
}
main.page .legal-toc a{font-size:14px;line-height:1.4;padding:5px 0;color:#2A4560}
main.page .legal-toc .onpage-t{font-size:13px;font-weight:600;color:#266E8A;margin-bottom:6px}
main.page .legal-art h2{font:500 clamp(22px,2vw,28px)/1.2 "Source Serif 4",Georgia,serif;color:#0F2C43}
main.page .legal-art{max-width:46em}
main.page .legal .ph,main.page[id^="cg"] .ph,main.page[id^="cu"] .ph,main.page[id^="pd"] .ph{background:#FFF3DA;border-bottom:1px dashed #D9A74A;padding:0 3px;color:#5C3D00}




/* ---------- Ressources : contenus reels en preparation ---------- */
.yc:not(.v2) .guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--bord)}




/* ================================================================
   Pages legales du 13.10.2026 : page Cookies, tableaux, resume, version
   ================================================================ */
main.page[id^="ckp"] h1{font:500 clamp(36px,4.4vw,60px)/1.06 "Source Serif 4",Georgia,serif;letter-spacing:-.02em;color:#0F2C43}
main.page[id^="ckp"] .lead{font-size:18px;color:#4A6480}
@media (min-width:1024px){main.page[id^="ckp"] section.tight>.wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start}}
main.page[id^="ckp"] .ph{background:#FFF3DA;border-bottom:1px dashed #D9A74A;padding:0 3px;color:#5C3D00}
main.page .legal-art h3{font:600 17px/1.3 Inter,system-ui,sans-serif;color:#0F2C43;margin:22px 0 6px}
main.page .legal-art ol,main.page .legal-art ul{padding-left:22px}
main.page .legal-art li+li{margin-top:6px}
main.page .legal-tab{max-width:100%;overflow-x:auto;margin:16px 0 8px;border:1px solid #D6E3EC;border-radius:8px}
main.page .legal-tab table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:1.5}
main.page .legal-tab th{background:#F1F7FA;color:#0F2C43;font-weight:600;text-align:left;vertical-align:bottom}
main.page .legal-tab th,main.page .legal-tab td{padding:10px 12px;border-bottom:1px solid #E3ECF2;vertical-align:top;text-align:left}
main.page .legal-tab tr:last-child td{border-bottom:0}
main.page .legal-tab code,main.page .legal-art code{font:500 13px/1.4 ui-monospace,Consolas,monospace;background:#F1F5F8;padding:1px 4px;border-radius:4px;word-break:break-word}
main.page .legal-essentiel{background:#F1F7FA;border-left:3px solid #45BDDF;padding:18px 22px;border-radius:0 8px 8px 0}
main.page .legal-version{margin-top:36px;padding-top:16px;border-top:1px solid #D6E3EC;font-size:14px;color:#4A6480;max-width:46em}
main.page.legal-page p{text-align:left!important;hyphens:manual!important}

main.page .yc p{text-align:left !important;-webkit-hyphens:manual !important;hyphens:manual !important}

.yc .grille-logos .m-seul{display:none}
@media (max-width:900px){.yc .logos-plus .grille-logos .m-seul{display:grid}}

/* ===== Passe 3, le fil vivant ===== */
:root{--ph-consultant:image-set(url("/assets/m/3338528d3580.avif") type("image/avif"), url("/assets/m/3338528d3580.webp") type("image/webp"), url("/assets/m/3338528d3580.jpg") type("image/jpeg"));--ph-entreprise:image-set(url("/assets/m/b92257fd3426.avif") type("image/avif"), url("/assets/m/b92257fd3426.webp") type("image/webp"), url("/assets/m/b92257fd3426.jpg") type("image/jpeg"));--ph-agence:image-set(url("/assets/m/930b0a90b05d.avif") type("image/avif"), url("/assets/m/930b0a90b05d.webp") type("image/webp"), url("/assets/m/930b0a90b05d.jpg") type("image/jpeg"));--ph-portage:image-set(url("/assets/m/84c589a9959d.avif") type("image/avif"), url("/assets/m/84c589a9959d.webp") type("image/webp"), url("/assets/m/84c589a9959d.jpg") type("image/jpeg"));--ph-eor:image-set(url("/assets/m/18820a207099.avif") type("image/avif"), url("/assets/m/18820a207099.webp") type("image/webp"), url("/assets/m/18820a207099.jpg") type("image/jpeg"));--ph-delais:image-set(url("/assets/m/b502b03952a7.avif") type("image/avif"), url("/assets/m/b502b03952a7.webp") type("image/webp"), url("/assets/m/b502b03952a7.jpg") type("image/jpeg"));--ph-ong:image-set(url("/assets/m/c3c3b5cf81b4.avif") type("image/avif"), url("/assets/m/c3c3b5cf81b4.webp") type("image/webp"), url("/assets/m/c3c3b5cf81b4.jpg") type("image/jpeg"));--ph-gs:image-set(url("/assets/m/3bb27b1bba27.avif") type("image/avif"), url("/assets/m/3bb27b1bba27.webp") type("image/webp"), url("/assets/m/3bb27b1bba27.jpg") type("image/jpeg"));--ph-agences:image-set(url("/assets/m/4a0ede12ffe7.avif") type("image/avif"), url("/assets/m/4a0ede12ffe7.webp") type("image/webp"), url("/assets/m/4a0ede12ffe7.jpg") type("image/jpeg"));--ph-accueil:image-set(url("/assets/m/9aaf5087099a.avif") type("image/avif"), url("/assets/m/9aaf5087099a.webp") type("image/webp"), url("/assets/m/9aaf5087099a.jpg") type("image/jpeg"));--ph-situcons:image-set(url("/assets/m/556e0d50dd84.avif") type("image/avif"), url("/assets/m/556e0d50dd84.webp") type("image/webp"), url("/assets/m/556e0d50dd84.jpg") type("image/jpeg"));--ph-situag:image-set(url("/assets/m/3126c1290792.avif") type("image/avif"), url("/assets/m/3126c1290792.webp") type("image/webp"), url("/assets/m/3126c1290792.jpg") type("image/jpeg"));--ph-hiw:image-set(url("/assets/m/a38a7410d23d.avif") type("image/avif"), url("/assets/m/a38a7410d23d.webp") type("image/webp"), url("/assets/m/a38a7410d23d.jpg") type("image/jpeg"));--ph-apropos:image-set(url("/assets/m/ade0852ae69e.avif") type("image/avif"), url("/assets/m/ade0852ae69e.webp") type("image/webp"), url("/assets/m/ade0852ae69e.jpg") type("image/jpeg"));--couv-b0:url("/assets/m/c5b799616acc.webp");--couv-b1:url("/assets/m/73669232a13c.webp");--couv-r01:url("/assets/m/49c4b38957f9.webp");--couv-r02:url("/assets/m/4641ff7b5caa.webp");--couv-r03:url("/assets/m/f0b9bdf23634.webp");--couv-r04:url("/assets/m/3576cf11b8bf.webp");--couv-r05:url("/assets/m/4fad869e5fda.webp");--couv-r06:url("/assets/m/71f5222ca046.webp");--couv-r07:url("/assets/m/fd5a734b9e4b.webp");--couv-r08:url("/assets/m/a84ff443588f.webp");--couv-r09:url("/assets/m/6762ec5d9c78.webp");--couv-r10:url("/assets/m/ed43c01d8c88.webp");--couv-r11:url("/assets/m/f32b56535b33.webp");--couv-t1:url("/assets/m/789808a4d8ed.webp");--couv-t2:url("/assets/m/2bf5e3561e5c.webp");}
/* ================================================================
   Prototype YC Feedback · « Le fil de mission », passe 4 (05.10.2026)
   Feuille commune des pages .yc.v2. Socle inchange : marine, cyan,
   blanc, bleu clair, Source Serif 4 et Inter.

   Regles de la passe 4
   - La chaleur vient des scenes humaines. Les arrondis, ombres et
     pilules la soutiennent, ils ne font pas le style.
   - Trois rayons : --r-l (photos, grands panneaux), --r (panneaux),
     --r-s (petits elements). La pilule est reservee aux actions et aux
     categories.
   - Une ombre seulement pour ce qui a besoin de profondeur : photos
     principales, portes d'entree, acteur selectionne, carte qui flotte
     sur une photo. Le reste se separe par l'espace ou un filet.
   - Aucun signal de clic sur ce qui ne s'ouvre pas : pas de survol sur
     une tuile informative.
   - Espaces de section resserres (retour du 05.10).

   Grammaire du fil
     .v-ln   ligne de liaison (contrat, relation)      cyan plein
     .v-pt   point d'attache                           marine, anneau cyan
     .on     etape ou acteur actif                     cyan, anneau elargi
     .v-tr   direction d'un echange (flux financier)   marine, pointe
     .v-prog progression d'un parcours                 piste claire + cyan
   ================================================================ */
.yc.v2{
  --r-l:24px; --r:16px; --r-s:10px;
  --ombre:0 1px 2px rgba(16,65,108,.06),0 18px 40px -20px rgba(16,65,108,.30);
  --ombre-f:0 2px 4px rgba(16,65,108,.08),0 28px 56px -24px rgba(16,65,108,.40);
  --ciel:#E8F5FB; --ciel-2:#D3ECF6;
  --courbe:cubic-bezier(.22,.8,.24,1);
  --hdr:64px;
  --sec:clamp(48px,6vw,88px); --sec-d:clamp(36px,4.4vw,64px);
  font-size:17px;
}
.yc.v2 *{box-sizing:border-box}
.yc.v2 h1,.yc.v2 h2,.yc.v2 h3,.yc.v2 h4,.yc.v2 p,.yc.v2 ul,.yc.v2 ol,.yc.v2 figure,.yc.v2 dl,.yc.v2 dd{margin:0;padding:0}
.yc.v2 ul,.yc.v2 ol{list-style:none}
.yc.v2 img{display:block;max-width:100%}
.yc.v2 a{color:inherit}
.yc.v2 .w{max-width:calc(var(--larg) + 2 * var(--gout));margin:0 auto;padding-inline:var(--gout)}
.yc.v2{color:var(--corps);font-family:var(--inter);line-height:1.55}
.yc.v2 section{position:relative;scroll-margin-top:calc(var(--hdr) + 64px)}
.yc.v2 .w{position:relative}
.yc.v2 .v-sec{padding-block:var(--sec)}
.yc.v2 .v-dense{padding-block:var(--sec-d)}
.yc.v2 .v-fond{background:var(--doux)}
.yc.v2 .v-blanc{background:#fff}
.yc.v2 .v-sombre{background:var(--marine-f);color:#fff;background-image:radial-gradient(50vw 30vw at 88% 40%,rgba(69,189,223,.22),transparent 70%)}
.yc.v2 .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typographie ---------- */
.yc.v2 .v-sur{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-sur::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(69,189,223,.18)}
.yc.v2 .v-sombre .v-sur,.yc.v2 .v-marine .v-sur{color:var(--cyan-c)}
.yc.v2 .v-h1{font:500 clamp(42px,5.6vw,84px)/1.02 var(--serif);letter-spacing:-.028em;color:var(--encre);margin:.28em 0 .28em;text-wrap:balance}
.yc.v2 .v-h1 em,.yc.v2 .v-h2 em{font-style:italic;font-weight:400;color:var(--marine)}
.yc.v2 .v-h2{font:500 clamp(30px,3.8vw,52px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--encre);margin:.34em 0 .28em;text-wrap:balance}
.yc.v2 .v-sombre .v-h2,.yc.v2 .v-sombre .v-h2 em{color:#fff}
.yc.v2 .v-h3{font:600 clamp(18px,1.5vw,21px)/1.28 var(--inter);letter-spacing:-.01em;color:var(--encre)}
.yc.v2 .v-h3s{font:500 clamp(22px,1.9vw,27px)/1.18 var(--serif);color:var(--encre)}
.yc.v2 .v-lead{font-size:clamp(17.5px,1.5vw,20px);line-height:1.55;color:var(--corps);max-width:34em;text-wrap:pretty}
.yc.v2 .v-lead b,.yc.v2 .v-lead strong{color:var(--encre);font-weight:600}
.yc.v2 .v-sombre .v-lead{color:var(--sur-sombre)}
.yc.v2 .v-txt{color:var(--second);line-height:1.6;text-wrap:pretty}
.yc.v2 .v-note{font-size:14px;line-height:1.55;color:var(--second)}
.yc.v2 .tab{font-variant-numeric:tabular-nums}

/* ---------- Boutons et liens ---------- */
.yc.v2 .v-btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--marine);color:#fff;font:600 16px/1 var(--inter);text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(16,65,108,.8);transition:transform .2s var(--courbe),box-shadow .2s,background .2s}
.yc.v2 .v-btn:hover{background:var(--marine-f);transform:translateY(-2px)}
.yc.v2 .v-btn:active{transform:translateY(0) scale(.98)}
.yc.v2 .v-btn.cyan{background:var(--cyan);color:var(--encre);box-shadow:0 10px 26px -14px rgba(69,189,223,.9)}
.yc.v2 .v-btn.cyan:hover{background:#6CCDE8}
.yc.v2 .v-btn.clair{background:#fff;color:var(--marine);box-shadow:none;border:1.5px solid var(--bord-f)}
.yc.v2 .v-btn.clair:hover{border-color:var(--marine)}
.yc.v2 .v-lien{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.3 var(--inter);color:var(--marine);text-decoration:none;cursor:pointer;background:none;border:0;padding:6px 0}
.yc.v2 .v-lien>span:first-child{background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 2px no-repeat;padding-bottom:2px;transition:background-size .3s var(--courbe)}
.yc.v2 .v-lien:hover>span:first-child{background-size:100% 3px}
.yc.v2 .v-sombre .v-lien,.yc.v2 .v-marine .v-lien{color:#fff}
.yc.v2 a:focus-visible,.yc.v2 button:focus-visible,.yc.v2 summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px}
.yc.v2 .v-btn:focus-visible{border-radius:999px}
.yc.v2 .v-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}

/* Fleches dessinees : le glyphe tombait sur une police de secours, plus basse. */
.yc.v2{--fl-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E");
  --fl-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14l8-8M7 6h7v7'/%3E%3C/svg%3E");
  --fl-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v13M5 11l5 5 5-5'/%3E%3C/svg%3E");
  --fl-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M5 9l5-5 5 5'/%3E%3C/svg%3E");
  --ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E")}
.yc.v2 .fl{margin:0;gap:0;color:inherit;display:inline-block;flex:none;width:18px;height:18px;font-size:0;background:currentColor;-webkit-mask:var(--fl-d) center/contain no-repeat;mask:var(--fl-d) center/contain no-repeat;vertical-align:middle;transition:transform .25s var(--courbe)}
.yc.v2 .fl.ne{-webkit-mask-image:var(--fl-ne);mask-image:var(--fl-ne);width:16px;height:16px}
.yc.v2 .fl.bas{-webkit-mask-image:var(--fl-b);mask-image:var(--fl-b)}
.yc.v2 .v-btn:hover .fl,.yc.v2 .v-btn:focus-visible .fl,.yc.v2 .v-lien:hover .fl:not(.ne):not(.bas){transform:translateX(4px)}

/* ---------- Grammaire du fil ---------- */
.yc.v2 .v-pt{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--marine);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cyan);flex:none;transition:background .25s,transform .3s var(--courbe)}
.yc.v2 .v-fond .v-pt{box-shadow:0 0 0 3px var(--doux),0 0 0 5px var(--cyan)}
.yc.v2 .v-pt::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--cyan);opacity:0;pointer-events:none}
.yc.v2 .v-pulse::after{animation:v-pulse 1.1s var(--courbe) 1}
@keyframes v-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* Traces et apparitions, une seule fois. Sans JS ou en mouvement reduit,
   tout est en place d'emblee. */
.yc.v2 [data-trace]{transform-origin:left center}
html.v-anim .yc.v2 [data-trace]{transition:transform 1s var(--courbe) .15s}
html.v-anim .yc.v2 [data-trace]:not(.vu){transform:scaleX(0)}
html.v-anim .yc.v2 [data-trace="y"]{transform-origin:center top}
html.v-anim .yc.v2 [data-trace="y"]:not(.vu){transform:scaleY(0)}
html.v-anim .yc.v2 svg [data-dessin]{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.3s var(--courbe)}
html.v-anim .yc.v2 .vu svg [data-dessin]{stroke-dashoffset:0}
html.v-anim .yc.v2 [data-v]{opacity:0;transform:translateY(16px);transition:opacity .55s var(--courbe),transform .65s var(--courbe)}
html.v-anim .yc.v2 [data-v].vu{opacity:1;transform:none}
html.v-anim .yc.v2 [data-v="2"]{transition-delay:.07s}
html.v-anim .yc.v2 [data-v="3"]{transition-delay:.14s}
html.v-anim .yc.v2 [data-v="4"]{transition-delay:.21s}

/* Photographie : chaque fichier encode une seule fois (variables --ph-*). */
.yc.v2 .v-ph{position:relative;background:var(--doux-2) var(--ph) var(--pos,50% 40%)/cover no-repeat;border-radius:var(--r-l);overflow:hidden}

/* ---------- Marqueur interne : texte propose, a valider ---------- */
.yc.v2 .aconf{display:none}
html.mode-interne .yc.v2 .aconf{display:inline-block;font:600 10.5px/1 var(--inter);letter-spacing:.03em;text-transform:none;color:#8A5A00;background:#FFF3DA;border:1px dashed #D9A74A;padding:3px 6px;border-radius:4px;vertical-align:middle;margin-left:6px}

/* ================================================================
   EN-TETE DE PAGE INTERIEURE
   ================================================================ */
.yc.v2 .v-pi{padding:clamp(16px,2.4vw,32px) 0 var(--sec-d);background:radial-gradient(55vw 40vw at 100% 0%,rgba(69,189,223,.14),transparent 70%),#fff;overflow:hidden}
.yc.v2 .ariane{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;color:var(--second);margin-bottom:clamp(16px,2.4vw,32px)}
.yc.v2 .ariane button{background:none;border:0;padding:0;font:inherit;color:var(--marine);cursor:pointer;text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}
.yc.v2 .ariane [aria-current]{color:var(--second)}
.yc.v2 .v-pi-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.yc.v2 .v-pi-photo{position:relative;margin:0}
.yc.v2 .v-pi-photo .v-ph{aspect-ratio:4/3.4;box-shadow:var(--ombre-f)}
.yc.v2 .v-pi-photo .carte{position:absolute;left:clamp(-36px,-3vw,-14px);bottom:clamp(18px,3vw,36px);max-width:300px;background:#fff;border-radius:var(--r);box-shadow:var(--ombre-f);padding:18px 20px}
.yc.v2 .v-pi-photo .carte b{display:block;font:500 20px/1.2 var(--serif);color:var(--encre);margin-bottom:6px}
.yc.v2 .v-pi-photo .carte span{font-size:14.5px;line-height:1.45;color:var(--second)}
.yc.v2 .trois{display:flex;align-items:center;margin-bottom:14px}
.yc.v2 .trois .v-pt{width:12px;height:12px}
.yc.v2 .trois .v-ln{flex:1;height:2px;background:var(--cyan)}
.yc.v2 .trois .v-pt.m{width:18px;height:18px}
.yc.v2 .v-preuve-l{margin-top:24px;font-size:14.5px;line-height:1.6;color:var(--second);max-width:36em}
.yc.v2 .v-preuve-l a{color:var(--marine);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--cyan)}
/* En-tete typographique, sans photo (A propos, Ressources). */
.yc.v2 .v-pi.typo .v-pi-g{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end}
.yc.v2 .v-cote{border-left:3px solid var(--cyan);padding:4px 0 4px 20px;font-size:15.5px;line-height:1.55;color:var(--second)}
.yc.v2 .v-cote b{display:block;color:var(--encre);font-weight:600;font-size:17px;margin-bottom:4px}
.yc.v2 .v-cote a{color:inherit}

/* Sommaire collant, compact. */
.yc.v2 .v-som{position:sticky;top:var(--hdr);z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--bord)}
.yc.v2 .v-som .w{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.yc.v2 .v-som .w::-webkit-scrollbar{display:none}
.yc.v2 .v-som .lbl{flex:none;font:600 12px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l);margin-right:10px}
.yc.v2 .v-som a{flex:none;font:500 14.5px/1 var(--inter);color:var(--encre);text-decoration:none;padding:9px 13px;border-radius:999px;transition:background .25s,color .25s}
.yc.v2 .v-som a:hover{background:var(--ciel)}
.yc.v2 .v-som a[aria-current="true"]{background:var(--marine);color:#fff}

/* ================================================================
   ACCUEIL
   ================================================================ */
.yc.v2 .v-hero{padding:clamp(24px,3.6vw,56px) 0 clamp(36px,4.4vw,64px);overflow:hidden;
  background:radial-gradient(60vw 40vw at 92% 8%,rgba(69,189,223,.14),transparent 70%),#fff}
.yc.v2 .v-hero-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4.6vw,72px);align-items:center}
.yc.v2 .v-chip{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--bord);font:500 14px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v-chip .ok{display:block;width:22px;height:22px;border-radius:50%;background:var(--ciel) ;position:relative}
.yc.v2 .v-chip .ok::after{content:"";position:absolute;inset:4px;background:var(--cyan-l);-webkit-mask:var(--ok) center/contain no-repeat;mask:var(--ok) center/contain no-repeat}
.yc.v2 .v-prom{font:500 clamp(46px,6.4vw,100px)/.98 var(--serif);letter-spacing:-.03em;color:var(--encre);margin:.3em 0 .3em;text-wrap:balance}
.yc.v2 .v-prom em{display:block;font-style:italic;font-weight:400;color:var(--marine)}
.yc.v2 .v-prom em .tr{position:relative;white-space:nowrap}
.yc.v2 .v-prom em .tr::after{content:"";position:absolute;left:.04em;right:.02em;bottom:.02em;height:.07em;border-radius:99px;background:var(--cyan);transform-origin:left}
html.v-anim .yc.v2 .v-prom em .tr::after{transform:scaleX(0);animation:v-souligne 1s var(--courbe) .55s forwards}
@keyframes v-souligne{to{transform:scaleX(1)}}
.yc.v2 .v-aut{margin-top:24px;font-size:14.5px;line-height:1.6;color:var(--second);max-width:34em}
.yc.v2 .v-aut a{color:var(--marine);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--cyan)}

/* La scene : deux roles, une mission, SPTS qui porte l'emploi.
   Le cadrage est le meme a toutes les largeurs (meme rapport), si bien
   que les points restent sur les personnes apres recadrage. */
.yc.v2 .v-scene{position:relative;margin:0}
.yc.v2 .v-scene .cadre{position:relative;aspect-ratio:100/86}
.yc.v2 .v-scene .v-ph{position:absolute;inset:0;border-radius:28px;box-shadow:var(--ombre-f)}
.yc.v2 .v-scene .v-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(12,51,85,.34))}
.yc.v2 .v-scene svg.v-fils{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.yc.v2 .v-scene .lbl{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;transform:translate(-7px,-50%);font:600 12.5px/1 var(--inter);color:var(--encre);white-space:nowrap}
.yc.v2 .v-scene .lbl b{background:rgba(255,255,255,.88);padding:6px 10px;border-radius:999px;font-weight:600}
.yc.v2 .v-scene .lbl.g{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
.yc.v2 .v-scene .lbl .v-pt{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cyan),0 3px 10px rgba(0,0,0,.25)}
.yc.v2 .v-scene .mis{position:absolute;z-index:3;transform:translate(-50%,-50%);font:600 11.5px/1 var(--inter);letter-spacing:.04em;color:var(--encre);background:rgba(255,255,255,.82);padding:5px 9px;border-radius:999px}
/* Le point SPTS conclut les deux lignes, pose sur le bord de la photo. */
.yc.v2 .v-scene .noeud{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--marine);color:#fff;font:600 16px/1 var(--serif);letter-spacing:.02em;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--cyan),0 14px 28px -12px rgba(16,65,108,.7)}
.yc.v2 .v-scene figcaption{margin-top:44px;text-align:center;font-size:14.5px;line-height:1.5;color:var(--second)}
.yc.v2 .v-scene figcaption b{color:var(--encre);font-weight:600}
.yc.v2 .v-scene figcaption small{display:block;margin-top:4px;font-size:12.5px;color:var(--second);opacity:.85}
html.v-anim .yc.v2 .v-scene .lbl,html.v-anim .yc.v2 .v-scene .mis{opacity:0;transition:opacity .5s .25s}
html.v-anim .yc.v2 .v-scene.vu .lbl{opacity:1}
html.v-anim .yc.v2 .v-scene.vu .mis{opacity:1;transition-delay:1.1s}
html.v-anim .yc.v2 .v-scene .noeud{transition:transform .7s var(--courbe) .9s,opacity .5s .9s}
html.v-anim .yc.v2 .v-scene:not(.vu) .noeud{opacity:0;transform:translate(-50%,-30%)}

/* Les portes d'entree : les seules cartes de l'accueil, parce qu'elles s'ouvrent. */
.yc.v2 .v-orient{padding:var(--sec-d) 0 var(--sec);background:linear-gradient(180deg,#fff,var(--doux) 75%)}
.yc.v2 .v-orient-tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 40px;margin-bottom:clamp(24px,3vw,40px)}
.yc.v2 .v-orient-tete .v-h2{margin-bottom:0}
.yc.v2 .v-orient-tete p{color:var(--second);font-size:18px;max-width:22em}
.yc.v2 .v-portes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);--hp:clamp(200px,19vw,268px)}
.yc.v2 .v-portes .v-ln-h{position:absolute;left:6%;right:6%;top:calc(var(--hp) - 1px);height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 8%,var(--cyan) 92%,transparent);z-index:2;pointer-events:none}
.yc.v2 .v-porte{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);box-shadow:var(--ombre);text-decoration:none;color:inherit;transition:transform .35s var(--courbe),box-shadow .35s}
.yc.v2 .v-porte .v-ph{height:var(--hp);border-radius:var(--r-l) var(--r-l) 0 0;background-image:none}
.yc.v2 .v-porte .v-ph::before{content:"";position:absolute;inset:0;background:var(--ph) var(--pos,50% 40%)/cover no-repeat;transform:scale(1.04);transition:transform .7s var(--courbe)}
.yc.v2 .v-porte .v-pt{position:absolute;left:26px;top:calc(var(--hp) - 7px);z-index:3}
.yc.v2 .v-porte .corps{display:flex;flex-direction:column;flex:1;padding:26px 26px 22px}
.yc.v2 .v-porte .qui{font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-porte h3{font:500 clamp(24px,2.1vw,30px)/1.12 var(--serif);letter-spacing:-.015em;color:var(--encre);margin:10px 0 8px}
.yc.v2 .v-porte p{color:var(--second);line-height:1.55}
.yc.v2 .v-porte ul{margin:16px 0 20px;display:grid;gap:7px}
.yc.v2 .v-porte li{position:relative;padding-left:18px;font-size:15px;color:var(--encre)}
.yc.v2 .v-porte li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-porte .va{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--bord);font:600 15.5px/1.3 var(--inter);color:var(--marine)}
.yc.v2 .v-porte .va i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ciel);color:var(--marine);font-size:0;transition:background .3s,color .3s,transform .35s var(--courbe)}
.yc.v2 .v-porte .va i::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--fl-d) center/contain no-repeat;mask:var(--fl-d) center/contain no-repeat}
.yc.v2 .v-porte:hover,.yc.v2 .v-porte:focus-visible{transform:translateY(-5px);box-shadow:var(--ombre-f)}
.yc.v2 .v-porte:hover .v-ph::before,.yc.v2 .v-porte:focus-visible .v-ph::before{transform:scale(1.1)}
.yc.v2 .v-porte:hover .v-pt,.yc.v2 .v-porte:focus-visible .v-pt{background:var(--cyan);transform:scale(1.25)}
.yc.v2 .v-porte:hover .v-pt::after,.yc.v2 .v-porte:focus-visible .v-pt::after{animation:v-pulse 1.1s var(--courbe) 1}
.yc.v2 .v-porte:hover .va i,.yc.v2 .v-porte:focus-visible .va i{background:var(--marine);color:#fff;transform:translateX(4px)}
.yc.v2 .v-porte:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:var(--r-l)}

/* Confiance : logos, a part des services. */
.yc.v2 .v-conf{padding-block:var(--sec-d);background:var(--doux)}
.yc.v2 .v-conf-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);align-items:start}
.yc.v2 .v-conf .v-h2{font-size:clamp(26px,2.6vw,38px)}
.yc.v2 .v-conf .secteurs{margin-top:12px;font-size:15px;line-height:1.6;color:var(--second)}
.yc.v2 .v-conf .grille-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border:0;margin:0}
.yc.v2 .v-conf .grille-logos li{display:grid;place-items:center;height:88px;padding:14px;background:#fff;border-radius:var(--r-s);border:0}
.yc.v2 .v-conf .grille-logos li img{filter:grayscale(1) contrast(.9);opacity:.72;transition:filter .35s,opacity .35s;max-width:100%}
.yc.v2 .v-conf .grille-logos li:hover img{filter:none;opacity:1}
.yc.v2 .v-conf .logos-plus{margin-top:14px}
.yc.v2 .v-conf .logos-plus summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:600 15.5px/1.3 var(--inter);color:var(--marine);padding:8px 0}
.yc.v2 .v-conf .logos-plus summary::-webkit-details-marker{display:none}
.yc.v2 .v-conf .logos-plus summary::after{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .3s var(--courbe)}
.yc.v2 .v-conf .logos-plus[open] summary::after{transform:rotate(45deg)}
.yc.v2 .v-conf .logos-plus .grille-logos{margin-top:10px}
.yc.v2 .v-conf .logos-plus .fermer,.yc.v2 .v-conf .logos-plus[open] .ouvrir{display:none}
.yc.v2 .v-conf .logos-plus[open] .fermer{display:inline}

/* Pourquoi SPTS : le role d'abord, le prix ensuite (option A). */
.yc.v2 .v-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a a b c" "a a d e";gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,40px)}
.yc.v2 .v-tu{position:relative;border-radius:var(--r);background:#fff;padding:clamp(20px,2.2vw,30px);overflow:hidden}
.yc.v2 .v-tu .ch{display:block;font:500 clamp(36px,3.6vw,54px)/1 var(--serif);letter-spacing:-.02em;color:var(--encre);margin-bottom:10px}
.yc.v2 .v-tu .ch small{font-size:.5em;margin-left:.06em}
.yc.v2 .v-tu p{font-size:15.5px;line-height:1.55;color:var(--second)}
.yc.v2 .v-tu.a{grid-area:a;background:var(--marine);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:320px;background-image:radial-gradient(70% 80% at 100% 0%,rgba(69,189,223,.32),transparent 60%)}
.yc.v2 .v-tu.a .v-sur{color:var(--cyan-c)}
.yc.v2 .v-tu.a .grand{font:500 clamp(34px,3.6vw,54px)/1.04 var(--serif);letter-spacing:-.02em;color:#fff;margin-top:14px}
.yc.v2 .v-tu.a p{color:var(--sur-sombre);font-size:16.5px;max-width:30em}
.yc.v2 .v-tu.a ul{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:4px}
.yc.v2 .v-tu.a li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#fff}
.yc.v2 .v-tu.a li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-tu.b{grid-area:b;background:var(--ciel)}
.yc.v2 .v-tu.b .ch{font-size:clamp(56px,5.6vw,84px)}
.yc.v2 .v-tu.b .ch small{color:var(--cyan-l)}
.yc.v2 .v-tu.b p{color:var(--corps)}
.yc.v2 .v-tu.c{grid-area:c}.yc.v2 .v-tu.d{grid-area:d}.yc.v2 .v-tu.e{grid-area:e}
.yc.v2 .v-tu.d .ch,.yc.v2 .v-tu.e .ch{font-size:clamp(28px,2.6vw,38px)}
.yc.v2 .v-tu .dev{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.yc.v2 .v-tu .dev span{font:600 12.5px/1 var(--inter);padding:6px 9px;border-radius:999px;background:var(--ciel);color:var(--marine)}
/* Rangee ouverte, sur le fil : les arguments sans cartes. */
.yc.v2 .v-filcols{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(18px,2.6vw,40px);margin-top:clamp(28px,3.4vw,48px);padding-top:30px}
.yc.v2 .v-filcols::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan) 85%,transparent)}
.yc.v2 .v-filcols>*{position:relative}
.yc.v2 .v-filcols>*::before{content:"";position:absolute;left:0;top:-31px;width:14px;height:14px;border-radius:50%;background:var(--marine);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cyan)}
.yc.v2 .v-fond .v-filcols>*::before{box-shadow:0 0 0 3px var(--doux),0 0 0 5px var(--cyan)}
.yc.v2 .v-filcols h3{font:600 17.5px/1.3 var(--inter);color:var(--encre);margin-bottom:6px}
.yc.v2 .v-filcols h3.s{font:500 clamp(21px,1.8vw,25px)/1.2 var(--serif)}
.yc.v2 .v-filcols p{font-size:15.5px;line-height:1.55;color:var(--second)}

/* Le groupe : distinct, en retrait. */
.yc.v2 .v-grp{padding-block:var(--sec-d);background:#fff}
.yc.v2 .v-grp-c{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;border:1px solid var(--bord);border-radius:var(--r-l);padding:clamp(22px,3vw,40px)}
.yc.v2 .v-grp-c h2{font:500 clamp(23px,2.2vw,30px)/1.15 var(--serif);color:var(--encre);margin:10px 0 10px}
.yc.v2 .v-grp-c p{color:var(--second);line-height:1.6;margin-bottom:14px}
.yc.v2 .v-grp-c ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.yc.v2 .v-grp-c li{padding-left:14px;border-left:2px solid var(--cyan-c)}
.yc.v2 .v-grp-c li b{display:block;color:var(--encre);font-weight:600;font-size:15.5px}
.yc.v2 .v-grp-c li span{font-size:14px;color:var(--second)}

/* Appel final : le fil mene a l'action. */
.yc.v2 .v-appel{padding-block:var(--sec);overflow:hidden}
.yc.v2 .v-appel-g{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px clamp(28px,6vw,88px);align-items:center}
.yc.v2 .v-appel h2{font:500 clamp(34px,4.4vw,60px)/1.04 var(--serif);letter-spacing:-.022em;color:#fff;text-wrap:balance}
.yc.v2 .v-appel p{margin-top:14px;font-size:18px;color:var(--sur-sombre);max-width:30em}
.yc.v2 .v-appel .fil-act{display:flex;align-items:center}
.yc.v2 .v-appel .fil-act .v-ln{width:clamp(40px,8vw,120px);height:2px;background:linear-gradient(90deg,transparent,var(--cyan));margin-right:-2px}
.yc.v2 .v-appel .fil-act .v-pt{box-shadow:0 0 0 3px var(--marine-f),0 0 0 5px var(--cyan);background:var(--cyan);margin-right:14px}
.yc.v2 .contacts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.yc.v2 .contacts a{color:inherit;text-decoration:none;font-size:15.5px;display:inline-flex;gap:10px;align-items:center;width:max-content;max-width:100%}
.yc.v2 .contacts a span{border-bottom:1px solid rgba(129,206,226,.6)}
.yc.v2 .contacts a:hover span{border-bottom-color:var(--cyan)}
.yc.v2 .contacts svg{width:18px;height:18px;flex:none;color:var(--cyan)}
.yc.v2 .v-champs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.yc.v2 .v-champs li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--sur-sombre)}
.yc.v2 .v-champs li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--cyan);color:#fff;font:600 12px/1 var(--inter)}
.yc.v2 .v-champs li:not(:last-child)::after{content:"";width:18px;height:2px;background:var(--cyan);opacity:.6}

/* ================================================================
   SCHEMA DES TROIS ACTEURS
   ================================================================ */
.yc.v2 .v-tete2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.yc.v2 .v-tete2 .v-h2{margin-bottom:0}
.yc.v2 .v-trio-c{border:1px solid var(--bord);border-radius:var(--r-l);padding:clamp(20px,3vw,44px);background:linear-gradient(180deg,var(--doux),#fff 60%)}
.yc.v2 .v-trio-aide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:clamp(20px,2.6vw,32px);font-size:15px;color:var(--second)}
.yc.v2 .v-trio-aide b{color:var(--encre);font-weight:600}
.yc.v2 .v-raz{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--inter);color:#fff;background:var(--marine);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;transition:opacity .2s,background .2s}
.yc.v2 .v-raz::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--fl-d) center/contain no-repeat;mask:var(--fl-d) center/contain no-repeat;transform:scaleX(-1)}
.yc.v2 .v-raz:hover{background:var(--marine-f)}
.yc.v2 .v-raz:disabled{background:transparent;color:var(--second);box-shadow:inset 0 0 0 1px var(--bord-f);opacity:.7;cursor:default}

.yc.v2 .v-trio{position:relative;display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,1.5fr) minmax(160px,1fr) minmax(0,1.5fr) minmax(140px,1fr);align-items:center;row-gap:18px}
.yc.v2 .v-act-b{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px 16px;border-radius:var(--r);background:transparent;border:2px solid transparent;cursor:pointer;font-family:inherit;color:inherit;transition:background .3s,border-color .3s,opacity .3s,box-shadow .3s}
.yc.v2 .v-act-b:hover{border-color:var(--bord-f)}
.yc.v2 .v-act-b .tx{display:flex;flex-direction:column;align-items:inherit;gap:4px}
.yc.v2 .v-act-b .sel{display:none;font:600 11px/1 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--cyan-l);border-radius:999px;padding:5px 8px;margin-top:4px}
.yc.v2 .v-act-b[aria-pressed="true"]{background:#fff;border-color:var(--cyan);box-shadow:var(--ombre-f)}
.yc.v2 .v-act-b[aria-pressed="true"] .sel{display:inline-block}
.yc.v2 .v-av{position:relative;width:84px;height:84px;border-radius:50%;background:var(--doux-2) var(--ph) var(--pos,50% 30%)/var(--zoom,260%) no-repeat;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--cyan-c)}
.yc.v2 .v-act-b[aria-pressed="true"] .v-av{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--cyan)}
.yc.v2 .v-av.spts{display:grid;place-items:center;background:var(--marine);color:#fff;font:600 21px/1 var(--serif);letter-spacing:.02em;width:100px;height:100px;box-shadow:0 0 0 5px #fff,0 0 0 8px var(--cyan),0 16px 32px -14px rgba(16,65,108,.7)}
.yc.v2 .v-act-b b{font:600 17px/1.2 var(--inter);color:var(--encre);margin-top:6px}
.yc.v2 .v-act-b .tx>span:not(.sel){font-size:14px;line-height:1.35;color:var(--second)}

.yc.v2 .v-lia{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 14px;min-width:0}
.yc.v2 .v-rel{transition:opacity .35s}
.yc.v2 .v-ctr{position:relative;text-align:center;padding-bottom:12px}
.yc.v2 .v-ctr .t{font:600 14px/1.25 var(--inter);color:var(--encre)}
.yc.v2 .v-ctr .t small{display:block;font-weight:500;font-size:12px;color:var(--cyan-l);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.yc.v2 .v-ctr .v-ln{position:absolute;left:-8px;right:-8px;bottom:0;height:3px;border-radius:3px;background:var(--cyan);transition:opacity .35s}
.yc.v2 .v-ctr .v-ln::before,.yc.v2 .v-ctr .v-ln::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-ctr .v-ln::before{left:-2px}.yc.v2 .v-ctr .v-ln::after{right:-2px}
.yc.v2 .v-flx{display:flex;align-items:center;gap:10px;font:500 14px/1.25 var(--inter);color:var(--corps)}
.yc.v2 .v-flx .lab{flex:none;max-width:12em}
.yc.v2 .v-tr{position:relative;flex:1;height:2px;background:var(--marine);border-radius:2px;min-width:30px;transition:opacity .35s}
.yc.v2 .v-tr::after{content:"";position:absolute;top:50%;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-top:-6px}
.yc.v2 .v-flx.d .v-tr::after{right:-2px;border-left:10px solid var(--marine)}
.yc.v2 .v-flx.g .v-tr::after{left:-2px;border-right:10px solid var(--marine)}
.yc.v2 .v-flx.g{flex-direction:row-reverse}
.yc.v2 .v-tr i{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(69,189,223,.25),0 0 14px rgba(69,189,223,.9);opacity:0}
.yc.v2 .v-flx.d .v-tr i{left:0}
.yc.v2 .v-flx.g .v-tr i{right:0}
.yc.v2 .v-flx.joue.d .v-tr i{animation:v-comete-d 1s var(--courbe) 1}
.yc.v2 .v-flx.joue.g .v-tr i{animation:v-comete-g 1s var(--courbe) 1}
@keyframes v-comete-d{0%{opacity:0;left:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;left:calc(100% - 12px)}}
@keyframes v-comete-g{0%{opacity:0;right:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;right:calc(100% - 12px)}}
.yc.v2 .v-flx .ico{display:none;font-size:0}
.yc.v2 .v-flx .ico::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--fl-b) center/contain no-repeat;mask:var(--fl-b) center/contain no-repeat}
.yc.v2 .v-flx .ico.h::before{-webkit-mask-image:var(--fl-h);mask-image:var(--fl-h)}

.yc.v2 .v-mis{grid-column:1/-1;position:relative;display:flex;justify-content:center;margin:4px 9% 0}
.yc.v2 .v-mis::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--marine);opacity:.55;transition:opacity .35s}
.yc.v2 .v-mis .t{position:relative;background:var(--doux);padding:6px 14px;border-radius:999px;font:600 14px/1.25 var(--inter);color:var(--encre);text-align:center}
.yc.v2 .v-mis .t span{display:block;font-weight:400;font-size:13px;color:var(--second)}
.yc.v2 .v-mis .bt{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--marine)}
.yc.v2 .v-mis .bt.a{left:-6px}.yc.v2 .v-mis .bt.b{right:-6px}

/* Lecture selective : les traits hors du propos s'effacent nettement,
   les libelles restent lisibles. */
.yc.v2 .v-trio[data-focus] .v-rel:not(.on){opacity:.62}
.yc.v2 .v-trio[data-focus] .v-rel:not(.on) .v-ln,.yc.v2 .v-trio[data-focus] .v-rel:not(.on) .v-tr{opacity:.22}
.yc.v2 .v-trio[data-focus] .v-mis:not(.on)::before{opacity:.18}
.yc.v2 .v-trio[data-focus] .v-rel.on .v-ln,.yc.v2 .v-trio[data-focus] .v-rel.on .v-tr{box-shadow:0 0 0 3px rgba(69,189,223,.22)}
.yc.v2 .v-trio[data-focus] .v-mis.on::before{opacity:1;border-top-color:var(--cyan-l)}
.yc.v2 .v-trio[data-focus] .v-act-b:not(.on){opacity:.42}

.yc.v2 .v-resp{margin-top:clamp(20px,2.6vw,32px);min-height:150px;border-top:1px solid var(--bord);padding-top:22px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:12px 32px;align-items:start}
.yc.v2 .v-resp .qui{font:500 clamp(21px,1.9vw,27px)/1.15 var(--serif);color:var(--encre)}
.yc.v2 .v-resp .qui small{display:block;font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l);margin-bottom:8px}
.yc.v2 .v-resp ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.yc.v2 .v-resp li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;color:var(--second)}
.yc.v2 .v-resp li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-resp li b{display:block;color:var(--encre);font-weight:600}
html.v-anim .yc.v2 .v-resp.chg>*{animation:v-entre .4s var(--courbe)}
@keyframes v-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Etapes qui pilotent le schema, et etapes statiques : fil segmente. */
.yc.v2 .v-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 clamp(12px,2vw,24px);margin-top:clamp(24px,3.4vw,44px)}
.yc.v2 .v-seg::before{content:"";position:absolute;left:0;right:0;top:22px;height:3px;border-radius:3px;background:var(--bord)}
.yc.v2 .v-seg::after{content:"";position:absolute;left:0;top:22px;height:3px;width:var(--avx,0px);border-radius:3px;background:var(--cyan);transition:width .6s var(--courbe),height .6s var(--courbe)}
.yc.v2 .v-seg.statique::after{width:100%}
.yc.v2 .v-seg-b{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:0 0 4px;font-family:inherit;color:inherit}
button.v-seg-b{cursor:pointer}
.yc.v2 .v-seg-b .n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--bord-f);font:600 18px/1 var(--serif);color:var(--marine);transition:background .3s,border-color .3s,color .3s}
.yc.v2 .v-seg.statique .n{border-color:var(--cyan)}
.yc.v2 .v-seg-b h3{font:600 18px/1.3 var(--inter);color:var(--encre);margin:16px 0 6px}
.yc.v2 .v-seg-b p{font-size:15px;line-height:1.5;color:var(--second)}
.yc.v2 .v-seg-b .k{display:block;font:600 12.5px/1 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-l);margin-top:16px}
.yc.v2 .v-seg-b .k+h3{margin-top:6px}
button.v-seg-b:hover .n{border-color:var(--cyan)}
.yc.v2 .v-seg-b[aria-pressed="true"] .n{background:var(--marine);border-color:var(--marine);color:#fff;box-shadow:0 0 0 5px rgba(69,189,223,.3)}
.yc.v2 .v-seg-b.lu .n{border-color:var(--cyan)}
.yc.v2 .v-seg-b .ind{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 13px/1 var(--inter);color:var(--cyan-l)}
.yc.v2 .v-seg-b[aria-pressed="true"] .ind{color:var(--marine)}

/* ================================================================
   PARCOURS DE MISSION
   ================================================================ */
.yc.v2 .v-parc-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,88px);align-items:start}
.yc.v2 .v-parc-cote{position:sticky;top:calc(var(--hdr) + 84px)}
.yc.v2 .v-mini{display:flex;gap:6px;margin-top:26px}
.yc.v2 .v-mini button{flex:1;height:44px;display:flex;align-items:center;cursor:pointer;background:none;border:0;padding:0}
.yc.v2 .v-mini button i{display:block;width:100%;height:5px;border-radius:5px;background:var(--bord-f);transition:background .3s,height .3s}
.yc.v2 .v-mini button.lu i{background:var(--cyan-c)}
.yc.v2 .v-mini button[aria-current="step"] i{background:var(--cyan);height:7px}
.yc.v2 .v-mini-l{margin-top:2px;font:600 14px/1.4 var(--inter);color:var(--encre);min-height:1.4em}
.yc.v2 .v-mini-l span{color:var(--second);font-weight:500}
.yc.v2 .v-parc-l{position:relative}
.yc.v2 .v-parc-l .v-prog{position:absolute;left:27px;top:28px;bottom:28px;width:3px;border-radius:3px;background:var(--bord-f)}
.yc.v2 .v-parc-l .v-prog i{position:absolute;left:0;top:0;width:100%;height:var(--av,0px);border-radius:3px;background:var(--cyan);transition:height .45s var(--courbe)}
.yc.v2 .v-etape{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 20px;padding:8px 0}
.yc.v2 .v-etape .n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--bord-f);font:600 21px/1 var(--serif);color:var(--marine);transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.yc.v2 .v-etape .c{border-radius:var(--r);padding:18px 22px;transition:background .35s,box-shadow .35s}
.yc.v2 .v-etape .duree{display:inline-block;font:600 12.5px/1 var(--inter);letter-spacing:.04em;color:var(--cyan-l);background:#fff;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.yc.v2 .v-etape h3{font:600 clamp(19px,1.6vw,23px)/1.25 var(--inter);color:var(--encre);margin-bottom:6px}
.yc.v2 .v-etape p{color:var(--second);line-height:1.55}
.yc.v2 .v-etape details{margin-top:8px}
.yc.v2 .v-etape summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font:600 14.5px/1 var(--inter);color:var(--marine);padding:8px 0}
.yc.v2 .v-etape summary::-webkit-details-marker{display:none}
.yc.v2 .v-etape summary::after{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ciel);transition:transform .3s var(--courbe)}
.yc.v2 .v-etape details[open] summary::after{transform:rotate(45deg)}
.yc.v2 .v-etape details p{margin-top:4px;padding:12px 14px;border-radius:var(--r-s);background:var(--doux);font-size:15px}
.yc.v2 .v-etape.on .n{background:var(--marine);border-color:var(--marine);color:#fff;box-shadow:0 0 0 6px rgba(69,189,223,.3)}
.yc.v2 .v-etape.lu .n{border-color:var(--cyan)}
.yc.v2 .v-etape.on .c{background:#fff;box-shadow:var(--ombre)}
.yc.v2 .v-etape.on .duree{background:var(--ciel)}

/* ================================================================
   DE LA FACTURE AU SALAIRE
   ================================================================ */
.yc.v2 .v-franc-g{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,5vw,64px);align-items:start}
.yc.v2 .v-franc-c{background:#fff;border-radius:var(--r-l);border:1px solid var(--bord);padding:clamp(18px,3vw,36px)}
.yc.v2 .v-ech{display:flex;justify-content:space-between;gap:10px;font:500 13px/1.3 var(--inter);color:var(--second);margin-bottom:10px}
.yc.v2 .v-barre{position:relative;display:flex;height:64px;gap:3px;padding-bottom:12px}
html.v-anim .yc.v2 .v-barre{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--courbe) .1s}
html.v-anim .yc.v2 .v-barre.vu{clip-path:inset(0 0 0 0)}
.yc.v2 .v-barre button{position:relative;border:0;padding:0;cursor:pointer;height:52px;min-width:6px;border-radius:4px;transition:opacity .3s,box-shadow .2s}
.yc.v2 .v-barre button:first-child{border-radius:12px 4px 4px 12px}
.yc.v2 .v-barre button:last-child{border-radius:4px 12px 12px 4px}
/* Survol : un lisere clair ; selection : les autres s'estompent et un
   repere se pose sous le segment ; focus : contour net. */
.yc.v2 .v-barre button:hover{box-shadow:inset 0 3px 0 rgba(255,255,255,.75)}
.yc.v2 .v-barre[data-sel] button:not([aria-pressed="true"]){opacity:.4}
.yc.v2 .v-barre button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:10px;height:10px;margin-left:-5px;background:var(--encre);clip-path:polygon(50% 0,100% 100%,0 100%)}
.yc.v2 .v-barre button:focus-visible{outline:3px solid var(--encre);outline-offset:2px;border-radius:6px}
.yc.v2 .c-com{background:var(--cyan)}
.yc.v2 .c-pat{background:var(--cyan-c)}
.yc.v2 .c-ded{background:#B9CDDF}
.yc.v2 .c-imp{background:repeating-linear-gradient(135deg,#9FB7CE 0 6px,#C9D8E6 6px 12px)}
.yc.v2 .c-net{background:var(--marine)}
.yc.v2 .c-fac{background:#fff;box-shadow:inset 0 0 0 2px var(--marine)}
.yc.v2 .v-postes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.yc.v2 .v-postes button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--bord-f);background:#fff;font:500 14px/1 var(--inter);color:var(--encre);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.yc.v2 .v-postes button i{width:14px;height:14px;border-radius:4px;flex:none}
.yc.v2 .v-postes button:hover{border-color:var(--cyan)}
.yc.v2 .v-postes button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.yc.v2 .v-detail{display:grid;grid-template-columns:minmax(200px,auto) minmax(0,1fr);gap:6px 26px;align-items:start;margin-top:18px;padding:20px 22px;border-radius:var(--r);background:var(--ciel);min-height:142px}
.yc.v2 .v-detail .m{font:500 clamp(32px,3.4vw,48px)/1 var(--serif);letter-spacing:-.02em;color:var(--encre);white-space:nowrap}
.yc.v2 .v-detail .m small{display:block;font:600 12.5px/1.25 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-l);margin-bottom:10px;white-space:normal}
.yc.v2 .v-detail .x p{font-size:15px;line-height:1.5;color:var(--corps)}
.yc.v2 .v-detail .x .part{display:block;font:600 14px/1 var(--inter);color:var(--cyan-l);margin-bottom:8px}
html.v-anim .yc.v2 .v-detail.chg .m,html.v-anim .yc.v2 .v-detail.chg .x{animation:v-fondu .3s ease-out}
@keyframes v-fondu{from{opacity:.2}to{opacity:1}}
.yc.v2 table.v-dec{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px}
.yc.v2 .v-dec th,.yc.v2 .v-dec td{padding:10px;text-align:right;font-variant-numeric:tabular-nums}
.yc.v2 .v-dec th:first-child,.yc.v2 .v-dec td:first-child{text-align:left}
.yc.v2 .v-dec td:not(:first-child){white-space:nowrap}
.yc.v2 .v-dec thead th{font:600 12.5px/1 var(--inter);letter-spacing:.04em;text-transform:uppercase;color:var(--second);border-bottom:2px solid var(--encre)}
.yc.v2 .v-dec tr.etp th{text-align:left;font:600 13px/1.3 var(--inter);color:var(--cyan-l);padding-top:18px}
.yc.v2 .v-dec tbody td{border-bottom:1px solid var(--bord);color:var(--corps);transition:background .25s}
.yc.v2 .v-dec td .pt{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:10px;vertical-align:-1px}
.yc.v2 .v-dec tr.tot td{font-weight:600;color:var(--encre);border-bottom:2px solid var(--encre)}
.yc.v2 .v-dec tr.net td{font-size:16.5px}
.yc.v2 .v-dec tr.sel td{background:var(--ciel)}
.yc.v2 .v-dec tr.sel td:first-child{box-shadow:inset 4px 0 0 var(--cyan)}
.yc.v2 .v-hyp{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--second)}
.yc.v2 .v-hyp b{color:var(--encre)}

/* ================================================================
   COMPOSANTS DES PAGES INTERIEURES
   ================================================================ */
/* Chiffre en scene, sur marine. */
.yc.v2 .v-marine{position:relative;border-radius:var(--r-l);background:var(--marine);color:#fff;padding:clamp(24px,3.6vw,48px);overflow:hidden;background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.32),transparent 60%)}
.yc.v2 .v-marine h3,.yc.v2 .v-marine .v-h3s{color:#fff}
.yc.v2 .v-marine p{color:var(--sur-sombre)}
.yc.v2 .v-marine b{color:#fff}
.yc.v2 .gros{font:500 clamp(76px,8vw,116px)/.8 var(--serif);letter-spacing:-.04em;color:var(--encre)}
.yc.v2 .v-marine .gros{color:#fff}
.yc.v2 .gros small{font-size:.42em;color:var(--cyan);margin-left:.06em}
.yc.v2 .moyen{font:500 clamp(36px,3.6vw,54px)/1 var(--serif);letter-spacing:-.02em;color:var(--encre)}
.yc.v2 .v-marine .moyen{color:#fff}
.yc.v2 .v-pill{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.12);font:500 14.5px/1 var(--inter);color:#fff}
.yc.v2 .v-pill.clair{background:var(--ciel);color:var(--marine)}

/* Liste ouverte a points, sans cartes. */
.yc.v2 .v-pts{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:14px clamp(20px,3vw,40px)}
.yc.v2 .v-pts li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--second)}
.yc.v2 .v-pts li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-pts li b{display:block;color:var(--encre);font-weight:600;font-size:16px;margin-bottom:2px}
.yc.v2 .v-marine .v-pts li,.yc.v2 .v-sombre .v-pts li{color:var(--sur-sombre)}
.yc.v2 .v-marine .v-pts li b,.yc.v2 .v-sombre .v-pts li b{color:#fff}
.yc.v2 .v-coches li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.45;color:var(--encre)}
.yc.v2 .v-coches li::before{content:"";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--cyan) }
.yc.v2 .v-coches li::after{content:"";position:absolute;left:4px;top:3px;width:14px;height:14px;background:var(--encre);-webkit-mask:var(--ok) center/contain no-repeat;mask:var(--ok) center/contain no-repeat}
.yc.v2 .v-coches li span{display:block;font-size:14px;color:var(--second);margin-top:2px}

/* Repartition des roles : deux colonnes reliees, une seule surface marine. */
.yc.v2 .v-roles{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.yc.v2 .v-roles .col{padding:clamp(22px,3vw,40px)}
.yc.v2 .v-roles .col.v-spts{border-radius:var(--r-l);background:var(--marine);color:#fff;background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v-roles h3{font:500 clamp(24px,2.2vw,31px)/1.12 var(--serif);color:var(--encre);margin:8px 0 20px}
.yc.v2 .v-roles .v-spts h3{color:#fff}
.yc.v2 .v-roles .qui{font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-roles .v-spts .qui{color:var(--cyan-c)}
.yc.v2 .v-roles ul{display:grid;gap:16px}
.yc.v2 .v-roles li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.45;color:var(--second)}
.yc.v2 .v-roles li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v-roles li b{display:block;color:var(--encre);font-weight:600;font-size:16px}
.yc.v2 .v-roles .v-spts li{color:var(--sur-sombre)}
.yc.v2 .v-roles .v-spts li b{color:#fff}
.yc.v2 .v-roles .lien-c{position:relative;display:flex;align-items:center;justify-content:center}
.yc.v2 .v-roles .lien-c::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--cyan);border-radius:3px}
.yc.v2 .v-roles .lien-c .v-pt{width:18px;height:18px}

/* Tableaux : comparaison et cout. */
.yc.v2 table.v-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.yc.v2 .v-tab th,.yc.v2 .v-tab td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bord)}
.yc.v2 .v-tab thead th{vertical-align:bottom;border-bottom:2px solid var(--encre);font-weight:400}
.yc.v2 .v-tab thead th b{display:block;font:600 17px/1.25 var(--inter);color:var(--encre)}
.yc.v2 .v-tab thead th span{display:block;font-size:13.5px;color:var(--second);margin-top:4px}
.yc.v2 .v-tab tbody th{font-weight:600;color:var(--encre);width:22%}
.yc.v2 .v-tab td{color:var(--second)}
.yc.v2 .v-tab .nous{background:var(--ciel);color:var(--encre)}
.yc.v2 .v-tab thead .nous{border-radius:var(--r) var(--r) 0 0;box-shadow:inset 0 3px 0 var(--cyan)}
.yc.v2 .v-tab tbody tr:last-child .nous{border-radius:0 0 var(--r) var(--r)}
.yc.v2 .v-cout{display:grid;gap:10px}
.yc.v2 .v-cout-l{display:grid;grid-template-columns:120px minmax(0,1fr) 150px 90px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--bord);font-variant-numeric:tabular-nums}
.yc.v2 .v-cout-l.t{border-bottom:2px solid var(--encre);padding:0 0 10px;font:600 12.5px/1.3 var(--inter);letter-spacing:.04em;text-transform:uppercase;color:var(--second)}
.yc.v2 .v-cout-l .b{font-weight:600;color:var(--encre)}
.yc.v2 .v-cout-l .bar{display:flex;height:22px;gap:2px}
.yc.v2 .v-cout-l .bar i{display:block;height:100%;border-radius:3px}
.yc.v2 .v-cout-l .bar .s{background:var(--marine)}
.yc.v2 .v-cout-l .bar .p{background:var(--cyan-c)}
.yc.v2 .v-cout-l .bar .k{background:var(--cyan)}
.yc.v2 .v-cout-l .tot{text-align:right;font-weight:600;color:var(--encre)}
.yc.v2 .v-cout-l .ec{text-align:right;color:var(--cyan-l);font-weight:600}
.yc.v2 .v-cout-l .det{grid-column:2/-1;font-size:13.5px;color:var(--second);margin-top:-6px}
.yc.v2 .v-leg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:13.5px;color:var(--second)}
.yc.v2 .v-leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* Situations numerotees : six cas, sans six cartes. */
.yc.v2 .v-nums{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 clamp(20px,3vw,44px);counter-reset:n}
.yc.v2 .v-nums li{position:relative;padding:22px 0 22px 56px;border-top:1px solid var(--bord);counter-increment:n}
.yc.v2 .v-nums li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 30px/1 var(--serif);color:var(--cyan-l)}
.yc.v2 .v-nums b{display:block;font:600 17px/1.3 var(--inter);color:var(--encre);margin-bottom:4px}
.yc.v2 .v-nums span{font-size:15px;line-height:1.5;color:var(--second)}

/* Preuves : une autorisation en tete, le reste en liste ouverte. */
.yc.v2 .v-preuves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:start}
.yc.v2 .v-preuves .cat{font:600 12.5px/1.3 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-c);margin-bottom:10px}
.yc.v2 .v-preuves .v-marine h3{font:500 clamp(25px,2.4vw,34px)/1.12 var(--serif);margin-bottom:12px}
.yc.v2 .v-preuves .v-marine p+p{margin-top:10px}
.yc.v2 .v-preuves .v-marine .v-btn{margin-top:22px}
.yc.v2 .v-preuves .liste>div{padding:18px 0;border-bottom:1px solid var(--bord)}
.yc.v2 .v-preuves .liste>div:first-child{padding-top:4px}
.yc.v2 .v-preuves .liste .cat{color:var(--cyan-l);margin-bottom:6px}
.yc.v2 .v-preuves .liste h3{font:600 17.5px/1.3 var(--inter);color:var(--encre);margin-bottom:4px}
.yc.v2 .v-preuves .liste p{font-size:15px;line-height:1.55;color:var(--second)}
.yc.v2 .v-preuves .liste .v-lien{margin-top:6px;font-size:15px}

/* Bande photographique partagee (ONG, international). */
.yc.v2 .v-bande{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--marine-f);color:#fff}
.yc.v2 .v-bande .v-ph{border-radius:0;min-height:420px}
.yc.v2 .v-bande .t{padding:var(--sec) clamp(20px,5vw,72px)}
.yc.v2 .v-bande h2{font:500 clamp(28px,3.2vw,44px)/1.1 var(--serif);color:#fff;margin:12px 0 14px}
.yc.v2 .v-bande p{color:var(--sur-sombre);line-height:1.6;max-width:36em}
.yc.v2 .v-bande p+p{margin-top:10px}
.yc.v2 .v-bande .v-pts{margin:22px 0}

/* Image et texte, en regard. */
.yc.v2 .v-regard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.yc.v2 .v-regard .v-ph{aspect-ratio:4/4.4;box-shadow:var(--ombre)}

/* Cycle de paie : le fil segmente par periodicite. */
.yc.v2 .v-cycle{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0 clamp(16px,2.4vw,36px);margin-top:clamp(24px,3vw,40px)}
.yc.v2 .v-cycle>div{position:relative;padding-top:44px}
.yc.v2 .v-cycle>div::before{content:"";position:absolute;left:0;right:calc(-1 * clamp(16px,2.4vw,36px));top:12px;height:3px;background:var(--cyan)}
.yc.v2 .v-cycle>div:last-child::before{right:0;background:linear-gradient(90deg,var(--cyan),transparent)}
.yc.v2 .v-cycle>div::after{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;background:var(--marine);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cyan)}
.yc.v2 .v-fond .v-cycle>div::after{box-shadow:0 0 0 3px var(--doux),0 0 0 5px var(--cyan)}
.yc.v2 .v-cycle h3{font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l);margin-bottom:16px}
.yc.v2 .v-cycle ul{display:grid;gap:12px}

/* Questions qui s'ouvrent (gestion salariale) : onglets verticaux. */
.yc.v2 .v-qs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.yc.v2 .v-qs-l{display:grid;gap:4px}
.yc.v2 .v-qs-l button{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;text-align:left;width:100%;padding:16px 14px;border:0;border-radius:var(--r);background:transparent;font:600 17px/1.35 var(--inter);color:var(--encre);cursor:pointer;transition:background .25s}
.yc.v2 .v-qs-l button span{font:500 22px/1 var(--serif);color:var(--cyan-l)}
.yc.v2 .v-qs-l button:hover{background:var(--doux)}
.yc.v2 .v-qs-l button[aria-selected="true"]{background:var(--marine);color:#fff}
.yc.v2 .v-qs-l button[aria-selected="true"] span{color:var(--cyan)}
.yc.v2 .v-qs-p{position:sticky;top:calc(var(--hdr) + 24px);border-left:3px solid var(--cyan);padding:8px 0 8px clamp(18px,2.4vw,32px)}
.yc.v2 .v-qs-p .q{font:500 clamp(24px,2.4vw,34px)/1.15 var(--serif);color:var(--encre);margin-bottom:14px}
.yc.v2 .v-qs-p p{font-size:17px;line-height:1.6;color:var(--corps)}

/* Agences : deux modeles, chaque relation sur le fil. */
.yc.v2 .v-modeles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.yc.v2 .v-modele{border:1px solid var(--bord);border-radius:var(--r-l);padding:clamp(20px,2.8vw,36px);background:#fff}
.yc.v2 .v-modele .qui{display:inline-block;font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--marine);border-radius:999px;padding:7px 11px}
.yc.v2 .v-modele h3{font:500 clamp(23px,2.1vw,29px)/1.15 var(--serif);color:var(--encre);margin:14px 0 22px}
.yc.v2 .v-chaine{display:grid;gap:16px}
.yc.v2 .v-chaine li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0}
.yc.v2 .v-chaine .v-nd{font:600 13.5px/1 var(--inter);padding:9px 12px;border-radius:999px;background:var(--doux);color:var(--encre);white-space:nowrap}
.yc.v2 .v-chaine .v-nd.s{background:var(--marine);color:#fff}
.yc.v2 .v-chaine .ln{position:relative;display:flex;justify-content:center;padding:0 8px}
.yc.v2 .v-chaine .ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--cyan)}
.yc.v2 .v-chaine .ln.v::before{background:none;border-top:2px dashed var(--marine);height:0}
.yc.v2 .v-chaine .ln span{position:relative;background:#fff;padding:3px 8px;font-size:13.5px;line-height:1.3;color:var(--corps);text-align:center}
.yc.v2 .v-modele .effet{margin-top:22px;padding-top:16px;border-top:1px solid var(--bord);font-size:15.5px;line-height:1.55;color:var(--corps)}

/* Ressources : bibliotheque et couvertures. Identite tiree des Reperes
   (duotone marine), etendue par le fil. */
.yc.v2 .v-couv{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;border-radius:var(--r-s);padding:clamp(14px,1.8vw,22px);background:var(--marine);color:#fff;overflow:hidden;
  background-image:radial-gradient(90% 60% at 100% 0%,rgba(69,189,223,.38),transparent 60%),linear-gradient(160deg,var(--marine),var(--marine-f))}
.yc.v2 .v-couv::before{content:"";position:absolute;left:0;right:0;bottom:24%;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(69,189,223,.2))}
.yc.v2 .v-couv::after{content:"";position:absolute;left:clamp(14px,1.8vw,22px);bottom:calc(24% - 6px);width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px var(--marine)}
.yc.v2 .v-couv .serie{font:600 10.5px/1.3 var(--inter);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-c)}
.yc.v2 .v-couv .titre{font:500 clamp(17px,1.5vw,22px)/1.15 var(--serif);color:#fff;margin-top:auto;margin-bottom:26%}
.yc.v2 .v-couv .marque{font:600 10.5px/1 var(--inter);letter-spacing:.06em;color:var(--sur-sombre)}
.yc.v2 .v-couv.clair{background:var(--ciel);color:var(--encre);background-image:radial-gradient(90% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v-couv.clair .titre{color:var(--encre)}
.yc.v2 .v-couv.clair .serie{color:var(--cyan-l)}
.yc.v2 .v-couv.clair .marque{color:var(--second)}
.yc.v2 .v-couv.clair::after{box-shadow:0 0 0 3px var(--ciel)}
.yc.v2 .v-couv .num{position:absolute;right:clamp(12px,1.6vw,20px);top:clamp(8px,1.2vw,14px);font:500 clamp(46px,5vw,72px)/1 var(--serif);color:transparent;-webkit-text-stroke:1.5px rgba(129,206,226,.8)}
.yc.v2 .v-etat{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--inter);color:var(--cyan-l);background:var(--ciel);border-radius:999px;padding:6px 10px}
.yc.v2 .v-biblio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.95fr);gap:clamp(20px,3.4vw,48px);align-items:start}
.yc.v2 .v-une{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.yc.v2 .v-une .v-couv{box-shadow:var(--ombre-f)}
.yc.v2 .v-une .v-couv .titre{font-size:clamp(22px,2.2vw,30px)}
.yc.v2 .v-une h3{font:500 clamp(24px,2.2vw,30px)/1.15 var(--serif);color:var(--encre);margin:10px 0 8px}
.yc.v2 .v-une p{color:var(--second);line-height:1.55;margin-bottom:14px}
.yc.v2 .v-trois-couv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.yc.v2 .v-trois-couv b{display:block;margin-top:12px;font:600 15.5px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v-trois-couv span.d{display:block;margin:4px 0 8px;font-size:14px;line-height:1.45;color:var(--second)}
.yc.v2 .v-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.yc.v2 .v-guides>li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--bord)}
.yc.v2 .v-guides .v-couv{aspect-ratio:3/4;padding:8px}
.yc.v2 .v-guides .v-couv::after{left:8px;width:10px;height:10px;bottom:calc(24% - 4px)}
.yc.v2 .v-guides .etiq{font:600 12px/1.3 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-guides h3{font:600 16.5px/1.35 var(--inter);color:var(--encre);margin:4px 0 6px}
.yc.v2 .v-series{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.yc.v2 .v-series h3{font:600 12.5px/1.2 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l);padding-bottom:12px;border-bottom:2px solid var(--cyan);margin-bottom:14px}
.yc.v2 .v-series ol{display:grid;gap:12px}
.yc.v2 .v-series li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.4;color:var(--encre)}
.yc.v2 .v-series li .v-couv{aspect-ratio:3/4;padding:0;border-radius:6px}
.yc.v2 .v-series li .v-couv::before,.yc.v2 .v-series li .v-couv::after{display:none}
.yc.v2 .v-series li .v-couv span{position:absolute;inset:0;display:grid;place-items:center;font:500 18px/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--cyan-c)}

/* A propos : manifeste et trois facons. */
.yc.v2 .v-manifeste{font:400 clamp(26px,2.8vw,40px)/1.28 var(--serif);letter-spacing:-.01em;color:var(--encre);max-width:30em;text-wrap:pretty}
.yc.v2 .v-manifeste em{font-style:italic;color:var(--marine)}
.yc.v2 .v-facons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
.yc.v2 .v-facons a{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:var(--r-l);background:#fff;border:1px solid var(--bord);text-decoration:none;color:inherit;transition:transform .3s var(--courbe),box-shadow .3s,border-color .3s}
.yc.v2 .v-facons a b{font:500 clamp(23px,2vw,28px)/1.15 var(--serif);color:var(--encre)}
.yc.v2 .v-facons a span{color:var(--second);line-height:1.55;font-size:15.5px}
.yc.v2 .v-facons a em{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--inter);font-style:normal;color:var(--marine)}
.yc.v2 .v-facons a:hover,.yc.v2 .v-facons a:focus-visible{transform:translateY(-4px);box-shadow:var(--ombre);border-color:var(--cyan)}
.yc.v2 .v-verifs{width:100%;border-collapse:collapse;font-size:15px}
.yc.v2 .v-verifs th,.yc.v2 .v-verifs td{text-align:left;padding:16px 14px 16px 0;border-bottom:1px solid var(--bord);vertical-align:top}
.yc.v2 .v-verifs thead th{font:600 12.5px/1 var(--inter);letter-spacing:.04em;text-transform:uppercase;color:var(--second);border-bottom:2px solid var(--encre)}
.yc.v2 .v-verifs td:first-child{display:grid;grid-template-columns:36px 1fr;gap:4px 10px}
.yc.v2 .v-verifs .n{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--cyan);font:600 14px/1 var(--serif);color:var(--marine)}
.yc.v2 .v-verifs b{color:var(--encre)}
.yc.v2 .v-verifs .petit{font-size:14px;color:var(--second);line-height:1.5}
.yc.v2 .v-verifs td{color:var(--second)}

/* Questions frequentes. */
.yc.v2 .v-faq-g{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,5vw,72px);align-items:start}
.yc.v2 .v-acc{display:flex;flex-direction:column}
.yc.v2 .v-acc details{border-bottom:1px solid var(--bord);interpolate-size:allow-keywords}
.yc.v2 .v-acc details:first-child{border-top:1px solid var(--bord)}
.yc.v2 .v-acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:18px 4px;font:600 17px/1.35 var(--inter);color:var(--encre)}
.yc.v2 .v-acc summary::-webkit-details-marker{display:none}
.yc.v2 .v-acc summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ciel);color:var(--marine);font-weight:500;font-size:20px;transition:transform .35s var(--courbe),background .3s,color .3s}
.yc.v2 .v-acc summary:hover::after{background:var(--ciel-2)}
.yc.v2 .v-acc details[open] summary::after{transform:rotate(45deg);background:var(--marine);color:#fff}
.yc.v2 .v-acc details p{padding:0 4px 20px;color:var(--corps);line-height:1.6;max-width:42em}
.yc.v2 .v-acc details::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--courbe),content-visibility .35s allow-discrete}
.yc.v2 .v-acc details[open]::details-content{block-size:auto}

/* Frise du paiement. */
.yc.v2 .v-frise{position:relative;padding:clamp(18px,2.6vw,32px) 0}
.yc.v2 .v-frise ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.yc.v2 .v-frise ol::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--marine) 0 33.33%,var(--cyan) 33.33% 100%)}
.yc.v2 .v-frise li{position:relative;display:grid;grid-template-rows:28px auto auto;justify-items:center;align-content:start;gap:10px;text-align:center;padding:0 6px}
.yc.v2 .v-frise li .v-pt{align-self:center;width:28px;height:28px;box-shadow:0 0 0 4px var(--doux),0 0 0 6px var(--cyan-c)}
.yc.v2 .v-frise li.j .v-pt{width:16px;height:16px;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 0 4px var(--doux)}
.yc.v2 .v-frise li.f .v-pt{background:var(--cyan);box-shadow:0 0 0 4px var(--doux),0 0 0 6px var(--marine)}
.yc.v2 .v-frise li b{font:600 15px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v-frise li span{font-size:13.5px;line-height:1.4;color:var(--second)}
.yc.v2 .v-frise .comete{position:absolute;left:12.5%;top:calc(clamp(18px,2.6vw,32px) + 8px);width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(69,189,223,.3),0 0 16px rgba(69,189,223,.9);opacity:0}
html.v-anim .yc.v2 .v-frise.vu .comete{animation:v-frise 2.2s var(--courbe) .4s 1}
@keyframes v-frise{0%{opacity:0;left:12.5%}10%{opacity:1}90%{opacity:1}100%{opacity:0;left:87.5%}}

/* Fin de mission et colonnes de reponses. */
.yc.v2 .v-encadre{display:flex;gap:16px;align-items:center;margin-top:clamp(18px,2.2vw,26px);padding:18px 22px;border-radius:var(--r);background:var(--marine);color:#fff;font-size:17px}
.yc.v2 .v-encadre .ico{flex:none;display:block;width:40px;height:40px;border-radius:50%;background:var(--cyan);position:relative}
.yc.v2 .v-encadre .ico::after{content:"";position:absolute;inset:10px;background:var(--encre);-webkit-mask:var(--ok) center/contain no-repeat;mask:var(--ok) center/contain no-repeat}
.yc.v2 .v-cas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px)}
.yc.v2 .v-cas>div{padding-top:18px;border-top:3px solid var(--cyan-c)}
.yc.v2 .v-cas>div:nth-child(2){border-top-color:var(--cyan)}
.yc.v2 .v-cas>div:nth-child(3){border-top-color:var(--marine)}
.yc.v2 .v-cas .etiq{display:inline-block;font:600 12.5px/1 var(--inter);color:var(--marine);background:var(--ciel);border-radius:999px;padding:7px 11px}
.yc.v2 .v-cas h3{font:500 clamp(22px,1.9vw,27px)/1.18 var(--serif);color:var(--encre);margin:16px 0 8px}
.yc.v2 .v-cas p{color:var(--second);line-height:1.55;font-size:15.5px}


/* Commission et paiement (Comment ca marche, Portage salarial). */
.yc.v2 .v-com-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,56px);align-items:stretch;margin-top:clamp(22px,3vw,40px)}
.yc.v2 .v-com-g .v-marine{display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.yc.v2 .v-com-g .de{font:600 21px/1.3 var(--inter);color:#fff;margin-top:14px}
.yc.v2 .v-com-g .v-coches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-content:start}
.yc.v2 .v-ex{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,4vw,56px);margin-top:clamp(32px,4vw,52px);align-items:start}
.yc.v2 .v-ex-l{display:grid;gap:6px}
.yc.v2 .v-ex-r{display:grid;grid-template-columns:104px minmax(0,1fr) 86px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--bord);font-variant-numeric:tabular-nums}
.yc.v2 .v-ex-r .fac{font-weight:600;color:var(--encre)}
.yc.v2 .v-ex-r .jauge{position:relative;height:8px;border-radius:8px;background:var(--doux-2);overflow:hidden}
.yc.v2 .v-ex-r .jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--cyan)}
.yc.v2 .v-ex-r.min .jauge i{background:var(--marine)}
.yc.v2 .v-ex-r .com{text-align:right;font-weight:600;color:var(--encre)}
.yc.v2 .v-paie-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.yc.v2 .v-delai{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.yc.v2 .v-delai .ch{font:500 clamp(104px,11vw,160px)/.8 var(--serif);letter-spacing:-.04em;color:var(--encre)}
.yc.v2 .v-delai span{font:500 clamp(26px,2.6vw,36px)/1.1 var(--serif);color:var(--marine)}
.yc.v2 .v-dl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
.yc.v2 .v-dl b{display:block;color:var(--encre);font-weight:600;margin-bottom:4px}
.yc.v2 .v-dl p{font-size:15px;line-height:1.5;color:var(--second)}
@media (max-width:980px){.yc.v2 .v-com-g,.yc.v2 .v-ex,.yc.v2 .v-paie-g{grid-template-columns:1fr}}
@media (max-width:640px){.yc.v2 .v-com-g .v-coches,.yc.v2 .v-dl{grid-template-columns:1fr}.yc.v2 .v-ex-r{grid-template-columns:86px minmax(0,1fr) 72px;gap:10px;font-size:14.5px}}


/* Portage salarial : appuis depliables, simulation, conditions, hesitation. */
.yc.v2 .v-plus{margin-top:8px}
.yc.v2 .v-plus summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font:600 14px/1 var(--inter);color:var(--marine);padding:8px 0}
.yc.v2 .v-plus summary::-webkit-details-marker{display:none}
.yc.v2 .v-plus summary::after{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ciel);transition:transform .3s var(--courbe)}
.yc.v2 .v-plus[open] summary::after{transform:rotate(45deg)}
.yc.v2 .v-plus p{margin-top:4px;font-size:14.5px}
.yc.v2 .v-simu{margin-top:clamp(24px,3vw,40px);padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--cyan)}
.yc.v2 .v-cond{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(22px,3vw,40px);align-items:start}
.yc.v2 .v-cond>div:not(.v-marine){padding-top:clamp(24px,3.6vw,48px)}
.yc.v2 .v-hesite{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(24px,4vw,56px);margin-top:clamp(28px,3.4vw,44px);padding:clamp(20px,2.8vw,32px) 0 0;border-top:1px solid var(--bord)}
@media (max-width:980px){.yc.v2 .v-cond,.yc.v2 .v-hesite{grid-template-columns:1fr}.yc.v2 .v-cond>div:not(.v-marine){padding-top:0}}
@media (max-width:820px){.yc.v2 .v-filcols[style*="--n:4"]{grid-template-columns:1fr}}
@media (min-width:821px) and (max-width:1100px){.yc.v2 .v-filcols[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}.yc.v2 .v-filcols[style*="--n:4"]::before{display:none}.yc.v2 .v-filcols[style*="--n:4"]>*::before{z-index:1}.yc.v2 .v-filcols[style*="--n:4"]>*::after{content:"";position:absolute;z-index:0;left:0;right:-40px;top:-25px;height:2px;background:var(--cyan)}}


/* A propos, Ressources, bande ONG. */
.yc.v2 .v-fil-man{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 clamp(16px,2.4vw,32px);margin-top:clamp(28px,4vw,52px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--bord)}
.yc.v2 .v-fil-man .v-pt{margin-top:.55em;width:18px;height:18px}
.yc.v2 .v-ancre{color:inherit;text-decoration:none;background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.yc.v2 .v-ancre:hover{background-size:100% 3px}
.yc.v2 .v-bande .v-pts li{color:var(--sur-sombre)}
.yc.v2 .v-bande .v-pts li b{color:#fff}
.yc.v2 .v-bande .v-lien>span:first-child{background-image:linear-gradient(var(--cyan),var(--cyan))}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px){
  .yc.v2 .v-trio{grid-template-columns:minmax(118px,1fr) minmax(0,1.3fr) minmax(128px,1fr) minmax(0,1.3fr) minmax(118px,1fr)}
  .yc.v2 .v-av{width:70px;height:70px}.yc.v2 .v-av.spts{width:86px;height:86px;font-size:18px}
  .yc.v2 .v-flx{font-size:13px}
  .yc.v2 .v-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "d e"}
  .yc.v2 .v-tu.a{min-height:0}
  .yc.v2 .v-series{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .yc.v2 .v-cout-l{grid-template-columns:100px minmax(0,1fr) 130px 76px}
}
@media (max-width:980px){
  .yc.v2 .v-hero-g,.yc.v2 .v-pi-g,.yc.v2 .v-pi.typo .v-pi-g{grid-template-columns:1fr}
  .yc.v2 .v-scene{max-width:620px}
  .yc.v2 .v-portes{grid-template-columns:1fr 1fr}
  .yc.v2 .v-portes .v-ln-h{display:none}
  .yc.v2 .v-portes .v-porte:last-child{grid-column:1/-1;flex-direction:row}
  .yc.v2 .v-portes .v-porte:last-child .v-ph{height:auto;width:42%;flex:none;border-radius:var(--r-l) 0 0 var(--r-l)}
  .yc.v2 .v-portes .v-porte:last-child .v-pt{left:calc(42% - 7px);top:30px}
  .yc.v2 .v-conf-g,.yc.v2 .v-tete2,.yc.v2 .v-franc-g,.yc.v2 .v-faq-g,.yc.v2 .v-grp-c,.yc.v2 .v-preuves,.yc.v2 .v-regard,.yc.v2 .v-biblio,.yc.v2 .v-qs{grid-template-columns:1fr}
  .yc.v2 .v-parc-g{grid-template-columns:1fr}
  .yc.v2 .v-parc-cote{position:static}
  .yc.v2 .v-mini,.yc.v2 .v-mini-l{display:none}
  .yc.v2 .v-pi-photo{max-width:620px}
  .yc.v2 .v-pi-photo .carte{left:16px}
  .yc.v2 .v-appel-g{grid-template-columns:1fr}
  .yc.v2 .v-appel .fil-act .v-ln{display:none}
  .yc.v2 .v-bande{grid-template-columns:1fr}
  .yc.v2 .v-bande .v-ph{min-height:300px}
  .yc.v2 .v-qs-p{position:static}
  .yc.v2 .v-modeles{grid-template-columns:1fr}
  .yc.v2 .v-nums{--n:2}
}
@media (max-width:820px){
  /* Le schema passe a la verticale. */
  .yc.v2 .v-trio{grid-template-columns:1fr;row-gap:0;padding-left:34px}
  .yc.v2 .v-act-b{flex-direction:row;text-align:left;gap:16px;padding:10px 12px}
  .yc.v2 .v-act-b .tx{align-items:flex-start}
  .yc.v2 .v-act-b b{margin-top:0}
  .yc.v2 .v-av{width:58px;height:58px;flex:none}.yc.v2 .v-av.spts{width:64px;height:64px;font-size:15px}
  .yc.v2 .v-lia{margin-left:42px;padding:12px 0 12px 24px;gap:10px}
  .yc.v2 .v-lia::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--cyan);transition:opacity .35s}
  .yc.v2 .v-trio[data-focus] .v-lia:not(:has(.v-rel.on))::before{opacity:.22}
  .yc.v2 .v-ctr{text-align:left;padding-bottom:0}
  .yc.v2 .v-ctr .v-ln{display:none}
  .yc.v2 .v-flx,.yc.v2 .v-flx.g{flex-direction:row;font-size:14.5px}
  .yc.v2 .v-flx .lab{flex:1 1 auto;min-width:0;max-width:none}
  .yc.v2 .v-flx .v-tr{display:none}
  .yc.v2 .v-flx .ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid var(--marine);color:var(--marine);transition:transform .4s var(--courbe),background .3s,color .3s}
  .yc.v2 .v-flx.joue .ico{background:var(--marine);color:#fff;transform:translateY(var(--sens,4px))}
  .yc.v2 .v-mis{position:absolute;grid-column:auto;left:0;top:44px;bottom:44px;margin:0;width:20px;flex-direction:column;justify-content:center}
  .yc.v2 .v-mis::before{left:9px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--marine)}
  .yc.v2 .v-mis .bt{left:4px!important;right:auto!important}
  .yc.v2 .v-mis .bt.a{top:-6px;margin-top:0}.yc.v2 .v-mis .bt.b{top:auto;bottom:-6px;margin-top:0}
  .yc.v2 .v-mis .t{writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 4px;font-size:13px;background:var(--doux);margin-left:-1px}
  .yc.v2 .v-mis .t span{display:none}
  .yc.v2 .v-trio-c{padding:18px 14px 18px 10px}
  .yc.v2 .v-resp{grid-template-columns:1fr;min-height:0}
  .yc.v2 .v-resp ul{grid-template-columns:1fr}
  .yc.v2 .v-seg{grid-template-columns:1fr;gap:2px}
  .yc.v2 .v-seg::before{left:22px;right:auto;top:30px;bottom:30px;width:3px;height:auto}
  .yc.v2 .v-seg::after{left:22px;top:30px;width:3px;height:var(--avy,0px)}
  .yc.v2 .v-seg.statique::after{height:calc(100% - 60px);width:3px}
  .yc.v2 .v-seg-b{display:grid;grid-template-columns:46px 1fr;gap:0 16px;padding:8px 0}
  .yc.v2 .v-seg-b>*:not(.n){grid-column:2}
  .yc.v2 .v-seg-b .n{grid-row:1/6}
  .yc.v2 .v-seg-b h3{margin:10px 0 4px}
  .yc.v2 .v-seg-b .k{margin-top:12px}
  .yc.v2 .v-filcols,.yc.v2 .v-cas,.yc.v2 .v-facons,.yc.v2 .v-guides{grid-template-columns:1fr}
  .yc.v2 .v-filcols{padding-top:0;padding-left:34px;gap:22px}
  .yc.v2 .v-filcols::before{left:6px;right:auto;top:6px;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--cyan),var(--cyan) 85%,transparent)}
  .yc.v2 .v-filcols>*::before{left:-34px;top:2px}
  .yc.v2 .v-pts{--n:1!important;grid-template-columns:1fr}
  .yc.v2 .v-roles{grid-template-columns:1fr;grid-template-rows:auto 48px auto}
  .yc.v2 .v-roles .lien-c::before{left:50%;right:auto;top:0;bottom:0;width:3px;height:auto;margin-left:-1.5px}
  .yc.v2 .v-roles .col:not(.v-spts){padding-inline:4px}
  .yc.v2 .v-cycle{grid-template-columns:1fr;gap:0;padding-left:34px}
  .yc.v2 .v-cycle>div{padding:0 0 26px}
  .yc.v2 .v-cycle>div::before{left:-26px;right:auto;top:8px;bottom:-8px;width:3px;height:auto}
  .yc.v2 .v-cycle>div:last-child::before{background:linear-gradient(180deg,var(--cyan),transparent);right:auto}
  .yc.v2 .v-cycle>div::after{left:-33px;top:0}
  .yc.v2 .v-nums{--n:1}
  .yc.v2 .v-trois-couv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yc.v2 .v-tab thead th{font-size:14px}
}
@media (max-width:640px){
  .yc.v2{font-size:16px}
  .yc.v2 .v-prom{font-size:clamp(40px,11.6vw,56px)}
  .yc.v2 .v-scene .lbl{font-size:12px}
  .yc.v2 .v-scene .lbl b{padding:5px 8px}
  .yc.v2 .v-scene .noeud{width:52px;height:52px;font-size:13px}
  .yc.v2 .v-scene figcaption{margin-top:36px;font-size:13.5px}
  .yc.v2 .v-act .v-btn{width:100%;justify-content:center}
  .yc.v2 .v-portes{grid-template-columns:1fr;--hp:180px}
  .yc.v2 .v-portes .v-porte:last-child{flex-direction:column}
  .yc.v2 .v-portes .v-porte:last-child .v-ph{width:auto;height:var(--hp);border-radius:var(--r-l) var(--r-l) 0 0}
  .yc.v2 .v-portes .v-porte:last-child .v-pt{left:26px;top:calc(var(--hp) - 7px)}
  .yc.v2 .v-porte .corps{padding:22px 20px 20px}
  .yc.v2 .v-porte h3{font-size:24px}
  .yc.v2 .v-porte ul{margin:12px 0 16px;gap:5px}
  .yc.v2 .v-conf .grille-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .yc.v2 .v-conf .grille-logos li{height:70px;padding:10px}
  .yc.v2 .v-bento{grid-template-areas:"a a" "b b" "c c" "d e"}
  .yc.v2 .v-tu{padding:20px}
  .yc.v2 .v-tu.c{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .yc.v2 .v-tu.c .ch{margin:0}
  .yc.v2 .v-grp-c ul{grid-template-columns:1fr}
  .yc.v2 .v-appel .v-btn{width:100%;justify-content:center}
  .yc.v2 .v-appel .fil-act .v-pt{display:none}
  .yc.v2 .v-pi-photo .carte{position:relative;left:auto;bottom:auto;margin:-44px 14px 0;max-width:none}
  .yc.v2 .v-pi-photo .v-ph{aspect-ratio:4/3.1}
  .yc.v2 .v-parc-l .v-prog{left:21px}
  .yc.v2 .v-etape{grid-template-columns:44px minmax(0,1fr);gap:0 12px}
  .yc.v2 .v-etape .n{width:44px;height:44px;font-size:18px}
  .yc.v2 .v-etape .c{padding:12px 12px 14px}
  .yc.v2 .v-som .w{padding-top:6px;padding-bottom:6px}
  .yc.v2 .v-som .lbl{display:none}
  .yc.v2 .v-som a{font-size:13.5px;padding:8px 11px}
  .yc.v2 .v-detail{grid-template-columns:1fr;min-height:196px}
  .yc.v2 .v-barre{height:56px}.yc.v2 .v-barre button{height:44px}
  .yc.v2 .v-dec{font-size:13.5px}
  .yc.v2 .v-dec th,.yc.v2 .v-dec td{padding:9px 4px}
  .yc.v2 .v-dec td .pt{margin-right:6px}
  .yc.v2 .v-dec th:last-child,.yc.v2 .v-dec td:last-child{display:none}
  .yc.v2 .v-frise li b{font-size:13.5px}.yc.v2 .v-frise li span{font-size:12.5px}
  .yc.v2 .v-acc summary{font-size:16px}
  .yc.v2 .v-encadre{font-size:15.5px;padding:16px 18px}
  .yc.v2 .gros{font-size:84px}
  .yc.v2 .v-cout-l{grid-template-columns:1fr auto;gap:6px 12px}
  .yc.v2 .v-cout-l .bar{grid-column:1/-1;grid-row:2}
  .yc.v2 .v-cout-l .ec{grid-column:2}
  .yc.v2 .v-cout-l.t{display:none}
  .yc.v2 .v-cout-l .det{grid-column:1/-1;margin-top:0}
  .yc.v2 .v-tab,.yc.v2 .v-tab tbody,.yc.v2 .v-tab tr,.yc.v2 .v-tab th,.yc.v2 .v-tab td{display:block;width:auto}
  .yc.v2 .v-tab thead{display:none}
  .yc.v2 .v-tab tbody tr{padding:14px 0;border-bottom:1px solid var(--bord)}
  .yc.v2 .v-tab tbody th{border:0;padding:0 0 8px;width:auto}
  .yc.v2 .v-tab td{border:0;padding:8px 12px;border-radius:var(--r-s)}
  .yc.v2 .v-tab td::before{content:attr(data-l);display:block;font:600 12px/1.3 var(--inter);letter-spacing:.04em;text-transform:uppercase;color:var(--cyan-l);margin-bottom:3px}
  .yc.v2 .v-tab tbody tr:last-child .nous{border-radius:var(--r-s)}
  .yc.v2 .v-chaine li{grid-template-columns:1fr;justify-items:start;gap:6px}
  .yc.v2 .v-chaine .ln{width:100%;justify-content:flex-start;padding:4px 0 4px 18px}
  .yc.v2 .v-chaine .ln::before{left:8px;right:auto;top:0;bottom:0;width:3px;height:auto;margin-top:0}
  .yc.v2 .v-chaine .ln.v::before{border-top:0;border-left:2px dashed var(--marine);width:0}
  .yc.v2 .v-chaine .ln span{text-align:left;background:none;padding:0}
  .yc.v2 .v-une{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:end}
  .yc.v2 .v-trois-couv{grid-template-columns:1fr;gap:16px}
  .yc.v2 .v-trois-couv>li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
  .yc.v2 .v-trois-couv>li b{margin-top:0}
  .yc.v2 .v-series{grid-template-columns:1fr}
  .yc.v2 .v-verifs thead{display:none}
  .yc.v2 .v-verifs tr{display:block;padding:14px 0;border-bottom:1px solid var(--bord)}
  .yc.v2 .v-verifs td{display:block;border:0;padding:4px 0}
  .yc.v2 .v-verifs td:first-child{display:grid}
  .yc.v2 .v-verifs td:not(:first-child){padding-left:46px}
}
@media (max-width:400px){
  .yc.v2 .v-scene .mis{display:none}
}

/* Mouvement reduit : tout est affiche d'emblee, aucune animation. */
@media (prefers-reduced-motion:reduce){
  .yc.v2 *,.yc.v2 *::before,.yc.v2 *::after{animation:none!important;transition:none!important}
}

/* ================================================================
   PAGES DU SOCLE DES COLLEGUES : simulation et pages legales.
   Balisage conserve (formulaire et integration ERP), style aligne.
   ================================================================ */
/* Simulation : la progression devient le fil, les champs respirent. */
main.page.sim .prog .pstep b{width:32px;height:32px;font:600 14px/1 "Source Serif 4",Georgia,serif;transition:background .3s,border-color .3s,box-shadow .3s}
main.page.sim .prog .pstep + .pstep::before{height:3px;border-radius:3px;transition:background .4s}
main.page.sim .f input,main.page.sim .f select,main.page.sim .f textarea{border-radius:12px;padding:13px 14px;border-color:#C9D8E6;transition:border-color .2s,box-shadow .2s,background .2s}
main.page.sim .f input:hover,main.page.sim .f select:hover{border-color:#81CEE2}
main.page.sim .f input:focus,main.page.sim .f select:focus,main.page.sim .f textarea:focus{border-color:#45BDDF;box-shadow:0 0 0 4px rgba(69,189,223,.2)}
main.page.sim .f input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 4px rgba(179,38,30,.12)}
main.page.sim .btn{border-radius:999px;min-height:52px;padding:0 26px;font-weight:600}
main.page.sim .ferr{border-radius:12px;border-left:3px solid #B3261E}
main.page.sim .step.on{animation:v-etape .45s cubic-bezier(.22,.8,.24,1)}
@keyframes v-etape{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Pages legales : sommaire colle, section lue, lecture au fer a gauche. */
main.page .legal-toc a{text-align:left;border-radius:6px;padding:6px 10px;margin-left:-10px;transition:background .2s,color .2s}
main.page .legal-toc a:hover{background:#E8F5FB}
main.page .legal-toc a[aria-current="true"]{background:#10416C;color:#fff}
main.page .legal p,main.page .legal li{text-align:left!important;hyphens:manual!important;line-height:1.7}
main.page .legal-art{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){main.page.sim .step.on{animation:none}main.page.sim *{transition:none!important}}
main.page .legal-toc{align-items:flex-start}
@media (max-width:640px){.yc.v2 .v-chaine .ln.v::before{height:auto}.yc.v2 .v-btn{white-space:normal;text-align:left;line-height:1.25;padding-block:12px}}
.yc.v2 table.sr{display:block}

/* ================================================================
   PASSE 5 : la bibliotheque reelle des Ressources
   ================================================================ */
/* Couverture reelle, cliquable : c'est une action, elle repond. */
.yc.v2 .v-cimg{display:block;aspect-ratio:210/297;border-radius:6px;background:var(--doux-2) var(--img) center/cover no-repeat;box-shadow:0 1px 2px rgba(16,65,108,.12),0 12px 28px -16px rgba(16,65,108,.45);transition:transform .3s var(--courbe),box-shadow .3s}
.yc.v2 .v-cimg:hover,.yc.v2 .v-cimg:focus-visible{transform:translateY(-4px);box-shadow:0 2px 4px rgba(16,65,108,.14),0 22px 40px -18px rgba(16,65,108,.55)}
.yc.v2 .v-cimg:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:6px}
.yc.v2 .v-biblio{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px)}
.yc.v2 .v-doc .serie{font:600 12px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-doc h3{font:500 clamp(20px,1.7vw,24px)/1.18 var(--serif);color:var(--encre);margin:8px 0 6px;text-wrap:balance}
.yc.v2 .v-doc .txt>p:not(.serie){font-size:15px;line-height:1.5;color:var(--second)}
.yc.v2 .v-doc .v-lien{margin-top:6px;font-size:15px}
.yc.v2 .v-doc.une{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:end}
.yc.v2 .v-doc.une h3{font-size:clamp(25px,2.4vw,32px)}
.yc.v2 .v-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.yc.v2 .v-docs .v-cimg{margin-bottom:14px}
.yc.v2 .v-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.yc.v2 .v-meta li{font:600 12px/1 var(--inter);color:var(--second);background:var(--doux);border-radius:999px;padding:6px 9px}
.yc.v2 .v-fond .v-meta li{background:#fff}
.yc.v2 .v-meta li.etat{color:var(--cyan-l);background:var(--ciel)}
/* Guides : la couverture dit le theme par le fil. */
.yc.v2 .v-guides>li{grid-template-columns:96px minmax(0,1fr);align-items:start}
.yc.v2 .v-gcouv{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;border-radius:6px;padding:10px 8px;background:var(--marine);background-image:radial-gradient(90% 60% at 100% 0%,rgba(69,189,223,.35),transparent 60%)}
.yc.v2 .v-gcouv.clair{background:var(--ciel)}
.yc.v2 .v-gcouv svg{width:100%;height:auto;margin-bottom:10px}
.yc.v2 .v-gcouv i{font:600 9.5px/1.2 var(--inter);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-c)}
.yc.v2 .v-gcouv.clair i{color:var(--cyan-l)}
.yc.v2 .v-guides h3 a{color:inherit;text-decoration:none;background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.yc.v2 .v-guides h3 a:hover,.yc.v2 .v-guides h3 a:focus-visible{background-size:100% 2px}
/* Reperes : les vraies couvertures en vignette. */
.yc.v2 .v-series ol{gap:14px}
.yc.v2 .v-rep{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:start}
.yc.v2 .v-rep b{display:block;font:600 15px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v-rep b a{color:inherit;text-decoration:none}
.yc.v2 .v-rep b a:hover{text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}
.yc.v2 .v-rep span{display:block;font-size:14px;line-height:1.4;color:var(--second)}
.yc.v2 .v-rep .m{margin-top:4px;font:500 12px/1.3 var(--inter);color:var(--second)}
.yc.v2 .v-rep .m i{font-style:normal;color:var(--cyan-l)}
.yc.v2 .v-rep .m i.att{color:#8A5A00;font-weight:600}
.yc.v2 .v-rep .m i.att::before{content:"! ";font-weight:700}
@media (max-width:1100px){.yc.v2 .v-biblio{grid-template-columns:1fr}.yc.v2 .v-doc.une{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}}
@media (max-width:640px){.yc.v2 .v-docs{grid-template-columns:1fr;gap:20px}.yc.v2 .v-docs .v-doc{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}.yc.v2 .v-docs .v-cimg{margin:0}.yc.v2 .v-doc.une{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start}.yc.v2 .v-guides>li{grid-template-columns:72px minmax(0,1fr)}}
.yc.v2 .v-meta li{white-space:nowrap}
.yc.v2 .v-doc.une{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.yc.v2 .v-docs .v-cimg{max-width:150px}
@media (min-width:1101px){.yc.v2 .v-biblio{grid-template-columns:minmax(0,1.15fr) minmax(0,1.4fr)}}
@media (max-width:640px){.yc.v2 .v-gcouv i{display:none}.yc.v2 .v-docs .v-cimg{max-width:none}}

/* Passe 5 : fins de page, mosaique, repli sans script. */
.yc.v2 .v-grp{padding-block:clamp(28px,3.4vw,44px);background:var(--doux)}
.yc.v2 .v-grp-c{border:0;padding:0;border-radius:0;gap:12px clamp(20px,4vw,56px)}
.yc.v2 .v-grp-c h2{font:600 17px/1.3 var(--inter);margin:0 0 6px}
.yc.v2 .v-grp-c p{font-size:15px;margin-bottom:8px}
.yc.v2 .v-grp-c li b{font-size:14.5px}.yc.v2 .v-grp-c li span{font-size:13.5px}
.yc.v2 .v-tu.b .ch{font-size:clamp(48px,4.6vw,66px)}
.yc.v2 .v-tu.c .ch{font-size:clamp(30px,2.8vw,40px);line-height:1.05}
.yc.v2 .v-tu .cond{font-weight:600;color:var(--encre)}
.yc.v2 .v-qs-p .qq{display:none}
html:not(.v-js) .yc.v2 .v-qs-l{display:none}
html:not(.v-js) .yc.v2 .v-qs-p .qq{display:block;font:600 17px/1.35 var(--inter);color:var(--encre);margin-bottom:6px}
html:not(.v-js) .yc.v2 .v-qs-p [role="tabpanel"]{margin-bottom:22px}

/* Passe 5 : en-tete, bouton fixe mobile, bandeau cookies, meme famille que les pages. */
header .btn,#stick .btn,#cookie .btn,#panel .btn{border-radius:999px;font-weight:600;transition:background .2s,transform .2s,box-shadow .2s}
header .btn-p:hover,#stick .btn-p:hover,#cookie .btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(16,65,108,.8)}
header a:focus-visible,header button:focus-visible,#stick a:focus-visible,#cookie a:focus-visible,#cookie button:focus-visible,footer a:focus-visible,footer button:focus-visible,#panel a:focus-visible,#panel button:focus-visible{outline:3px solid #45BDDF;outline-offset:3px;border-radius:8px}
#cookie{border-radius:16px 16px 0 0}
@media (min-width:768px){#cookie{border-radius:16px}}
/* Le fil seulement la ou il dit une relation ou une progression : les listes
   d'arguments sont des colonnes ouvertes, sans ligne ni points. */
.yc.v2 .v-filcols.ouvert{padding-top:0}
.yc.v2 .v-filcols.ouvert::before,.yc.v2 .v-filcols.ouvert>*::before,.yc.v2 .v-filcols.ouvert>*::after{display:none}
@media (max-width:820px){.yc.v2 .v-filcols.ouvert{padding-left:0}}

/* Passe 7 : formulaire partenaires de la page agences, sur fond marine.
   Les cinq questions annoncees deviennent de vrais champs ; le fil reste
   la signature (pastilles numerotees cerclees de cyan). */
.yc.v2 .v-appel-g.v-pf-g{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
@media (max-width:860px){.yc.v2 .v-appel-g.v-pf-g{grid-template-columns:1fr}}
.yc.v2 .v-pf{display:grid;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(129,206,226,.28);border-radius:var(--r-l);padding:clamp(18px,3vw,28px)}
.yc.v2 .v-pf-f{display:grid;gap:6px}
.yc.v2 .v-pf label{display:flex;align-items:center;gap:8px;font:600 14px/1.35 var(--inter);color:#fff}
.yc.v2 .v-pf label i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cyan);font:600 11.5px/1 var(--inter);font-style:normal}
.yc.v2 .v-pf label small{font-weight:500;color:var(--sur-sombre);font-size:12px}
.yc.v2 .v-pf input,.yc.v2 .v-pf select,.yc.v2 .v-pf textarea{width:100%;font:16px/1.4 var(--inter);color:var(--encre);background:#fff;border:1.5px solid transparent;border-radius:10px;padding:11px 12px}
.yc.v2 .v-pf textarea{resize:vertical;min-height:84px}
.yc.v2 .v-pf :is(input,select,textarea):focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.yc.v2 .v-pf [aria-invalid="true"]{border-color:#F2A6A6;box-shadow:0 0 0 3px rgba(242,166,166,.35)}
.yc.v2 .v-pf-objet select{font-weight:600;background:var(--ciel)}
.yc.v2 .v-pf.v-pf-vu .v-pf-objet select{animation:v-pf-vu 1.2s ease}
@keyframes v-pf-vu{0%{box-shadow:0 0 0 0 rgba(69,189,223,.9)}100%{box-shadow:0 0 0 12px rgba(69,189,223,0)}}
.yc.v2 .v-pf p.v-pf-err{margin:0;font-size:14px;color:#FFD2D2}
.yc.v2 .v-pf p.v-pf-ok{margin:0;font-size:14px;color:#fff;background:rgba(69,189,223,.18);border-radius:10px;padding:10px 12px}
.yc.v2 .v-pf p.v-pf-note{margin:0;font-size:13px;line-height:1.5;color:var(--sur-sombre)}
.yc.v2 .v-pf-note a{color:#fff}
@media (prefers-reduced-motion:reduce){.yc.v2 .v-pf.v-pf-vu .v-pf-objet select{animation:none}}

/* Passe 7 : la tuile du delai porte ce qu'elle mesure ; la Gestion salariale est distinguee
   des offres ou SPTS devient employeur, sous les trois portes de l'accueil. */
.yc.v2 .v-tu .lib{margin:0 0 6px;font:600 13px/1.3 var(--inter);letter-spacing:.02em;color:var(--second)}
@media (max-width:860px){.yc.v2 .v-tu.c .lib{flex-basis:100%;margin:0}}
.yc.v2 .v-autre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:28px 0 0;padding:16px 20px;border-radius:var(--r);background:var(--doux);border-left:3px solid var(--cyan);font-size:15.5px;line-height:1.5;color:var(--corps)}
.yc.v2 .v-autre-t{flex:1 1 30em}
.yc.v2 .v-autre b{color:var(--encre)}
.yc.v2 .v-trio-eor+.v-roles{margin-top:clamp(28px,4vw,48px)}

/* Passe 7 : Gestion salariale. Le meme code que le schema des trois acteurs, mais l'employeur
   (marine cercle de cyan) est votre entreprise, et SPTS un prestataire relie par un mandat. */
.yc.v2 .v-gs-sch{display:grid;gap:16px;margin:0 0 clamp(28px,4vw,44px);padding:clamp(18px,3vw,28px);background:#fff;border-radius:var(--r-l)}
.yc.v2 .v-gs-d{display:grid;grid-template-columns:auto minmax(60px,1fr) auto minmax(60px,1fr) auto;align-items:center;gap:0 4px}
.yc.v2 .v-gs-d .nd{display:grid;justify-items:center;text-align:center;gap:2px;padding:12px 16px;border-radius:999px;border:2px solid var(--marine);background:#fff;min-width:9.5em}
.yc.v2 .v-gs-d .nd b{font:600 15px/1.2 var(--inter);color:var(--encre)}
.yc.v2 .v-gs-d .nd small{font:500 12.5px/1.2 var(--inter);color:var(--second)}
.yc.v2 .v-gs-d .nd.emp{background:var(--marine);border-color:var(--marine);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cyan)}
.yc.v2 .v-gs-d .nd.emp b{color:#fff}.yc.v2 .v-gs-d .nd.emp small{color:var(--cyan-c)}
.yc.v2 .v-gs-d .lk{display:grid;justify-items:center;gap:6px;padding:0 6px}
.yc.v2 .v-gs-d .lk i{display:block;width:100%;height:4px;border-radius:2px;background:var(--cyan)}
.yc.v2 .v-gs-d .lk small{font:600 12.5px/1.25 var(--inter);color:var(--encre);text-align:center}
.yc.v2 .v-gs-sch>p{margin:0;font-size:15.5px;color:var(--corps);max-width:46em}
@media (max-width:760px){
  .yc.v2 .v-gs-d{grid-template-columns:1fr;justify-items:center;gap:0}
  .yc.v2 .v-gs-d .lk{grid-template-columns:auto auto;align-items:center;padding:6px 0}
  .yc.v2 .v-gs-d .lk i{width:4px;height:30px}
}

/* Passe 7 : Ressources, aiguillage par situation. Trois besoins, trois documents chacun, sous
   l'index par format ; le fil marque chaque besoin. */
.yc.v2 .v-situ{margin-top:clamp(24px,3.4vw,40px);border-top:1px solid var(--bord);padding-top:20px}
.yc.v2 .v-situ-t{margin:0 0 10px;font:600 12.5px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-situ ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.yc.v2 .v-situ li{display:grid;grid-template-columns:minmax(12em,15em) minmax(0,1fr);gap:6px 20px;align-items:baseline;padding:10px 0 10px 22px;position:relative}
.yc.v2 .v-situ li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:10px;border-radius:50%;background:var(--marine);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cyan)}
.yc.v2 .v-situ li b{font:600 16px/1.35 var(--inter);color:var(--encre)}
.yc.v2 .v-situ li>span{display:flex;flex-wrap:wrap;gap:6px 22px}
.yc.v2 .v-situ li a{font-size:15.5px;color:var(--marine);text-decoration-color:var(--cyan);text-underline-offset:3px}
.yc.v2 .v-situ li small{font-size:12.5px;color:var(--second);white-space:nowrap}
@media (max-width:700px){.yc.v2 .v-situ li{grid-template-columns:1fr}}

/* Passe 7 : le bouton fixe du mobile se retire quand une action principale est deja visible. */
#stick{transition:transform .25s var(--courbe,ease),visibility 0s}
#stick.v-cache{transform:translateY(110%);visibility:hidden;transition:transform .25s var(--courbe,ease),visibility 0s .25s}
@media (prefers-reduced-motion:reduce){#stick,#stick.v-cache{transition:none}}

/* Passe 7 : sur mobile, la scene (les personnes, le fil, SPTS) remonte juste apres l'action ;
   la mention detaillee de l'autorisation passe sous la photo. La pastille « Autorisee par le
   canton de Geneve et le SECO » reste en tete. */
@media (max-width:860px){
  .yc.v2 .v-hero-g{gap:22px}
  .yc.v2 .v-hero-g>div:first-child{display:contents}
  .yc.v2 .v-hero-g>div:first-child>*{min-width:0}
  .yc.v2 .v-hero-g .v-chip{order:1;justify-self:start}
  .yc.v2 .v-hero-g .v-prom{order:2;margin:0}
  .yc.v2 .v-hero-g .v-lead{order:3;margin:0}
  .yc.v2 .v-hero-g .v-act{order:4;margin:0}
  .yc.v2 .v-hero-g .v-scene{order:5}
  .yc.v2 .v-hero-g .v-aut{order:6;margin:0}
}
.yc.v2 .v-appel p.v-appel-autres{margin-top:18px;font-size:15px;color:var(--sur-sombre)}
.yc.v2 .v-appel-autres a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}
/* Passe 7 : le contrat de l'agence avec son client est un contrat (trait plein), mais pas celui
   de SPTS : cyan clair. Le tirete reste reserve a la mission. */
.yc.v2 .v-chaine .ln.hors::before{background:var(--cyan-c)}
/* Passe 7 : l'etiquette « Selectionne » garde sa place, visible ou non : la selection d'un
   acteur ne change plus la hauteur du schema. */
.yc.v2 .v-act-b .sel{display:inline-block;visibility:hidden}
.yc.v2 .v-act-b[aria-pressed="true"] .sel{visibility:visible}
/* Passe 7 : qui est l'employeur, dit sur chaque carte. Marine cercle de cyan quand c'est SPTS,
   contour seul quand c'est le client. */
.yc.v2 .v-facons a span.emp{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--inter);letter-spacing:.05em;text-transform:uppercase;color:var(--marine);margin-bottom:10px}
.yc.v2 .v-facons a span.emp::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--marine);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cyan)}
.yc.v2 .v-facons a span.emp.vous{color:var(--second)}
.yc.v2 .v-facons a span.emp.vous::before{background:#fff;box-shadow:inset 0 0 0 2px var(--marine)}
html:not(.mode-interne) .yc.v2 .aconf{display:none!important}
/* Passe 7 : pages de services sur mobile, meme ordre que l'accueil : la photo et sa carte
   remontent juste apres l'action, la ligne de preuves passe dessous. */
@media (max-width:860px){
  .yc.v2 .v-pi:not(.typo) .v-pi-g{gap:20px}
  .yc.v2 .v-pi:not(.typo) .v-pi-g>div:first-child{display:contents}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-sur{order:1;margin:0}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-h1{order:2;margin:0}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-lead{order:3;margin:0}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-act{order:4;margin:0}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-pi-photo{order:5}
  .yc.v2 .v-pi:not(.typo) .v-pi-g .v-preuve-l{order:6;margin:0}
}

/* ================================================================
   V13 (07.10.2026) : landing et « Pour les entreprises » allegees.
   Moins de densite, schemas simples, une relation lisible en quelques
   secondes. Meme palette, memes polices, memes animations.
   ================================================================ */
.yc.v2 .v13-tete{max-width:54rem;margin-bottom:clamp(26px,3.2vw,46px)}
.yc.v2 .v13-tete .v-h2{margin-bottom:.18em}
.yc.v2 .v13-tete .v-lead{max-width:40em;margin-top:8px}
.yc.v2 .v13-tete.c{text-align:center;margin-inline:auto}
.yc.v2 .v13-tete.c .v-lead{margin-inline:auto}

/* Hero : une photo seule, sans voile ni schema */
.yc.v2 .v-hero .v-scene .v-ph::after{display:none}

/* Icones au trait, reservees aux trois acteurs */
.yc.v2 .v13-rel .ic,.yc.v2 .v13-axe .ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-s);background:var(--doux);color:var(--marine)}
.yc.v2 .v13-rel .ic svg,.yc.v2 .v13-axe .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v13-rel .tx,.yc.v2 .v13-axe .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.yc.v2 .v13-rel .tx b,.yc.v2 .v13-axe .tx b{font:500 clamp(19px,1.6vw,22px)/1.15 var(--serif);color:var(--encre)}
.yc.v2 .v13-rel .tx span,.yc.v2 .v13-axe .tx span{font-size:15px;line-height:1.35;color:var(--second)}

/* Landing, « Du premier appel au premier bulletin » : SPTS au centre */
.yc.v2 .v13-rel{display:grid;grid-template-columns:minmax(0,1fr) minmax(118px,.66fr) minmax(0,1.04fr) minmax(118px,.66fr) minmax(0,1fr);align-items:center;gap:0 6px}
.yc.v2 .v13-rel .v13-act{display:flex;align-items:center;gap:14px;padding:20px 22px;background:#fff;border:1px solid var(--bord);border-radius:var(--r)}
.yc.v2 .v13-rel .v13-act.spts{flex-direction:column;justify-content:center;gap:6px;padding:30px 22px;text-align:center;border-color:var(--cyan-c);background:linear-gradient(180deg,#fff,var(--ciel));box-shadow:var(--ombre)}
.yc.v2 .v13-rel .v13-act.spts b{font:500 clamp(28px,2.5vw,36px)/1 var(--serif);letter-spacing:.01em;color:var(--marine)}
.yc.v2 .v13-rel .v13-act.spts .r{font:600 16px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v13-rel .v13-act.spts .m{margin-top:6px;padding-top:10px;border-top:1px solid var(--bord);font-size:14.5px;line-height:1.4;color:var(--second)}
.yc.v2 .v13-lien{display:grid;justify-items:center;gap:9px;padding:0 6px;text-align:center}
.yc.v2 .v13-lien .h,.yc.v2 .v13-lien .b{font:500 13.5px/1.3 var(--inter);color:var(--second)}
.yc.v2 .v13-lien .b{display:inline-flex;align-items:center;gap:6px;color:var(--marine);font-weight:600}
.yc.v2 .v13-lien .ln{display:block;width:100%;height:2px;border-radius:2px;background:var(--cyan)}
.yc.v2 .v13-lien .fl,.yc.v2 .v13-fl .fl{width:16px;height:16px;color:var(--marine)}
.yc.v2 .v13-lien .fl.g,.yc.v2 .v13-fl .fl.g{transform:rotate(180deg)}
.yc.v2 .v13-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(20px,3vw,44px);margin-top:clamp(36px,4.4vw,60px)}
.yc.v2 .v13-etapes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.yc.v2 .v13-etapes .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ciel);font:600 17px/1 var(--serif);color:var(--marine)}
.yc.v2 .v13-etapes li>div{padding-left:16px;border-left:1px solid var(--bord)}
.yc.v2 .v13-etapes h3{font:600 17px/1.3 var(--inter);color:var(--encre);margin-bottom:5px}
.yc.v2 .v13-etapes p{font-size:15.5px;line-height:1.5;color:var(--second)}
.yc.v2 .v13-suite{margin-top:clamp(26px,3vw,38px)}

/* Entreprises, « Qui fait quoi » : un axe horizontal, le consultant au centre */
.yc.v2 .v13-axe{display:grid;grid-template-columns:auto minmax(110px,1fr) auto minmax(110px,1fr) auto;align-items:center;gap:0 18px;padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px);background:#fff;border:1px solid var(--bord);border-radius:var(--r-l);box-shadow:var(--ombre)}
.yc.v2 .v13-axe .v13-act{display:flex;align-items:center;gap:14px}
.yc.v2 .v13-axe .v13-act.centre{padding:18px 26px;background:var(--doux);border:1px solid var(--bord);border-radius:var(--r)}
.yc.v2 .v13-axe .v13-act.centre .ic{background:#fff}
.yc.v2 .v13-axe .v13-act.ent{text-align:right}
.yc.v2 .v13-axe .v13-act.ent .tx{align-items:flex-end}
.yc.v2 .v13-axe .v13-act.ent .ic{background:var(--ciel)}
.yc.v2 .v13-fl{display:flex;align-items:center;gap:10px}
.yc.v2 .v13-fl span{flex:none;max-width:9.5em;font:600 13.5px/1.25 var(--inter);color:var(--marine);text-align:center}
.yc.v2 .v13-fl .ln{flex:1;min-width:16px;height:2px;border-radius:2px;background:var(--cyan)}
.yc.v2 .v13-fl .ln{order:0}
.yc.v2 .v13-fl span{order:1}
.yc.v2 .v13-fl .fl{order:2}
.yc.v2 .v13-fl.g .fl{order:0;color:var(--cyan-l)}
.yc.v2 .v13-fl.g span{order:1;color:var(--cyan-l)}
.yc.v2 .v13-fl.g .ln{order:2;background:var(--cyan-c)}
.yc.v2 .v13-fl.g .ln[data-trace]{transform-origin:right center}
.yc.v2 .v13-contrats{max-width:46rem;margin:16px auto 0;text-align:center;font-size:14.5px;line-height:1.5;color:var(--second)}
.yc.v2 .v13-resp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(28px,4.4vw,72px);margin-top:clamp(30px,3.6vw,48px)}
.yc.v2 .v13-resp>div{padding-top:18px;border-top:2px solid var(--cyan)}
.yc.v2 .v13-resp>div+div{border-top-color:var(--cyan-c)}
.yc.v2 .v13-resp h3{font:600 13px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l);margin-bottom:14px}
.yc.v2 .v13-resp ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.yc.v2 .v13-resp li{position:relative;padding-left:17px;font-size:15.5px;line-height:1.4;color:var(--corps)}
.yc.v2 .v13-resp li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}

/* Entreprises, le cout : un tableau, le total en marine */
.yc.v2 .v13-tab{border:1px solid var(--bord);border-radius:var(--r-l);background:#fff;box-shadow:var(--ombre);padding:6px clamp(10px,1.8vw,22px) 14px}
.yc.v2 .v13-tab table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.yc.v2 .v13-tab thead th{padding:22px 22px 14px;text-align:right;vertical-align:bottom;font:600 12.5px/1.3 var(--inter);letter-spacing:.07em;text-transform:uppercase;color:var(--second)}
.yc.v2 .v13-tab thead th:first-child{text-align:left}
.yc.v2 .v13-tab thead small{display:block;margin-top:3px;font:400 12.5px/1.2 var(--inter);letter-spacing:0;text-transform:none;opacity:.85}
.yc.v2 .v13-tab .op{margin-right:8px;font:600 15px/1 var(--inter);color:var(--cyan)}
.yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{padding:20px 22px;border-top:1px solid var(--bord);text-align:right;font-size:16px;color:var(--corps);white-space:nowrap}
.yc.v2 .v13-tab tbody th{text-align:left;font-weight:600;font-size:17px;color:var(--encre)}
.yc.v2 .v13-tab .tot{background:var(--marine);color:#fff}
.yc.v2 .v13-tab thead th.tot{color:var(--cyan-c);border-radius:var(--r) var(--r) 0 0}
.yc.v2 .v13-tab thead th.tot .op{color:var(--cyan-c)}
.yc.v2 .v13-tab tbody td.tot{font-weight:600;font-size:19px;color:#fff;border-top-color:rgba(255,255,255,.14)}
.yc.v2 .v13-tab tbody tr:last-child td.tot{border-radius:0 0 var(--r) var(--r)}

/* L'avertissement : visible, secondaire, a cote de l'action */
.yc.v2 .v13-avert{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;margin-top:clamp(24px,3vw,36px);padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);border-radius:var(--r);background:var(--ciel);border-left:3px solid var(--cyan)}
.yc.v2 .v13-avert .t{display:flex;align-items:center;gap:10px;margin-bottom:6px;font:600 16px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v13-avert .i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cyan-l);font:italic 600 12.5px/1 var(--serif);color:var(--cyan-l)}
.yc.v2 .v13-avert .t+p{font-size:15px;line-height:1.55;color:var(--corps);max-width:46em}

/* Entreprises, les delais : les facteurs sur une ligne */
.yc.v2 .v13-facteurs{grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;margin-top:4px;padding-top:20px;border-top:1px solid var(--bord);font-size:15px;line-height:1.4;color:var(--second)}
.yc.v2 .v13-facteurs span{white-space:nowrap}
.yc.v2 .v13-facteurs .l{margin-right:14px;font-weight:600;color:var(--encre)}
.yc.v2 .v13-facteurs .l+span~span::before{content:"·";margin:0 12px;color:var(--cyan);font-weight:700}

@media (max-width:1100px){
  .yc.v2 .v13-facteurs{flex-wrap:wrap;row-gap:6px}
  .yc.v2 .v13-tab thead th,.yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{padding-inline:14px}
}
@media (max-width:980px){
  .yc.v2 .v13-rel{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:0}
  .yc.v2 .v13-lien{grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);align-items:center;gap:0 14px;padding:4px 0}
  .yc.v2 .v13-lien .h{text-align:right;justify-self:end}
  .yc.v2 .v13-lien .ln{width:2px;height:44px}
  .yc.v2 .v13-lien .b{justify-self:start}
  .yc.v2 .v13-lien .fl{transform:rotate(90deg)}
  .yc.v2 .v13-lien .fl.g{transform:rotate(-90deg)}
  .yc.v2 .v13-axe{grid-template-columns:1fr;justify-items:center;gap:6px;max-width:520px;margin-inline:auto;text-align:center}
  .yc.v2 .v13-axe .v13-act,.yc.v2 .v13-axe .v13-act.ent{flex-direction:column;text-align:center;gap:8px}
  .yc.v2 .v13-axe .v13-act.ent .tx{align-items:center}
  .yc.v2 .v13-axe .v13-act.ent .ic{order:-1}
  .yc.v2 .v13-fl,.yc.v2 .v13-fl.g{flex-direction:column;gap:6px}
  .yc.v2 .v13-fl .ln{flex:none;width:2px;height:22px;min-width:0}
  .yc.v2 .v13-fl .fl{transform:rotate(90deg)}
  .yc.v2 .v13-fl.g .fl{transform:rotate(-90deg)}
  .yc.v2 .v-regard>.v-ph{order:3}
  .yc.v2 .v-regard>.v13-facteurs{order:2;margin-top:0}
}
@media (max-width:820px){
  .yc.v2 .v13-etapes{grid-template-columns:1fr;gap:22px}
  .yc.v2 .v13-resp{grid-template-columns:1fr}
}
@media (max-width:640px){
  .yc.v2 .v13-resp ul{grid-template-columns:1fr}
  .yc.v2 .v13-avert{grid-template-columns:1fr}
  .yc.v2 .v13-facteurs{display:grid;gap:6px}
  .yc.v2 .v13-facteurs .l{margin:0 0 2px}
  .yc.v2 .v13-facteurs .l+span~span::before{content:none}
  .yc.v2 .v13-facteurs span:not(.l){position:relative;padding-left:17px;white-space:normal}
  .yc.v2 .v13-facteurs span:not(.l)::after{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
  /* Le tableau devient une carte par salaire */
  .yc.v2 .v13-tab{border:0;box-shadow:none;padding:0;background:transparent}
  .yc.v2 .v13-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .yc.v2 .v13-tab table,.yc.v2 .v13-tab tbody{display:block}
  .yc.v2 .v13-tab tbody tr{display:grid;margin-bottom:12px;padding:6px 16px 14px;border:1px solid var(--bord);border-radius:var(--r);background:#fff}
  .yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:0;border-bottom:1px solid var(--bord);white-space:normal}
  .yc.v2 .v13-tab tbody th::before,.yc.v2 .v13-tab tbody td::before{content:attr(data-l);font:500 14px/1.3 var(--inter);color:var(--second);text-align:left}
  .yc.v2 .v13-tab tbody td.tot{margin-top:10px;padding:12px 14px;border:0;border-radius:var(--r-s)}
  .yc.v2 .v13-tab tbody tr:last-child td.tot{border-radius:var(--r-s)}
  .yc.v2 .v13-tab tbody td.tot::before{color:var(--sur-sombre)}
}
/* Les paragraphes du prototype sont forces a gauche : les deux textes centres de V13 font exception */
main.page .yc.v2 .v13-tete.c p,main.page .yc.v2 p.v13-contrats{text-align:center!important}
.yc.v2 .v13-tete.c .v-lead{margin-top:12px}
@media (max-width:640px){.yc.v2 .v13-tab tbody td.tot{white-space:nowrap;font-size:18px}.yc.v2 .v13-tab tbody td.tot::before{font-size:13px}}
/* V13, tablette : l'axe passe en vertical, les facteurs en liste sur deux colonnes */
@media (max-width:1100px){
  .yc.v2 .v13-rel .ic{display:none}
  .yc.v2 .v13-rel .v13-act{padding:16px 18px}
  .yc.v2 .v13-axe{grid-template-columns:1fr;justify-items:center;gap:6px;max-width:520px;margin-inline:auto;text-align:center}
  .yc.v2 .v13-axe .v13-act,.yc.v2 .v13-axe .v13-act.ent{flex-direction:column;text-align:center;gap:8px}
  .yc.v2 .v13-axe .v13-act.ent .tx{align-items:center}
  .yc.v2 .v13-axe .v13-act.ent .ic{order:-1}
  .yc.v2 .v13-fl,.yc.v2 .v13-fl.g{flex-direction:column;gap:6px}
  .yc.v2 .v13-fl .ln{flex:none;width:2px;height:22px;min-width:0}
  .yc.v2 .v13-fl .fl{transform:rotate(90deg)}
  .yc.v2 .v13-fl.g .fl{transform:rotate(-90deg)}
  .yc.v2 .v13-facteurs{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 36px}
  .yc.v2 .v13-facteurs .l{grid-column:1/-1;margin:0 0 2px}
  .yc.v2 .v13-facteurs .l+span~span::before{content:none}
  .yc.v2 .v13-facteurs span:not(.l){position:relative;padding-left:17px}
  .yc.v2 .v13-facteurs span:not(.l)::after{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
}
@media (max-width:640px){.yc.v2 .v13-facteurs{grid-template-columns:1fr}}
@media (max-width:640px){.yc.v2 .v13-tab thead{display:none}}
@media (max-width:640px){.yc.v2 .v13-tab tbody tr{grid-template-columns:minmax(0,1fr)}.yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{min-width:0;width:auto}.yc.v2 .v13-tab table{table-layout:auto;min-width:0}}
@media (max-width:640px){.yc.v2 .v13-tab tbody th::before,.yc.v2 .v13-tab tbody td::before{white-space:normal;min-width:0}}
@media (max-width:640px){.yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{white-space:nowrap}}

/* ===== V14, 08.10.2026 : bandeau commun des pages Services, accueil, entreprises, portage ===== */
/* Accueil : les secteurs passent en une ligne discrete sous les logos */
.yc.v2 .v-conf .secteurs{margin-top:18px;padding-top:14px;border-top:1px solid var(--bord);font:500 13px/1.6 var(--inter);letter-spacing:.02em;color:var(--second);text-align:center}
/* Entreprises : deux panneaux de responsabilites, SPTS en marine, l'entreprise en blanc */
.yc.v2 .v14-roles{margin-top:clamp(30px,3.6vw,48px)}
.yc.v2 .v14-roles .col{border-radius:var(--r-l)}
.yc.v2 .v14-roles .v14-vous{background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre)}
.yc.v2 .v14-roles h3{margin:10px 0 18px}
.yc.v2 .v14-roles ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.yc.v2 .v14-roles li{font:500 16px/1.4 var(--inter);color:var(--encre)}
.yc.v2 .v14-roles .v-spts li{color:#fff}
@media (max-width:640px){.yc.v2 .v14-roles ul{grid-template-columns:1fr}.yc.v2 .v-roles.v14-roles .col:not(.v-spts){padding-inline:clamp(22px,3vw,40px)}}
/* Entreprises : tableau des couts plus dense */
@media (min-width:641px){
  .yc.v2 .v13-tab thead th{padding:16px 22px 10px}
  .yc.v2 .v13-tab tbody th,.yc.v2 .v13-tab tbody td{padding-block:12px}
}
/* Entreprises et portage : references sans description */
.yc.v2 .v-preuves .liste>div{padding:14px 0}
.yc.v2 .v-preuves .liste h3{margin-bottom:0}
.yc.v2 .v-preuves .liste .v-lien{margin-top:8px}
/* Portage : la phrase sous les deux blocs */
.yc.v2 .v14-phrase{margin-top:clamp(22px,2.6vw,34px);text-align:center;font:500 clamp(17px,1.5vw,20px)/1.35 var(--serif);color:var(--second)}
@media (min-width:821px){.yc.v2 .v14-phrase{white-space:nowrap}}
/* Portage : trois montants, une commission */
.yc.v2 .v14-franc .v-lead{margin-top:12px;max-width:62ch}
.yc.v2 .v14-montants{display:grid;grid-template-columns:minmax(0,1.15fr) 44px minmax(0,1fr) auto 44px minmax(0,1fr);align-items:center;margin-top:clamp(26px,3.2vw,44px);list-style:none;padding:0}
.yc.v2 .v14-montants>li{position:relative}
.yc.v2 .v14-montants .net,.yc.v2 .v14-montants .brut,.yc.v2 .v14-montants .fac{padding:clamp(20px,2.4vw,30px);border-radius:var(--r-l);background:#fff;border:1px solid var(--bord)}
.yc.v2 .v14-montants .net{background:var(--marine);border-color:var(--marine);color:#fff;background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v14-montants .l{display:block;font:600 12.5px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v14-montants .net .l{color:var(--cyan-c)}
.yc.v2 .v14-montants .m{display:block;margin-top:10px;font:500 clamp(28px,2.9vw,42px)/1.05 var(--serif);color:var(--encre);white-space:nowrap}
.yc.v2 .v14-montants .net .m{color:#fff;font-size:clamp(32px,3.3vw,48px)}
.yc.v2 .v14-montants .brut{grid-column:3}
.yc.v2 .v14-montants .com{grid-column:4;margin-left:12px;padding:8px 14px;border-radius:999px;background:var(--ciel);font:500 13.5px/1.3 var(--inter);color:var(--second);white-space:nowrap}
.yc.v2 .v14-montants .fac{grid-column:6}
.yc.v2 .v14-montants .brut::before,.yc.v2 .v14-montants .fac::before{content:"";position:absolute;right:100%;top:50%;width:44px;height:2px;background:var(--cyan)}
.yc.v2 .v14-montants .brut::after,.yc.v2 .v14-montants .fac::after{content:"";position:absolute;right:calc(100% + 34px);top:50%;width:9px;height:9px;margin-top:-4.5px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(45deg)}
.yc.v2 .v14-montants .fac::before{right:calc(100% + 0px)}
.yc.v2 .v14-hyp{margin-top:14px;max-width:110ch;font-size:12.5px;line-height:1.55;color:var(--second);opacity:.9}
.yc.v2 .v14-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,3vw,44px);margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:2px solid var(--cyan)}
.yc.v2 .v14-coches{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0}
.yc.v2 .v14-coches li{position:relative;padding-left:22px;font-size:15px;line-height:1.4;color:var(--corps)}
.yc.v2 .v14-coches li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--cyan-l)}
@media (max-width:1100px){
  .yc.v2 .v14-montants{grid-template-columns:minmax(0,1fr);gap:0}
  .yc.v2 .v14-montants .brut,.yc.v2 .v14-montants .com,.yc.v2 .v14-montants .fac{grid-column:1}
  .yc.v2 .v14-montants .brut,.yc.v2 .v14-montants .fac{margin-top:34px}
  .yc.v2 .v14-montants .com{justify-self:center;margin:14px 0 0}
  .yc.v2 .v14-montants .brut::before,.yc.v2 .v14-montants .fac::before{right:auto;left:50%;top:auto;bottom:100%;width:2px;height:34px;margin-left:-1px}
  .yc.v2 .v14-montants .brut::after,.yc.v2 .v14-montants .fac::after{right:auto;left:50%;top:auto;bottom:calc(100% + 24px);margin:0 0 0 -4.5px;transform:rotate(135deg)}
  .yc.v2 .v14-montants .fac::before{height:34px}
  .yc.v2 .v14-montants .net,.yc.v2 .v14-montants .brut,.yc.v2 .v14-montants .fac{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .yc.v2 .v14-montants .m{margin-top:0}
}
/* Portage : le 4 % moins dominant */
.yc.v2 .v14-cond .gros{font-size:clamp(76px,8vw,116px)}
@media (max-width:640px){.yc.v2 .v14-cond .gros{font-size:84px}}
/* Portage : comparaison allegee */
.yc.v2 .v14-cmp .v-tab th,.yc.v2 .v14-cmp .v-tab td{padding:13px 18px}
.yc.v2 .v14-cmp .v-tab{margin-top:clamp(8px,1vw,14px)}
.yc.v2 .v14-cmp .v-hesite{margin-top:clamp(32px,4vw,52px);padding:clamp(20px,2.6vw,30px);border:0;border-radius:var(--r);background:var(--ciel);align-items:center}
/* V14 : la commission posee sur le fil entre le brut et la facture */
.yc.v2 .v14-franc .v-lead{max-width:80ch}
@media (min-width:1101px){
  .yc.v2 .v14-montants{grid-template-columns:minmax(0,1.15fr) 44px minmax(0,1fr) minmax(200px,.85fr) minmax(0,1fr)}
  .yc.v2 .v14-montants .com{grid-column:4;margin:0;padding:0;background:none;display:flex;justify-content:center;align-items:center;align-self:stretch}
  .yc.v2 .v14-montants .com::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--cyan)}
  .yc.v2 .v14-montants .com::after{content:"";position:absolute;left:2px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(45deg)}
  .yc.v2 .v14-montants .com span{position:relative;padding:8px 14px;border-radius:999px;background:var(--ciel);border:1px solid var(--ciel-2)}
  .yc.v2 .v14-montants .fac{grid-column:5}
  .yc.v2 .v14-montants .fac::before,.yc.v2 .v14-montants .fac::after{display:none}
}
.yc.v2 .w p.v14-phrase{display:block;max-width:none;width:100%;margin-inline:auto;text-align:center}
main.page .yc.v2 p.v14-phrase{text-align:center!important}

/* ===== V15, 08.10.2026 : « De la facture au salaire », un panneau éditorial à barres proportionnelles ===== */
.yc.v2 .v15-flux{margin-top:clamp(24px,3vw,40px);padding:clamp(22px,3.2vw,44px);border-radius:var(--r-l);background:#fff;box-shadow:var(--ombre)}
.yc.v2 .v15-flux ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.8vw,22px)}
.yc.v2 .v15-flux .r{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) minmax(190px,220px);align-items:center;gap:clamp(14px,2.2vw,32px)}
.yc.v2 .v15-flux .l{font:600 12.5px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--second)}
.yc.v2 .v15-flux .l small{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--marine);color:#fff;font:600 12px/1 var(--inter);letter-spacing:.02em;text-transform:none;vertical-align:1px}
.yc.v2 .v15-flux .piste{position:relative;height:38px;border-radius:10px;background:var(--doux)}
.yc.v2 .v15-flux .piste i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);border-radius:10px}
.yc.v2 .v15-flux .ombre{background:repeating-linear-gradient(135deg,rgba(16,65,108,.10) 0 6px,transparent 6px 12px);border-radius:0 10px 10px 0}
.yc.v2 .v15-flux .m{font:500 clamp(22px,2.2vw,30px)/1.1 var(--serif);color:var(--encre);text-align:right;white-space:nowrap}
/* Chaque étape a sa couleur, du marine au cyan clair */
.yc.v2 .v15-flux .fac .seg{background:linear-gradient(90deg,var(--marine-f),var(--marine))}
.yc.v2 .v15-flux .fac .m{font-size:clamp(26px,2.6vw,36px);color:var(--marine)}
.yc.v2 .v15-flux .brut .seg{background:linear-gradient(90deg,#1F5F8F,#2E7FAF)}
.yc.v2 .v15-flux .net .seg{background:linear-gradient(90deg,var(--cyan),var(--cyan-c))}
.yc.v2 .v15-flux .net .m{font-size:clamp(26px,2.6vw,36px);color:var(--marine)}
/* La commission : une couleur à elle, un halo, et son montant en pastille */
.yc.v2 .v15-flux .com .piste{background:transparent;border:1px dashed var(--bord-f)}
.yc.v2 .v15-flux .com .seg{background:var(--cyan);box-shadow:0 0 0 4px rgba(69,189,223,.22),0 6px 18px -4px rgba(69,189,223,.7);min-width:14px}
.yc.v2 .v15-flux .com .l{color:var(--cyan-l)}
.yc.v2 .v15-flux .com .m{justify-self:end;padding:8px 16px;border-radius:999px;background:var(--ciel);border:1px solid var(--ciel-2);font:600 clamp(17px,1.5vw,20px)/1.1 var(--inter);color:var(--cyan-l)}
.yc.v2 .v15-flux .cle{display:flex;align-items:center;gap:10px;margin:clamp(16px,2vw,24px) 0 0;font-size:13.5px;color:var(--second)}
.yc.v2 .v15-flux .cle i{flex:none;width:28px;height:14px;border-radius:4px;background:repeating-linear-gradient(135deg,rgba(16,65,108,.22) 0 4px,transparent 4px 8px),var(--doux)}
/* Le flux : les barres s'allongent l'une après l'autre à l'apparition */
html.v-anim .yc.v2 .v15-flux .seg,html.v-anim .yc.v2 .v15-flux .ombre{transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--courbe)}
html.v-anim .yc.v2 .v15-flux.vu .seg,html.v-anim .yc.v2 .v15-flux.vu .ombre{transform:none}
html.v-anim .yc.v2 .v15-flux .com .seg{transition-delay:.35s}
html.v-anim .yc.v2 .v15-flux .brut .seg,html.v-anim .yc.v2 .v15-flux .brut .ombre{transition-delay:.6s}
html.v-anim .yc.v2 .v15-flux .net .seg,html.v-anim .yc.v2 .v15-flux .net .ombre{transition-delay:.85s}
@media (prefers-reduced-motion:reduce){html.v-anim .yc.v2 .v15-flux .seg,html.v-anim .yc.v2 .v15-flux .ombre{transform:none;transition:none}}
@media (max-width:760px){
  .yc.v2 .v15-flux .r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l m" "p p";gap:8px 12px}
  .yc.v2 .v15-flux .l{grid-area:l}.yc.v2 .v15-flux .m{grid-area:m}.yc.v2 .v15-flux .piste{grid-area:p;height:26px}
  .yc.v2 .v15-flux .com .m{padding:6px 12px}
}
/* V15 : « Comment ça marche », la rémunération vue des trois acteurs */
.yc.v2 .v15-trois{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,.9fr) 92px minmax(0,1.15fr) 92px minmax(0,1.05fr);align-items:stretch}
.yc.v2 .v15-trois>li:not(.fleche){padding:clamp(20px,2.4vw,30px);border-radius:var(--r-l)}
.yc.v2 .v15-trois .qui{display:block;font:600 12.5px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v15-trois .quoi{margin:8px 0 16px;font:500 clamp(18px,1.6vw,21px)/1.3 var(--serif);color:var(--encre)}
.yc.v2 .v15-trois .m{margin:0;font:500 clamp(30px,3vw,40px)/1 var(--serif);color:var(--marine)}
.yc.v2 .v15-trois .n{margin:6px 0 0;font-size:13.5px;color:var(--second)}
.yc.v2 .v15-trois .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:10px 0;border-top:1px solid var(--bord);font-size:15px;color:var(--corps)}
.yc.v2 .v15-trois .ligne b{font:600 16px/1.2 var(--inter);color:var(--encre);white-space:nowrap}
.yc.v2 .v15-trois .client{background:#fff;border:1px solid var(--bord)}
.yc.v2 .v15-trois .spts{background:var(--marine);color:#fff;background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v15-trois .spts .qui{color:var(--cyan-c)}.yc.v2 .v15-trois .spts .quoi{color:#fff}
.yc.v2 .v15-trois .spts .ligne{border-top-color:rgba(255,255,255,.16);color:var(--sur-sombre)}
.yc.v2 .v15-trois .spts .ligne b{color:#fff}
.yc.v2 .v15-trois .spts .ligne.com b{padding:4px 12px;border-radius:999px;background:var(--cyan);color:var(--marine-f)}
.yc.v2 .v15-trois .consultant{background:var(--ciel);border:1px solid var(--ciel-2)}
.yc.v2 .v15-trois .consultant .net b{font:500 clamp(24px,2.2vw,30px)/1 var(--serif);color:var(--marine)}
.yc.v2 .v15-trois .fleche{position:relative;display:flex;align-items:center;justify-content:center}
.yc.v2 .v15-trois .fleche::before{content:"";position:absolute;left:10px;right:14px;top:50%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cyan-c),var(--cyan))}
.yc.v2 .v15-trois .fleche::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-top:3px solid var(--cyan);border-right:3px solid var(--cyan);transform:rotate(45deg)}
.yc.v2 .v15-trois .fleche span{position:relative;top:-20px;font:600 12px/1 var(--inter);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v15-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(24px,3vw,44px);margin-top:clamp(20px,2.6vw,32px)}
.yc.v2 .v15-deux p{margin:0;padding-left:16px;border-left:3px solid var(--cyan);font-size:15.5px;line-height:1.55;color:var(--corps)}
.yc.v2 .v15-deux b{color:var(--encre)}
.yc.v2 .v15-hyp{margin-top:16px;font-size:12.5px}
@media (max-width:1000px){
  .yc.v2 .v15-trois{grid-template-columns:1fr}
  .yc.v2 .v15-trois .fleche{height:52px}
  .yc.v2 .v15-trois .fleche::before{left:50%;right:auto;top:6px;bottom:12px;width:3px;height:auto;margin-left:-1.5px;background:linear-gradient(var(--cyan-c),var(--cyan))}
  .yc.v2 .v15-trois .fleche::after{right:auto;left:50%;top:auto;bottom:10px;margin:0 0 0 -5.5px;transform:rotate(135deg)}
  .yc.v2 .v15-trois .fleche span{position:absolute;top:50%;left:calc(50% + 16px);transform:translateY(-50%)}
  .yc.v2 .v15-deux{grid-template-columns:1fr}
}
/* V15 : « Quand êtes-vous payé ? », un délai et quatre faits */
.yc.v2 .v15-paie{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,40px);align-items:stretch}
.yc.v2 .v15-paie .delai{padding:clamp(24px,3vw,40px);border-radius:var(--r-l);background:var(--marine);color:var(--sur-sombre);background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v15-paie .ch{margin:0;font:500 clamp(72px,7vw,104px)/.9 var(--serif);color:#fff}
.yc.v2 .v15-paie .u{margin:6px 0 16px;font:600 18px/1.3 var(--inter);color:var(--cyan-c)}
.yc.v2 .v15-paie .t{margin:0;font-size:15.5px;line-height:1.55}
.yc.v2 .v15-paie .faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);margin:0;align-content:center}
.yc.v2 .v15-paie .faits>div{padding:18px 0 18px 18px;border-top:1px solid var(--bord);position:relative}
.yc.v2 .v15-paie .faits>div::before{content:"";position:absolute;left:0;top:25px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.yc.v2 .v15-paie dt{font:600 16px/1.35 var(--inter);color:var(--encre)}
.yc.v2 .v15-paie dd{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--corps)}
@media (max-width:860px){.yc.v2 .v15-paie,.yc.v2 .v15-paie .faits{grid-template-columns:1fr}}

.yc.v2 .v15-suite{margin-top:8px}

/* ===== V15 point 2, 09.10.2026 : la collaboration, trois acteurs en triangle (capture de Youssef).
   Les deux contrats et la mission sont toujours visibles ; les flux (facture, reglement, salaire)
   apparaissent au survol ou a la selection d'un acteur. Le schema garde ses proportions : les
   cercles et les libelles sont places en % du repere 600 x 520 du trace SVG. ===== */
.yc.v2 .v15-colla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.yc.v2 .v15-colla .atouts{display:grid;gap:22px;margin-top:clamp(26px,3vw,38px)}
.yc.v2 .v15-colla .atouts li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;align-items:start}
.yc.v2 .v15-colla .atouts .ic{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#fff,var(--ciel));border:1px solid var(--bord);box-shadow:0 8px 18px -12px rgba(16,65,108,.35)}
.yc.v2 .v15-colla .atouts b{font:600 17px/1.35 var(--inter);color:var(--encre)}
.yc.v2 .v15-colla .atouts span:not(.ic){font-size:15px;line-height:1.5;color:var(--second);margin-top:4px}
.yc.v2 .v15-colla svg,.yc.v2 .v15-com svg{fill:none;stroke:var(--marine);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v15-colla .atouts .ic svg{width:22px;height:22px}
.yc.v2 .v15-tri{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:600/520;container-type:inline-size}
.yc.v2 .v15-tri .liens{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.yc.v2 .v15-tri .liens path{transition:opacity .35s}
.yc.v2 .v15-tri .liens .ctr{stroke:var(--marine);stroke-width:2.2}
.yc.v2 .v15-tri .liens .mis{stroke:var(--cyan-l);stroke-width:2.2;stroke-dasharray:7 7}
.yc.v2 .v15-tri .liens .flx{stroke:var(--cyan);stroke-width:2.6;stroke-dasharray:2 9;opacity:0}
.yc.v2 .v15-tri marker path{fill:none;stroke:var(--marine);stroke-width:1.7}
.yc.v2 .v15-tri marker.cy path{stroke:var(--cyan-l)}
.yc.v2 .v15-tri .ac{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;padding:0 4%;text-align:center;font-family:inherit;cursor:pointer;transition:transform .35s var(--courbe),opacity .35s,box-shadow .35s}
.yc.v2 .v15-tri .ac b{font:600 clamp(14px,3.4cqw,20px)/1.2 var(--inter);color:var(--encre)}
.yc.v2 .v15-tri .ac span{font:400 clamp(10.5px,2.3cqw,14px)/1.35 var(--inter);color:var(--second)}
.yc.v2 .v15-tri .ac .pic{width:clamp(24px,7cqw,40px);height:auto;margin-bottom:.15em}
.yc.v2 .v15-tri .spts{left:50%;top:23.08%;width:33.34%;border:0;background:radial-gradient(circle at 32% 26%,#1E5C92,var(--marine) 55%,var(--marine-f));box-shadow:0 0 0 12px rgba(69,189,223,.08),0 26px 60px -22px rgba(16,65,108,.6)}
.yc.v2 .v15-tri .spts b{font-size:clamp(24px,8cqw,48px);line-height:1;color:#fff;letter-spacing:-.01em}
.yc.v2 .v15-tri .spts span{color:rgba(255,255,255,.86);max-width:80%}
.yc.v2 .v15-tri .cons{left:20%;top:76.92%;width:29.34%;border:1.5px solid #A8DCEE;background:linear-gradient(180deg,#fff 10%,var(--ciel))}
.yc.v2 .v15-tri .cli{left:80%;top:76.92%;width:29.34%;border:1.5px solid #C3D3E3;background:linear-gradient(180deg,#fff 10%,#EDF2F8)}
.yc.v2 .v15-tri .ac:hover,.yc.v2 .v15-tri .ac[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.035)}
.yc.v2 .v15-tri .cons:hover,.yc.v2 .v15-tri .cli:hover,.yc.v2 .v15-tri .cons[aria-pressed="true"],.yc.v2 .v15-tri .cli[aria-pressed="true"]{box-shadow:0 0 0 6px rgba(69,189,223,.16),var(--ombre)}
.yc.v2 .v15-tri .ac:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.yc.v2 .v15-tri .ctr-l{position:absolute;transform:translate(-50%,-50%);margin:0;top:52.08%}
.yc.v2 .v15-tri .ctr-l.travail{left:31.03%}
.yc.v2 .v15-tri .ctr-l.lsv{left:68.97%}
.yc.v2 .v15-tri .ctr-l .doc{display:grid;place-items:center;width:clamp(26px,6cqw,36px);aspect-ratio:1;border-radius:50%;background:#fff;border:1px solid var(--bord);box-shadow:0 6px 14px -8px rgba(16,65,108,.4)}
.yc.v2 .v15-tri .ctr-l .doc svg{width:56%;height:auto}
.yc.v2 .v15-tri .ctr-l b{position:absolute;top:50%;transform:translateY(-50%);font:600 clamp(10.5px,2.4cqw,14.5px)/1.25 var(--inter);color:var(--encre);max-width:calc(32cqw - 30px);width:max-content}
.yc.v2 .v15-tri .ctr-l.travail b{right:calc(100% + 10px);text-align:right}
.yc.v2 .v15-tri .ctr-l.lsv b{left:calc(100% + 10px)}
.yc.v2 .v15-tri .mis-l{position:absolute;left:50%;top:95%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font:600 clamp(10.5px,2.4cqw,14.5px)/1.2 var(--inter);color:var(--cyan-l)}
.yc.v2 .v15-tri .flx-l{position:absolute;transform:translate(-50%,-50%) scale(.85);margin:0;padding:.42em .8em;border-radius:999px;background:var(--marine);color:#fff;font:600 clamp(10px,2.1cqw,13px)/1 var(--inter);white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 8px 18px -10px rgba(16,65,108,.6);transition:opacity .3s,transform .35s var(--courbe)}
.yc.v2 .v15-tri .flx-l.salaire{left:38.67%;top:46.5%}
.yc.v2 .v15-tri .flx-l.facture{left:61.33%;top:46.5%}
.yc.v2 .v15-tri .flx-l.reglement{left:58.33%;top:58.65%}
.yc.v2 .v15-tri[data-focus] .liens .flx.on{opacity:1}
.yc.v2 .v15-tri[data-focus] .flx-l.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.yc.v2 .v15-tri[data-focus] .liens .ctr:not(.on),.yc.v2 .v15-tri[data-focus] .liens .mis:not(.on){opacity:.22}
.yc.v2 .v15-tri[data-focus] .ctr-l:not(.on),.yc.v2 .v15-tri[data-focus] .mis-l:not(.on){opacity:.35}
.yc.v2 .v15-tri[data-focus] .ac:not(.on){opacity:.45}
.yc.v2 .v15-tri .ctr-l,.yc.v2 .v15-tri .mis-l{transition:opacity .35s}
html.v-anim .yc.v2 .v15-tri .liens .flx.on{animation:v15-flux 1.1s linear infinite}
@keyframes v15-flux{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
.yc.v2 .v15-tri-l{max-width:520px;margin:clamp(10px,1.6vw,18px) auto 0;min-height:3em;text-align:center;font-size:15px;line-height:1.5;color:var(--second)}
@container (max-width:440px){
  .yc.v2 .v15-tri .ac span{display:none}
  .yc.v2 .v15-tri .ctr-l b{max-width:calc(32cqw - 22px)}
  .yc.v2 .v15-tri .ctr-l.travail b{right:calc(100% + 6px)}
  .yc.v2 .v15-tri .ctr-l.lsv b{left:calc(100% + 6px)}
}
@media (max-width:980px){.yc.v2 .v15-colla{grid-template-columns:1fr}}

/* ===== V15 point 4, 09.10.2026 : la commission (capture de Youssef). Le 4 % en carte claire a
   cote du titre, le compris en six pictogrammes, un exemple a la fois qui defile lentement.
   Les jauges sont retirees. Le tableau reste pour les lecteurs d'ecran. ===== */
.yc.v2 .v15-com .tete{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(24px,5vw,72px);align-items:center}
.yc.v2 .v15-com .carte{position:relative;overflow:hidden;text-align:center;padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px);border-radius:var(--r-l);border:1px solid var(--bord);background:linear-gradient(180deg,#fff,#F3F8FC);box-shadow:var(--ombre)}
.yc.v2 .v15-com .carte::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--marine),var(--cyan))}
.yc.v2 .v15-com .carte .gros{color:var(--marine)}
.yc.v2 .v15-com .carte .de{font:500 17px/1.3 var(--inter);color:var(--second);margin-top:14px}
.yc.v2 .v15-com .carte .min{display:inline-flex;margin-top:18px;padding:11px 20px;border-radius:999px;background:var(--marine);color:#fff;font:600 15px/1 var(--inter)}
.yc.v2 .v15-com .carte .sans{margin-top:20px;padding-top:16px;border-top:1px solid var(--bord);font-size:13.5px;line-height:1.5;color:var(--second)}
.yc.v2 .v15-com .carte .sans b{color:var(--encre);font-weight:600}
.yc.v2 .v15-com .compris-t{display:flex;margin:clamp(44px,5.4vw,72px) 0 clamp(24px,3vw,34px)}
.yc.v2 .v15-com .compris{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(22px,2.4vw,30px) clamp(12px,2vw,24px)}
.yc.v2 .v15-com .compris li{display:flex;flex-direction:column;align-items:center;text-align:center}
.yc.v2 .v15-com .compris .ic{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:linear-gradient(180deg,#fff,var(--ciel));border:1px solid #D3E8F2;box-shadow:0 12px 26px -16px rgba(16,65,108,.45)}
.yc.v2 .v15-com .compris .ic svg{width:30px;height:30px;stroke-width:1.5}
.yc.v2 .v15-com .compris b{font:600 17px/1.3 var(--inter);color:var(--encre);margin-top:18px}
.yc.v2 .v15-com .compris span:not(.ic){font-size:14.5px;line-height:1.5;color:var(--second);margin-top:8px;max-width:190px}
.yc.v2 .v15-ex{margin-top:clamp(48px,5.6vw,76px);text-align:center}
.yc.v2 .v15-ex .ex-t{justify-content:center}
.yc.v2 .v15-ex .cadre{max-width:560px;margin:18px auto 0;padding:26px clamp(16px,3vw,28px) 14px;border:1px solid var(--bord);border-radius:var(--r);background:#fff;box-shadow:var(--ombre)}
.yc.v2 .v15-ex .piste{position:relative;height:44px}
.yc.v2 .v15-ex .piste li{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:.35em;flex-wrap:wrap;opacity:0;transform:translateX(28px);transition:opacity .9s ease,transform 1.1s var(--courbe)}
.yc.v2 .v15-ex .piste li.on{opacity:1;transform:none}
.yc.v2 .v15-ex .piste li.sort{opacity:0;transform:translateX(-28px)}
.yc.v2 .v15-ex .fac{font:600 clamp(19px,2vw,22px)/1.2 var(--inter);color:var(--corps)}
.yc.v2 .v15-ex .com{font:600 clamp(22px,2.4vw,27px)/1.2 var(--inter);color:var(--marine)}
.yc.v2 .v15-ex .u{font-size:15px;color:var(--second)}
.yc.v2 .v15-ex .fle{display:inline-block;position:relative;align-self:center;width:18px;height:2px;margin:0 .55em 0 .35em;background:var(--cyan)}
.yc.v2 .v15-ex .fle::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);transform:translateY(-50%) rotate(45deg)}
.yc.v2 .v15-ex .nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.yc.v2 .v15-ex .pts{display:flex}
.yc.v2 .v15-ex .nav button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.yc.v2 .v15-ex .pts button::before{content:"";width:8px;height:8px;border-radius:8px;background:var(--bord-f);transition:width .4s var(--courbe),background .4s}
.yc.v2 .v15-ex .pts button[aria-pressed="true"]::before{width:20px;background:var(--marine)}
.yc.v2 .v15-ex .nav button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-radius:6px}
.yc.v2 .v15-ex .pause::before{content:"";width:8px;height:10px;border-left:2.5px solid var(--second);border-right:2.5px solid var(--second)}
.yc.v2 .v15-ex .pause.arret::before{width:0;height:0;border:0;border-left:9px solid var(--second);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
html:not(.v-js) .yc.v2 .v15-ex .piste{height:auto}
html:not(.v-js) .yc.v2 .v15-ex .piste li{position:static;opacity:1;transform:none;padding:4px 0}
html:not(.v-js) .yc.v2 .v15-ex .nav{display:none}
@media (max-width:1100px){.yc.v2 .v15-com .compris{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.yc.v2 .v15-com .tete{grid-template-columns:1fr}.yc.v2 .v15-com .carte{max-width:420px;width:100%;justify-self:center}}
@media (max-width:560px){.yc.v2 .v15-com .compris{grid-template-columns:repeat(2,minmax(0,1fr))}.yc.v2 .v15-ex .piste{height:72px}.yc.v2 .v15-ex .piste li{align-content:center}}
/* Une regle du prototype aligne tout paragraphe de page a gauche en !important : la carte et la legende sont centrees. */
.yc.v2 .v15-com .carte p,.yc.v2 .v15-tri-l{text-align:center!important}
.yc.v2 .v15-com .carte .gros{justify-content:center}
@media (max-width:560px){.yc.v2 .v15-tri-l{min-height:4.5em}}

/* ===== V16, 09.10.2026 : Comment ça marche ===== */
/* Rémunération simplifiée : un montant par acteur, un libellé, un détail */
.yc.v2 .v15-trois.simple .m{margin-top:14px;font-size:clamp(34px,3.4vw,46px)}
.yc.v2 .v15-trois.simple .n{margin:8px 0 18px;font-size:15px;color:var(--corps)}
.yc.v2 .v15-trois.simple .spts .m{color:#fff}
.yc.v2 .v15-trois.simple .spts .n{color:var(--sur-sombre)}
.yc.v2 .v15-trois.simple .ligne{font-size:14px}
.yc.v2 .v15-trois.simple .ligne b{font-size:15px}
/* Commission : la carte du 4 % en bleu foncé, les deux phrases sur deux lignes */
.yc.v2 .v15-com .carte{background:var(--marine);border-color:var(--marine);color:#fff;background-image:radial-gradient(70% 60% at 100% 0%,rgba(69,189,223,.28),transparent 60%)}
.yc.v2 .v15-com .carte::before{background:linear-gradient(90deg,var(--cyan-c),var(--cyan))}
.yc.v2 .v15-com .carte .gros{color:#fff}
.yc.v2 .v15-com .carte .de{color:var(--sur-sombre)}
.yc.v2 .v15-com .carte .min{background:#fff;color:var(--marine)}
.yc.v2 .v15-com .carte .sans{border-top-color:rgba(255,255,255,.18);color:var(--sur-sombre)}
.yc.v2 .v15-com .carte .sans b{color:#fff}
.yc.v2 .v15-com .carte .sans span,.yc.v2 .v15-com .carte .sans b{display:block}
.yc.v2 .v15-com .carte .sans b{margin-top:4px}
@media (min-width:1100px){
  .yc.v2 .v15-com .tete{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .yc.v2 .v15-com .carte .sans span,.yc.v2 .v15-com .carte .sans b{white-space:nowrap}
}

/* ===== V16, 09.10.2026 : Pour les agences, les modèles de facturation côte à côte =====
   Deux blocs de même poids : étiquette, titre, pour qui, la chaîne des acteurs (contrat en filet
   cyan, factures en flèches marine), trois ou quatre points, l'avantage. Un encadré commun. */
.yc.v2 .v16-modeles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);margin-top:clamp(24px,3vw,40px)}
.yc.v2 .v16-mod{display:flex;flex-direction:column;padding:clamp(22px,2.8vw,34px);border-radius:var(--r-l);background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre)}
.yc.v2 .v16-tag{align-self:flex-start;padding:7px 13px;border-radius:999px;background:var(--marine);color:#fff;font:600 12px/1 var(--inter);letter-spacing:.08em;text-transform:uppercase}
.yc.v2 .v16-mod h3{margin:16px 0 6px;font:500 clamp(23px,2.1vw,30px)/1.15 var(--serif);color:var(--encre)}
.yc.v2 .v16-pour{margin:0;font-size:15.5px;color:var(--second)}
.yc.v2 .v16-flux{list-style:none;margin:24px 0 0;padding:20px 0;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:0}
.yc.v2 .v16-flux .nd{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:84px;padding:12px 8px;border-radius:var(--r-s);background:var(--ciel);text-align:center}
.yc.v2 .v16-flux .nd b{font:600 14.5px/1.2 var(--inter);color:var(--encre)}
.yc.v2 .v16-flux .nd span{font-size:12.5px;line-height:1.3;color:var(--second)}
.yc.v2 .v16-flux .nd.s{background:var(--marine);box-shadow:0 14px 28px -16px rgba(16,65,108,.7)}
.yc.v2 .v16-flux .nd.s b{font:500 21px/1 var(--serif);color:#fff}
.yc.v2 .v16-flux .nd.s span{color:var(--sur-sombre)}
.yc.v2 .v16-flux .nd.a{background:#fff;border:1.5px solid var(--cyan)}
.yc.v2 .v16-flux .ln{flex:0 0 clamp(62px,6vw,84px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:84px}
.yc.v2 .v16-flux .ln span{position:absolute;bottom:calc(50% + 8px);left:0;right:0;font:600 11.5px/1.2 var(--inter);color:var(--cyan-l);text-align:center}
.yc.v2 .v16-flux .ln::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--cyan)}
.yc.v2 .v16-flux .ln.fx::before{background:var(--marine);right:10px}
.yc.v2 .v16-flux .ln.fx::after{content:"";position:absolute;right:7px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2px solid var(--marine);border-right:2px solid var(--marine);transform:rotate(45deg)}
.yc.v2 .v16-flux.quatre .ln{flex-basis:clamp(52px,4.6vw,64px)}
.yc.v2 .v16-flux.quatre .nd span{display:none}
.yc.v2 .v16-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.yc.v2 .v16-points li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--corps)}
.yc.v2 .v16-points li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--ciel-2)}
.yc.v2 .v16-points li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border-right:2px solid var(--marine);border-bottom:2px solid var(--marine);transform:rotate(45deg)}
.yc.v2 .v16-avantage{margin:auto 0 0;padding:16px 18px;border-radius:var(--r);background:var(--doux);border-left:3px solid var(--cyan);font-size:15px;line-height:1.5;color:var(--corps)}
.yc.v2 .v16-points + .v16-avantage{margin-top:22px}
.yc.v2 .v16-avantage b{display:block;margin-bottom:2px;color:var(--encre)}
.yc.v2 .v16-commun{margin:clamp(18px,2.4vw,28px) 0 0;padding:20px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--bord);font-size:15.5px;line-height:1.55;color:var(--corps)}
.yc.v2 .v16-commun b{display:block;margin-bottom:4px;font:500 clamp(18px,1.6vw,21px)/1.3 var(--serif);color:var(--encre)}
@media (max-width:1100px){
  .yc.v2 .v16-modeles{grid-template-columns:1fr}
}
@media (max-width:560px){
  .yc.v2 .v16-flux,.yc.v2 .v16-flux.quatre{flex-direction:column;align-items:stretch}
  .yc.v2 .v16-flux .nd{flex:none;min-height:0;padding:12px}
  .yc.v2 .v16-flux.quatre .nd span{display:block}
  .yc.v2 .v16-flux .ln,.yc.v2 .v16-flux.quatre .ln{flex-basis:auto;height:44px}
  .yc.v2 .v16-flux .ln span{position:static;padding-left:calc(50% + 14px);text-align:left}
  .yc.v2 .v16-flux .ln::before{left:50%;right:auto;top:6px;bottom:6px;width:2px;height:auto;margin:0 0 0 -1px}
  .yc.v2 .v16-flux .ln.fx::before{right:auto;bottom:10px}
  .yc.v2 .v16-flux .ln.fx::after{right:auto;left:50%;top:auto;bottom:7px;margin:0 0 0 -4px;transform:rotate(135deg)}
}

/* ===== V16 : l espace en ligne du consultant (Portage salarial) et son rappel discret (accueil) ===== */
.yc.v2 .v16-espace-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.yc.v2 .v16-benef{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--encre)}
.yc.v2 .v16-benef li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--bord)}
.yc.v2 .v16-benef .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ciel)}
.yc.v2 .v16-benef svg{width:22px;height:22px;fill:none;stroke:var(--marine);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v16-benef h3{margin:0 0 6px;font:600 18px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v16-benef p{margin:0;font-size:15.5px;line-height:1.55;color:var(--corps)}
.yc.v2 .v16-espace + section.v-blanc{border-top:1px solid var(--bord)}
@media (max-width:900px){.yc.v2 .v16-espace-g{grid-template-columns:1fr}}
.yc.v2 .v-filcols .v16-rappel::before{background:#fff;box-shadow:0 0 0 2px var(--cyan)}
.yc.v2 .v-filcols .v16-rappel h3{color:var(--marine)}
.yc.v2 .v16-rappel-l{margin-top:10px}

/* ============================================================ V17, 12.10.2026 */
/* Portage et Comment ça marche : trois cartes, facture totale → brut → net (flèches sans libellé) */
.yc.v2 .v17-trois .fleche::before{left:14px}
/* Portage : la ligne « Pas de frais de dossier · d'entrée · de sortie » tient sur une ligne */
.yc.v2 .v-pill.v17-uneligne{white-space:nowrap;font-size:13.5px;padding:8px 12px}
@media (max-width:560px){.yc.v2 .v-pill.v17-uneligne{white-space:normal;line-height:1.35}}
/* Portage : l'espace en ligne passe sur fond clair, le filet de séparation ne sert plus */
.yc.v2 .v16-espace.v-fond + section.v-blanc{border-top:0}
/* Agences : points pleins bleu foncé à la place des coches */
.yc.v2 .v16-points li{padding-left:22px}
.yc.v2 .v16-points li::before{left:4px;top:.62em;width:8px;height:8px;background:var(--marine)}
.yc.v2 .v16-points li::after{content:none}
/* Agences : les deux encadrés « Votre avantage » alignés en bas des cartes */
.yc.v2 .v16-points{margin-bottom:22px}
.yc.v2 .v16-points + .v16-avantage{margin-top:auto}
/* Agences, modèle B : « Le consultant » et « Le client final » sur une ligne, comme au modèle A */
.yc.v2 .v16-flux.quatre .nd{padding:12px 5px}
.yc.v2 .v16-flux.quatre .nd b{white-space:nowrap;font-size:13.5px}
.yc.v2 .v16-flux.quatre .nd.s b{font-size:19px}
.yc.v2 .v16-flux.quatre .ln{flex-basis:clamp(44px,3.6vw,56px)}
@media (max-width:560px){.yc.v2 .v16-flux.quatre .nd b{white-space:normal;font-size:14.5px}}
/* Gestion salariale : la phrase commence à gauche sous le titre, deux lignes au plus */
.yc.v2 .v17-tete{margin-bottom:clamp(24px,3vw,36px)}
.yc.v2 .v17-tete .v-lead.v17-deux{max-width:56em;margin-top:16px}
/* Gestion salariale : schéma plus net, cartes plutôt que pastilles, liens en chips */
.yc.v2 .v-gs-sch{padding:clamp(22px,3.4vw,40px);background:linear-gradient(180deg,#fff 0%,var(--ciel) 100%);border:1px solid var(--bord);box-shadow:var(--ombre)}
.yc.v2 .v-gs-d{gap:0 6px}
.yc.v2 .v-gs-d .nd{gap:6px;padding:20px 24px;border-radius:var(--r-l);border:1px solid var(--bord);background:#fff;min-width:11.5em;box-shadow:0 18px 34px -26px rgba(16,65,108,.55)}
.yc.v2 .v-gs-d .nd b{font:500 clamp(19px,1.6vw,22px)/1.15 var(--serif);color:var(--encre)}
.yc.v2 .v-gs-d .nd small{font:600 11.5px/1.2 var(--inter);letter-spacing:.07em;text-transform:uppercase;color:var(--cyan-l)}
.yc.v2 .v-gs-d .nd.spts{border:1.5px solid var(--cyan)}
.yc.v2 .v-gs-d .nd.emp{background:var(--marine);background-image:radial-gradient(80% 70% at 100% 0%,rgba(69,189,223,.32),transparent 62%);border-color:var(--marine);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--cyan),0 24px 40px -24px rgba(16,65,108,.8)}
.yc.v2 .v-gs-d .nd.emp b{color:#fff}.yc.v2 .v-gs-d .nd.emp small{color:var(--cyan-c)}
.yc.v2 .v-gs-d .lk{position:relative;gap:10px}
.yc.v2 .v-gs-d .lk i{position:relative;height:3px;background:linear-gradient(90deg,var(--cyan-c),var(--cyan))}
.yc.v2 .v-gs-d .lk i::before,.yc.v2 .v-gs-d .lk i::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fff;border:2px solid var(--cyan)}
.yc.v2 .v-gs-d .lk i::before{left:-2px}.yc.v2 .v-gs-d .lk i::after{right:-2px}
.yc.v2 .v-gs-d .lk small{padding:6px 11px;border-radius:999px;background:#fff;border:1px solid var(--bord);font:600 12px/1.25 var(--inter);color:var(--marine)}
.yc.v2 .v-gs-sch>p{padding-top:clamp(14px,2vw,20px);border-top:1px solid var(--bord)}
@media (max-width:760px){
  .yc.v2 .v-gs-d .lk i::before{left:50%;top:-2px;margin:0 0 0 -4.5px}.yc.v2 .v-gs-d .lk i::after{left:50%;right:auto;top:auto;bottom:-2px;margin:0 0 0 -4.5px}
}
/* À propos : quatre cartes de services */
.yc.v2 .v-facons.v17-quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
.yc.v2 .v-facons.v17-quatre a b{font-size:clamp(20px,1.6vw,23px)}
@media (max-width:1100px){.yc.v2 .v-facons.v17-quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.yc.v2 .v-facons.v17-quatre{grid-template-columns:1fr}}
/* Bandeau de contact uniforme : « Nous contacter », puis les quatre entrées sur une ligne, sous le
   titre et sur toute la largeur (la colonne de gauche est trop étroite pour 875 px de liens). */
@media (min-width:861px){
  .yc.v2 .v-appel-g>div:first-child{display:contents}
  .yc.v2 .v-appel-g>div:first-child>h2{grid-column:1/-1;grid-row:1}
  .yc.v2 .v-appel-g>div:first-child>.v-appel-autres{grid-column:1/-1;grid-row:2;margin-top:-6px}
  .yc.v2 .v-appel-g:not(.v-pf-g){row-gap:22px}
  .yc.v2 .v-appel-g:not(.v-pf-g)>div:last-child{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:14px 44px;margin-top:10px}
  .yc.v2 .v-appel-g:not(.v-pf-g)>div:last-child .contacts{flex-direction:row;flex-wrap:wrap;gap:10px 30px;margin:0}
  .yc.v2 .v-appel-g:not(.v-pf-g) .fil-act .v-ln,.yc.v2 .v-appel-g:not(.v-pf-g) .fil-act .v-pt{display:none}
  .yc.v2 .v-appel-g.v-pf-g>div:first-child>h2{grid-column:1/-1}
  .yc.v2 .v-appel-g.v-pf-g>div:first-child>:not(h2):not(.v-appel-autres){grid-column:1;grid-row:3;align-self:start}
  .yc.v2 .v-appel-g.v-pf-g>form{grid-column:2;grid-row:3}
}
@media (min-width:1024px){.yc.v2 .v-appel p.v-appel-autres{white-space:nowrap;max-width:none}}
.yc.v2 .v-gs-sch>p{max-width:none}
.yc.v2 .v16-flux.quatre .ln span{font-size:10.5px}
@media (max-width:1100px){.yc.v2 .v-gs-d .nd{min-width:0;padding:16px 14px}.yc.v2 .v-gs-d .lk small{padding:5px 8px}}
/* ================================================================
   V18, 12.10.2026
   ================================================================ */
/* Portage : « Portage ou votre propre société ? », critères à gauche, deux cartes alignées ligne à
   ligne (sous-grille), coche cyan pour le portage, tiret neutre pour la Sàrl */
.yc.v2 .v14-cmp .v18-intro{max-width:40em;margin:calc(-1 * clamp(10px,1.6vw,26px)) 0 clamp(22px,2.6vw,34px);font-size:clamp(16px,1.25vw,17.5px)}
.yc.v2 .v18-cmp{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.2fr) minmax(0,1.2fr);grid-template-rows:auto repeat(5,auto);column-gap:clamp(12px,1.4vw,18px)}
.yc.v2 .v18-col{grid-row:1/span 6;display:grid;grid-template-rows:subgrid;min-width:0}
.yc.v2 .v18-col.nous,.yc.v2 .v18-col.autre{padding:0 clamp(16px,1.8vw,26px) 8px;border-radius:var(--r);border:1px solid var(--bord);background:#fff}
.yc.v2 .v18-col.nous{background:var(--ciel);border-color:var(--cyan-c)}
.yc.v2 .v18-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(18px,2vw,26px) 0 16px;position:relative}
.yc.v2 .v18-col:not(.v18-crit) .v18-tete::after{content:"";position:absolute;left:0;bottom:8px;width:56px;height:2px;border-radius:2px;background:var(--cyan)}
.yc.v2 .v18-col.autre .v18-tete::after{background:var(--marine);opacity:.35}
.yc.v2 .v18-tete b{font:500 clamp(21px,1.75vw,26px)/1.2 var(--serif);color:var(--encre)}
.yc.v2 .v18-tete span{font:600 11px/1.45 var(--inter);letter-spacing:.09em;text-transform:uppercase;color:var(--second);text-align:right;max-width:9.5em}
.yc.v2 .v18-col.nous .v18-tete span{color:var(--marine)}
.yc.v2 .v18-c,.yc.v2 .v18-cell{display:flex;align-items:center;gap:14px;margin:0;padding:15px 0;border-top:1px solid var(--bord)}
.yc.v2 .v18-col.nous .v18-cell{border-top-color:var(--ciel-2)}
.yc.v2 .v18-c svg{flex:none;width:26px;height:26px;color:var(--marine)}
.yc.v2 .v18-c b{display:block;font:500 17px/1.25 var(--serif);color:var(--encre)}
.yc.v2 .v18-c small{display:block;margin-top:3px;font:600 10.5px/1.3 var(--inter);letter-spacing:.09em;text-transform:uppercase;color:var(--second)}
.yc.v2 .v18-cell span{font-size:15px;line-height:1.5;color:var(--corps);text-wrap:pretty}
.yc.v2 .v18-col.nous .v18-cell span{color:var(--encre)}
.yc.v2 .v18-cell i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.yc.v2 .v18-cell i.oui{background:#fff;box-shadow:inset 0 0 0 1px var(--ciel-2)}
.yc.v2 .v18-cell i.oui::before{content:"";width:14px;height:14px;background:var(--cyan-l, var(--cyan));-webkit-mask:var(--ok) center/contain no-repeat;mask:var(--ok) center/contain no-repeat}
.yc.v2 .v18-cell i.moins{background:var(--fond, #f3f6f9);box-shadow:inset 0 0 0 1px var(--bord)}
.yc.v2 .v18-cell i.moins::before{content:"";width:10px;height:1.6px;border-radius:2px;background:var(--second)}
@media (max-width:900px){
  .yc.v2 .v18-cmp{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .yc.v2 .v18-col{grid-row:auto;grid-template-rows:none}
  .yc.v2 .v18-crit{display:none}
  .yc.v2 .v18-cell{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;padding:13px 0}
  .yc.v2 .v18-cell::before{content:attr(data-l);grid-column:2;grid-row:1;font:600 11px/1.3 var(--inter);letter-spacing:.08em;text-transform:uppercase;color:var(--second)}
  .yc.v2 .v18-cell i{grid-column:1;grid-row:1/span 2}
  .yc.v2 .v18-cell span{grid-column:2;grid-row:2}
}
/* Gestion salariale : « Le fonctionnement », trois cercles reliés par un fil fin. Pas de photo dans
   les cercles, pas d'ombre, fond neutre ; votre entreprise au centre, en marine */
.yc.v2 .v-gs-sch.v18-sch{padding:clamp(12px,2vw,24px) 0 0;background:none;border:0;border-radius:0;box-shadow:none;gap:clamp(26px,3.4vw,44px)}
.yc.v2 .v18-gs{--s:clamp(120px,11vw,156px);--c:clamp(190px,17vw,236px);display:grid;grid-template-columns:var(--s) minmax(80px,1fr) var(--c) minmax(80px,1fr) var(--s);grid-template-rows:auto auto;align-items:center;gap:0;max-width:1080px;margin:0 auto;width:100%}
.yc.v2 .v18-r{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;grid-row:1}
.yc.v2 .v18-r.spts{grid-column:1}.yc.v2 .v18-r.emp{grid-column:3;grid-row:1}.yc.v2 .v18-r.col{grid-column:5}
.yc.v2 .v18-r.spts,.yc.v2 .v18-r.col{background:#fff;border:1px solid var(--bord-f);color:var(--marine)}
.yc.v2 .v18-r svg{width:38%;height:38%}
.yc.v2 .v18-r.emp{align-content:center;gap:10px;padding:0 18px;text-align:center;background:radial-gradient(120% 120% at 30% 20%,var(--marine) 0%,var(--marine-f) 55%,var(--encre) 100%)}
.yc.v2 .v18-r.emp b{font:600 12.5px/1.35 var(--inter);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.yc.v2 .v18-r.emp small{position:relative;padding-bottom:14px;font:500 11px/1.3 var(--inter);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-c)}
.yc.v2 .v18-r.emp small::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:1px;margin-left:-14px;background:var(--cyan-c);opacity:.6}
.yc.v2 .v18-t{grid-row:2;display:grid;justify-items:center;gap:5px;margin-top:calc((var(--c) - var(--s)) / -2);padding-top:18px;text-align:center}
.yc.v2 .v18-t.spts{grid-column:1}.yc.v2 .v18-t.col{grid-column:5}
.yc.v2 .v18-t b{font:600 12.5px/1.3 var(--inter);letter-spacing:.14em;text-transform:uppercase;color:var(--encre);white-space:nowrap}
.yc.v2 .v18-t small{position:relative;padding-bottom:12px;font:500 11px/1.3 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-l);white-space:nowrap}
.yc.v2 .v18-t small::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:1px;margin-left:-14px;background:var(--bord-f)}
.yc.v2 .v18-lk{grid-row:1;position:relative;align-self:stretch;display:block}
.yc.v2 .v18-lk.un{grid-column:2}.yc.v2 .v18-lk.deux{grid-column:4}
.yc.v2 .v18-lk::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bord-f)}
.yc.v2 .v18-lk i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--second)}
.yc.v2 .v18-lk small{position:absolute;left:4px;right:4px;bottom:calc(50% + 16px);font:600 10.5px/1.45 var(--inter);letter-spacing:.12em;text-transform:uppercase;color:var(--encre);text-align:center}
.yc.v2 .v18-sch>p{padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--bord-f)}
@media (max-width:900px){
  .yc.v2 .v18-gs{grid-template-columns:1fr;grid-template-rows:none;justify-items:center;max-width:320px}
  .yc.v2 .v18-r,.yc.v2 .v18-t,.yc.v2 .v18-lk{grid-column:1 !important;grid-row:auto !important}
  .yc.v2 .v18-r.spts,.yc.v2 .v18-r.col{width:112px}.yc.v2 .v18-r.emp{width:196px;align-self:center}
  .yc.v2 .v18-t{margin-top:0;padding-top:12px}
  .yc.v2 .v18-lk{width:100%;height:96px}
  .yc.v2 .v18-lk::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .yc.v2 .v18-lk small{left:calc(50% + 16px);right:auto;bottom:auto;top:50%;transform:translateY(-50%);text-align:left}
}
/* Gestion salariale, « Pourquoi SPTS » : un pictogramme au trait par titre, dans un cercle fin */
.yc.v2 .v18-pics .v18-pic{display:grid;place-items:center;width:52px;height:52px;margin:6px 0 16px;border-radius:50%;background:#fff;border:1px solid var(--bord-f);color:var(--marine)}
.yc.v2 .v18-pics .v18-pic svg{width:26px;height:26px}
/* ================================================================
   V19, 13.10.2026 : la demande de simulation sur une page, en deux blocs
   ================================================================ */
.yc.v2 .v19-sim{padding:clamp(20px,3vw,40px) 0 var(--sec)}
.yc.v2 .v19-sim .w{max-width:880px}
.yc.v2 .v19-retour{margin:0 0 18px;font-size:14.5px}
.yc.v2 .v19-retour a{color:var(--marine)}
.yc.v2 .v19-tete{margin-bottom:clamp(22px,3vw,34px)}
.yc.v2 .v19-tete .v-h2{margin:0 0 14px}
.yc.v2 .v19-tete .v-lead{max-width:none}
.yc.v2 .v19-mention{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--second)}
.yc.v2 .v19-form{display:block}
.yc.v2 .v19-form .step.on{display:grid;gap:18px}
.yc.v2 .v19-bloc{display:grid;gap:16px;margin:0;padding:clamp(18px,2.6vw,28px);border:1px solid var(--bord);border-radius:var(--r);background:#fff;min-width:0}
.yc.v2 .v19-bt{display:flex;gap:12px;align-items:flex-start;padding:0;margin:0 0 4px;float:left;width:100%}
.yc.v2 .v19-bt+*{clear:both}
.yc.v2 .v19-bt i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--marine);color:#fff;font:600 14px/1 var(--inter);font-style:normal}
.yc.v2 .v19-bt span{display:grid;gap:3px}
.yc.v2 .v19-bt b{font:600 19px/1.25 var(--inter);color:var(--encre)}
.yc.v2 .v19-bt small{font-size:14px;line-height:1.45;color:var(--second)}
.yc.v2 .v19-st{margin:4px 0 0;font:600 16px/1.3 var(--inter);color:var(--encre)}
.yc.v2 .v19-st.v19-sep{padding-top:18px;border-top:1px solid var(--bord)}
.yc.v2 .v19-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.yc.v2 .v19-g.v19-montant{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.yc.v2 .v19-f{display:grid;gap:7px;min-width:0}
.yc.v2 .v19-f[hidden]{display:none}
.yc.v2 .v19-l{margin:0;font:500 14px/1.35 var(--inter);color:var(--corps)}
.yc.v2 .v19-l em{font-style:normal;color:var(--corps)}
.yc.v2 .v19-f input,.yc.v2 .v19-f select,.yc.v2 .v19-f textarea{width:100%;min-height:50px;font:16px/1.4 var(--inter);color:var(--encre);background:#fff;border:1px solid var(--bord-f);border-radius:var(--r-s);padding:11px 14px}
.yc.v2 .v19-f textarea{min-height:84px;resize:vertical}
.yc.v2 .v19-f :is(input,select,textarea)::placeholder{color:#8296AB}
.yc.v2 .v19-f :is(input,select,textarea):focus-visible{outline:3px solid var(--cyan-c);outline-offset:1px;border-color:var(--marine)}
.yc.v2 .v19-f [aria-invalid="true"]{border-color:#C8553D;box-shadow:0 0 0 3px rgba(200,85,61,.14)}
.yc.v2 .v19-aide{display:block;margin:0;font-size:13px;line-height:1.5;color:var(--second)}
.yc.v2 .v19-adresse{display:grid;gap:10px}
.yc.v2 .v19-g.v19-cp{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px 16px}
.yc.v2 .v19-form .ferr{margin:-4px 0 0;font-size:14px;line-height:1.5;color:#A3402C}
.yc.v2 .v19-reponse{display:grid;gap:6px;margin-top:6px;padding:16px 18px;border-radius:var(--r-s);background:var(--doux)}
.yc.v2 .v19-reponse p{margin:0;font-size:14px;line-height:1.55;color:var(--second)}
.yc.v2 .v19-reponse p:first-child{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--encre)}
.yc.v2 .v19-reponse svg{width:20px;height:20px;fill:none;stroke:var(--marine);stroke-width:1.8;stroke-linecap:round}
.yc.v2 .v19-act{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.yc.v2 .v19-retour-btn{min-height:48px;padding:0 18px;border:1px solid var(--bord-f);border-radius:var(--r-s);background:#fff;font:500 15px/1 var(--inter);color:var(--encre);cursor:pointer}
.yc.v2 .v19-retour-btn:hover{background:var(--doux)}
.yc.v2 .v19-form .step.done.on{padding:clamp(20px,3vw,32px);border:1px solid var(--bord);border-radius:var(--r);background:#fff}
.yc.v2 .v19-form .recap{margin:6px 0 0;padding:14px;border-radius:var(--r-s);background:var(--doux);font:13px/1.7 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-x:auto}
/* L'aperçu de la notification envoyée à l'ERP : jamais montré, dans aucun mode (V19) */
.yc.v2 .devbox.v19-cache{display:none !important}
@media (max-width:640px){
  .yc.v2 .v19-g,.yc.v2 .v19-g.v19-montant{grid-template-columns:1fr}
  .yc.v2 .v19-g.v19-cp{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .yc.v2 .v19-act{flex-direction:column-reverse;align-items:stretch}
  .yc.v2 .v19-act .v-btn{justify-content:center}
}
/* 13.10.2026 (Youssef, « Photos site ») : « Qui sommes-nous ? », le bloc d'appel sous le titre, à gauche de la photo */
.yc.v2 .v-ab-photo .v-cote{margin-top:clamp(18px,2.4vw,28px);max-width:30em}
/* ================================================================
   V20, 13.10.2026 : formulaires de contact (Agences, Gestion salariale, À propos) plus compacts.
   Titre, liens et contacts à gauche ; formulaire à droite, champs sur deux colonnes, bouton et
   mention sur une même ligne. Le bandeau gagne en hauteur.
   ================================================================ */
@media (min-width:861px){
  .yc.v2 .v-appel:has(.v-appel-g.v-pf-g){padding-block:clamp(48px,5vw,76px)}
  .yc.v2 .v-appel-g.v-pf-g{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:clamp(32px,5vw,72px);row-gap:0}
  .yc.v2 .v-appel-g.v-pf-g>div:first-child{display:block;grid-column:1;grid-row:1}
  .yc.v2 .v-appel-g.v-pf-g>form{grid-column:2;grid-row:1}
  .yc.v2 .v-appel-g.v-pf-g p.v-appel-autres{white-space:normal;margin-top:14px;max-width:34em}
  .yc.v2 .v-appel-g.v-pf-g .contacts{margin-top:28px}
  .yc.v2 .v-appel-g.v-pf-g .v-pf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:12px}
  .yc.v2 .v-appel-g.v-pf-g .v-pf>*{grid-column:1/-1}
  .yc.v2 .v-appel-g.v-pf-g .v-pf>.v-pf-f:not(.v-pf-objet):not(:has(textarea)){grid-column:auto}
  .yc.v2 .v-appel-g.v-pf-g .v-pf>.v-pf-act{grid-column:1}
  .yc.v2 .v-appel-g.v-pf-g .v-pf>.v-pf-note{grid-column:2;align-self:center}
  .yc.v2 .v-appel-g.v-pf-g .v-pf textarea{min-height:64px}
}
/* V20 : message après l'envoi de la simulation, plus chaleureux, deux vrais boutons */
.yc.v2 .v19-form .step.done.v20-merci.on{display:grid;gap:14px;justify-items:start;padding:clamp(24px,3.4vw,40px)}
.yc.v2 .v20-ok{display:grid;place-items:center;width:52px;height:52px;margin:0 0 4px;border-radius:50%;background:var(--ciel);box-shadow:inset 0 0 0 1px var(--cyan-c)}
.yc.v2 .v20-ok svg{width:26px;height:26px;fill:none;stroke:var(--marine);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v20-merci .v-h2{margin:0}
.yc.v2 .v20-merci .v-lead{margin:0;max-width:none}
.yc.v2 .v20-merci .v-txt{margin:0}
.yc.v2 .v20-ensuite{margin:10px 0 0;font:600 15px/1.4 var(--inter);color:var(--encre)}
.yc.v2 .v20-boutons{display:flex;flex-wrap:wrap;gap:12px}
.yc.v2 .v20-boutons .v-btn.clair{background:#fff;color:var(--marine);box-shadow:inset 0 0 0 1.5px var(--marine)}
.yc.v2 .v20-boutons .v-btn.clair:hover{background:var(--ciel)}
@media (max-width:640px){.yc.v2 .v20-boutons{flex-direction:column;align-self:stretch}.yc.v2 .v20-boutons .v-btn{justify-content:center}}
/* ================================================================
   V21, 14.10.2026
   ================================================================ */
/* Comment ça marche (accueil) : SPTS dans le dessin du logo */
.yc.v2 .v13-rel .v13-act.spts b.v21-spts{display:block;line-height:0;color:var(--marine)}
.yc.v2 .v21-spts svg{display:block;height:clamp(24px,2.2vw,31px);width:auto;margin-inline:auto}
/* Notre rôle : carte un peu moins haute, fin de phrase en italique */
.yc.v2 .v-tu.a{min-height:0;gap:18px}
@media (min-width:901px){
  .yc.v2 .v-bento .v-tu{padding:clamp(18px,1.8vw,24px)}
  .yc.v2 .v-bento .v-tu.b .ch{font-size:clamp(50px,4.6vw,68px)}
  .yc.v2 .v-bento .v-tu.a .grand{font-size:clamp(32px,3.2vw,48px)}
}
.yc.v2 .v-tu.a .grand em{font-style:italic}
/* Formulaires d'Agences et de Gestion salariale, sur le modèle de la capture : une colonne, plus compacte */
.yc.v2 .v-pf.v21-pf{gap:10px;padding:clamp(16px,2.4vw,24px)}
.yc.v2 .v-pf.v21-pf .v21-pf-t{margin:0 0 2px;font:600 clamp(20px,1.8vw,24px)/1.25 var(--inter);color:#fff}
.yc.v2 .v-pf.v21-pf label{font-weight:500;font-size:14px}
.yc.v2 .v-pf.v21-pf input,.yc.v2 .v-pf.v21-pf textarea{padding:9px 12px}
.yc.v2 .v-pf.v21-pf textarea{min-height:76px}
.yc.v2 .v-pf.v21-pf .v-pf-act .v-btn{width:100%;justify-content:center}
.yc.v2 .v-pf.v21-pf p.v-pf-note{text-align:center;font-size:12.5px}
@media (min-width:861px){
  .yc.v2 .v-appel-g.v-pf-g .v-pf.v21-pf{grid-template-columns:1fr}
  .yc.v2 .v-appel-g.v-pf-g .v-pf.v21-pf>*{grid-column:1/-1}
  .yc.v2 .v-appel-g.v-pf-g .v-pf.v21-pf>.v-pf-note{grid-column:1/-1}
  .yc.v2 .v-appel:has(.v21-pf){padding-block:clamp(40px,4vw,60px)}
}

/* ===== V22, 16.10.2026 (document V22.docx de Youssef) ===== */
/* Conformité et références : CCT et Swissdec cliquables, le titre garde sa police */
.yc.v2 .v22-h3-lien{color:inherit;font:inherit;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:1.5px;text-underline-offset:4px}
.yc.v2 .v22-h3-lien:hover{text-decoration-color:var(--marine)}
.yc.v2 .v22-h3-lien .fl.ne{width:13px;height:13px;margin-left:4px;vertical-align:baseline}
/* Pour les entreprises, Qui fait quoi : Votre entreprise -> Management -> Le consultant <- Employeur légal <- SPTS */
/* V23 : les deux liens du schéma, mêmes police, taille et couleurs */
.yc.v2 .v13-fl.v22-m span,.yc.v2 .v13-fl.v22-e span{max-width:none;white-space:nowrap;font:600 13.5px/1.25 var(--inter);color:var(--marine)}
.yc.v2 .v13-fl.v22-m .fl,.yc.v2 .v13-fl.v22-e .fl{color:var(--marine)}
.yc.v2 .v13-fl.v22-m .ln,.yc.v2 .v13-fl.v22-e .ln{background:var(--cyan)}
.yc.v2 .v13-fl.v22-e .ln[data-trace]{transform-origin:right center}
.yc.v2 .v13-fl.v22-m .ln[data-trace]{transform-origin:left center}
/* Comment ça marche, La rémunération : trois cartes égales, flèches courtes, pictogrammes, net en bleu clair */
.yc.v2 .v15-trois.v22-trois{grid-template-columns:minmax(0,1fr) clamp(40px,4.2vw,64px) minmax(0,1fr) clamp(40px,4.2vw,64px) minmax(0,1fr)}
.yc.v2 .v15-trois.v22-trois>li:not(.fleche){position:relative;padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,32px);min-height:clamp(170px,14vw,196px);display:flex;flex-direction:column;justify-content:flex-start}
.yc.v2 .v15-trois.v22-trois .m{font-size:clamp(32px,3.3vw,46px);white-space:nowrap}
@media (min-width:1001px){.yc.v2 .v15-trois.v22-trois .fleche::before{left:8px;right:10px}.yc.v2 .v15-trois.v22-trois .fleche::after{right:7px}}
.yc.v2 .v15-trois.v22-trois .consultant{background:#E3F2FA;border-color:#C6E5F4}
.yc.v2 .v22-ic{position:absolute;top:clamp(18px,2vw,24px);right:clamp(18px,2vw,24px);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ciel);color:var(--marine)}
.yc.v2 .v22-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v15-trois .spts .v22-ic{background:rgba(255,255,255,.12);color:#fff}
.yc.v2 .v15-trois .consultant .v22-ic{background:#C9E6F5}
@media (max-width:1100px) and (min-width:1001px){.yc.v2 .v15-trois.v22-trois .m{font-size:clamp(26px,2.9vw,34px)}.yc.v2 .v22-ic{width:38px;height:38px}}
@media (max-width:1000px){.yc.v2 .v15-trois.v22-trois{grid-template-columns:1fr}.yc.v2 .v15-trois.v22-trois>li:not(.fleche){min-height:0}.yc.v2 .v15-trois.v22-trois .fleche::before{left:50%}}
/* Pour les agences, Modèle B : quatre étapes qui tiennent dans leur case */
.yc.v2 .v16-flux.quatre .nd{padding:10px 4px}
.yc.v2 .v16-flux.quatre .nd b{white-space:normal;font-size:clamp(12px,.95vw,13.5px);line-height:1.2;overflow-wrap:normal;hyphens:none}
.yc.v2 .v16-flux.quatre .nd.s b{font-size:clamp(16px,1.35vw,19px)}
.yc.v2 .v16-flux.quatre .ln{flex-basis:clamp(42px,3.9vw,58px)}
.yc.v2 .v16-flux.quatre .ln span{font-size:10px;left:0;right:0}
/* Pour les entreprises, Gestion salariale (remplace la page dédiée) */
.yc.v2 .v22-gs .v-regard{align-items:stretch;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.yc.v2 .v22-gs .v-regard .v-ph{aspect-ratio:auto;min-height:420px;height:100%}
.yc.v2 .v22-gs-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin-top:clamp(22px,2.6vw,32px)}
.yc.v2 .v22-gs-f>div{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:start}
.yc.v2 .v22-gs-f>div+div{padding-left:clamp(20px,2.6vw,36px);border-left:1px solid var(--bord)}
.yc.v2 .v22-gs-f .ic{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ciel);color:var(--marine)}
.yc.v2 .v22-gs-f .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yc.v2 .v22-gs-f h3{margin:4px 0 6px;font:500 clamp(18px,1.4vw,20px)/1.25 var(--serif);color:var(--encre)}
.yc.v2 .v22-gs-f p{margin:0;font-size:15px;line-height:1.55;color:var(--corps)}
.yc.v2 .v22-gs-sm{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--bord)}
.yc.v2 .v22-gs-sm .v-sur{margin-bottom:8px}
.yc.v2 .v22-gs-sm p:not(.v-sur){margin:0;font-size:15.5px;line-height:1.55;color:var(--corps)}
.yc.v2 .v22-gs-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(22px,2.6vw,30px)}
@media (max-width:980px){
  .yc.v2 .v22-gs .v-regard{grid-template-columns:1fr}
  .yc.v2 .v22-gs .v-regard .v-ph{min-height:0;width:100%;height:auto;aspect-ratio:4/3}
}
@media (max-width:860px){
  .yc.v2 .v22-gs-f{grid-template-columns:1fr}
  .yc.v2 .v22-gs-f>div+div{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--bord)}
  .yc.v2 .v22-ic{width:40px;height:40px}
}
/* Modèles empilés (1100 px et moins) : la place revient aux liens du Modèle B */
@media (max-width:1100px) and (min-width:561px){.yc.v2 .v16-flux.quatre .ln{flex-basis:clamp(56px,7vw,72px)}.yc.v2 .v16-flux.quatre .ln span{font-size:10.5px}}

/* ===== V23, 16.10.2026 ===== */
.yc.v2 .v-lien.v23-nu>span:first-child,.yc.v2 .v-lien.v23-nu:hover>span:first-child{background:none;padding-bottom:0}
.yc.v2 .v23-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:8px}
@media (min-width:700px){.yc.v2 .v23-ligne{white-space:nowrap}}
@media (min-width:1101px){
  .yc.v2 .v13-axe:has(.v22-m){grid-template-columns:repeat(5,auto);justify-content:space-between}
  .yc.v2 .v13-fl.v22-m .ln,.yc.v2 .v13-fl.v22-e .ln{flex:0 0 44px}
  .yc.v2 .v13-axe:has(.v22-m) .tx b,.yc.v2 .v13-axe:has(.v22-m) .tx span{white-space:nowrap}
}
@media (min-width:1101px) and (max-width:1340px){
  .yc.v2 .v13-axe:has(.v22-m){gap:0 10px;padding-inline:24px}
  .yc.v2 .v13-fl.v22-m .ln,.yc.v2 .v13-fl.v22-e .ln{flex-basis:26px}
  .yc.v2 .v13-axe:has(.v22-m) .v13-act.centre{padding:14px 18px}
  .yc.v2 .v13-axe:has(.v22-m) .v13-act{gap:10px}
}

/* ===== Harmonisation avec SPTS Fiduciaire ===== */
.fid{
/* Copie de reference des feuilles de spts.ch (C:\spts-fiduciaire, spts.css puis production.css), prise le 15.10.2026, commit 9c6248f.
   Harmonisation du portage avec la fiduciaire : construire.mjs l'emboite sous .fid, elle ne touche que les blocs repris de spts.ch. */
/* Copie de livrables/site-web-spts/prototype/spts.css (workspace Jarvis), recopiée par
   scripts/porter-le-moteur.mjs à chaque portage. Corriger le prototype, jamais cette copie. */
/* spts.ch, direction « Le dossier tenu », variante A retenue le 03.10.2026.
   Source Serif 4 pour la voix (titres, citations), Inter pour la lecture, l'interface et les chiffres.
   Palette strictement celle de la marque. Signature : le filet du logo, « SPTS | Fiduciaire »,
   repris à l'échelle de la page dans les heros. */

&{
  --marine: #10416c;
  --marine-fonce: #0c3355;
  --encre: #0f2c43;
  --corps: #2a4560;
  --second: #4a6480;
  --cyan: #45bddf;
  --cyan-clair: #81cee2;
  /* 2026-10-10 : #2e7e9e (jeton de marque) faisait 4,2:1 sur --doux et 3,9:1 sur --doux-2, sous les
     4,5:1 de WCAG AA, sur 74 pages (sonde qualité du site). #2a728f, 9,5 % plus sombre, fait 5,4:1
     sur blanc, 4,95:1 sur --doux, 4,54:1 sur --doux-2. Accord de Youssef le même jour. */
  --cyan-lisible: #2a728f;
  --doux: #f1f6fa;
  --doux-2: #e4edf5;
  --bordure: #d9e4ee;
  --bordure-forte: #b9cddf;
  --blanc: #ffffff;
  --sur-sombre: #d5e3ef;
  --sur-sombre-2: #b9cddf;
  --ligne-sombre: #2a4a66;

  --inter: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --largeur: 1280px;
  --gouttiere: 48px;
  --r-petit: 2px;
  --r: 6px;
  --r-grand: 10px;
  --t: 180ms cubic-bezier(.2, .7, .2, 1);

  --h1: clamp(44px, 6.1vw, 92px);
  --h2: clamp(30px, 3.4vw, 50px);
  --h3: 24px;
  --filet: linear-gradient(180deg, var(--cyan), var(--cyan-clair));
}

*, *::before, *::after { box-sizing: border-box; }
/* clip et non hidden : l'en-tête collant reste collant. Filet de sécurité : 100vw compte
   la barre de défilement sous Windows, tout débordement de ce type est coupé. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font-family: var(--inter); font-size: 17px; line-height: 1.62;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--cyan-lisible); outline-offset: 3px; border-radius: var(--r-petit); }
.sombre :focus-visible { outline-color: var(--cyan-clair); }

h1, h2, h3, .voix {
  font-family: var(--serif); font-weight: 600; color: var(--encre);
  margin: 0; text-wrap: balance; font-variation-settings: "opsz" 60;
}
h1 { font-size: var(--h1); line-height: 1.02; letter-spacing: -0.018em; }
h2 { font-size: var(--h2); line-height: 1.08; letter-spacing: -0.012em; }
h3 { font-size: var(--h3); line-height: 1.22; letter-spacing: -0.006em; font-variation-settings: "opsz" 24; }
em.voix-it, h1 em, h2 em { font-style: italic; font-weight: 500; }
.chapeau { font-size: 19px; line-height: 1.6; color: var(--second); max-width: 56ch; text-wrap: pretty; }
.chiffres { font-variant-numeric: tabular-nums lining-nums; }
.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.surtitre { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); margin: 0 0 20px; }
.sombre .surtitre { color: var(--cyan-clair); }

/* Contenu à fournir : signalé, jamais inventé */
.a-fournir { color: var(--second); font-style: italic; text-decoration: underline dotted var(--bordure-forte); text-underline-offset: 4px; }
.puce-fournir { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--inter); letter-spacing: .04em; text-transform: uppercase; color: #8a5c14; background: #fbf3e4; border: 1px solid #efdcb8; border-radius: 999px; padding: 5px 9px; }
.note-explo { margin: 0; padding: 7px 16px; text-align: center; font: 500 12.5px/1.4 var(--inter); color: #8a5c14; background: #fbf3e4; border-bottom: 1px solid #efdcb8; }

/* Boutons et liens */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: var(--r); border: 0;
  background: var(--marine); color: #fff; font: 600 16px/1 var(--inter); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; transition: background var(--t), transform var(--t);
}
.bouton:hover { background: var(--marine-fonce); }
.bouton:active { transform: translateY(1px); }
.bouton.clair { background: #fff; color: var(--marine); }
.bouton.clair:hover { background: var(--doux); }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--marine); text-decoration: none; }
.sombre .lien-fleche { color: #fff; }
.fleche { width: 18px; height: 18px; flex: none; transition: transform var(--t); }
a:hover .fleche, a:focus-visible .fleche { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--bordure); }
.entete .enveloppe { display: flex; align-items: center; gap: 36px; height: 80px; }
.logo { flex: none; display: block; }
.logo img { height: 28px; width: auto; }
.nav { display: flex; gap: 2px; margin-right: auto; }
.nav > li { list-style: none; position: relative; }
.nav { padding: 0; margin-top: 0; margin-bottom: 0; }
.nav a, .nav button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font: 500 15px/1 var(--inter); color: var(--encre); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav > li > a::after, .nav > li > button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--t); }
.nav > li > a:hover::after, .nav > li > button:hover::after, .nav [aria-current="true"]::after, .nav [aria-expanded="true"]::after { transform: scaleX(1); }
.nav button svg { width: 14px; height: 14px; color: var(--second); transition: transform var(--t); }
.nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.deroulant { position: absolute; top: calc(100% + 18px); left: -12px; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); box-shadow: 0 24px 48px -24px rgba(15, 44, 67, .28); padding: 28px 32px; display: grid; gap: 32px; z-index: 50; }
.deroulant.trois { grid-template-columns: repeat(3, 210px); }
.deroulant[hidden] { display: none; }
.deroulant p { margin: 0 0 10px; font: 600 12px/1.2 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); }
.deroulant ul { list-style: none; margin: 0; padding: 0; }
.deroulant a { display: flex; min-height: 38px; padding: 0; font-size: 15px; font-weight: 500; }
.deroulant a:hover { color: var(--marine); text-decoration: underline; text-underline-offset: 4px; }
.langues { display: flex; align-items: center; gap: 2px; font: 600 14px/1 var(--inter); color: var(--second); }
.langues a { padding: 14px 6px; text-decoration: none; }
.langues a[aria-current] { color: var(--marine); }
.entete .bouton { min-height: 44px; padding: 0 18px; font-size: 15px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--bordure); border-radius: var(--r); background: #fff; cursor: pointer; place-items: center; }
.burger svg { width: 22px; height: 22px; }
.panneau-mobile { display: none; }

/* ---------- Hero : la grammaire du logo à l'échelle de la page ---------- */
.hero { position: relative; padding: 72px 0 0; }
/* Accueil : photo élargie d'environ 50 px vers la gauche (12.10.2026), sans faire passer la ligne
   des faits sur deux lignes au-dessus de 1440 px. Les pages intérieures gardent leur écart de 52 px. */
.hero-grille { display: grid; grid-template-columns: minmax(0, 6.2fr) 4px minmax(0, 5.7fr); column-gap: 34px; align-items: stretch; }
.hero-texte { padding: 20px 0 64px; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(46px, 5.7vw, 82px); }
.hero h1 .ligne { display: block; }
.hero h1 em { color: var(--marine); }
.hero .chapeau { margin: 34px 0 38px; font-size: 20px; color: var(--corps); max-width: 46ch; }
.seuil { background: var(--filet); border-radius: 4px; margin: 28px 0 0; }
/* Photo dans la colonne du site, alignée sur le menu : étendue au bord droit, elle faisait paraître
   la page décentrée (Youssef, 12.10.2026). Le mobile garde sa photo pleine largeur. */
.hero-visuel { position: relative; min-height: 640px; }
.hero-photo { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-grand); background: var(--doux); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 42%; }
.hero-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(15,44,67,0), rgba(15,44,67,.28)); pointer-events: none; }
.encart {
  position: absolute; left: 28px; bottom: 28px; width: min(320px, calc(100% - 56px));
  margin: 0; padding: 20px 22px 20px 26px; background: rgba(255,255,255,.97); border-radius: var(--r);
  box-shadow: 0 18px 40px -18px rgba(15, 44, 67, .45);
}
.encart::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; background: var(--filet); border-radius: 0 3px 3px 0; }
.encart strong { display: block; font: 600 21px/1.2 var(--serif); letter-spacing: -.008em; color: var(--encre); margin-bottom: 6px; }
.encart span { font-size: 15px; line-height: 1.5; color: var(--second); }
.faits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--bordure); list-style: none; font-size: 14.5px; color: var(--second); }
.faits li { display: flex; align-items: center; gap: 22px; }
.faits li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--bordure-forte); margin-left: -16px; margin-right: -10px; }
/* Un point qui ouvre une ligne tombe hors de la liste, à -16 px : il est coupé, et le texte reste
   aligné sur la ligne du dessus (écart de 26 px et point à -16 px : mêmes espacements). La marge de 6 px
   garde le contour de focus du lien. */
.faits { overflow: clip; overflow-clip-margin: 6px; }
.faits strong, .faits a { color: var(--encre); font-weight: 600; }
.faits a { text-decoration: underline; text-decoration-color: var(--bordure-forte); text-underline-offset: 4px; }

/* ---------- Sections : rythmes différents ---------- */
.section { padding: 128px 0; }
.section.serre { padding: 88px 0; }
.section.ample { padding: 160px 0; }
.fond-doux { background: var(--doux); }
.sombre { background: var(--marine); color: var(--sur-sombre); }
.sombre h2, .sombre h3 { color: #fff; }
.tres-sombre { background: var(--marine-fonce); }

/* 03 Publics : trois colonnes décalées, des images de situation */
.publics-tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 56px; }
.publics-tete .chapeau { margin: 0; }
.publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: start; }
.public { position: relative; text-decoration: none; color: inherit; }
.public:nth-child(2) { margin-top: 48px; }
.public:nth-child(3) { margin-top: 16px; }
.public-photo { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: var(--r); background: var(--doux); margin-bottom: 22px; }
.public-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.public:hover .public-photo img { transform: scale(1.035); }
.public-photo::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--filet); transform: scaleY(0); transform-origin: top; transition: transform var(--t); }
.public:hover .public-photo::after, .public:focus-within .public-photo::after { transform: scaleY(1); }
.public h3 { font-size: 27px; margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.public h3 a { text-decoration: none; }
.public h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.public h3 .fleche { width: 22px; height: 22px; color: var(--marine); }
.public p { margin: 0; color: var(--second); font-size: 16px; }
.public .sous { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; font-weight: 600; position: relative; z-index: 2; }
.public .sous a { color: var(--marine); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.public .sous a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 04 Services : un index dense, des noms en grand */
.index-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
.pole { padding-top: 28px; border-top: 2px solid var(--encre); }
.pole h3 { font-size: 32px; margin-bottom: 8px; }
.pole .accroche { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--second); margin: 0 0 24px; min-height: 2.6em; }
.pole ul { list-style: none; margin: 0; padding: 0; }
.pole li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; border-top: 1px solid var(--bordure-forte); text-decoration: none; font-size: 16px; color: var(--encre); }
.pole li a .fleche { opacity: 0; transform: translateX(-6px); width: 16px; height: 16px; color: var(--marine); }
.pole li a:hover .fleche, .pole li a:focus-visible .fleche { opacity: 1; transform: none; }
.pole li a.phare { font-weight: 600; }
.aussi { margin-top: 64px; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; border-top: 1px solid var(--bordure-forte); border-bottom: 1px solid var(--bordure-forte); }
.aussi > span { display: flex; align-items: center; padding-right: 32px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--marine); }
.aussi a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; text-decoration: none; border-left: 1px solid var(--bordure-forte); }
.aussi a:hover { background: #fff; }
.aussi strong { display: block; font-size: 16px; }
.aussi small { font-size: 14px; color: var(--second); }

/* 05 Simulateur : un instrument posé sur la table */
.simu-section { position: relative; background: linear-gradient(90deg, var(--blanc) 0 58%, var(--doux) 58% 100%); }

.simu-bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.simu-texte h2 { margin-bottom: 26px; }
.simu-texte p { color: var(--second); max-width: 44ch; }
.simu-texte .ctas { margin-top: 30px; }
.instrument { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); box-shadow: 0 30px 60px -36px rgba(15, 44, 67, .35); overflow: hidden; }
.instrument-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--bordure); }
.instrument-tete span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--second); }
.etat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #8a5c14; }
.etat.revu { color: #166a44; }
.etat.revu::before { background: #1e8e5a; }
.champ[hidden] { display: none; }
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b77c1d; }
.instrument-corps { padding: 28px 28px 24px; }
.instrument h3 { font-size: 26px; margin-bottom: 10px; }
.instrument .explication { font-size: 15px; color: var(--second); margin-bottom: 24px; }
.instrument .explication strong { color: var(--encre); font-weight: 600; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champs .large { grid-column: 1 / -1; }
.champ label { display: block; font-size: 13px; font-weight: 600; color: var(--second); margin-bottom: 8px; }
.champ select, .champ input { width: 100%; height: 52px; padding: 0 14px; font: 500 16px var(--inter); color: var(--encre); background: #fff; border: 1px solid var(--bordure-forte); border-radius: var(--r); appearance: none; -webkit-appearance: none; transition: border-color var(--t), box-shadow var(--t); }
.champ select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; }
.champ .unite { position: relative; }
.champ .unite span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--second); pointer-events: none; }
.champ .unite input { padding-left: 52px; font-variant-numeric: tabular-nums; }
.champ select:hover, .champ input:hover { border-color: var(--second); }
.champ select:focus, .champ input:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 4px rgba(69, 189, 223, .24); }
.registre { margin-top: 26px; border-top: 1.5px solid var(--encre); }
.registre-ligne { display: flex; align-items: baseline; gap: 14px; padding: 22px 0 14px; }
.registre-ligne .libelle { font-size: 15px; font-weight: 600; white-space: nowrap; }
.registre-ligne .points { flex: 1; border-bottom: 2px dotted var(--bordure-forte); transform: translateY(-6px); }
.registre-ligne .montant { font: 600 44px/1 var(--inter); letter-spacing: -.035em; color: var(--second); font-variant-numeric: tabular-nums; }
.registre-ligne .montant small { font-size: 15px; letter-spacing: 0; margin-right: 8px; }
.registre-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.registre-pied span { font-size: 13.5px; color: var(--second); max-width: 30ch; }
.refus { margin: 20px 0 0; padding: 14px 16px 14px 18px; border-left: 3px solid #b77c1d; background: #fbf3e4; color: #6e4a10; font-size: 14.5px; line-height: 1.55; border-radius: 0 var(--r) var(--r) 0; }
.mentions { margin-top: 20px; font-size: 13.5px; color: var(--second); line-height: 1.55; }
.mentions p { margin: 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--marine); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-weight: 500; }
details[open] summary::after { content: "–"; }
.sombre details summary { color: #fff; }

/* 06 Accompagnement : le classeur */
.accompagnement { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; align-items: center; }
.accompagnement h2 { font-size: clamp(34px, 4vw, 58px); }
.accompagnement p { font-size: 19px; max-width: 42ch; color: var(--sur-sombre); margin: 28px 0 36px; }
.classeur { list-style: none; margin: 0; padding: 0; }
.classeur li { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--ligne-sombre); font: 500 25px/1.2 var(--serif); color: #fff; }
.classeur li:last-child { border-bottom: 1px solid var(--ligne-sombre); }
.classeur li > span:first-child { font: 600 13px/1 var(--inter); letter-spacing: .06em; color: var(--sur-sombre-2); font-variant-numeric: tabular-nums; }
.classeur li > span:last-child { font: 500 13px/1 var(--inter); color: var(--sur-sombre-2); }
.classeur li.actif::before { content: ""; position: absolute; left: -24px; top: 16px; bottom: 16px; width: 4px; background: var(--filet); border-radius: 3px; }

/* 07 Pourquoi SPTS : une affirmation, puis les preuves */
.affirmation { max-width: 1040px; }
.affirmation h2 { font-size: 14px; font-family: var(--inter); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); margin-bottom: 26px; }
.affirmation .grand { font: 600 clamp(32px, 4vw, 58px)/1.1 var(--serif); letter-spacing: -.015em; color: var(--encre); margin: 0 0 26px; text-wrap: balance; font-variation-settings: "opsz" 60; }
.affirmation .grand em { color: var(--marine); }
.affirmation p.suite-aff { font-size: 19px; color: var(--second); max-width: 60ch; }
.preuves { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: 48px; align-items: start; }
.preuve h3 { font-size: 23px; margin-bottom: 12px; }
.preuve p { color: var(--second); font-size: 16px; margin: 0; }
.piece-chiffre { position: relative; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 28px 30px 22px; margin-top: 22px; }
.piece-chiffre .valeur { font: 650 50px/1 var(--inter); letter-spacing: -.035em; color: var(--encre); font-variant-numeric: tabular-nums; }
.piece-chiffre .quoi { margin: 12px 0 18px; font-size: 15px; color: var(--second); }
.piece-chiffre .source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 14px; border-top: 1px dashed var(--bordure-forte); font-size: 13px; color: var(--second); margin: 0; }
.piece-chiffre .source a { color: var(--cyan-lisible); font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.verifie { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--encre); }
.verifie::before { content: ""; width: 4px; height: 16px; background: var(--filet); border-radius: 2px; }

/* 08 Chiffrage : le périmètre et le devis */
.chiffrage { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; align-items: start; }
.chiffrage h2 { margin-bottom: 22px; }
.chiffrage .intro { color: var(--second); max-width: 50ch; font-size: 16px; }
.etapes { list-style: none; margin: 44px 0 0; padding: 0; counter-reset: e; }
.etapes li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 6px; padding-bottom: 32px; }
.etapes li::before { counter-increment: e; content: counter(e); width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--marine); color: var(--marine); background: var(--doux); font: 600 15px/33px var(--inter); text-align: center; position: relative; z-index: 1; }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 36px; bottom: 0; width: 1.5px; background: var(--bordure-forte); }
.etapes h3 { font-size: 23px; margin: 4px 0 8px; }
.etapes p { margin: 0; color: var(--second); font-size: 16px; max-width: 50ch; }
.devis { position: sticky; top: 120px; margin: 0; background: #fff; border-radius: var(--r); padding: 34px 34px 26px; box-shadow: 0 1px 0 var(--bordure), 0 40px 70px -46px rgba(15, 44, 67, .45); }
.devis-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1.5px solid var(--encre); }
.devis-tete img { height: 19px; width: auto; }
.devis-tete span { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--second); }
.devis dl { margin: 0; }
.devis .ligne { display: grid; grid-template-columns: 124px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.devis dt { font-size: 13px; font-weight: 600; color: var(--second); }
.devis dd { margin: 0; font-size: 15px; color: var(--encre); }
.devis .barre { display: block; height: 7px; border-radius: 4px; background: var(--doux-2); margin-top: 8px; }
.devis .accord { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; font-weight: 600; }
.devis .case { width: 24px; height: 24px; border: 1.5px solid var(--marine); border-radius: 4px; display: grid; place-items: center; color: var(--marine); flex: none; }
.devis figcaption { margin-top: 14px; font-size: 12.5px; color: var(--second); }

/* 09 SPTS Suite : compact */
.suite { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.suite .sous-titre { font: 500 italic 22px/1.3 var(--serif); color: var(--second); margin: 8px 0 18px; }
.suite p { color: var(--second); font-size: 16px; }
.outils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.outil { padding: 20px 0 22px; border-top: 1px solid var(--bordure); }
.outil.prod { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; padding: 26px 0 28px; border-top: 2px solid var(--encre); }
.statut { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; background: var(--doux); color: var(--second); }
.statut.prod { background: #e9f5ef; color: #166a44; }
.statut.prod::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1e8e5a; }
.outil .nom { display: block; font: 600 20px/1.3 var(--serif); margin: 12px 0 4px; }
.outil.prod .nom { font-size: 26px; margin: 0; }
.outil .desc { display: block; font-size: 15px; color: var(--second); }
.outil.prod .desc { grid-column: 1 / -1; }
.suite .reserve { margin-top: 22px; font-size: 14px; color: var(--second); }

/* 10 Avis : la parole des clients, sur fond profond */
.avis-tete { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 64px; }
.avis-tete p { margin: 14px 0 0; max-width: 46ch; color: var(--sur-sombre); }
.releve { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border: 1px solid var(--ligne-sombre); border-radius: var(--r); text-decoration: none; color: #fff; }
.releve:hover { border-color: var(--sur-sombre-2); }
.releve .note { font: 650 46px/1 var(--inter); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.releve .etoiles { position: relative; display: inline-block; font-size: 17px; letter-spacing: 2px; color: rgba(255,255,255,.35); line-height: 1; }
.releve .etoiles i { position: absolute; left: 0; top: 0; width: 98%; overflow: hidden; color: #f6c453; font-style: normal; white-space: nowrap; }
.releve .meta { display: block; margin-top: 6px; font-size: 13.5px; color: var(--sur-sombre); }
.releve .meta b { color: #fff; font-weight: 600; }
.citation { margin: 0; max-width: 1100px; }
.citation blockquote { position: relative; margin: 0; font: 450 clamp(30px, 3.6vw, 52px)/1.18 var(--serif); letter-spacing: -.014em; color: #fff; text-wrap: pretty; font-variation-settings: "opsz" 48; }
.citation blockquote::before { content: "«"; position: absolute; left: -0.85em; top: -0.04em; color: var(--cyan); }
.citation figcaption, .temoignages figcaption { margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--sur-sombre); display: flex; align-items: center; gap: 12px; }
.citation figcaption::before, .temoignages figcaption::before { content: ""; width: 26px; height: 2px; background: var(--cyan); flex: none; }
.citation details { margin-top: 10px; font-size: 15px; color: var(--sur-sombre); }
.citation details p { margin: 8px 0 0; max-width: 64ch; }
.temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--ligne-sombre); }
.temoignages figure { margin: 0; }
.temoignages blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: #fff; }
.categories { margin: 48px 0 0; font-size: 14px; color: var(--sur-sombre); }
.categories .a-fournir { color: var(--sur-sombre-2); }

/* 11 Ressources : un sommaire serré */
.ressources-tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.sommaire { border-top: 1.5px solid var(--encre); }
.sommaire a { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px 22px; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--bordure); text-decoration: none; }
.sommaire a:hover { background: linear-gradient(90deg, var(--doux), transparent 70%); }
.sommaire .type { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-lisible); }
.sommaire .titre { font: 600 21px/1.3 var(--serif); }
.sommaire .date { font-size: 14px; color: var(--second); }
.sommaire .resume { display: block; margin-top: 6px; font: 400 15px/1.5 var(--inter); color: var(--second); }
.sommaire-note { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--second); }

/* 12 Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
.contact h2 { margin-bottom: 20px; }
.ecrire { margin-top: 36px; padding: 26px 0; border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--bordure-forte); }
.ecrire .petit { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--marine); }
.ecrire .mail { display: block; width: fit-content; margin: 10px 0 12px; font: 600 clamp(28px, 2.8vw, 38px)/1.1 var(--serif); color: var(--marine); text-decoration: none; border-bottom: 2px solid var(--cyan); padding-bottom: 3px; }
.ecrire p { margin: 0; font-size: 15px; color: var(--second); max-width: 44ch; }
.coordonnees { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 20px 0; font-size: 15px; border-bottom: 1px solid var(--bordure-forte); }
.coordonnees > div { display: flex; flex-direction: column; }
.coordonnees span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--second); }
.coordonnees a { color: var(--encre); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.formulaire { background: #fff; border-radius: var(--r-grand); padding: 38px; display: grid; gap: 20px; box-shadow: 0 1px 0 var(--bordure), 0 30px 60px -44px rgba(15, 44, 67, .4); }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire label { display: block; font-size: 13px; font-weight: 600; color: var(--second); margin-bottom: 8px; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; font: 500 16px var(--inter); color: var(--encre); border: 1px solid var(--bordure-forte); border-radius: var(--r); background: #fff; }
.formulaire input, .formulaire select { height: 52px; padding: 0 14px; }
.formulaire select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; }
.formulaire textarea { min-height: 150px; padding: 14px; resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 4px rgba(69, 189, 223, .24); }
.formulaire .pied-form { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 6px; }
.formulaire .pied-form p { margin: 0; font-size: 13.5px; color: var(--second); max-width: 36ch; }
.formulaire .pied-form a { color: var(--marine); }
.formulaire .ok { margin: 0; padding: 14px 16px; background: #e9f5ef; border: 1px solid #c2e3d3; color: #166a44; border-radius: var(--r); font-size: 14.5px; }

/* Pied de page */
.pied { background: var(--encre); color: var(--sur-sombre-2); padding: 88px 0 36px; font-size: 15px; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-haut { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--ligne-sombre); }
.pied-haut img { height: 28px; width: auto; margin-bottom: 28px; }
.pied p { margin: 0 0 14px; line-height: 1.65; }
.pied h4 { margin: 0 0 16px; font: 600 12px/1 var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-sombre-2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pied li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sur-sombre); }
.pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 26px; font-size: 14px; flex-wrap: wrap; }
.portage { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--ligne-sombre); border-radius: var(--r); padding: 4px 16px; }
.portage a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Page Externalisation RH ---------- */
.fil { font-size: 14px; color: var(--second); margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.fil a { color: var(--second); text-decoration: none; }
.fil a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero { padding: 64px 0 112px; }
.page-hero .hero-grille { grid-template-columns: minmax(0, 6.6fr) 4px minmax(0, 4.6fr); column-gap: 52px; }
.page-hero h1 { font-size: clamp(40px, 5vw, 72px); }
.page-hero h1.court { font-size: clamp(42px, 5.4vw, 80px); white-space: nowrap; }
.page-hero .dek { text-wrap: balance; margin: 18px 0 0; font: italic 400 clamp(24px, 2.4vw, 34px)/1.22 var(--serif); color: var(--marine); letter-spacing: -.01em; }
.page-hero .chapeau { margin: 30px 0 36px; color: var(--corps); }
.page-hero .hero-texte { padding: 16px 0 0; }
.page-hero .hero-visuel { min-height: 0; margin-right: 0; }
.page-hero .hero-photo { position: relative; inset: auto; aspect-ratio: 4 / 4.8; border-radius: var(--r-grand); }
.page-hero .hero-photo img { object-position: 50% 40%; }
.page-hero .hero-photo::after { display: none; }

.partage-tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 64px; }
.partage-tete .chapeau { margin: 0; }
.partage { display: grid; grid-template-columns: minmax(0, 1fr) 4px minmax(0, 1fr); gap: 64px; }
.partage .seuil-v { background: var(--filet); border-radius: 4px; }
.partage .qui { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--marine); margin: 0 0 14px; }
.partage h3 { font-size: 30px; margin-bottom: 4px; }
.partage ul { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--bordure-forte); }
.partage li { padding: 14px 0 14px 32px; border-bottom: 1px solid var(--bordure-forte); position: relative; font-size: 16.5px; }
.partage .nous li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 8px; border-left: 2px solid var(--marine); border-bottom: 2px solid var(--marine); transform: rotate(-45deg); }
.partage .vous li::before { content: ""; position: absolute; left: 3px; top: 21px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan-lisible); }
.partage .vous p { margin: 22px 0 0; color: var(--second); }

.prestations { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 0 88px; }
.prestation-phare h3 { font-size: 38px; margin: 0 0 14px; }
.prestation-phare p { color: var(--second); max-width: 46ch; }
.fiche { margin: 34px 0 0; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 22px 24px 18px; box-shadow: 0 30px 60px -44px rgba(15, 44, 67, .45); }
.fiche-tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1.5px solid var(--encre); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--second); }
.fiche-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bordure); font-size: 14px; }
.fiche-ligne i { display: block; height: 7px; border-radius: 4px; background: var(--doux-2); }
.fiche-ligne.deduction span { padding-left: 14px; color: var(--second); }
.fiche-ligne.total { border-bottom: 0; border-top: 1.5px solid var(--encre); margin-top: -1px; font-weight: 600; }
.fiche-ligne.total i { background: var(--cyan-clair); }
.fiche figcaption { margin-top: 10px; font-size: 12.5px; color: var(--second); }
.liste-prestations { border-top: 1.5px solid var(--encre); }
.prestation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 28px 0; border-bottom: 1px solid var(--bordure); text-decoration: none; color: inherit; }
.prestation h3 { font-size: 25px; }
.prestation p { grid-column: 1; margin: 0; font-size: 15.5px; color: var(--second); }
.prestation .fleche { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--marine); width: 20px; height: 20px; }

.manifeste { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.manifeste .grand { font: 600 clamp(36px, 4.6vw, 66px)/1.05 var(--serif); letter-spacing: -.018em; color: #fff; margin: 0 0 40px; font-variation-settings: "opsz" 60; }
.manifeste .grand em { font-weight: 400; color: var(--cyan-clair); }
.exemples { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.exemples li { padding: 16px 0 16px 36px; border-top: 1px solid var(--ligne-sombre); font-size: 17px; color: #fff; position: relative; }
.exemples li::before { content: "—"; content: ""; position: absolute; left: 0; top: 27px; width: 18px; height: 2px; background: var(--cyan); }
.manifeste .conclusion { margin: 30px 0 0; font-size: 19px; color: var(--sur-sombre); max-width: 46ch; }
.manifeste-photo { position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--r-grand); overflow: hidden; background: var(--ligne-sombre); }
.manifeste-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

.deux-situations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1.5px solid var(--encre); }
.deux-situations > div { padding: 40px 48px 8px 0; }
.deux-situations > div + div { padding: 40px 0 8px 48px; border-left: 1px solid var(--bordure-forte); }
.deux-situations .marque { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); margin: 0 0 16px; }
.deux-situations h3 { font-size: 30px; margin-bottom: 14px; }
.deux-situations p { color: var(--second); font-size: 16.5px; }

.deroule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; counter-reset: d; position: relative; }
.deroule::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 1.5px; background: var(--bordure-forte); }
.deroule li { position: relative; }
.deroule li::before { counter-increment: d; content: counter(d); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--marine); background: var(--doux); color: var(--marine); font: 600 15px/1 var(--inter); margin-bottom: 24px; position: relative; }
.deroule h3 { font-size: 23px; margin-bottom: 10px; }
.deroule p { color: var(--second); font-size: 16px; margin: 0; }
.bascule-mois { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--marine); }
.bascule-mois i { display: inline-flex; gap: 3px; }
.bascule-mois i b { width: 22px; height: 6px; border-radius: 3px; background: var(--bordure-forte); }
.bascule-mois i b:last-child { background: var(--filet); background: var(--cyan); }
.avis-emplacement { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 26px; border-top: 1px dashed var(--bordure-forte); font-size: 15px; color: var(--second); }

.appel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; padding-top: 48px; border-top: 1.5px solid var(--encre); position: relative; }
.appel::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 120px; height: 4px; background: var(--filet); background: linear-gradient(90deg, var(--cyan), var(--cyan-clair)); border-radius: 0 0 3px 3px; }
.appel h2 { font-size: clamp(32px, 3.8vw, 54px); }
.appel p { margin: 22px 0 0; font-size: 19px; max-width: 46ch; color: var(--second); }
.appel h2 em { color: var(--marine); }
.appel .ctas { justify-content: flex-end; }

/* Version courte de l intro : proposition, affichée seulement avec ?court */
.chapeau .court { display: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
  &{ --gouttiere: 32px; }
  .nav, .entete .langues { display: none; }
  .burger { display: inline-grid; }
  .entete .enveloppe { justify-content: space-between; }
  .panneau-mobile:not([hidden]) { display: block; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 80px); z-index: 39; border-top: 1px solid var(--bordure); background: #fff; overflow: auto; padding: 24px var(--gouttiere) 40px; }
  .panneau-mobile ul { list-style: none; margin: 0; padding: 0; }
  .panneau-mobile li a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--bordure); font: 600 21px/1.2 var(--serif); text-decoration: none; }
  .panneau-mobile .bouton { margin-top: 28px; width: 100%; }
  .panneau-mobile .langues { display: flex; margin-top: 18px; }
  .publics { gap: 28px; }
  .index-services { gap: 0 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  &{ --gouttiere: 20px; --h2: 32px; --h3: 21px; }
  body { font-size: 16.5px; }
  .entete .enveloppe { height: 64px; gap: 12px; }
  .panneau-mobile:not([hidden]) { height: calc(100dvh - 64px); }
  .logo img { height: 22px; }
  .entete > .enveloppe > .bouton { display: none; }

  .hero { padding-top: 28px; }
  .hero-grille, .page-hero .hero-grille { grid-template-columns: minmax(0, 1fr); }
  .seuil { display: none; }
  .hero .hero-texte { display: contents; }
  .hero .surtitre { margin-bottom: 14px; font-size: 12px; }
  .hero .faits { order: 3; margin: 22px 0 0; padding-top: 14px; gap: 4px 16px; }
  .hero .faits li + li::before { display: none; }
  .hero .hero-visuel { order: 2; margin-top: 30px; }
  .chapeau .long { display: none; }
  .chapeau .court { display: inline; }
  .hero h1 { font-size: 42px; max-width: none; }
  .hero .chapeau { font-size: 17px; margin: 18px 0 22px; }
  .hero .ctas { gap: 4px 20px; }
  .hero .ctas .bouton { min-height: 50px; padding: 0 22px; }
  .faits { margin-top: 24px; padding-top: 16px; font-size: 13.5px; gap: 4px 18px; }
  .hero-visuel { min-height: 0; margin: 0 calc(-1 * var(--gouttiere)); }
  .hero-photo { position: relative; inset: auto; aspect-ratio: 16 / 10.5; border-radius: 0; }
  .encart { position: relative; left: auto; bottom: auto; width: auto; margin: -34px var(--gouttiere) 0; padding: 16px 18px 16px 22px; }
  .encart strong { font-size: 18px; }
  .encart span { font-size: 14.5px; }

  .section { padding: 60px 0; }
  .section.serre { padding: 48px 0; }
  .section.ample { padding: 72px 0; }
  .chapeau { font-size: 17px; }
  .pole li a { min-height: 46px; font-size: 15.5px; }
  .pole .accroche { font-size: 17px; }
  .publics-tete, .simu-bloc, .accompagnement, .chiffrage, .suite, .contact, .partage-tete, .prestations, .manifeste, .appel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .publics-tete { margin-bottom: 20px; gap: 16px; }
  .publics { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .public, .public:nth-child(2), .public:nth-child(3) { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--bordure); }
  .public-photo { aspect-ratio: 1; margin: 0; grid-row: 1 / span 2; }
  .public > *:not(.public-photo) { grid-column: 2; }
  .public .sous { grid-column: 1 / -1; margin-top: 6px; gap: 8px; }
  .public .sous a { min-height: 40px; padding: 0 13px; border: 1px solid var(--bordure-forte); border-radius: 999px; font-size: 13.5px; background: #fff; }
  .public .sous a:hover { text-decoration: none; border-color: var(--marine); }
  .public h3 { font-size: 23px; margin-bottom: 6px; }
  .public h3 .fleche { width: 18px; height: 18px; }
  .public p { font-size: 15px; }

  .index-services { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pole h3 { font-size: 27px; }
  .pole .accroche { min-height: 0; margin-bottom: 14px; }
  .pole li a .fleche { opacity: 1; transform: none; }
  .aussi { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .aussi > span { padding: 16px 0 6px; }
  .aussi a { border-left: 0; border-top: 1px solid var(--bordure-forte); padding: 18px 0; }

  .simu-section { background: var(--blanc); }
  .simu-texte { order: 2; }
  .instrument { order: 1; margin: 0 -8px; }
  .instrument-tete { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .instrument-corps { padding: 22px 18px; }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .registre-ligne .montant { font-size: 34px; }
  .registre-pied { flex-direction: column; align-items: stretch; }
  .registre-pied .bouton { width: 100%; }

  .classeur li { font-size: 20px; grid-template-columns: 40px 1fr auto; }
  .classeur li.actif::before { left: -12px; }

  .preuves { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 44px; }
  .piece-chiffre .valeur { font-size: 40px; }

  .devis { position: relative; top: 0; padding: 26px 20px; }
  .devis .ligne { grid-template-columns: 100px 1fr; }

  .outils { grid-template-columns: minmax(0, 1fr); }

  .avis-tete { margin-bottom: 40px; }
  .citation blockquote { font-size: 25px; }
  .citation blockquote::before { position: static; margin-right: 6px; }
  .temoignages { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; padding-top: 28px; }
  .temoignages blockquote { font-size: 15px; }

  .ressources-tete { flex-direction: column; align-items: flex-start; }
  .sommaire a { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 12px; }
  .sommaire .type, .sommaire .titre, .sommaire .date { grid-column: 1; }
  .sommaire .fleche { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

  .coordonnees { grid-template-columns: minmax(0, 1fr); }
  .formulaire { padding: 22px 18px; margin: 0 -8px; }
  .formulaire .duo { grid-template-columns: minmax(0, 1fr); }
  .formulaire .pied-form { flex-direction: column; align-items: stretch; }

  .pied { padding-top: 56px; }
  .pied-haut { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .pied-haut > div:first-child { grid-column: 1 / -1; }

  .page-hero { padding: 28px 0 64px; }
  .page-hero h1 { font-size: 36px; }
  .page-hero .dek { font-size: 22px; }
  .page-hero .chapeau { font-size: 17px; margin: 18px 0 24px; }
  .page-hero .hero-visuel { margin: 8px calc(-1 * var(--gouttiere)) 0; }
  .page-hero .hero-photo { aspect-ratio: 16 / 11; border-radius: 0; }
  .partage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .partage .seuil-v { height: 4px; width: 72px; }
  .prestation-phare h3 { font-size: 30px; }
  .manifeste-photo { aspect-ratio: 16 / 11; order: -1; }
  .deux-situations { grid-template-columns: minmax(0, 1fr); }
  .deux-situations > div, .deux-situations > div + div { padding: 28px 0 8px; border-left: 0; }
  .deux-situations > div + div { border-top: 1px solid var(--bordure-forte); }
  .deroule { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .deroule::before { left: 18px; right: auto; top: 18px; bottom: 18px; width: 1.5px; height: auto; }
  .deroule li { padding-left: 58px; }
  .deroule li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .appel .ctas { justify-content: flex-start; }
  .appel .ctas .bouton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.registre-ligne .montant .vide { color: var(--bordure-forte); letter-spacing: .08em; }
/* Cibles tactiles d'au moins 44 px */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
details summary { min-height: 44px; }
.ecrire .mail { padding-block: 6px 5px; }

/* Itération 4 : replis mobiles. Sur desktop, le résumé n'est qu'un en-tête. */
details[data-replie-mobile] > summary { display: block; min-height: 0; color: inherit; font-weight: inherit; cursor: default; list-style: none; }
details[data-replie-mobile] > summary::after { content: none; }
.pole > summary .compte { display: none; }
.autres-avis > summary { display: none; }
.pied-col > summary h4 { margin: 0 0 16px; }
@media (max-width: 760px) {
  details[data-replie-mobile] > summary { cursor: pointer; position: relative; }
  details[data-replie-mobile] > summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--marine); border-bottom: 2px solid var(--marine); transform: translateY(-70%) rotate(45deg); transition: transform var(--t); }
  details[data-replie-mobile][open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
  details.pole > summary { padding: 4px 32px 16px 0; }
  .pole > summary .accroche { margin-bottom: 8px; }
  .pole > summary .compte { display: inline-block; font-size: 13px; font-weight: 600; color: var(--marine); }
  .index-services { gap: 0; }
  .pole { padding-top: 20px; }
  .autres-avis { margin-top: 36px; border-top: 1px solid var(--ligne-sombre); }
  details.autres-avis > summary { display: flex; align-items: center; min-height: 52px; font-size: 15px; font-weight: 600; color: #fff; }
  details.autres-avis > summary::after { border-color: #fff; }
  .autres-avis .temoignages { margin-top: 8px; padding-top: 8px; border-top: 0; }
  .pied-col { border-top: 1px solid var(--ligne-sombre); }
  details.pied-col > summary { min-height: 48px; display: flex; align-items: center; }
  .pied-col > summary h4 { margin: 0; }
  details.pied-col > summary::after { border-color: var(--sur-sombre-2); }
  .pied-col ul { padding-bottom: 12px; }
  .pied-haut { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pied-haut > div:first-child { padding-bottom: 28px; }
  .manifeste-photo { order: 0; aspect-ratio: 3 / 2; }
}

/* ======================================================================
   Générateur : en-tête du prototype à une page (deux langues), pages
   intérieures génériques, emplacements et chiffres sourcés.
   Les repères lus par verifier.mjs sont conservés : .entete, .nav,
   .deroulant > button, .burger, [data-simu], .simu-refus, .valeur,
   [data-form], .form-ok, [data-outil], [data-vers].
   ====================================================================== */
.proto { margin: 0; padding: 7px 16px; text-align: center; font: 500 12.5px/1.4 var(--inter); color: #8a5c14; background: #fbf3e4; border-bottom: 1px solid #efdcb8; }
.entete-l { display: flex; align-items: center; gap: 30px; height: 80px; }
.entete .nav { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 0; padding: 0; }
.nav-lien { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: 500 15px/1 var(--inter); color: var(--encre); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav-lien::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--t); }
.nav-lien:hover::after, .nav-lien[aria-current]::after, .nav-lien[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-lien svg { width: 14px; height: 14px; fill: none; stroke: var(--second); stroke-width: 2; stroke-linecap: round; transition: transform var(--t); }
.nav-lien[aria-expanded="true"] svg { transform: rotate(180deg); }
.deroulant { position: relative; }
.mega { display: none; position: absolute; top: calc(100% + 18px); left: -12px; z-index: 50; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); box-shadow: 0 24px 48px -24px rgba(15, 44, 67, .28); padding: 28px 32px; gap: 32px; }
.mega.trois { grid-template-columns: repeat(3, 210px); }
.deroulant.ouvert .mega { display: grid; }
.mega .menu-titre { margin: 0 0 10px; font: 600 12px/1.2 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega a { display: flex; align-items: center; min-height: 38px; font-size: 15px; font-weight: 500; color: var(--encre); text-decoration: none; }
.mega a:hover { color: var(--marine); text-decoration: underline; text-underline-offset: 4px; }
.nav-mobile-pied { display: none; }
.logo img { height: 28px; width: auto; display: block; }
.bouton.petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.burger svg { width: 22px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 1.8; stroke-linecap: round; }

/* Pages intérieures sans image : le filet du logo ouvre le texte */
.page-hero.sans-image .hero-grille { grid-template-columns: 4px minmax(0, 1fr); column-gap: 40px; }
.page-hero.sans-image .seuil { margin: 6px 0 0; }
.page-hero.sans-image .hero-texte { max-width: 900px; }
.page-hero.sans-image h1 { white-space: normal; }

/* Sections génériques, avant la composition propre à chaque page */
.tete-simple { max-width: 820px; margin-bottom: 40px; }
.tete-simple h2 { margin-bottom: 18px; }
.lecture > * { max-width: 760px; }
.lecture > .table, .lecture > .renvois, .lecture > .liste-editoriale, .lecture > .outil-proto { max-width: none; }
.lecture h2 { margin: 56px 0 16px; }
.lecture > h2:first-child { margin-top: 0; }
.lecture h3 { margin: 40px 0 12px; }
.lecture h4 { margin: 28px 0 8px; font-family: var(--serif); font-size: 20px; }
.lecture p, .lecture li { color: var(--corps); }
.lecture ul, .lecture ol { padding-left: 22px; margin: 0 0 1em; }
.sombre .lecture p, .sombre .lecture li { color: var(--sur-sombre); }
.liste-editoriale { border-top: 1.5px solid var(--encre); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin: 8px 0 24px; }
.liste-editoriale .element { padding: 26px 0; border-bottom: 1px solid var(--bordure); }
.liste-editoriale .element > :first-child { margin-top: 0; }
.liste-editoriale .element h3, .liste-editoriale .element h4 { font-size: 23px; margin: 0 0 10px; }
.liste-editoriale .element p { font-size: 16px; color: var(--second); margin: 0 0 10px; }
.renvois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bordure-forte); border-bottom: 1px solid var(--bordure-forte); margin: 8px 0 24px; }
.renvoi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 22px 24px; text-decoration: none; color: var(--encre); }
.renvoi + .renvoi { border-left: 1px solid var(--bordure-forte); }
.renvoi strong { font-size: 16px; }
.renvoi span { grid-column: 1; font-size: 14px; color: var(--second); }
.renvoi svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; fill: none; stroke: var(--marine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.renvoi:hover { background: var(--doux); }
.lien { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--marine); text-decoration: none; }
.sombre .lien { color: #fff; }
.lien svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform var(--t); }
.lien:hover svg { transform: translateX(4px); }
.lien[data-a-relier] { color: var(--second); cursor: default; }
.liens { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.donnee { color: var(--second); font-style: italic; text-decoration: underline dotted var(--bordure-forte); text-underline-offset: 4px; }
.sombre .donnee { color: var(--sur-sombre-2); }
.chiffre { color: var(--encre); font-weight: 600; }
.sombre .chiffre { color: #fff; }
.src { margin-left: 4px; font-size: .8em; font-weight: 500; color: var(--cyan-lisible); text-decoration: none; }
.src::before { content: "("; }
.src::after { content: ")"; }
.src:hover { text-decoration: underline; }
.sombre .src { color: var(--cyan-clair); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--doux); border: 1px solid var(--bordure); border-radius: 4px; padding: 0 5px; }
.table { overflow-x: auto; margin: 20px 0; border: 1px solid var(--bordure); border-radius: var(--r); background: #fff; }
.table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.table th { background: var(--doux); font-weight: 600; }
.table td { color: var(--corps); }
.coches { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.coches li { display: flex; gap: 10px; align-items: baseline; }
.coches svg { width: 15px; height: 15px; fill: none; stroke: var(--marine); stroke-width: 2.4; flex: none; }
.outil-proto { margin: 8px 0 16px; padding: 22px; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); display: grid; gap: 14px; }
.outil-proto .simu-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.outil-proto label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--second); }
.outil-proto select, .outil-proto input { height: 50px; padding: 0 12px; font: 500 16px var(--inter); color: var(--encre); border: 1px solid var(--bordure-forte); border-radius: var(--r); background: #fff; }
.outil-proto .ctas { margin: 0; }
.simu-refus { margin: 0; padding: 14px 16px 14px 18px; border-left: 3px solid #b77c1d; background: #fbf3e4; color: #6e4a10; font-size: 14.5px; line-height: 1.55; border-radius: 0 var(--r) var(--r) 0; }
.form-ok { margin: 0; padding: 14px 16px; background: #e9f5ef; border: 1px solid #c2e3d3; color: #166a44; border-radius: var(--r); font-size: 14.5px; }
.badge-google { display: inline-flex; flex-direction: column; gap: 4px; margin: 14px 0; padding: 14px 18px; border: 1px solid var(--bordure); border-radius: var(--r); text-decoration: none; color: var(--encre); }
.badge-titre, .badge-adresse { font-size: 13px; color: var(--second); }
.badge-ligne { display: flex; align-items: center; gap: 8px; }
.badge-lien { font-size: 13px; font-weight: 600; color: var(--marine); }
.etoiles { position: relative; display: inline-block; letter-spacing: 1px; }
.etoiles-fond { color: #c3cad3; }
.etoiles-plein { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #b7791f; }

/* De 641 à 1180 px, le menu reste affiché en liste, sur une seconde ligne de l'en-tête */
@media (min-width: 641px) and (max-width: 1180px) {
  .entete .enveloppe.entete-l { flex-wrap: wrap; height: auto; min-height: 0; padding-top: 14px; padding-bottom: 4px; row-gap: 6px; }
  .entete .burger { display: none; }
  .entete-l > .logo { margin-right: auto; }
  .entete .nav { order: 5; flex: 0 0 100%; margin: 0 0 0 -12px; flex-wrap: wrap; }
  .entete .nav .mega { left: 12px; top: calc(100% + 10px); }
  .entete .nav .mega.trois { width: calc(100vw - 2 * var(--gouttiere)); max-width: 740px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px; gap: 24px; }
  .entete-l > .langues { display: flex; }
}
@media (max-width: 1180px) {
  .renvois { grid-template-columns: minmax(0, 1fr); }
  .renvoi + .renvoi { border-left: 0; border-top: 1px solid var(--bordure-forte); }
}
@media (max-width: 640px) {
  .entete .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 39; flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: #fff; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: 12px var(--gouttiere) 28px; max-height: calc(100dvh - 80px); overflow: auto; }
  .entete .nav.ouvert { display: flex; }
  .entete .nav .nav-lien { width: 100%; justify-content: space-between; min-height: 56px; padding: 0; border-bottom: 1px solid var(--bordure); font: 600 21px/1.2 var(--serif); }
  .entete .nav .nav-lien::after { display: none; }
  .entete .nav .mega { position: static; box-shadow: none; border: 0; padding: 6px 0 14px 12px; grid-template-columns: 1fr !important; gap: 12px; }
  .nav-mobile-pied { display: grid; gap: 18px; margin-top: 24px; }
  .nav-mobile-pied .bouton { width: 100%; }
  .entete-l > .langues { display: none; }
  .burger { display: inline-grid; }
  .renvois { grid-template-columns: minmax(0, 1fr); }
  .renvoi + .renvoi { border-left: 0; border-top: 1px solid var(--bordure-forte); }
}
@media (max-width: 760px) {
  .entete-l { height: 64px; gap: 12px; }
  .entete .nav { max-height: calc(100dvh - 64px); }
  .entete-l > .bouton { display: none; }
  .page-hero.sans-image .hero-grille { grid-template-columns: minmax(0, 1fr); }
  .page-hero.sans-image .seuil { display: none; }
  .liste-editoriale { grid-template-columns: minmax(0, 1fr); }
}

/* Générateur, compléments */
.lien-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.formulaire label { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.formulaire > p { margin: 0; font-size: 13.5px; color: var(--second); }
.formulaire > .bouton { justify-self: start; }
.hero-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 42%; }
@media (max-width: 760px) { .hero-photo video { display: none; } .formulaire > .bouton { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-photo video { display: none; } }
@media (max-width: 400px) { .page-hero h1.court { white-space: normal; font-size: 34px; } }
.sommaire > .ligne-sommaire { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px 22px; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--bordure); }
.sommaire .titre.donnee { font: italic 600 21px/1.3 var(--serif); }
@media (max-width: 760px) { .sommaire > .ligne-sommaire { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; } }
/* En-tête du générateur : le conteneur .deroulant n'est pas le panneau */
.entete .deroulant { position: relative; top: auto; left: auto; display: block; background: none; border: 0; box-shadow: none; padding: 0; gap: 0; }
.entete .nav-lien, .entete .bouton.petit { white-space: nowrap; }
@media (max-width: 760px) { .logo img { height: 22px; } }

/* Pied de page resserré, 2026-10-03 : cantons sur deux colonnes, interlignes tenus */
.pied-haut { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); }
.pied h4 { line-height: 1.35; }
.pied li a { min-height: 32px; line-height: 1.35; padding: 3px 0; }
.pied ul.liste-cantons { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
@media (min-width: 761px) and (max-width: 1180px) {
  .pied-haut { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
  .pied-haut > div:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .pied-haut > div:first-child > img { grid-column: 1 / -1; }
}
.entete { background: #fff; }
@media (min-width: 641px) and (max-width: 760px) {
  .entete .nav .nav-lien { padding: 0 8px; font-size: 14.5px; }
  .entete .nav { margin-left: -8px; }
}

/* Pied de page, 2026-10-03 : les cantons en liste déroulante, fermée par défaut à toutes les largeurs */
details.pied-cantons > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: -14px; }
details.pied-cantons > summary::-webkit-details-marker { display: none; }
details.pied-cantons > summary h4 { margin: 0; }
details.pied-cantons > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--sur-sombre-2); border-bottom: 2px solid var(--sur-sombre-2); transform: translateY(-2px) rotate(45deg); transition: transform var(--t); }
details.pied-cantons[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.pied-cantons > summary:hover h4, details.pied-cantons > summary:focus-visible h4 { color: #fff; }
details.pied-cantons ul { margin-top: 4px; }
@media (max-width: 760px) {
  details.pied-cantons > summary { margin-top: 0; min-height: 48px; justify-content: space-between; }
  details.pied-cantons > summary::after { position: static; margin-right: 4px; }
}
.pied { padding-top: 64px; }
.pied-haut { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); padding-bottom: 40px; }
.pied-haut img { margin-bottom: 22px; }
@media (max-width: 760px) { .pied { padding-top: 48px; } }
@media (min-width: 761px) and (max-width: 1180px) {
  .pied-haut { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .pied-haut > div:first-child { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pied-haut > div:first-child > p:first-of-type { grid-row: span 2; }
}
@media (max-width: 760px) {
  .pied-haut { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 32px; }
}

/* Menu « Particuliers » : une colonne à la largeur de ses intitulés, jamais écrasée */
.entete .mega:not(.trois) { width: max-content; min-width: 280px; max-width: min(380px, calc(100vw - 2 * var(--gouttiere))); padding: 20px 28px; }
.entete .mega a { line-height: 1.3; padding: 4px 0; }
@media (max-width: 640px) { .entete .nav .mega:not(.trois) { width: auto; max-width: none; min-width: 0; padding: 6px 0 14px 12px; } }
/* Panneau du burger : le bouton garde son fond, les langues restent accessibles */
@media (max-width: 640px) {
  .entete .nav .nav-mobile-pied .bouton { display: inline-flex; justify-content: center; align-items: center; background: var(--marine); color: #fff; min-height: 52px; font: 600 16px/1 var(--inter); border-radius: var(--r); }
  .entete .nav .nav-mobile-pied .bouton::after { display: none; }
  .entete .nav .nav-mobile-pied .langues { display: flex; justify-content: center; }
  .entete .nav .nav-mobile-pied .langues a { min-height: 44px; padding: 14px 10px; background: none; }
}

/* ==========================================================================
   Pages de pilier, lot 1 (Comptabilité et fiscalité), 2026-10-03
   ========================================================================== */
/* Ouverture : le chiffre de la page à droite, à la place d'une photo */
.page-hero.avec-piece .hero-grille { grid-template-columns: minmax(0, 6.6fr) 4px minmax(0, 4.4fr); align-items: center; }
.page-hero.avec-piece .hero-visuel { align-self: center; }
.piece-hero { margin: 0; padding: 34px 36px 26px; box-shadow: 0 30px 60px -36px rgba(15, 44, 67, .35); }
.piece-hero .piece-titre { margin: 0 0 18px; font: 600 12px/1.2 var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-lisible); }
.piece-hero .valeur { font-size: clamp(48px, 5vw, 68px); }
.piece-hero .quoi { font-size: 16px; line-height: 1.5; margin: 16px 0 22px; }
.piece-hero .valeurs { margin: 0; display: grid; gap: 0; }
.piece-hero .valeurs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bordure); }
.piece-hero .valeurs > div:first-child { border-top: 1.5px solid var(--encre); }
.piece-hero .valeurs dt { font-size: 15px; color: var(--second); }
.piece-hero .valeurs dd { margin: 0; font: 650 24px/1.1 var(--inter); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; }

/* Sections : le titre numéroté à gauche, le texte à droite */
.pilier-sec { padding: 112px 0; }
.pilier-grille { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 72px; align-items: start; }
.pilier-tete { position: sticky; top: 120px; }
.pilier-num { display: block; margin-bottom: 18px; padding-top: 14px; width: 56px; border-top: 3px solid var(--cyan); font: 600 14px/1 var(--inter); letter-spacing: .06em; color: var(--cyan-lisible); }
.pilier-tete h2 { font-size: clamp(32px, 3.2vw, 46px); text-wrap: balance; margin: 0; }
.pilier-corps { max-width: 720px; }
.pilier-corps > :first-child { margin-top: 0; }
.pilier-corps > p { font-size: 18px; line-height: 1.65; color: var(--corps); margin: 0 0 22px; }
.pilier-corps .lien-fleche { margin-top: 6px; }
.pilier-corps .renvois { grid-template-columns: minmax(0, 1fr); margin: 0; border-bottom: 0; }
.pilier-corps .renvoi { padding: 22px 4px; border-bottom: 1px solid var(--bordure-forte); }
.pilier-corps .renvoi + .renvoi { border-left: 0; }
.pilier-corps .renvoi strong { font: 600 21px/1.25 var(--serif); }
.pilier-corps .renvoi span { color: var(--second); font-size: 15.5px; }

/* La liste tenue : un intertitre par ligne, numéroté comme un classeur */
.tenue { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: tenue; border-top: 1.5px solid var(--encre); }
.tenue > li { counter-increment: tenue; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--bordure); }
.tenue > li::before { content: counter(tenue, decimal-leading-zero); grid-row: 1 / span 4; padding-top: 7px; font: 600 13px/1 var(--inter); letter-spacing: .06em; color: var(--cyan-lisible); }
.tenue h3 { margin: 0 0 10px; font-size: 24px; }
.tenue p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--corps); }
.tenue .piece-donnee { margin-top: 18px; }

/* Une donnée datée : la valeur, sa source, sa date */
.piece-donnee { margin: 8px 0 26px; padding: 18px 22px 16px; background: #fff; border: 1px solid var(--bordure); border-left: 3px solid var(--cyan); border-radius: 0 var(--r) var(--r) 0; }
.fond-doux .piece-donnee { background: #fff; }
.piece-donnee .chiffre { display: block; font: 600 17px/1.5 var(--inter); color: var(--encre); }
.piece-donnee .chiffre .src { display: inline-flex; align-items: center; min-height: 32px; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--cyan-lisible); text-decoration: none; }
.piece-donnee .chiffre .src::before { content: "· "; color: var(--second); font-weight: 400; margin-right: 4px; }
.piece-donnee figcaption { margin-top: 4px; font-size: 13px; color: var(--second); }

/* Un point qui mérite d'être dit, à part */
.nota { margin: 32px 0 8px; padding: 4px 0 4px 26px; border-left: 3px solid var(--cyan); }
.nota-titre { margin: 0 0 8px; font: italic 500 24px/1.3 var(--serif); color: var(--marine); }
.nota p:not(.nota-titre) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--corps); }

/* Les prestations du pôle : la page en cours marquée */
.pole-liste { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--encre); }
.pole-liste > li { border-bottom: 1px solid var(--bordure-forte); }
.pole-liste a, .pole-liste li.ici { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 4px; color: var(--encre); text-decoration: none; }
.pole-liste h3 { margin: 0 0 6px; font-size: 23px; }
.pole-liste p { margin: 0; font-size: 16px; color: var(--second); }
.pole-liste a .fleche { width: 22px; height: 22px; color: var(--marine); transition: transform var(--t); }
.pole-liste a:hover .fleche { transform: translateX(4px); }
.pole-liste a:hover h3 { color: var(--marine); }
.pole-liste li.ici { position: relative; }
.pole-liste li.ici::before { content: ""; position: absolute; left: -20px; top: 24px; bottom: 24px; width: 3px; background: var(--cyan); border-radius: 2px; }
.ici-marque { font: 600 12px/1 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); white-space: nowrap; }

@media (max-width: 1180px) {
  .pilier-grille { gap: 48px; }
  .page-hero.avec-piece .hero-grille { grid-template-columns: minmax(0, 1fr); }
  .page-hero.avec-piece .seuil { display: none; }
  .page-hero.avec-piece .hero-visuel { max-width: 560px; margin-top: 8px; }
}
@media (max-width: 900px) {
  .pilier-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pilier-tete { position: static; }
}
@media (max-width: 760px) {
  .pilier-sec { padding: 64px 0; }
  .pilier-tete h2 { font-size: 30px; }
  .pilier-corps > p { font-size: 17px; }
  .tenue > li { grid-template-columns: 38px minmax(0, 1fr); padding: 22px 0; }
  .tenue h3 { font-size: 21px; }
  .piece-hero { padding: 26px 22px 20px; }
  .piece-hero .valeur { font-size: 44px; }
  .piece-hero .valeurs dd { font-size: 20px; }
  .pole-liste li.ici::before { left: -12px; }
  .pole-liste a, .pole-liste li.ici { gap: 14px; }
  .ici-marque { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  .pole-liste li.ici > div { grid-row: 2; }
}
.page-hero.avec-piece { padding-bottom: 80px; }
.piece-hero .valeur { font-size: clamp(40px, 3.9vw, 56px); white-space: nowrap; }
.pilier-tete h2 { font-size: clamp(30px, 2.9vw, 40px); }
@media (max-width: 760px) { .page-hero.avec-piece { padding-bottom: 48px; } .piece-hero .valeur { font-size: 40px; } }
/* Le diagnostic TVA, dans la colonne de texte */
.pilier-corps .instrument { margin: 8px 0 24px; }
.diagnostic .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagnostic .registre-pied { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--bordure-forte); }
.diagnostic .mentions p { font-size: 13.5px; line-height: 1.55; color: var(--second); margin: 0 0 8px; }
.diagnostic .mentions strong { color: var(--encre); font-weight: 600; }
.diagnostic .mentions .chiffre { font-weight: 600; color: var(--encre); }
@media (max-width: 760px) { .diagnostic .champs { grid-template-columns: minmax(0, 1fr); } .pilier-corps .instrument { margin: 8px 0 24px; } }
@media (max-width: 760px) {
  .page-hero.avec-piece .hero-visuel { margin: 12px 0 0; }
  .piece-donnee { padding: 14px 16px 12px; }
  .piece-donnee .chiffre { font-size: 15px; line-height: 1.5; }
}
@media (max-width: 1180px) and (min-width: 761px) { .page-hero.avec-piece .hero-visuel { margin-top: 40px; } }

/* Lot 2 : sommaire de l'ouverture, ligne de frontière */
.sommaire-hero { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 30px 32px 18px; box-shadow: 0 30px 60px -36px rgba(15, 44, 67, .35); }
.sommaire-hero .piece-titre { margin: 0 0 14px; font: 600 12px/1.2 var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-lisible); }
.sommaire-hero ol { list-style: none; margin: 0; padding: 0; counter-reset: som; border-top: 1.5px solid var(--encre); }
.sommaire-hero li { counter-increment: som; border-bottom: 1px solid var(--bordure); }
.sommaire-hero li:last-child { border-bottom: 0; }
.sommaire-hero a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 10px 0; font: 600 18px/1.3 var(--serif); color: var(--encre); text-decoration: none; }
.sommaire-hero a::before { content: counter(som, decimal-leading-zero); font: 600 12px/1 var(--inter); letter-spacing: .06em; color: var(--cyan-lisible); }
.sommaire-hero a .fleche { width: 18px; height: 18px; color: var(--marine); transition: transform var(--t); }
.sommaire-hero a:hover { color: var(--marine); }
.sommaire-hero a:hover .fleche { transform: translateX(3px); }
.ligne-frontiere-sec { padding: 56px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.ligne-frontiere { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.ligne-frontiere::before { content: ""; align-self: stretch; background: var(--cyan); border-radius: 2px; }
.ligne-frontiere p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--corps); max-width: 72ch; }
.ligne-frontiere p strong { font: italic 600 21px/1.3 var(--serif); color: var(--marine); }
/* Lignes empilées (Gestion des salaires, 15.10.2026) : la première phrase tient sur une ligne */
.ligne-frontiere.empilee { grid-template-columns: 4px minmax(0, 1fr); }
.ligne-frontiere.empilee p + p { margin-top: 8px; }
.ligne-frontiere.empilee p:first-child { max-width: none; }
.ligne-frontiere.empilee .lien-fleche { margin-top: 16px; }
@media (max-width: 760px) {
  .sommaire-hero { padding: 24px 20px 12px; }
  .ligne-frontiere { grid-template-columns: 4px minmax(0, 1fr); gap: 8px 18px; }
  .ligne-frontiere .lien-fleche { grid-column: 2; }
  .ligne-frontiere-sec { padding: 40px 0; }
}
.nota + p, .nota + .piece-donnee { margin-top: 22px; }
/* Lot 4 : sections à sous-titres */
.tenue.groupes .groupe-corps > p { font-size: 17px; line-height: 1.6; color: var(--corps); margin: 0 0 10px; }
.tenue.groupes .groupe-corps > :last-child { margin-bottom: 0; }
.tenue.groupes .groupe-corps .lien-fleche { margin-top: 2px; }
.tenue.groupes .groupe-corps .liens { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 6px 0 0; }
.pilier-corps .intertitre { margin: 36px 0 14px; font-size: 24px; }
.pilier-corps ul { margin: 0 0 18px; padding-left: 22px; }
.pilier-corps ul li { font-size: 17px; line-height: 1.55; color: var(--corps); margin-bottom: 6px; }
.liens-cantons { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 4px 0 0; }
/* Foire aux questions en accordéon */
.faq { border-top: 1.5px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--bordure-forte); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 16px; align-items: center; min-height: 64px; padding: 16px 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--marine); border-bottom: 2px solid var(--marine); transform: translateY(-3px) rotate(45deg); transition: transform var(--t); justify-self: center; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary h3 { margin: 0; font-size: 21px; }
.faq summary:hover h3 { color: var(--marine); }
.faq-reponse { padding: 0 4px 26px; }
.faq-reponse > p { font-size: 17px; line-height: 1.65; color: var(--corps); margin: 0 0 14px; }
/* Le simulateur en pleine page, dessiné comme l'instrument */
.outil-pilier { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); box-shadow: 0 30px 60px -36px rgba(15, 44, 67, .35); overflow: hidden; padding: 0 0 24px; margin: 8px 0 24px; }
.outil-pilier > :not(.instrument-tete) { margin-left: 28px; margin-right: 28px; }
.outil-pilier .simu-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.outil-pilier .simu-champs label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--second); }
.outil-pilier .simu-champs select, .outil-pilier .simu-champs input { min-height: 48px; padding: 0 12px; border: 1px solid var(--bordure-forte); border-radius: var(--r); background: #fff; font: 500 15px var(--inter); color: var(--encre); }
.outil-pilier .simu-resultat.grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--bordure-forte); }
.outil-pilier .simu-resultat .etiquette { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--second); }
.outil-pilier .simu-resultat .valeur { margin: 0; font: 650 26px/1 var(--inter); color: var(--encre); }
.outil-pilier .ctas { margin-top: 22px; }
.outil-pilier .simu-refus { margin-top: 16px; font-size: 14px; color: var(--second); }
@media (max-width: 760px) {
  .outil-pilier > :not(.instrument-tete) { margin-left: 18px; margin-right: 18px; }
  .outil-pilier .simu-champs { grid-template-columns: minmax(0, 1fr); }
  .outil-pilier .simu-resultat.grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pieces { display: grid; gap: 10px; margin: 6px 0 18px; } .pieces .piece-donnee { margin: 0; }
.page-hero.avec-piece h1.court { white-space: normal; }
/* Lot 6 : glossaire, calendrier */
.alphabet { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.alphabet span { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--bordure-forte); border-radius: var(--r); font: 600 14px/1 var(--inter); color: var(--marine); background: #fff; }
.recherche input { min-height: 52px; width: min(360px, 100%); padding: 0 16px; border: 1px solid var(--bordure-forte); border-radius: var(--r); font: 500 16px var(--inter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctas:has(.alphabet), .ctas:has(.recherche) { display: grid; gap: 14px; justify-items: start; }
.diagnostic .mentions .outil-proto { border: 0; padding: 0; margin-top: 14px; background: none; box-shadow: none; }
.diagnostic .mentions .outil-proto .ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.diagnostic .mentions .outil-proto .bouton { background: #fff; color: var(--marine); border: 1.5px solid var(--marine); min-height: 44px; }
/* Lot 7 : pages légales, et toute icône de lien a sa taille */
.lien svg, .renvoi svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilier-corps .table { overflow-x: auto; }
.pilier-corps table { min-width: 640px; }
@media (min-width: 1181px) { .pilier-corps:has(table) { max-width: none; } }

/* ==========================================================================
   Espacements resserrés, 2026-10-03 : moins de vide entre les sections
   ========================================================================== */
/* Accueil, déjà validé : réduction légère */
.section { padding: 104px 0; }
.section.serre { padding: 72px 0; }
.section.ample { padding: 128px 0; }
/* Pages intérieures */
.pilier-sec { padding: 80px 0; }
.page-hero { padding-bottom: 72px; }
.page-hero.avec-piece { padding-bottom: 64px; }
.ligne-frontiere-sec { padding: 44px 0; }
/* L'appel final : son filet suffit à le séparer, la grande marge en faisait une bande vide */
.section.ample:has(> .enveloppe > .appel) { padding: 72px 0 96px; }
.appel { padding-top: 40px; }
/* Deux sections de même fond qui se suivent : l'écart n'est pas doublé */
.pilier-sec:not(.fond-doux) + .section.ample:has(> .enveloppe > .appel),
.ligne-frontiere-sec + .section.ample:has(> .enveloppe > .appel) { padding-top: 8px; }
main:not([data-url="/fr/"]):not([data-url="/en/"]) .fond-doux + .fond-doux,
main:not([data-url="/fr/"]):not([data-url="/en/"]) .pilier-sec:not(.fond-doux) + .pilier-sec:not(.fond-doux),
main:not([data-url="/fr/"]):not([data-url="/en/"]) .page-hero + .pilier-sec:not(.fond-doux) { padding-top: 16px; }
@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .section.serre { padding: 44px 0; }
  .section.ample { padding: 64px 0; }
  .pilier-sec { padding: 52px 0; }
  .page-hero, .page-hero.avec-piece { padding-bottom: 44px; }
  .section.ample:has(> .enveloppe > .appel) { padding: 48px 0 64px; }
  .appel { padding-top: 32px; }
}

/* Calculateur d'impôt à la source en deux étapes (page Impôt à la source) */
[data-r="eglise-bloc"][hidden] { display: none !important; }
.outil-pilier .simu-resultat.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-detail { margin: 12px 0 0; font-size: 14px; color: var(--second); }
.is-detail:empty { display: none; }

/* Calendrier des échéances (page Ressources) */
.echeances { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--bordure); }
.echeances:empty { display: none; }
.echeances li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.echeances .quand { font-weight: 600; color: var(--encre); }
.echeances .quoi small { display: block; margin-top: 4px; font-size: 14px; color: var(--second); }
.echeances .src { grid-column: 2; font-size: 12.5px; }
@media (max-width: 640px) { .echeances li { grid-template-columns: minmax(0, 1fr); } .echeances .src { grid-column: 1; } }
.echeances .gcal { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; }
.abonnement { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--doux); }
.abonnement .abo-titre { margin: 0 0 6px; }
.abonnement .abo-texte { margin: 0 0 12px; font-size: 14.5px; color: var(--second); }
.abonnement .abo-note { margin: 10px 0 0; font-size: 12.5px; color: var(--second); font-style: italic; }
.abonnement .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* La note Google de l'accueil, posée sur fond clair (page À propos) */
.releve.releve-carte { display: flex; width: fit-content; max-width: 100%; margin: 14px 0 18px; background: var(--marine-fonce); border-color: var(--marine-fonce); }
.releve.releve-carte:hover { border-color: var(--cyan, #45BDDF); }

/* FIDUCIAIRE|SUISSE, lié à la fiche de l'annuaire des membres */
.lien-annuaire { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lien-annuaire:hover { color: var(--cyan-lisible); }
.releve-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 14px 0 18px; }
.releve-rangee .releve.releve-carte { margin: 0; }

/* Un chapeau en plusieurs paragraphes (page À propos) : un seul texte, pas trois blocs */
.hero-texte .chapeau:has(+ .chapeau) { margin-bottom: 0; }
.hero-texte .chapeau + .chapeau { margin-top: 16px; }

/* ===========================================================================
   Prototype YC Feedback_V1, 2026-10-06 : contenu simplifié, direction inchangée
   =========================================================================== */

/* Accueil, « Quelle est votre situation ? » : les trois blocs sur une même ligne */
@media (min-width: 761px) {
  .public:nth-child(2), .public:nth-child(3) { margin-top: 0; }
}

/* Accueil, services : le bouton à la place de l'introduction, aligné à droite du titre */
.publics-tete .services-cta { margin: 0; justify-self: end; }
@media (max-width: 760px) { .publics-tete .services-cta { justify-self: start; } }

/* Sous-services : en retrait, plus discrets, rattachés au service parent par un filet cyan */
.pole li.sous-service a { position: relative; min-height: 42px; padding-left: 22px; font-size: 15px; color: var(--second); border-top-style: dashed; }
.pole li.sous-service a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; height: 1.5px; background: var(--cyan); }
.pole li.sous-service a::after { content: ""; position: absolute; left: 6px; top: -1px; height: calc(50% + 1px); width: 1.5px; background: var(--cyan); }
.pole li.sous-service a:hover { color: var(--encre); }
.mega li.sous-service a { position: relative; padding-left: 18px; font-size: 14px; color: var(--second); min-height: 32px; }
.mega li.sous-service a::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 1.5px; background: var(--cyan); }
.mega li.sous-service a:hover { color: var(--marine); }

/* Accueil, « Comment nous chiffrons un mandat » : trois étapes côte à côte, sans illustration */
.chiffrage-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: 48px; }
.chiffrage-tete h2 { margin: 0; }
.chiffrage-tete .intro { margin: 0; color: var(--second); max-width: 50ch; }
.etapes-ligne { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: e; }
.etapes-ligne li { position: relative; padding-top: 58px; }
.etapes-ligne li::before { counter-increment: e; content: counter(e); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--marine); color: var(--marine); background: #fff; font: 600 15px/35px var(--inter); text-align: center; z-index: 1; }
.etapes-ligne li:not(:last-child)::after { content: ""; position: absolute; left: 50px; right: -28px; top: 19px; height: 1.5px; background: var(--bordure-forte); }
.etapes-ligne h3 { font-size: 23px; margin: 0 0 10px; }
.etapes-ligne p { margin: 0; color: var(--second); font-size: 16px; }
@media (max-width: 900px) {
  .etapes-ligne { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .etapes-ligne li { padding: 2px 0 0 58px; }
  .etapes-ligne li:not(:last-child)::after { left: 19px; right: auto; top: 40px; bottom: -28px; width: 1.5px; height: auto; }
  .chiffrage-tete { margin-bottom: 32px; }
}

/* Ressources : un portail à quatre entrées de même poids */
.hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hub-carte { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 28px 26px 24px; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-grand); text-decoration: none; color: var(--encre); transition: border-color var(--t), box-shadow var(--t), transform var(--t); overflow: hidden; }
.hub-carte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--filet); transform: scaleY(0); transform-origin: top; transition: transform var(--t); }
.hub-carte:hover, .hub-carte:focus-visible { border-color: var(--bordure-forte); box-shadow: 0 24px 48px -32px rgba(15, 44, 67, .35); transform: translateY(-2px); }
.hub-carte:hover::before, .hub-carte:focus-visible::before { transform: scaleY(1); }
.hub-num { font: 600 13px/1 var(--inter); letter-spacing: .07em; color: var(--cyan-lisible); }
.hub-titre { font-size: 26px; line-height: 1.15; margin: 4px 0 0; }
.hub-carte p { margin: 0; color: var(--second); font-size: 15.5px; line-height: 1.5; }
.hub-lien { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 12px; font-weight: 600; font-size: 15px; color: var(--marine); }
.hub-lien .fleche { width: 16px; height: 16px; }
@media (max-width: 1180px) { .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hub { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hub-carte { min-height: 0; padding: 22px 20px; } .hub-titre { font-size: 23px; } }

/* Contact : le titre ouvre la colonne des coordonnées, sans hero */
.contact-titre { margin: 0 0 8px; font-size: clamp(40px, 5vw, 60px); }
.contact .ecrire { margin-top: 28px; }
.coordonnees .pleine { grid-column: 1 / -1; }

/* Pied de page : la colonne de la maison sans titre, les cantons toujours visibles */
@media (min-width: 761px) { .pied-maison { padding-top: 28px; } }
.pied-cantons-ouverts ul { margin-top: 4px; }
@media (max-width: 760px) {
  .pied-maison, .pied-cantons-ouverts { border-top: 1px solid var(--ligne-sombre); padding: 14px 0 12px; }
  .pied-cantons-ouverts h4 { margin: 4px 0 10px; }
}

/* En-tête : le menu Ressources, une colonne, le portail en tête */
.mega .menu-titre a { display: inline; min-height: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.mega .menu-titre a:hover { color: var(--marine); }
.deroulant .mega:not(.trois) { min-width: 260px; }
/* Le portail suit son titre de près : pas de grand vide entre le hero et les quatre entrées */
.hub-sec { padding-top: 0; }
.page-hero.sans-image:has(+ .hub-sec) { padding-bottom: 48px; }
/* Calendrier : un bloc masqué l'est vraiment (les liens d'abonnement ou la mention, jamais les deux) */
.abonnement [hidden] { display: none !important; }

/* =====================================================================
   Retours du 07.10.2026 (Instructions Claude, Youssef)
   ===================================================================== */

/* Le hero de l'accueil ne dépend plus de la longueur du texte : la vidéo garde la même hauteur,
   la même largeur et la même place en français et en anglais */
@media (min-width: 761px) {
  .hero .hero-grille { align-items: center; }
  .hero .hero-visuel { min-height: 0; height: clamp(540px, 46vw, 640px); align-self: start; margin-top: 8px; }
}

/* Menu Entreprises : « Accompagnement complet » en bas à gauche, légèrement distingué, sans effet promotionnel */
.mega .mega-complet { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 0; margin-top: 4px; padding: 10px 16px; border: 1px solid var(--bordure); border-radius: var(--r); background: var(--doux); font-weight: 600; color: var(--marine); }
.mega .mega-complet:hover { border-color: var(--bordure-forte); text-decoration: none; }
.mega .mega-complet .fleche { width: 16px; height: 16px; }
.mega .menu-titre a { display: inline; min-height: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.mega .menu-titre a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Nous contacter : l'adresse e-mail reste mise en avant, à une taille plus juste */
.ecrire .mail { font-size: clamp(21px, 1.9vw, 27px); }

/* Formulaire : les erreurs, signalées sobrement sous le champ concerné */
.formulaire .erreur { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #a8261f; }
.formulaire .erreur[hidden] { display: none; }
.formulaire [aria-invalid="true"] { border-color: #a8261f; }
.formulaire [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(168, 38, 31, .16); }
.formulaire .mention-donnees { margin: 0; font-size: 13.5px; color: var(--second); }
.formulaire .mention-donnees a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }

/* Les avis de nos clients : plus compacts, la section entière tient sur un écran courant */
.section.avis-sec { padding: 88px 0 96px; }
.avis-sec .avis-tete { margin-bottom: 36px; }
.avis-sec .citation blockquote { font-size: clamp(26px, 2.7vw, 40px); }
.avis-sec .temoignages { margin-top: 44px; padding-top: 30px; gap: 40px; }
.avis-sec .categories { margin-top: 28px; }
@media (max-width: 760px) { .section.avis-sec { padding: 56px 0 60px; } }

/* 2026-10-08 : pied de page plus fin, contact regroupé sous « Nous contacter » */
.pied { padding: 56px 0 26px; }
.pied-haut { padding-bottom: 32px; gap: 36px; }
.pied-haut img { margin-bottom: 18px; }
.pied p { margin-bottom: 10px; }
.pied-bas { padding-top: 18px; }
.pied .pied-contact h4 a { color: #fff; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.pied .pied-contact p { line-height: 1.9; }
.pied .pied-membres { line-height: 1.9; }
@media (max-width: 760px) {
  .pied { padding-top: 40px; }
  .pied-contact { padding: 14px 0 6px; border-top: 1px solid var(--ligne-sombre); }
}

/* 2026-10-08 : la phrase de confidentialité suit la ligne du barème, à la même taille */
.is-detail.is-confid { margin-top: 4px; }

/* 2026-10-08 : bandeau du haut, espaces égaux entre le logo, les cinq entrées, le bouton et FR-EN */
@media (min-width: 1181px) {
  .entete .enveloppe.entete-l { justify-content: space-between; gap: 0; }
  .entete .nav { display: contents; }
}
/* 2026-10-08 : « Accompagnement complet » sous la première colonne, au niveau de la dernière ligne
   des autres colonnes, sans ligne supplémentaire ; encadré et couleur inchangés */
@media (min-width: 761px) {
  .mega.trois > div:first-child { grid-column: 1; grid-row: 1; }
  .mega.trois .mega-complet { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin-top: 0; }
}
/* 2026-10-08 : pied de page, retours de Youssef */
.pied .pied-membres a { color: var(--sur-sombre-2); }
.pied .pied-membres a:hover { color: #fff; }
.pied-cantons-ouverts { justify-self: start; width: max-content; }
.pied-cantons-ouverts > h4 { text-align: center; }
.pied .pied-contact { align-self: start; padding: 22px 24px 14px; border-radius: var(--r-grand); background: rgba(255, 255, 255, .06); border: 1px solid var(--ligne-sombre); box-shadow: inset 0 3px 0 var(--cyan); }
.pied .pied-contact h4 { margin-bottom: 12px; font-size: 13px; }
.pied .pied-contact h4 a { color: #fff; }
.pied .pied-contact p { margin: 0; }
@media (max-width: 760px) {
  .pied-cantons-ouverts { width: auto; }
  .pied-cantons-ouverts > h4 { text-align: left; }
  .pied .pied-contact { margin: 14px 0; border-top: 1px solid var(--ligne-sombre); }
}

/* 2026-10-08 : la ligne des publics des avis tient sur une ligne, sans couper un public */
@media (min-width: 761px) { .avis-tete p { white-space: nowrap; } }

/* 2026-10-08 : sans le filet vertical à gauche de la photo, sur la page Associations et ONG (demande de Youssef) */
main[data-url="/fr/associations-et-ong/"] .page-hero .seuil, main[data-url="/en/associations-and-ngos/"] .page-hero .seuil { visibility: hidden; }

/* 2026-10-08 : cantons de la page Impôt à la source, quatre puis trois, dans l ordre voulu par Youssef */
.liens-cantons { display: grid !important; grid-template-columns: repeat(4, max-content); gap: 12px 36px; }
@media (max-width: 640px) { .liens-cantons { grid-template-columns: repeat(2, max-content); } }

/* 2026-10-08 : donnée établie canton par canton, une ligne par canton */
.chiffre.liste-cantons-v { display: block; margin: 6px 0; }
.chiffre.liste-cantons-v .ligne-canton { display: block; padding: 3px 0; }
.chiffre.liste-cantons-v .src { display: inline-block; margin-top: 6px; }
/* 2026-10-08 : la checklist Arrivée et départ, une démarche par ligne, dans l'ordre */
.checklist-sortie { list-style: none; counter-reset: etape; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.checklist-sortie li { counter-increment: etape; position: relative; display: grid; gap: 4px; padding: 14px 0 14px 46px; border-top: 1px solid var(--bordure); }
.checklist-sortie li::before { content: counter(etape); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--marine); color: #fff; font: 600 13px/1 var(--inter); }
.checklist-sortie strong { font: 600 16px/1.35 var(--inter); color: var(--encre); }
.checklist-sortie span { font-size: 15px; line-height: 1.55; color: var(--corps, #2a4560); }
.checklist-sortie .src { font-size: 13px; color: var(--second); }
.piece-donnee .chiffre.liste-cantons-v .src { margin-left: 0; }
.piece-donnee .chiffre.liste-cantons-v .src::before { content: "Sources : "; }
.chiffre.liste-cantons-v .src::after { content: none; }
/* 2026-10-08 : la parenthèse fermante restait seule après le « · » des données sourcées */
.piece-donnee .chiffre .src::after { content: none; }
/* 2026-10-08 : quatre étapes sur une ligne (Création de société), en carré 2 × 2 sur tablette */
.deroule:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.deroule:has(> li:nth-child(4):last-child) h3 { font-size: 21px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .deroule:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .deroule:has(> li:nth-child(4):last-child)::before { display: none; }
}
@media (max-width: 760px) { .deroule:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) {
  .mega.trois { grid-template-columns: repeat(3, 236px); }
  .mega.trois .mega-complet { white-space: nowrap; padding: 6px 12px; }
}

/* ======================================================================
   2026-10-09, cinquième document de retours de Youssef
   ====================================================================== */

/* Titres de page : sur mobile, un H1 long passe proprement sur deux lignes */
@media (max-width: 760px) { .page-hero h1.court { white-space: normal; text-wrap: balance; } }

/* Comment nous chiffrons un mandat : chaque titre d'étape tient sur une ligne en grand écran */
@media (min-width: 1100px) {
  .etapes-ligne { gap: 32px; }
  .etapes-ligne h3 { font-size: 22px; white-space: nowrap; }
}

/* Sommaire du hero : un bloc fixe en grand écran, « Sur cette page + » repliable sur mobile */
details.sommaire-hero > summary { list-style: none; display: block; cursor: default; }
details.sommaire-hero > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
  details.sommaire-hero { padding: 0 20px; }
  details.sommaire-hero > summary.piece-titre { margin: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  details.sommaire-hero > summary::after { content: "+"; position: static; width: auto; height: auto; border: 0; transform: none; font: 400 24px/1 var(--inter); color: var(--marine); }
  details.sommaire-hero[open] > summary::after { content: "\2212"; transform: none; }
  details.sommaire-hero[open] { padding-bottom: 12px; }
}

/* Comparatif des formes juridiques : trois cartes empilées sur petit écran */
.table-cartes { display: none; }
@media (max-width: 640px) {
  .table-cartes { display: grid; gap: 14px; margin: 20px 0; }
  .table.avec-cartes { display: none; }
  .table-carte { background: #fff; border: 1px solid var(--bordure); border-top: 3px solid var(--cyan); border-radius: var(--r); padding: 18px 18px 6px; }
  .table-carte-titre { margin: 0 0 10px; font: 600 20px/1.3 var(--serif); color: var(--encre); }
  .table-carte dl { margin: 0; }
  .table-carte dt { padding-top: 10px; border-top: 1px solid var(--bordure); font: 600 12px/1.3 var(--inter); letter-spacing: .05em; text-transform: uppercase; color: var(--second); }
  .table-carte dt:first-child { padding-top: 0; border-top: 0; }
  .table-carte dd { margin: 4px 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--corps); overflow-wrap: anywhere; }
}

/* Sources : l'information d'abord, une ligne discrète ensuite (« Source : … · vérifié le … ») */
.piece-donnee .source { margin-top: 8px; font: 400 12.5px/1.55 var(--inter); color: var(--second); overflow-wrap: anywhere; }
.piece-donnee .source a { color: inherit; text-decoration: underline; text-decoration-color: var(--bordure-forte); text-underline-offset: 3px; padding: 3px 0; }
.piece-donnee .source a:hover { color: var(--marine); text-decoration-color: currentColor; }
.src { font-weight: 400; color: var(--second); }
.sombre .src { color: var(--sur-sombre-2); }
@media (max-width: 760px) {
  .piece-donnee .chiffre { overflow-wrap: anywhere; }
  .piece-donnee .source { font-size: 12.5px; }
}

/* Pages techniques : espacements resserrés (TVA, fiscalité, salaires, administration RH, cantons, ressources) */
main.dense .section { padding: 80px 0; }
main.dense .section.serre { padding: 56px 0; }
main.dense .section.ample { padding: 96px 0; }
main.dense .pilier-sec { padding: 60px 0; }
main.dense .pilier-grille { gap: 56px; }
main.dense .tenue > li { padding: 22px 0; }
main.dense .page-hero { padding-bottom: 56px; }
@media (max-width: 760px) {
  main.dense .section, main.dense .pilier-sec { padding: 44px 0; }
  main.dense .section.serre { padding: 36px 0; }
}

/* Variation des pages de services selon le contenu (2026-10-09) */
.variante-tete { max-width: 760px; margin-bottom: 40px; }
.variante-tete h2 { font-size: clamp(30px, 2.9vw, 40px); text-wrap: balance; margin: 0; }
.variante-tete .intro { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--corps); }
.variante-grille { display: grid; gap: 24px; }
.variante-grille.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variante-grille.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variante-carte { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 28px 28px 26px; }
.fond-doux .variante-carte { background: #fff; }
.variante-carte h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.variante-carte p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--corps); }
/* Comparaison : deux colonnes séparées par un filet, sans cartes */
.variante-comparaison .variante-grille { gap: 0; border-top: 1.5px solid var(--encre); }
.variante-comparaison .variante-carte { background: none; border: 0; border-radius: 0; padding: 26px 40px 8px 0; }
.variante-comparaison .variante-carte + .variante-carte { border-left: 1px solid var(--bordure-forte); padding-left: 40px; padding-right: 0; }
.variante-comparaison .variante-carte h3::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 16px; background: var(--cyan); }
/* Cartes : le filet cyan en tête de carte */
.variante-cartes .variante-carte { border-top: 3px solid var(--cyan); }
/* Donnée clé : la valeur prend la place d'un titre */
.variante-cle .piece-donnee { padding: 24px 26px 18px; }
.variante-cle .piece-donnee .chiffre { font: 600 clamp(20px, 1.7vw, 24px)/1.4 var(--serif); }
@media (max-width: 900px) {
  .variante-grille.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .variante-tete { margin-bottom: 26px; }
  .variante-tete h2 { font-size: 30px; }
  .variante-grille.c2, .variante-grille.c3 { grid-template-columns: minmax(0, 1fr); }
  .variante-carte { padding: 22px 20px; }
  .variante-comparaison .variante-carte, .variante-comparaison .variante-carte + .variante-carte { padding: 22px 0 6px; border-left: 0; }
  .variante-comparaison .variante-carte + .variante-carte { border-top: 1px solid var(--bordure-forte); }
}
.variante-carte .piece-donnee { margin: 16px 0 0; }
/* Source en fin de paragraphe : une ligne discrète sous la phrase */
p > .source, .nota .source { display: block; margin-top: 6px; font: 400 12.5px/1.55 var(--inter); color: var(--second); overflow-wrap: anywhere; }
p > .source a, .nota .source a { color: inherit; text-decoration: underline; text-decoration-color: var(--bordure-forte); text-underline-offset: 3px; }
.sombre p > .source { color: var(--sur-sombre-2); }

/* ======================================================================
   2026-10-09, sixième série de retours de Youssef
   ====================================================================== */

/* FER Genève et CAGI : même typographie que FIDUCIAIRE|SUISSE, en gras */
.lien-annuaire { font-weight: 600; }

/* Listes numérotées : tout ce qui suit le numéro reste dans la colonne du texte, jamais dans celle
   du numéro (le texte se coupait lettre par lettre à Fribourg au-delà de quatre éléments) */
.tenue > li > * { grid-column: 2; min-width: 0; }
.tenue > li::before { grid-row: 1 / span 20; }
/* Traits des listes : le même gris pour le premier et les suivants */
.tenue { border-top: 1px solid var(--bordure); }

/* Étapes en ligne : le trait relie chaque numéro au suivant et se prolonge après le dernier,
   jusqu'à la fin de sa colonne (1 ──── 2 ──── 3 ────) */
@media (min-width: 761px) {
  .deroule::before { display: none; }
  .deroule li::after { content: ""; position: absolute; left: 46px; right: -48px; top: 18px; height: 1.5px; background: var(--bordure-forte); }
  .deroule li:nth-child(3n)::after, .deroule li:last-child::after { right: 0; }
  .deroule:has(> li:nth-child(4):last-child) li::after { right: -40px; }
  .deroule:has(> li:nth-child(4):last-child) li:nth-child(4)::after { right: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .deroule:has(> li:nth-child(4):last-child) li:nth-child(2n)::after { right: 0; }
}
@media (min-width: 901px) {
  .etapes-ligne li::after { content: ""; position: absolute; left: 50px; right: -40px; top: 19px; height: 1.5px; background: var(--bordure-forte); }
  .etapes-ligne li:last-child::after { right: 0; }
}
@media (min-width: 1100px) {
  .etapes-ligne li::after { right: -32px; }
  .etapes-ligne li:last-child::after { right: 0; }
}

/* Comparatif des formes juridiques : cellules centrées, la référence légale sous le montant */
.table table th, .table table td { text-align: center; vertical-align: middle; }
.table table th:first-child, .table table td:first-child { text-align: left; }
.table table td .chiffre { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.table table td .chiffre .src { margin-left: 0; }

/* Diagnostic TVA : la réponse */
.tva-sortie { margin-top: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--doux); border-left: 3px solid var(--cyan); }
.tva-sortie p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--corps); }
.tva-sortie p:last-child { margin-bottom: 0; }
.tva-sortie .verdict { font: 600 19px/1.35 var(--serif); color: var(--encre); }
.tva-sortie .source { font-size: 12.5px; color: var(--second); }
.tva-sortie .source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Cartes : les données sourcées sous la grille, pour que les cartes restent de hauteur égale */
.variante-donnees { display: grid; gap: 10px; margin-top: 18px; }
.variante-donnees .piece-donnee { margin: 0; }
.variante-tete .pilier-num { margin-bottom: 14px; }

/* Une donnée en plusieurs étapes se lit en liste */
.piece-donnee .donnee-liste { margin: 0; padding: 0; list-style: none; counter-reset: dl; display: grid; gap: 8px; }
.piece-donnee .donnee-liste li { counter-increment: dl; position: relative; padding-left: 34px; font: 500 16px/1.5 var(--inter); color: var(--encre); }
.piece-donnee .donnee-liste li::before { content: counter(dl); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--doux); color: var(--marine); font: 600 12.5px/24px var(--inter); text-align: center; }
.variante-cle .piece-donnee .donnee-liste li { font: 500 16px/1.5 var(--inter); }

/* Menu Entreprises, 2026-10-09 : colonnes à la largeur de leurs intitulés (« Mandat de gérant et
   d'administrateur » sur une ligne), « Accompagnement complet » contenu dans sa colonne et aligné sur
   la dernière ligne des autres colonnes, bande basse réduite */
@media (min-width: 1181px) {
  .entete .mega.trois { grid-template-columns: repeat(3, max-content); column-gap: 56px; padding: 24px 32px 18px; }
  .entete .mega.trois a { white-space: nowrap; }
}
@media (min-width: 761px) {
  .entete .mega.trois .mega-complet { min-height: 38px; padding: 0 14px; max-width: 100%; box-sizing: border-box; }
}

/* Accueil : chaque titre de pôle sur une ligne en grand écran (« Création & administration ») */
@media (min-width: 1101px) { .pole h3 { white-space: nowrap; font-size: clamp(24px, 1.95vw, 28px); } }
.variante-carte-donnee { padding: 0; border: 0 !important; background: none !important; display: flex; }
.variante-carte-donnee .piece-donnee { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Pied de page, 2026-10-09 : toutes les mentions cliquables en blanc ; quatre colonnes séparées
   par le même espacement (marque, Nous contacter, Informations légales, Nos cantons) */
.pied a, .pied .pied-membres a, .pied li a, .pied details a { color: #fff; }
.pied a:hover { color: var(--cyan-clair); }
@media (min-width: 1181px) {
  .pied-haut { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 48px; }
}
.tenue > li > .piece-donnee { margin: 12px 0 0; }
.variante-carte-donnee { flex-direction: column; }
.variante-donnee-t { margin: 0 0 8px; font: 600 12px/1.3 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: var(--cyan-lisible); }

/* « Où nous travaillons », pied de page (2026-10-11, D44) */
.pied-cantons-ouverts > h4 { text-align: left; }
.pied-partout { margin: 0 0 14px; max-width: 24ch; }
.pied-regionales { margin: 0 0 6px; font: 600 11px/1.3 var(--inter); letter-spacing: .06em; text-transform: uppercase; color: var(--sur-sombre-2); }
.pied-toute { margin: 12px 0 0; }

/* Pages légales (2026-10-11) : le tableau prend toute la largeur sous son titre, cases alignées à
   gauche ; sur mobile, une fiche par ligne (table-cartes) */
.pilier-grille:has(.table.legale) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pilier-corps .table.legale table { min-width: 0; font-size: 15px; }
.table.legale table th, .table.legale table td { text-align: left; vertical-align: top; line-height: 1.5; }
.table.legale table th { white-space: nowrap; }
.table.legale table td:first-child { font-weight: 600; color: var(--encre); }
/* Sous l en-tête collant, une ancre ne cache plus son titre (2026-10-11) */
section[id] { scroll-margin-top: 88px; }
@media (max-width: 640px) { section[id] { scroll-margin-top: 72px; } }

/* ===================== Retours du 12.10.2026 ===================== */
/* 1 et 2. Pages légales : le tableau passe sous son titre, en pleine largeur ; le titre ne reste donc
   plus collé en haut de l'écran, il remonte avec la page comme les autres */
.pilier-grille:has(.table.legale) .pilier-tete { position: static; }
/* 12. Formulaire : la mention de protection des données, plus petite ; le lien se lit comme le texte */
.formulaire .mention-donnees { font-size: 12.5px; line-height: 1.55; }
.formulaire .mention-donnees a { color: inherit; font-weight: inherit; text-decoration: none; }
.formulaire .mention-donnees a:hover, .formulaire .mention-donnees a:focus-visible { text-decoration: underline; }
/* 5, 6 et 8. Cinq encadrés : trois en haut, deux plus larges en bas, sans case vide */
.variante-grille.c3.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.variante-grille.c3.n5 > :nth-child(-n+3) { grid-column: span 2; }
.variante-grille.c3.n5 > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 900px) {
  .variante-grille.c3.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variante-grille.c3.n5 > * { grid-column: auto; }
  .variante-grille.c3.n5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .variante-grille.c3.n5 { grid-template-columns: minmax(0, 1fr); } .variante-grille.c3.n5 > :last-child { grid-column: auto; } }
/* La source d'un encadré, sous le texte (2026-10-12) */
.variante-carte p.variante-source { margin-top: 12px; font-size: 13.5px; color: var(--second); }
/* 14. Comparateur des formes : les boutons « Créer… » sous leur colonne ; « Limitée au capital » sur une ligne */
.comparateur-formes tfoot td { padding-top: 18px; padding-bottom: 6px; border-bottom: 0; background: none; vertical-align: top; }
.comparateur-formes tfoot .lien { white-space: nowrap; }
.comparateur-formes tbody td:last-child { white-space: nowrap; }
.comparateur-formes + .liens-sous-table { display: none; }
@media (max-width: 640px) { .comparateur-formes + .liens-sous-table { display: flex; } }
/* 11. Pied français, même hauteur que l'anglais : pages régionales sur trois colonnes, « Toute la Suisse → »
   collé au dernier canton */
.pied ul.liste-cantons { grid-template-columns: repeat(3, max-content); column-gap: 22px; }
.pied ul.liste-cantons .pied-toute-li { grid-column: span 2; }
@media (min-width: 1181px) {
  .pied ul.liste-cantons li a { min-height: 26px; }
  :lang(fr) .pied-cantons-ouverts .pied-partout { margin-bottom: 6px; }
  .pied-regionales { margin-bottom: 4px; }
}
/* 17. Calculer l'impôt à la source : l'écart entre l'ouverture et la partie 01 ramené à celui des autres parties */
#fr-impot-a-la-source-s2, #en-withholding-tax-s2 { padding-top: 24px; }
@media (max-width: 760px) { #fr-impot-a-la-source-s2, #en-withholding-tax-s2 { padding-top: 16px; } }
/* 10. Page nationale anglaise, pages régionales : Geneva, Valais, Neuchâtel, Bern, puis Vaud, Fribourg, Jura */
main[data-url="/en/across-switzerland/"] .pilier-corps p.liens { display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 28px; }
@media (max-width: 760px) { main[data-url="/en/across-switzerland/"] .pilier-corps p.liens { grid-template-columns: repeat(2, max-content); } }

/* ===================== Instructions du 12.10.2026 (après-midi) ===================== */
/* 8. Toutes les sources du site au même format, celui de la quasi-résidence (Particuliers) */
.source-ligne, p > .source, .nota .source, .piece-donnee .source, .piece-donnee figcaption, .piece-chiffre .source,
.tva-sortie .source, .variante-carte p.variante-source, .chiffre.liste-cantons-v .src {
  font: 400 12.5px/1.55 var(--inter) !important; color: var(--second) !important; letter-spacing: 0;
}
p.source-ligne { margin: -12px 0 22px; overflow-wrap: anywhere; }
.tenue p.source-ligne, .groupe-corps p.source-ligne { margin: 8px 0 0; }
.sombre .source-ligne { color: var(--sur-sombre-2) !important; }
.source-ligne a, p > .source a { color: inherit; font-weight: 400; }
/* 17. Plus de bloc technique séparé : une donnée qui reste sous un paragraphe se lit comme du texte,
   sans cadre, avec sa source discrète en dessous */
.piece-donnee, .fond-doux .piece-donnee { margin: -6px 0 22px; padding: 0; background: none; border: 0; border-radius: 0; }
.piece-donnee .chiffre { font: 400 17px/1.6 var(--inter); color: var(--corps); }
.pieces .piece-donnee + .piece-donnee { margin-top: 0; }
.tenue > li > .piece-donnee { margin: 6px 0 0; }
/* 7. Pied de page : colonnes des cantons resserrées, « Toute la Suisse → » sans élargir les colonnes ;
   les deux blocs (Partout en Suisse, Pages régionales) plus près de leur titre */
.pied ul.liste-cantons { column-gap: 16px; }
.pied ul.liste-cantons .pied-toute-li { grid-column: 2 / -1; white-space: nowrap; min-width: 0; }
.pied-cantons-ouverts > h4 { margin-bottom: 8px; }
.pied-cantons-ouverts .pied-partout { margin-top: 0; }
.pied-regionales { margin-top: 18px; }
.pied ul.liste-cantons { margin-top: 2px; }

/* 2026-10-12 (Youssef, point 4) : le trait vertical bleu clair des ouvertures et des colonnes partagées
   est retiré partout ; la colonne reste, pour que la mise en page ne bouge pas */
.seuil, .partage .seuil-v { visibility: hidden !important; }

/* 2026-10-12 (Youssef, point 11) : sur ordinateur, le comparateur des formes ne défile plus ; les
   critères tiennent sur une ligne et les cases ne se coupent qu'où le texte le prévoit */
@media (min-width: 761px) {
  main[data-url="/fr/creation-de-societe/"] .table.comparateur-formes { overflow-x: visible; }
  main[data-url="/fr/creation-de-societe/"] .comparateur-formes tbody th, main[data-url="/fr/creation-de-societe/"] .comparateur-formes tbody td { white-space: nowrap; }
  main[data-url="/fr/creation-de-societe/"] .comparateur-formes th, main[data-url="/fr/creation-de-societe/"] .comparateur-formes td { padding-left: 12px; padding-right: 12px; }
}

/* 2026-10-12 (Youssef, points 18 à 21) : glossaire, recherche avec ses deux boutons, alphabet
   cliquable, et sans les numéros d'ordre, qui ne suivaient que l'alphabet */
.recherche[data-glossaire] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.recherche[data-glossaire] .bouton { min-height: 52px; padding: 0 22px; }
.recherche[data-glossaire] .bouton.clair { border: 1px solid var(--bordure-forte); }
.alphabet button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--bordure-forte); border-radius: var(--r); font: 600 14px/1 var(--inter); color: var(--marine); background: #fff; cursor: pointer; transition: background var(--t), color var(--t); }
.alphabet button:hover { background: var(--doux); }
.alphabet button[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
main[data-url="/fr/ressources/glossaire/"] .tenue.groupes > li, main[data-url="/en/resources/glossary/"] .tenue.groupes > li { grid-template-columns: minmax(0, 1fr); }
main[data-url="/fr/ressources/glossaire/"] .tenue.groupes > li::before, main[data-url="/en/resources/glossary/"] .tenue.groupes > li::before { content: none; }
main[data-url="/fr/ressources/glossaire/"] .tenue.groupes > li > *, main[data-url="/en/resources/glossary/"] .tenue.groupes > li > * { grid-column: 1; }
.tenue.groupes > li[hidden] { display: none; }

/* 2026-10-12 (Youssef, point 38) : Créer une SA, « Ce qu'il faut réunir ». Le capital, long, occupe
   deux rangées au centre ; les quatre cadres courts l'entourent, sans case vide ni cadre entassé */
@media (min-width: 901px) {
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5, main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "nom capital statuts" "siege capital conseil"; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > *, main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > * { grid-column: auto; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > :nth-child(1), main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > :nth-child(1) { grid-area: nom; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > :nth-child(2), main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > :nth-child(2) { grid-area: capital; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > :nth-child(3), main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > :nth-child(3) { grid-area: statuts; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > :nth-child(4), main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > :nth-child(4) { grid-area: conseil; }
  main[data-url="/fr/creer-une-sa/"] .variante-grille.c3.n5 > :nth-child(5), main[data-url="/en/public-limited-company-sa/"] .variante-grille.c3.n5 > :nth-child(5) { grid-area: siege; }
}

/* 2026-10-12 (Youssef) : « Accounting services for the self-employed » tient sur une ligne dans le
   menu (point 34) ; « Gestion des absences » sur une ligne ; le sommaire d'À propos à la même hauteur
   que sur les autres pages */
@media (min-width: 901px) { .deroulant a { white-space: nowrap; } }
@media (min-width: 761px) {
  main[data-url="/fr/gestion-des-absences/"] .page-hero.avec-piece h1.court { white-space: nowrap; font-size: clamp(36px, 4vw, 58px); }
  main[data-url="/fr/a-propos/"] .page-hero.avec-piece .hero-visuel, main[data-url="/en/about/"] .page-hero.avec-piece .hero-visuel { align-self: start; }
}

/* 2026-10-13 (Youssef) : les deux colonnes comparées (Création de société, Bouclement, pages
   cantonales…) perdent leur filet horizontal et leur filet vertical, partout */
.variante-comparaison .variante-grille { border-top: 0 !important; }
.variante-comparaison .variante-carte + .variante-carte { border-left: 0 !important; border-top: 0 !important; }
/* 2026-10-13 (Youssef) : À propos, le sommaire commence au niveau de l'espace entre le titre et le
   premier paragraphe (il était remonté trop haut le 12.10) */
@media (min-width: 761px) {
  main[data-url="/fr/a-propos/"] .page-hero.avec-piece .hero-visuel, main[data-url="/en/about/"] .page-hero.avec-piece .hero-visuel { margin-top: clamp(84px, 7.6vw, 110px); }
}
/* 2026-10-13 (Youssef) : pied de page, le même espace entre chaque canton et « Toute la Suisse »,
   « Pages régionales » collé à ses cantons, et deux blocs nettement distincts sous « Où nous travaillons » */
.pied ul.liste-cantons { display: flex !important; flex-wrap: wrap; gap: 2px 14px !important; margin-top: 0 !important; max-width: 236px; }
.pied ul.liste-cantons .pied-toute-li { grid-column: auto !important; }
.pied-regionales { margin: 30px 0 2px !important; }
/* 2026-10-13 (Youssef) : Mandat de gérant et d'administrateur, « Ce que comprend notre mandat » :
   cinq cadres, trois en haut et deux plus larges en bas, comme « Ce qu'il faut réunir » de la Sàrl */
@media (min-width: 901px) {
  :is(main[data-url="/fr/mandat-de-gerant-et-d-administrateur/"], main[data-url="/en/resident-director-and-manager/"]) .variante-cartes .variante-grille.c3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(main[data-url="/fr/mandat-de-gerant-et-d-administrateur/"], main[data-url="/en/resident-director-and-manager/"]) .variante-cartes .variante-grille.c3 > :nth-child(-n+3) { grid-column: span 2; }
  :is(main[data-url="/fr/mandat-de-gerant-et-d-administrateur/"], main[data-url="/en/resident-director-and-manager/"]) .variante-cartes .variante-grille.c3 > :nth-child(n+4) { grid-column: span 3; }
}
/* 2026-10-13 (Youssef) : Logiciels, cinq pôles égaux, trois en haut et deux en bas */
@media (min-width: 761px) {
  .outils:has(> .outil:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .outils:has(> .outil:nth-child(5):last-child) > .outil { grid-column: span 2; }
  .outils:has(> .outil:nth-child(5):last-child) > .outil:nth-child(n+4) { grid-column: span 3; }
}
.outil .nom { margin-top: 0; }
/* 2026-10-13 (Youssef) : une source placée sous un encadré à barre bleu clair s'aligne sur son texte,
   et non sur la barre */
.nota + p.source-ligne { padding-left: 29px; }
/* Des paragraphes suivis dans un point de liste respirent comme dans le corps du texte (13.10.2026) */
.tenue > li > p:not(.source-ligne) + p:not(.source-ligne) { margin-top: 12px; }
/* 2026-10-13 (Youssef) : calendrier, pas de cadre vide. Tant que les boutons d'abonnement ne sont pas
   affichés (avant « Voir mes échéances », ou pour un profil sans flux), le cadre n'apparaît pas */
.abonnement:has([data-abo-liens][hidden]) { display: none; }
/* 2026-10-13 (Youssef) : Logiciels, de l'air entre « Nos applications » et le paragraphe qui suit */
.suite > div:first-child > h2 + p { margin-top: 18px; }

/* Ce que la production ajoute à la feuille du prototype (spts.css), et rien d'autre. */

/* L'en-tête et le pied du moteur sont posés dans des enveloppes neutres : la barre collante reste
   enfant direct du corps pour la mise en page, comme dans le prototype */
.dc { display: contents; }

/* Les ancres de section (« /fr/tva/#fr-tva-s3 ») ne passent pas sous la barre collante */
main.page section[id] { scroll-margin-top: 96px; }
@media (max-width: 760px) { main.page section[id] { scroll-margin-top: 76px; } }

/* Le champ piège des formulaires : invisible pour un visiteur, rempli par un robot */
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* « Message reçu », l'écran prévu par les textes (D27), dans la boîte de confirmation du prototype */
div.form-ok p { margin: 0 0 8px; }
div.form-ok p:last-child { margin-bottom: 0; }
div.form-ok .form-ok-titre { font-size: 15.5px; }
div.form-ok a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-echec { margin: 0; padding: 14px 16px; background: #fbeeed; border: 1px solid #efc9c6; color: #a8261f; border-radius: var(--r); font-size: 14.5px; }
.form-echec a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Le CV, seulement pour le motif Carrières */
.form-cv[hidden] { display: none; }
.form-cv input[type="file"] { font: inherit; font-size: 15px; padding: 10px 0; }
.form-cv-note { display: block; margin-top: 4px; font-size: 13px; color: var(--second); font-weight: 400; }

/* D26 : une donnée de plus de douze mois */
.a-reverifier { color: #8a5c14; font-weight: 600; white-space: nowrap; }

/* Le bandeau de consentement (lot 5) : refuser pèse autant qu'accepter */
.consentement { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; background: #fff; color: var(--encre); border: 1px solid var(--bordure-forte); border-radius: var(--r-grand); box-shadow: 0 18px 48px rgba(15, 44, 67, .18); padding: 22px 24px; font-size: 15px; }
.consentement[hidden] { display: none; }
.consentement p { margin: 0 0 14px; color: var(--corps); }
.consentement .consentement-titre { font: 600 16px/1.3 var(--inter); color: var(--encre); margin-bottom: 6px; }
.consentement .consentement-choix { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consentement .bouton { min-height: 46px; padding: 0 20px; font-size: 15px; flex: 1 1 180px; }
.consentement a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .consentement { left: 8px; right: 8px; bottom: 8px; padding: 18px; } }

}
/* ===== Harmonisation avec SPTS Fiduciaire (15.10.2026) =====
   Les blocs repris de spts.ch (bandeau, pied de page, hero de l'accueil, page Nous contacter) portent
   .fid et reçoivent la feuille de spts.ch telle quelle (reference-spts.css, emboîtée sous .fid).
   Cette feuille-ci ne fait que trois choses : neutraliser les règles du prototype d'origine qui
   visent header et footer, aligner la largeur et les titres du reste du site sur spts.ch, et les
   quelques points demandés ailleurs (trait des trois blocs, bandeau cookies). */

/* Deux langues dans le balisage : seule celle de la page s'affiche */
html[lang="fr"] :is(.fid, #panel) [data-en], html[lang="en"] :is(.fid, #panel) [data-fr] { display: none !important; }
.fid.dc { display: contents; }
.fid { font-family: var(--inter); font-size: 17px; line-height: 1.62; color: var(--encre); -webkit-font-smoothing: antialiased; }

/* Le prototype d'origine fixe la hauteur et la mise en page de header, et habille footer */
.fid header.entete { height: auto; display: block; padding: 0; }
.fid footer.pied { border-top: 0; position: static; }
.fid footer.pied::before { display: none; }
.fid footer.pied > div:last-child { border-top: 0 !important; }
.fid footer.pied h4 { font-family: var(--inter); }
.fid .entete .logo img { height: 28px; width: auto; display: block; }
.fid .pied-haut img { height: 28px; width: auto; }

/* Deux boutons au bandeau (Nous contacter, Obtenir une simulation), au format de « Nous contacter »
   de spts.ch ; écarts plus bas */
@media (max-width: 1320px) and (min-width: 1181px) { .fid .entete .nav-lien { padding: 0 9px; } }
/* Le burger ouvre le panneau mobile du prototype (#panel) */
@media (min-width: 641px) and (max-width: 1180px) { .fid .entete .burger { display: none; } }

/* Le prototype d'origine fait de .hero une grille (ancien premier écran) */
.fid section.hero { display: block; grid-template-columns: none; gap: 0; }

/* Hero de l'accueil : la photo du portage dans le cadre vertical de spts.ch */
.fid .hero-ph { position: absolute; inset: 0; background: var(--ph-hero, var(--ph-accueil)) 50% 45% / cover no-repeat; }
.fid .hero h1 em { color: var(--marine); }

/* Largeur générale : celle de spts.ch (1280 px, gouttière de 48, 32 puis 20 px) */
.yc.yc { --larg: 1184px; --gout: 48px; }
@media (max-width: 1180px) { .yc.yc { --gout: 32px; } }
@media (max-width: 760px) { .yc.yc { --gout: 20px; } }
body .wrap { max-width: 1280px; }

/* Bandeau cookies : la police du site pour tout le bandeau ; « Protection des données » à la ligne */
#cookie, #cookie p, #cookie b, #cookie a, #cookie button, #cookie .btn, #cookie label { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
#cookie .cktext a[data-go="pd"] { display: block !important; width: fit-content; margin-top: 6px; }

/* Bandeau : spts.ch répartit l'espace restant entre ses éléments ; les deux boutons forment un seul
   élément, à 12 px l'un de l'autre */
.fid .boutons-entete { display: flex; gap: 12px; flex: none; }
@media (max-width: 640px) { .fid .boutons-entete { display: none; } }

/* Quelle est votre situation ? : chaque bloc garde son trait, rien ne passe d'un encadré à l'autre */
.yc.v2 .v-portes .v-ln-h { left: 0; right: 0; --g: clamp(14px, 1.8vw, 24px); --c: calc((100% - 2 * var(--g)) / 3);
  background: linear-gradient(90deg, transparent 0, var(--cyan) 6%, var(--cyan) var(--c), transparent var(--c),
    transparent calc(var(--c) + var(--g)), var(--cyan) calc(var(--c) + var(--g)), var(--cyan) calc(2 * var(--c) + var(--g)),
    transparent calc(2 * var(--c) + var(--g)), transparent calc(2 * var(--c) + 2 * var(--g)), var(--cyan) calc(2 * var(--c) + 2 * var(--g)),
    var(--cyan) 94%, transparent 100%); }

/* Paragraphes des blocs repris : au fer à gauche, comme sur spts.ch (le prototype justifie) */
main.page .fid p { text-align: left !important; -webkit-hyphens: manual !important; hyphens: manual !important; }

/* Titres : la hiérarchie de spts.ch (graisse 600 ; titre de page 72 px, titre de section 49 px à
   l'accueil et 40 px ailleurs, sous-titre 24 px, cartes de l'accueil 27 px ; 36, 32 et 21 px sur mobile).
   Les intertitres en Inter du portage (étiquettes, étapes) gardent leur forme. */
main.page .yc.v2 h1, main.page.legal-page h1 { font-size: clamp(40px, 5vw, 72px) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.018em !important; }
main.page .yc.v2 h2 { font-size: clamp(30px, 2.9vw, 40px) !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -0.012em !important; }
main.page[id^="home"] .yc.v2 h2 { font-size: clamp(30px, 3.4vw, 50px) !important; }
main.page .yc.v2 h3.t-serif { font-size: 24px !important; font-weight: 600 !important; line-height: 1.22 !important; letter-spacing: -0.006em !important; }
main.page .yc.v2 .v-orient h3.t-serif { font-size: 27px !important; }
@media (max-width: 760px) {
  main.page .yc.v2 h1, main.page.legal-page h1 { font-size: 36px !important; }
  main.page .yc.v2 h2, main.page[id^="home"] .yc.v2 h2 { font-size: 32px !important; }
  main.page .yc.v2 h3.t-serif, main.page .yc.v2 .v-orient h3.t-serif { font-size: 21px !important; }
}

/* Ligne de réassurance du hero sur une seule ligne (Youssef, 15.10.2026) : ses trois éléments font
   540 px pour une colonne de 579 ; écart ramené de 26 à 18 px, point recentré */
@media (min-width: 1280px) {
  .fid .hero .faits { flex-wrap: nowrap; column-gap: 18px; white-space: nowrap; }
  .fid .hero .faits li + li::before { margin-left: -12px; margin-right: -14px; }
}

/* Alternance des fonds (15.10.2026) : blanc, bleu clair (#F1F6FA, le --doux de la charte, le même
   que spts.ch), sans dégradé ; la classe est posée par construire.mjs */
main.page .alt-blanc { background: #fff !important; background-image: none !important; }
main.page .alt-doux { background: #F1F6FA !important; background-image: none !important; }
/* « Vous employez déjà vos collaborateurs ? » : une section à part, sur fond blanc */
.yc.v2 .v-autre-sec { padding-block: clamp(40px, 5vw, 64px); }
.yc.v2 .v-autre-sec .v-autre { margin: 0; }
/* La bande internationale de Pour les entreprises passe en bleu clair : texte foncé */
.yc.v2 .v-bande.alt-doux, .yc.v2 .v-bande.alt-doux h2 { color: var(--encre); }
.yc.v2 .v-bande.alt-doux p, .yc.v2 .v-bande.alt-doux .v-pts li { color: var(--corps); }
.yc.v2 .v-bande.alt-doux .v-pts li b { color: var(--encre); }
.yc.v2 .v-bande.alt-doux .v-sur { color: #2a728f !important; }
.yc.v2 .v-bande.alt-doux .v-lien { color: var(--marine) !important; }
/* Ils nous font confiance, sur fond blanc : les logos sur le bleu clair de la charte */
.yc.v2 .v-conf .grille-logos li { background: #F1F6FA; }
.yc.v2 .v-conf .logos-plus summary::after { background: #F1F6FA; }

/* ===== Ressources en quatre pages (15.10.2026) ===== */
.yc.v2 .r-tete .v-pi-g { align-items: end; }
.yc.v2 .r-autres { justify-self: end; min-width: 240px; padding: 22px 26px; border: 1px solid #d9e4ee; border-radius: 10px; background: #fff; }
.yc.v2 .r-autres p { margin: 0 0 10px; font: 600 12px/1 var(--inter); letter-spacing: .08em; text-transform: uppercase; color: #4a6480; }
.yc.v2 .r-autres ul { list-style: none; margin: 0; padding: 0; }
.yc.v2 .r-autres li a, .yc.v2 .r-autres li span { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid #e4ebf1; font: 600 16px/1.3 var(--serif); color: var(--encre); text-decoration: none; }
.yc.v2 .r-autres li:first-child a, .yc.v2 .r-autres li:first-child span { border-top: 0; }
.yc.v2 .r-autres li span[aria-current] { color: #2a728f; }
.yc.v2 .r-autres li span[aria-current]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #45bddf; }
.yc.v2 .r-fl { width: 18px; height: 18px; flex: none; transition: transform .18s; }
.yc.v2 a:hover > .r-fl { transform: translateX(3px); }
.yc.v2 .r-sec { padding-block: clamp(56px, 7vw, 96px); }
.yc.v2 .r-etiq { margin: 0 0 8px; font: 600 12.5px/1.3 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: #2a728f; }
.yc.v2 .r-meta { margin: 10px 0 0; font-size: 14px; color: #4a6480; }
.yc.v2 .r-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 40px; font-weight: 600; color: var(--marine); text-decoration: none; }
/* Guides : deux colonnes de cartes, la couverture du thème en bandeau */
.yc.v2 .r-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.yc.v2 .r-guide { display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e4ee; border-radius: 10px; overflow: hidden; }
.yc.v2 .alt-blanc .r-guide { background: #fff; }
.yc.v2 .r-guide-couv { display: block; position: relative; padding: 26px 28px 18px; background: #10416C; color: #fff; text-decoration: none; }
.yc.v2 .r-guide-couv.clair { background: #F1F6FA; color: var(--encre); }
.yc.v2 .r-guide-couv svg { display: block; width: 100%; height: auto; }
.yc.v2 .r-guide-couv i { display: block; margin-top: 12px; font: 600 12px/1 var(--inter); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #81CEE2; }
.yc.v2 .r-guide-couv.clair i { color: #2a728f; }
.yc.v2 .r-guide-txt { padding: 24px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.yc.v2 .r-guide h3 { margin: 0; }
.yc.v2 .r-guide h3 a { color: var(--encre); text-decoration: none; }
.yc.v2 .r-guide h3 a:hover { color: var(--marine); }
.yc.v2 .r-guide .r-action { margin-top: auto; padding-top: 16px; }
/* Brochures : la brochure de référence à la une, puis trois cartes */
.yc.v2 .r-une { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.yc.v2 .r-une-couv, .yc.v2 .r-doc-couv, .yc.v2 .r-fiche-couv { display: block; background: var(--img) center top / cover no-repeat #fff; border-radius: 8px; box-shadow: 0 1px 0 #d9e4ee, 0 24px 48px -30px rgba(15, 44, 67, .45); transition: transform .25s; }
.yc.v2 .r-une-couv { aspect-ratio: 210 / 297; max-width: 420px; }
.yc.v2 .r-une-couv:hover, .yc.v2 .r-doc-couv:hover, .yc.v2 .r-fiche-couv:hover { transform: translateY(-3px); }
.yc.v2 .r-une h2 { margin: 0; font: 600 clamp(30px, 2.9vw, 40px)/1.08 var(--serif); color: var(--encre); }
.yc.v2 .r-une-desc { margin: 16px 0 0; font-size: 19px; line-height: 1.6; color: var(--corps); max-width: 32em; }
.yc.v2 .r-une .bouton { margin-top: 26px; }
.yc.v2 .r-sec > .w > .v-h2 { margin: 0 0 36px; }
.yc.v2 .r-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.yc.v2 .r-doc-couv { aspect-ratio: 210 / 297; margin-bottom: 20px; }
.yc.v2 .r-doc h3, .yc.v2 .r-fiche h3 { margin: 0; font: 600 21px/1.25 var(--serif); color: var(--encre); }
.yc.v2 .r-doc p, .yc.v2 .r-fiche p { margin: 8px 0 0; color: var(--corps); line-height: 1.55; }
/* Repères : une section par série, des fiches en grille */
.yc.v2 .r-fiches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.yc.v2 .r-fiche-couv { aspect-ratio: 210 / 297; margin-bottom: 16px; }
.yc.v2 .r-num { margin: 0 0 4px !important; font: 600 13px/1 var(--inter) !important; letter-spacing: .08em; color: #2a728f !important; }
/* Actualités : la date et la catégorie en marge, l'article en colonne de lecture */
.yc.v2 .r-actu { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.yc.v2 .r-date { margin: 0 0 6px; font: 600 15px/1.3 var(--inter); color: var(--encre); }
.yc.v2 .r-actu-corps { max-width: 760px; }
main.page .yc.v2 .r-actu-corps h2 { margin: 0 0 18px; font-size: clamp(26px, 2.6vw, 34px) !important; line-height: 1.15 !important; color: var(--encre); }
.yc.v2 .r-actu-corps p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--corps); }
.yc.v2 .r-actu-corps .r-chapo { font-size: 19px; color: var(--encre); font-weight: 500; }
.yc.v2 .r-change { margin: 24px 0; padding: 18px 22px; border-left: 3px solid #45bddf; background: #fff; border-radius: 0 8px 8px 0; }
.yc.v2 .alt-blanc .r-change { background: #F1F6FA; }
.yc.v2 .r-change p { margin: 0 !important; }
.yc.v2 .r-change .r-change-t { margin-bottom: 6px !important; font: 600 13px/1.3 var(--inter) !important; letter-spacing: .06em; text-transform: uppercase; color: #2a728f !important; }
/* 15.10.2026 (point 10.5) : les sources de spts.ch (p > .source) : une ligne discrète sous le texte,
   Inter 12,5 px, gris secondaire, liens de la couleur du texte soulignés d'un trait clair */
main.page .yc.v2 p.r-sources { display: block; margin: 18px 0 0; font: 400 12.5px/1.55 var(--inter) !important; color: #4a6480 !important; overflow-wrap: anywhere; }
main.page .yc.v2 p.r-sources a { color: inherit; text-decoration: underline; text-decoration-color: #b9cddf; text-underline-offset: 3px; }
main.page .yc.v2 p.r-sources a:hover { color: #10416C; text-decoration-color: currentColor; }
@media (max-width: 1100px) { .yc.v2 .r-fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .yc.v2 .r-guides, .yc.v2 .r-une, .yc.v2 .r-actu { grid-template-columns: minmax(0, 1fr); }
  .yc.v2 .r-docs, .yc.v2 .r-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yc.v2 .r-autres { justify-self: stretch; }
  .yc.v2 .r-une-couv { max-width: 300px; }
}
@media (max-width: 520px) { .yc.v2 .r-docs, .yc.v2 .r-fiches { grid-template-columns: minmax(0, 1fr); } .yc.v2 .r-doc-couv, .yc.v2 .r-fiche-couv { max-width: 260px; } }

/* Lecteur d'articles (guides embarqués) */
#lecteur { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #fff; }
#lecteur[hidden] { display: none; }
#lecteur .lecteur-barre { display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 0 clamp(16px, 4vw, 48px); border-bottom: 1px solid #d9e4ee; font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#lecteur .lecteur-fermer { min-height: 40px; padding: 0 16px; border: 1px solid #d6e1ea; border-radius: 6px; background: #fff; font: 600 14px/1 "Inter", sans-serif; color: #10416C; cursor: pointer; }
#lecteur .lecteur-titre { font: 600 15px/1.3 "Source Serif 4", Georgia, serif; color: #0f2c43; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lecteur iframe { flex: 1; width: 100%; border: 0; }
html.lecteur-ouvert { overflow: hidden; }
html[lang="fr"] #lecteur [data-en], html[lang="en"] #lecteur [data-fr] { display: none; }

/* Flèches (15.10.2026) : le dessin de spts.ch (trait 1,7, viewBox 24) pour toutes les flèches du portage */
.yc.v2 {
  --fl-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --fl-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --fl-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --fl-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}
.yc.v2 .fl.ne { width: 18px; height: 18px; }
/* Pied de page : la question et le lien espacés comme sur spts.ch */
.fid .pied-bas .portage > span { display: inline-flex; align-items: center; gap: 12px; }

/* Flèches en caractère (→, ↗) : Inter de Google ne les contient pas ; comme spts.ch (next/font), elles
   viennent de « Inter Fallback », Arial aux réglages exacts de spts.ch */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }
.fid { --inter: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.yc.yc { --inter: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Pied de page à la hauteur de celui de spts.ch (15.10.2026) : sa première colonne porte deux lignes
   d'adhésion, celle du portage une seule ; la colonne garde la même hauteur */
@media (min-width: 761px) { .fid footer.pied .pied-haut > div:first-child { min-height: 207px; } }

/* Mot-symbole SPTS dans les schémas (15.10.2026) */
.yc.v2 .v-logo-b { display: block; line-height: 0; }
.yc.v2 .v-logo-b .logo-spts { display: block; height: 22px; width: auto; }

/* Schémas aux couleurs de la charte (15.10.2026) : marine #10416C, cyan #45BDDF, cyan clair #81CEE2 ;
   fonds clairs #F1F6FA et #E4EDF5 (ceux de spts.ch). Les bleus hors charte disparaissent */
.yc.yc { --ciel: #F1F6FA; --ciel-2: #E4EDF5; }
/* Comment ça marche, « Comment fonctionne votre collaboration » : la bulle SPTS en marine plein */
.yc.v2 .v15-tri .spts { background: #10416C; box-shadow: 0 0 0 12px rgba(69, 189, 223, .10), 0 26px 60px -22px rgba(16, 65, 108, .6); }
.yc.v2 .v15-tri .cons { border-color: #81CEE2; background: #F1F6FA; }
.yc.v2 .v15-tri .cli { border-color: #B9CDDF; background: #F1F6FA; }
.yc.v2 .v15-colla .atouts .ic, .yc.v2 .v15-com .compris .ic { background: #F1F6FA; border-color: #D9E4EE; }
.yc.v2 .v15-com .carte { background: #fff; }
.yc.v2 .v15-flux .fac .seg { background: #10416C; }
.yc.v2 .v15-flux .brut .seg { background: #45BDDF; }
.yc.v2 .v15-flux .net .seg { background: #81CEE2; }
/* Gestion salariale : le cercle « Votre entreprise » en marine plein */
.yc.v2 .v18-r.emp { background: #10416C; }
/* Accueil : le nœud SPTS sur le bleu clair de la charte */
.yc.v2 .v13-rel .v13-act.spts { background: #fff; }
/* Agences : le mot-symbole tient dans les nœuds étroits du modèle B */
.yc.v2 .nd .v-logo-b .logo-spts { height: auto; width: min(100%, 84px); margin-inline: auto; }

/* Bandeau cookies au format exact de spts.ch (15.10.2026) : même largeur de texte (648 px), même grille,
   donc les mêmes retours à la ligne ; mêmes boutons, même panneau */
#cookie { padding: 18px 40px !important; }
#cookie .ckrow { max-width: 1200px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 36px !important; align-items: center !important; }
#cookie .cktext { max-width: 648px !important; margin: 0 !important; font-size: 13.5px !important; line-height: 1.6 !important; }
#cookie .ckacts { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
#cookie #ckprefs { max-width: 1200px !important; margin: 18px auto 0 !important; }
@media (max-width: 760px) {
  #cookie { padding: 18px 24px !important; }
  #cookie .ckrow { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  #cookie .ckacts { flex-direction: column; align-items: stretch; }
}
/* Bouton « Modifier mes préférences » de la page Cookies : celui de spts.ch */
main.page .fid > .bouton { font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#cookie { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#cookie, #cookie p, #cookie b, #cookie a, #cookie button, #cookie .btn, #cookie label, #cookie h4 { font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
#cookie .btn { letter-spacing: -.005em; }

/* Boutons des pages Services (15.10.2026) : ceux du bandeau ; le prototype colore ses liens, on rétablit */
.yc.v2 .v-act-fid { margin-top: 34px; }
.yc.v2 .fid .bouton, .yc.v2 .fid .bouton:hover, .yc.v2 .fid .bouton:visited { color: #fff; text-decoration: none; }

/* ===== Demande du 15.10.2026, appliquée le 15.10 ===== */
/* 11.1 Titres : passés de h3 à h2 pour la hiérarchie, rendu inchangé (valeurs relevées avant) */
main.page .yc.v2 .v14-bandeau h2.v14-bt { margin: 0 0 6px; font: 600 17.5px/22.75px var(--inter) !important; letter-spacing: normal !important; color: #0F2C43; text-transform: none; font-style: normal; }
main.page .yc.v2 h2.v19-st { margin: 4px 0 0; font: 600 16px/1.3 var(--inter) !important; letter-spacing: normal !important; color: #0F2C43; text-transform: none; font-style: normal; }
main.page .yc.v2 h2.v19-st.v19-sep { padding-top: 18px; border-top: 1px solid var(--bord); }
/* 2.1 Lien vers la protection des données : celui de la page Nous contacter, sans soulignement */
.yc.v2 .v19-mention .lien-donnees { color: inherit; font-weight: inherit; text-decoration: none; }
.yc.v2 .v19-mention .lien-donnees:hover, .yc.v2 .v19-mention .lien-donnees:focus-visible { text-decoration: underline; }
/* 6.1 Accueil : SPTS Fiduciaire, sans encadré, sur le fond blanc de la section, logo cliquable */
.yc.v2 .v-autre.v22-fid { padding: 0; border: 0; border-radius: 0; background: none; gap: 16px 40px; }
.yc.v2 .v22-fid .v-autre-t { margin: 0; }
.yc.v2 .v22-fid-logo { display: inline-flex; flex: none; padding: 6px 0; border-radius: 4px; }
.yc.v2 .v22-fid-logo img { display: block; height: 30px; width: auto; }
.yc.v2 .v22-fid-logo:focus-visible { outline: 2px solid #10416C; outline-offset: 4px; }
/* 7.1 Commission : rectangle bleu clair, textes bleu foncé de la charte */
.yc.v2 .v15-com .carte { background: #F1F6FA; border-color: #F1F6FA; box-shadow: none; }
.yc.v2 .v15-com .carte .gros, .yc.v2 .v15-com .carte .gros small, .yc.v2 .v15-com .carte .de,
.yc.v2 .v15-com .carte .sans, .yc.v2 .v15-com .carte .sans span, .yc.v2 .v15-com .carte .sans b { color: #10416C !important; }
.yc.v2 .v15-com .carte .sans { border-top-color: #b9cddf; }
/* 10.2 Guides : un guide par section, sur le modèle des Actualités */
.yc.v2 .r-guide-l h2 a { color: inherit; text-decoration: none; }
.yc.v2 .r-guide-l h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.yc.v2 .r-guide-l .r-meta { margin: 0 0 10px; font-size: 14px; color: #4a6480; }
/* 15.1 États d'envoi */
.envoi-cours { cursor: progress; opacity: .75; }
.envoi-echec { margin-top: 14px; padding: 14px 16px; border-left: 3px solid #a8261f; background: #fdf3f2; border-radius: 0 8px 8px 0; font: 400 15px/1.5 var(--inter, Inter, sans-serif); color: #0F2C43; }
.envoi-echec[hidden] { display: none; }
.envoi-echec p { margin: 0 0 10px; }
.envoi-echec button { min-height: 40px; padding: 0 16px; border: 1.5px solid #10416C; border-radius: 6px; background: #fff; color: #10416C; font: 600 15px/1 var(--inter, Inter, sans-serif); cursor: pointer; }
.envoi-echec button:focus-visible { outline: 2px solid #10416C; outline-offset: 3px; }
/* 5.2 À propos : le titre et le texte remontent, la photo descend un peu ; le texte entier tient
   dans un écran courant (1440 x 900) sans paraître coupé. Contenu inchangé. */
@media (min-width: 761px) {
  main#ab-fr .fid section.hero, main#ab .fid section.hero { padding-top: 36px; }
  main#ab-fr .fid .hero-texte, main#ab .fid .hero-texte { padding-top: 8px; justify-content: flex-start; }
  main#ab-fr .fid .hero-visuel, main#ab .fid .hero-visuel { margin-top: 64px; }
}

/* ===== Demande du 17.10.2026 (« Modifications à faire pour le site SPTS portage ») =====
   Chargée après harmonie.css par construire.mjs. FR et EN. */

/* Arrondis : celui de la photo de l'accueil et de l'encadré Nous contacter (10 px) pour toutes les
   photos et tous les encadrés ; les pilules et les cercles ne changent pas */
.yc.v2 { --r-l: 10px; --r: 10px; }
.yc.v2 .v-scene .v-ph { border-radius: 10px; }

/* Boutons « Obtenir une simulation » : celui du bandeau (rectangle, sans flèche) ; ils sont posés
   dans un .fid, qui reçoit la feuille de spts.ch */
.yc.v2 .fid.v-act, .yc.v2 .v13-avert .fid { display: flex; flex-wrap: wrap; gap: 12px; }

/* Liens vers une page SPTS : comme « Comment ça marche » du haut de l'accueil, avec la flèche, sans
   trait. Aucun lien n'est plus souligné d'un trait bleu clair (sauf l'e-mail de Nous contacter) */
.yc.v2 .v-lien > span:first-child { background: none !important; padding-bottom: 0; }
.yc.v2 .v-lien { font-weight: 600; }

/* Liens vers un site extérieur (registre fédéral, Zefix, CCT, Swissdec) : comme « Autorisation
   cantonale et fédérale » de l'accueil, un trait léger dessous, sans flèche */
.yc.v2 a.v24-ext, .yc.v2 a.v24-ext:visited { color: var(--encre); font-weight: 600; text-decoration: underline; text-decoration-color: #b9cddf; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.yc.v2 a.v24-ext:hover { text-decoration-color: currentColor; }

/* Puces bleues réservées aux titres de partie */
.yc.v2 .v-sur.sans-puce { gap: 0; }
.yc.v2 .v-sur.sans-puce::before { display: none; }
.yc.v2 .v-facons a span.emp { gap: 0; }
.yc.v2 .v-facons a span.emp::before { display: none; }

/* Chiffres : ceux de spts.ch, en Inter (graisse 600, approche serrée, chiffres alignés) */
.yc.v2 .v-tu .ch, .yc.v2 .gros, .yc.v2 .moyen, .yc.v2 .v15-trois .m, .yc.v2 .v15-paie .delai .ch,
.yc.v2 .v-seg-b .n, .yc.v2 .v-etape .n, .yc.v2 .v13-etapes .n, .yc.v2 .v-nums li::before {
  font-family: var(--inter) !important; font-weight: 600 !important; font-variant-numeric: lining-nums; }
.yc.v2 .v15-trois .m { font-variant-numeric: tabular-nums lining-nums; }
.yc.v2 .v-tu .ch, .yc.v2 .gros, .yc.v2 .moyen, .yc.v2 .v15-trois .m, .yc.v2 .v15-paie .delai .ch { letter-spacing: -.035em; }
.yc.v2 .v-seg-b .n, .yc.v2 .v-etape .n, .yc.v2 .v13-etapes .n { font-size: 15px; }
.yc.v2 .v-nums li::before { font-size: 26px; letter-spacing: -.02em; }

/* Photo du début des pages Services et de Comment ça marche : celle de l'accueil (verticale, à droite,
   même largeur, même hauteur, même arrondi, sans ombre) */
@media (min-width: 901px) {
  .yc.v2 .v-pi:not(.typo) .v-pi-g { grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.7fr); column-gap: 72px; align-items: stretch; }
  .yc.v2 .v-pi:not(.typo) .v-pi-g > div:first-child { display: flex; flex-direction: column; justify-content: center; padding: 20px 0 40px; }
  .yc.v2 .v-pi:not(.typo) .v-pi-photo { min-height: 640px; }
  .yc.v2 .v-pi:not(.typo) .v-pi-photo .v-ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 10px; box-shadow: none; }
  .yc.v2 .v-pi { padding-top: 56px; background: #fff; }
}

/* ----- Accueil ----- */
/* Votre profil : la puce de partie au format des autres (la tête de section agrandit ses paragraphes) */
.yc.v2 .v-orient-tete p.v-sur { font-size: 13px; color: var(--cyan-l); max-width: none; margin-bottom: 14px; }
/* Les chiffres clés : quatre tuiles sur une ligne */
.yc.v2 .v-bento.v24-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "b c d e"; }
.yc.v2 .v24-chiffres .v-tu { background: #fff; }
.yc.v2 .v24-chiffres .v-tu.c .ch { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; }
@media (max-width: 1000px) { .yc.v2 .v-bento.v24-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "b c" "d e"; } }
@media (max-width: 560px) { .yc.v2 .v-bento.v24-chiffres { grid-template-columns: minmax(0, 1fr); grid-template-areas: "b" "c" "d" "e"; } }

/* Conformité et références : quatre références sur une ligne, séparées par un filet, sans bloc */
.yc.v2 .v24-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); margin-top: clamp(28px, 3.4vw, 44px); }
.yc.v2 .v24-refs > div { padding-top: 22px; border-top: 1px solid var(--bord-f); }
.yc.v2 .v24-refs .cat { margin: 0 0 12px; font: 600 12.5px/1.35 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: #2a728f; }
.yc.v2 .v24-refs h3 { margin: 0; font: 600 18px/1.4 var(--inter); color: var(--encre); }
.yc.v2 .v24-refs h3 .tab { white-space: nowrap; }
.yc.v2 .v24-refs p:not(.cat) { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--corps); }
.yc.v2 .v24-refs > div > a.v24-ext { display: inline-block; margin-top: 14px; font-size: 15.5px; }
@media (max-width: 1000px) { .yc.v2 .v24-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } }
@media (max-width: 560px) { .yc.v2 .v24-refs { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Ils nous font confiance : le bleu foncé des avis de spts.ch, titre sur une ligne, logos dessous,
   chaque logo dans sa vraie couleur sur une tuile blanche */
main.page section.v24-conf { background: #10416C !important; padding-block: var(--sec); }
.yc.v2 .v24-conf .v-sur { color: #81CEE2; }
.yc.v2 .v24-conf .v-h2 { color: #fff; margin: 12px 0 clamp(28px, 3.4vw, 44px); }
@media (min-width: 1000px) { .yc.v2 .v24-conf .v-h2 { white-space: nowrap; } }
.yc.v2 .v24-conf .grille-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.yc.v2 .v24-conf .grille-logos li { background: #fff; border-radius: 10px; }
.yc.v2 .v24-conf .grille-logos li img { filter: none; opacity: 1; }
.yc.v2 .v24-conf .logos-plus summary { color: #fff; }
.yc.v2 .v24-conf .logos-plus summary::after { background: rgba(255, 255, 255, .14); color: #fff; }
.yc.v2 .v24-conf .secteurs { color: #D5E3EF; border-top-color: #2A4A66; }
@media (max-width: 1000px) { .yc.v2 .v24-conf .grille-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yc.v2 .v24-conf .grille-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Nous contacter sur bleu clair, après la section foncée */
main.page section.alt-blanc.fond-doux { background: #F1F6FA !important; }

/* ----- Pour les consultants ----- */
/* Frais et conditions : trois colonnes, sans trou ; la facturation multidevise */
.yc.v2 .v-cond.v24-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.yc.v2 .v24-cond .moyen { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; }
.yc.v2 .v24-dev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.yc.v2 .v24-dev span { font: 600 12.5px/1 var(--inter); padding: 7px 10px; border-radius: 999px; background: #F1F6FA; color: var(--marine); }
@media (max-width: 900px) { .yc.v2 .v-cond.v24-cond { grid-template-columns: minmax(0, 1fr); } }
/* Votre espace en ligne : le filet du haut, léger comme les autres */
.yc.v2 .v16-benef { border-top: 1px solid var(--bord); }
/* La comparaison : la phrase d'introduction sur une ligne */
@media (min-width: 1200px) { .yc.v2 .v14-cmp .v18-intro { max-width: none; white-space: nowrap; } }

/* ----- La rémunération (Comment ça marche et Pour les consultants, même bloc) ----- */
.yc.v2 .v24-remu .v-h2 { margin-bottom: 10px; }
@media (min-width: 1000px) { .yc.v2 .v24-remu .v-h2 { white-space: nowrap; } }
.yc.v2 .v24-remu .v15-trois { margin-top: clamp(26px, 3vw, 40px); }
.yc.v2 .v24-trois > li:not(.fleche) { align-items: center !important; justify-content: center !important; text-align: center; }
.yc.v2 .v24-trois .consultant { background: #45BDDF !important; border-color: #45BDDF !important; }
.yc.v2 .v24-trois .consultant .qui, .yc.v2 .v24-trois .consultant .m { color: #10416C !important; }
.yc.v2 .v24-trois .consultant .v22-ic { background: rgba(255, 255, 255, .55); }

/* ----- Comment ça marche ----- */
.yc.v2 .v24-indic { margin: 8px 0 0; font: 400 13px/1.5 var(--inter); font-style: normal; color: var(--second); }
.yc.v2 .v15-tri.v24-fige .ac { cursor: default; }
.yc.v2 .v15-tri.v24-fige .ac:hover { transform: translate(-50%, -50%); }
.yc.v2 .v15-tri.v24-fige .cons:hover, .yc.v2 .v15-tri.v24-fige .cli:hover { box-shadow: none; }
@media (min-width: 700px) { .yc.v2 .v24-nw { white-space: nowrap; } }
.yc.v2 .v15-com .compris-t { margin-top: clamp(18px, 2vw, 28px) !important; }

/* ----- Pour les entreprises ----- */
.yc.v2 .v13-avert .t { margin: 0; }
/* Mise en place : photo verticale plus étroite, les trois titres sur une ligne */
@media (min-width: 1001px) {
  .yc.v2 .v-regard.v24-mep { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .yc.v2 .v24-mep .v-ph { aspect-ratio: 4 / 4.8; box-shadow: none; }
  .yc.v2 .v24-mep .v-seg-b h3 { white-space: nowrap; }
}

/* ----- Simulation ----- */
.yc.v2 .v24-msg { margin-top: 4px; }
.yc.v2 .v24-msg .v19-st { display: block; margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--bord); font: 600 16px/1.3 var(--inter); color: #0F2C43; }
.yc.v2 .v19-act.v24-act { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; }
.yc.v2 .v24-envoi { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: #10416C; color: #fff; font: 600 15px/1 var(--inter); letter-spacing: -.005em; cursor: pointer; transition: background .18s; }
.yc.v2 .v24-envoi:hover { background: #0c3355; }
.yc.v2 .v24-envoi:focus-visible { outline: 3px solid #2a728f; outline-offset: 3px; }
.yc.v2 .v24-donnees { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--second); }
.yc.v2 .v19-g.v24-coord { align-items: start; }
@media (min-width: 1000px) { .yc.v2 .v24-remu .v-lead { max-width: none; } }

/* ===== Document V24, 19.10.2026 : Pour les agences, « Les modèles de facturation » =====
   Deux grands blocs superposés : informations à gauche, schéma des acteurs au centre, « Votre
   avantage » à droite. Modèle A = vous facturez, Modèle B = SPTS facture (agence reliée à SPTS par
   la commission d'apporteur d'affaires). Le nœud SPTS (logo sur marine) et l'encadré « Votre
   avantage » (fond doux, filet cyan) gardent le dessin de V16. Chargée après demande-2026-10-17.css. */

.yc.v2 .v16-modeles.v25-modeles { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 26px); }
.yc.v2 .v25-mod {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .85fr);
  grid-template-areas: "info sch av"; gap: clamp(22px, 2.6vw, 36px); align-items: stretch;
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-l); background: #fff;
  border: 1px solid var(--bord); box-shadow: var(--ombre);
}

/* Informations */
.yc.v2 .v25-info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.yc.v2 .v25-info h3 { margin: 16px 0 6px; font: 500 clamp(23px, 2vw, 28px)/1.15 var(--serif); color: var(--encre); }
.yc.v2 .v25-info .v16-points { align-self: stretch; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--bord); }

/* Schéma */
.yc.v2 .v25-sch { grid-area: sch; display: flex; align-items: center; min-width: 0; padding-right: clamp(22px, 2.6vw, 36px); border-right: 1px solid var(--bord); }
.yc.v2 .v25-flux { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; align-items: start; }
.yc.v2 .v25-a { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1.15fr) 50px minmax(0, 1fr) 50px minmax(0, 1fr); }
.yc.v2 .v25-b { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); }

.yc.v2 .v25-nd { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.yc.v2 .v25-nd .ic { display: grid; place-items: center; width: 60px; height: 60px; margin: 12px 0 8px; border-radius: 50%; background: var(--ciel); color: var(--marine); }
.yc.v2 .v25-nd .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yc.v2 .v25-nd.a .ic { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cyan); }
.yc.v2 .v25-nd > b { font: 600 14px/1.2 var(--inter); color: var(--encre); }
.yc.v2 .v25-nd > span:not(.ic) { font-size: 12.5px; line-height: 1.3; color: var(--second); }

/* SPTS : le bloc marine de V16, logo blanc */
.yc.v2 .v25-nd.s { position: relative; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 10px; border-radius: var(--r-s); background: var(--marine); box-shadow: 0 14px 28px -16px rgba(16, 65, 108, .7); }
.yc.v2 .v25-nd.s .v-logo-b { color: #fff; }
.yc.v2 .v25-nd.s .v-logo-b .logo-spts { height: auto; width: min(100%, 80px); margin-inline: auto; }
.yc.v2 .v25-nd.s > span { font-size: 12px; line-height: 1.3; color: var(--sur-sombre); }

/* Liens : contrat en filet cyan, factures en flèches marine, libellé au-dessus */
.yc.v2 .v25-ln { position: relative; height: 84px; }
.yc.v2 .v25-ln::before { content: ""; position: absolute; left: 6px; right: 6px; top: 42px; height: 2px; margin-top: -1px; background: var(--cyan); }
.yc.v2 .v25-ln.fx::before { background: var(--marine); right: 10px; }
.yc.v2 .v25-ln.fx::after { content: ""; position: absolute; right: 7px; top: 42px; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--marine); border-right: 2px solid var(--marine); transform: rotate(45deg); }
.yc.v2 .v25-ln > span { position: absolute; left: 2px; right: 2px; bottom: 50px; font: 600 10.5px/1.2 var(--inter); color: var(--cyan-l); text-align: center; }

/* Modèle B : votre agence sous SPTS, reliée par la commission */
.yc.v2 .v25-b .s::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 90px; margin-left: -1px; background: var(--marine); }
.yc.v2 .v25-ln.v { grid-column: 1 / -1; height: 84px; }
.yc.v2 .v25-ln.v::before { left: 50%; right: auto; top: 0; bottom: 12px; width: 2px; height: auto; margin: 0 0 0 -1px; }
.yc.v2 .v25-ln.v::after { right: auto; left: 50%; top: auto; bottom: 9px; margin: 0 0 0 -4px; transform: rotate(135deg); }
.yc.v2 .v25-ln.v > span, .yc.v2 .v25-ln.v > span {
  left: 50%; right: auto; bottom: auto; top: 44%; transform: translate(-50%, -50%); width: max-content; max-width: 240px;
  padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--bord); color: var(--marine); font-size: 11.5px;
}
.yc.v2 .v25-b .v25-ag { grid-column: 1 / -1; }
.yc.v2 .v25-b .v25-ag .ic { margin-top: 0; }

/* Votre avantage : l'encadré de V16, avec ses trois points */
.yc.v2 .v25-mod .v25-av { grid-area: av; align-self: center; margin: 0; }
.yc.v2 .v25-av p { margin: 0; }
.yc.v2 .v25-av ul { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--bord); }
.yc.v2 .v25-av li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.45; }
.yc.v2 .v25-av li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--marine); }

/* Tablette : informations et avantage côte à côte, schéma dessous sur toute la largeur */
@media (max-width: 1180px) {
  .yc.v2 .v25-mod { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "info av" "sch sch"; }
  .yc.v2 .v25-sch { padding: clamp(20px, 2.6vw, 28px) 0 0; border-right: 0; border-top: 1px solid var(--bord); }
  .yc.v2 .v25-flux { max-width: 680px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .yc.v2 .v25-mod { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "sch" "av"; }
}

/* Téléphone : schémas verticaux, libellés en pastille sur le trait */
@media (max-width: 560px) {
  .yc.v2 .v25-a { grid-template-columns: minmax(0, 1fr); }
  .yc.v2 .v25-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yc.v2 .v25-nd .ic { width: 48px; height: 48px; margin: 0 0 6px; }
  .yc.v2 .v25-nd .ic svg { width: 22px; height: 22px; }
  .yc.v2 .v25-nd.s { justify-self: center; width: min(100%, 220px); min-height: 0; }
  .yc.v2 .v25-ln, .yc.v2 .v25-ln.v { height: 64px; }
  .yc.v2 .v25-ln::before, .yc.v2 .v25-ln.v::before { left: 50%; right: auto; top: 6px; bottom: 8px; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .yc.v2 .v25-ln.fx::before, .yc.v2 .v25-ln.v::before { bottom: 12px; }
  .yc.v2 .v25-ln.fx::after { right: auto; left: 50%; top: auto; bottom: 9px; margin: 0 0 0 -4px; transform: rotate(135deg); }
  .yc.v2 .v25-ln > span {
    left: 50%; right: auto; bottom: auto; top: 44%; transform: translate(-50%, -50%); width: max-content; max-width: 90%;
    padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--bord); font-size: 11px;
  }
  /* Modèle B : SPTS au centre, puis deux branches, la facture vers le client final, la commission vers votre agence */
  .yc.v2 .v25-b .v25-c1, .yc.v2 .v25-b .v25-l1, .yc.v2 .v25-b .s { grid-column: 1 / -1; }
  .yc.v2 .v25-b .s { width: 60%; }
  .yc.v2 .v25-b .s::after { content: none; }
  .yc.v2 .v25-b .s::before { content: ""; position: absolute; top: 100%; left: 8.33%; right: 8.33%; height: 10px; border: 2px solid var(--marine); border-bottom: 0; border-radius: 8px 8px 0 0; }
  .yc.v2 .v25-b .v25-l2 { grid-column: 1; grid-row: 4; }
  .yc.v2 .v25-ln.v { grid-column: 2; grid-row: 4; }
  .yc.v2 .v25-b .v25-l2::before, .yc.v2 .v25-b .v25-com::before { top: 8px; }
  .yc.v2 .v25-b .v25-f { grid-column: 1; grid-row: 5; }
  .yc.v2 .v25-b .v25-ag { grid-column: 2; grid-row: 5; }
  .yc.v2 .v25-b .v25-com > span { white-space: normal; text-align: center; max-width: 140px; }
}
/* Retouches après captures : SPTS du Modèle B à la largeur de celui du Modèle A, titres sur une ligne
   quand la place le permet, pastille de la commission dégagée de SPTS sur téléphone */
.yc.v2 .v25-b .v25-nd.s { justify-self: center; width: min(100%, 132px); }
.yc.v2 .v25-info h3 { font-size: clamp(22px, 1.75vw, 26px); }
@media (max-width: 560px) {
  .yc.v2 .v25-b .v25-nd.s { width: 60%; }
  .yc.v2 .v25-b .v25-l2, .yc.v2 .v25-ln.v.v25-com { height: 92px; }
  .yc.v2 .v25-ln.v25-l2 > span, .yc.v2 .v25-ln.v25-com > span { top: 52%; }
}

/* ===== Demande du 19.10.2026 (13 points), FR et EN ===== */

/* 4.1 Accueil, organisations : « Voir plus + » et « Voir moins − », petit signe à côté */
.yc.v2 .v-conf .logos-plus summary::after { content: "+"; width: auto; height: auto; background: none; border-radius: 0; font: 600 17px/1 var(--inter); transform: none !important; }
.yc.v2 .v-conf .logos-plus[open] summary::after { content: "\2212"; }

/* 5. Conformité et références : titre à gauche, liste verticale numérotée à droite, sur le modèle de
   « Nos références » de spts.ch ; chaque référence a la même forme et chaque lien le même format */
.yc.v2 .v25-refs-g { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.yc.v2 .v25-refs-t .v-h2 { margin: 12px 0 0; }
.yc.v2 .v25-refs-t .v-lead { margin: 18px 0 0; }
.yc.v2 .v25-refs { list-style: none; margin: 0; padding: 0; counter-reset: ref; border-top: 1.5px solid var(--encre); }
.yc.v2 .v25-refs > li { counter-increment: ref; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--bord); }
.yc.v2 .v25-refs > li::before { content: counter(ref, decimal-leading-zero); grid-row: 1 / span 3; padding-top: 3px; font: 600 13px/1 var(--inter); letter-spacing: .06em; color: var(--cyan-l); }
.yc.v2 .v25-refs .cat { margin: 0 0 8px; font: 600 12.5px/1.35 var(--inter); letter-spacing: .07em; text-transform: uppercase; color: #2a728f; }
.yc.v2 .v25-refs h3 { margin: 0 0 10px; font: 500 clamp(20px, 1.7vw, 23px)/1.3 var(--serif); color: var(--encre); }
.yc.v2 .v25-refs p:not(.cat) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--corps); }
.yc.v2 a.v25-ref, .yc.v2 a.v25-ref:visited { color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; }
.yc.v2 a.v25-ref:hover { color: var(--cyan-l); }
@media (max-width: 900px) {
  .yc.v2 .v25-refs-g { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .yc.v2 .v25-refs > li { grid-template-columns: 38px minmax(0, 1fr); padding: 22px 0; }
}

/* 6.2 Pour les consultants, Votre statut : « Ce que vous gérez » encadré comme « Vous gardez le
   contrôle sur » (Pour les entreprises) ; les quatre points des deux colonnes sur les mêmes lignes
   (les deux listes partagent la grille du bloc) */
.yc.v2 .v25-roles .col:not(.v-spts) { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-l); }
@media (min-width: 821px) {
  .yc.v2 .v-roles.v25-roles { grid-template-columns: minmax(0, .92fr) 64px minmax(0, 1.08fr); grid-template-rows: repeat(5, auto); row-gap: 16px; }
  .yc.v2 .v25-roles .col { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; align-content: start; }
  .yc.v2 .v25-roles .lien-c { grid-row: 1 / span 5; }
  .yc.v2 .v25-roles .col h3 { margin-bottom: 4px; }
  .yc.v2 .v25-roles .col ul { display: contents; }
  .yc.v2 .v25-roles .v25-uneligne { white-space: nowrap; }
}
@media (min-width: 821px) and (max-width: 1240px) { .yc.v2 .v25-roles .v25-uneligne { white-space: normal; } }

/* 6.3 Frais et conditions : Commission, Facturation, Paiement ; les deux derniers encadrés comme
   « Facture totale » de La rémunération ; trois blocs de même hauteur */
.yc.v2 .v-cond.v25-cond { align-items: stretch; }
.yc.v2 .v-cond.v25-cond > .v25-carte { padding: clamp(24px, 3.6vw, 48px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--bord); }
.yc.v2 .v25-cond .v-marine .v25-de { margin: 6px 0 0; font-size: 17px; color: var(--sur-sombre); }
.yc.v2 .v25-cond .v-marine .v25-min { margin: 12px 0 0; font: 600 20px/1.3 var(--inter); color: #fff; }

/* 6.4 et 7. La rémunération (Pour les consultants et Comment ça marche, même composant) : titres en
   haut à gauche, sur une ligne ; montants au niveau des flèches ; « Hors TVA » à la taille de la
   mention « Exemple indicatif » */
.yc.v2 .v24-trois > li:not(.fleche) { position: relative; justify-content: center !important; align-items: center !important; }
.yc.v2 .v24-trois .qui { position: absolute; top: clamp(24px, 2.6vw, 36px); left: clamp(22px, 2.4vw, 32px); margin: 0; text-align: left; }
.yc.v2 .v24-trois .m { margin: 0 !important; }
.yc.v2 .v24-trois .n { position: absolute; left: 0; right: 0; top: calc(50% + clamp(22px, 2.2vw, 30px)); margin: 0 !important; font-size: 12.5px !important; text-align: center; }
/* Cartes empilées (1000 px et moins) : le titre en haut à gauche, le montant et « Hors TVA » dessous */
@media (max-width: 1000px) {
  .yc.v2 .v24-trois .qui { position: static; align-self: flex-start; margin: 0 0 10px; }
  .yc.v2 .v24-trois .n { position: static; margin: 6px 0 0 !important; }
}

/* 8. Pour les entreprises : deux titres sur une ligne (ordinateur) ; la mention « Exemple indicatif »
   comme dans La rémunération (petit texte, sans encadré bleu clair ni symbole i) */
@media (min-width: 1100px) {
  .yc.v2 .v-h2.v25-uneligne-h { white-space: nowrap; font-size: clamp(30px, 2.75vw, 42px); }
  .yc.v2 .v-tete2:has(.v25-uneligne-h) { grid-template-columns: minmax(0, 1fr); }
}
.yc.v2 .v13-avert.v25-avert { padding: 0; background: none; border-left: 0; border-radius: 0; }
.yc.v2 .v25-avert .v-hyp { margin: 0; }

/* 9. Pour les agences : l'introduction en trois paragraphes, au style du chapeau */
.yc.v2 .v25-intro p { margin: 0; font: inherit; color: inherit; }
.yc.v2 .v25-intro p + p { margin-top: .7em; }

/* 11. Obtenir une simulation : trois blocs ; « Information manquante. » juste sous le champ
   concerné (le champ reste marqué en rouge, comme avant) ; date, nationalité et permis sur une ligne */
.yc.v2 .v25-c { display: flex; flex-direction: column; min-width: 0; }
.yc.v2 .v19-form .v25-c .ferr { margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13.5px; line-height: 1.4; color: #A3402C; }
.yc.v2 .v19-g.v25-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .yc.v2 .v19-g.v25-g3 { grid-template-columns: minmax(0, 1fr); } }
/* Retouches après captures (19.10.2026) */
.yc.v2 .v24-trois .n { width: 100%; text-align: center !important; }
.yc.v2 .v-cond.v25-cond > .v25-carte .moyen { font-size: clamp(24px, 2.4vw, 34px); }
.yc.v2 .v25-cond .v25-carte:last-child .moyen { white-space: nowrap; }
@media (max-width: 900px) { .yc.v2 .v25-cond .v25-carte:last-child .moyen { white-space: normal; } }

/* ===== Demande du 19.10.2026, après-midi ===== */

/* Boutons : la forme de « Nous contacter » (arrondi de 6 px) pour tous, identité SPTS ; les couleurs ne
   changent pas. Le bandeau cookies, le bouton fixe et le menu mobile étaient en pilule */
#cookie .btn, .yc.v2 #cookie .btn, #stick .btn, #panel .btn { border-radius: 6px !important; }

/* Aucun dégradé : les blocs bleu foncé sont au bleu de la charte (#10416C), uni ; les filets et les
   flèches sont d'une seule couleur */
.yc.v2 .v-marine, .yc.v2 .v-roles .col.v-spts, .yc.v2 .v15-trois .spts, .yc.v2 .delai, .yc.v2 .v-tu.a, .yc.v2 .v-spts { background-image: none !important; background-color: #10416C; }
.yc.v2 .v-sombre { background-image: none !important; }
.yc.v2 .v15-trois .fleche::before, .yc.v2 .carte::before, .yc.v2 .v-filcols::before, .yc.v2 .v-cycle > div::before,
.yc.v2 .v-cycle > div:last-child::before { background: var(--cyan) !important; }
.fid .seuil, .fid .encart::before, .fid .public-photo::after { background: var(--cyan) !important; }
.fid .hero-photo::after { background: none !important; }
/* Quelle est votre situation ? : trois traits nets, un par bloc, séparés comme les blocs (pas de ligne continue,
   pas de fondu aux extrémités) */
.yc.v2 .v-portes i.v-ln-h { background: linear-gradient(90deg, var(--cyan) 0 var(--c), transparent var(--c) calc(var(--c) + var(--g)), var(--cyan) calc(var(--c) + var(--g)) calc(2 * var(--c) + var(--g)), transparent calc(2 * var(--c) + var(--g)) calc(2 * var(--c) + 2 * var(--g)), var(--cyan) calc(2 * var(--c) + 2 * var(--g)) 100%) !important; }
main.page.legal-page .hero-wrap { background: #F6FAFD !important; }
main.page.legal-page .hero-wrap::before { background: var(--cyan) !important; }

/* Accueil, Comment ça marche : titre sur une ligne ; les trois prises en charge de SPTS sur trois lignes */
.yc.v2 .v13-tete:has(.v25-uneligne-h) { max-width: none; }
.yc.v2 .v13-act .m.v25-m { display: block; line-height: 1.5; }

/* Pourquoi choisir SPTS ? : un titre par bloc, au style de « Quelle est votre situation ? » */
.yc.v2 .v25-tu .v25-t { display: block; margin-bottom: 14px; font: 600 12.5px/1.3 var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-l); }
.yc.v2 .v25-tu .ch { font-weight: 700; }
.yc.v2 .v25-tu .v25-l1 { margin: 0; font-size: 15.5px; color: var(--corps); }
.yc.v2 .v25-tu .v25-l1 .ch { display: inline; margin: 0 .15em 0 0; }
.yc.v2 .v25-tu p + p { margin-top: 6px; }
.yc.v2 .v25-tu .dev { margin-top: 12px; }

/* Conformité et références : le titre reste en place pendant que la liste défile ; sans numéros ;
   liens non soulignés, toujours cliquables */
.yc.v2 .v25-refs-t { position: sticky; top: calc(var(--hdr, 80px) + 32px); }
.yc.v2 .v25-refs > li { grid-template-columns: minmax(0, 1fr) !important; }
.yc.v2 .v25-refs > li::before { content: none !important; }
.yc.v2 a.v25-ref, .yc.v2 a.v25-ref:visited { text-decoration: none; }
@media (max-width: 900px) { .yc.v2 .v25-refs-t { position: static; } }

/* Pour les consultants, Votre statut : les deux phrases longues sur une ligne (ordinateur), sans
   toucher aux polices : lien central plus court, marges intérieures un peu réduites */
@media (min-width: 1240px) {
  .yc.v2 .v-roles.v25-roles { grid-template-columns: minmax(0, .9fr) 40px minmax(0, 1.1fr); }
  .yc.v2 .v25-roles .col { padding-inline: 36px; }
  .yc.v2 .v25-roles .v25-uneligne { white-space: nowrap; }
}
.yc.v2 .v-seg-b p.v25-nw { white-space: nowrap; }

/* Frais et conditions : blocs moins grands, polices inchangées */
.yc.v2 .v-cond.v25-cond > div, .yc.v2 .v-cond.v25-cond > .v25-carte { padding: clamp(20px, 2.2vw, 30px) !important; }

/* La rémunération (Pour les consultants et Comment ça marche) : chiffres moins imposants, cartes moins hautes */
.yc.v2 .v24-trois.v22-trois > li:not(.fleche) { min-height: clamp(128px, 10.5vw, 150px) !important; padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) !important; }
.yc.v2 .v24-trois.v22-trois .m { font-size: clamp(26px, 2.4vw, 34px) !important; }
.yc.v2 .v24-trois .qui { top: clamp(18px, 2vw, 26px); left: clamp(18px, 2vw, 26px); }
.yc.v2 .v24-trois .n { top: calc(50% + clamp(16px, 1.6vw, 22px)); }
.yc.v2 .v24-trois .v22-ic { top: clamp(14px, 1.6vw, 20px); right: clamp(14px, 1.6vw, 20px); width: 40px; height: 40px; }

/* Titres : la partie en italique, au bleu de « approche » (Notre méthode), partout */
.fid .contact-titre em, .yc.v2 h1.court em, main.page.legal-page h1 em { font-style: italic; font-weight: 400; color: #10416C; }
.fid { --filet: var(--cyan); }
/* Sur la bande bleu foncé des organisations, l italique prend le cyan clair de son sur-titre (lisible) */
.yc.v2 .v24-conf .v-h2 em { color: #81CEE2; }

/* ===== Demande du 19.10.2026, soir ===== */

/* Titres : « environnements internationaux » au style des autres titres ; « 2 jours ouvrés » sur une ligne */
.yc.v2 #eor-fr-t-intl em, .yc.v2 #eor-t-intl em { font-style: italic; font-weight: 400; color: var(--marine); }
.yc.v2 .v25-tu .v25-nw { white-space: nowrap; }
.yc.v2 .v24-chiffres .v-tu.c .ch { font-size: clamp(26px, 2.35vw, 34px); }

/* Conformité et références : le premier trait comme les suivants, clair */
.yc.v2 .v25-refs { border-top: 1px solid var(--bord); }

/* Pour les agences, Les modèles : bandeaux de même hauteur ; titres de modèle sur une ligne */
.yc.v2 .v16-modeles.v25-modeles { grid-auto-rows: 1fr; }
@media (min-width: 1181px) { .yc.v2 .v25-mod { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr) minmax(0, .85fr); } }
@media (min-width: 1181px) { .yc.v2 .v25-info h3 { white-space: nowrap; font-size: clamp(21px, 1.75vw, 25px); } }

/* Schémas : des acteurs seuls, reliés par des flèches identiques (trait marine fin, pointe pleine) ;
   les libellés sous les cercles, sur une ligne */
.yc.v2 .v25-flux.v26 { display: grid; justify-content: center; align-items: start; column-gap: 0; padding-bottom: 48px; }
.yc.v2 .v25-flux.v26.v25-a { grid-template-columns: 56px 54px 72px 54px 56px 54px 56px; }
.yc.v2 .v25-flux.v26.v25-b { grid-template-columns: 56px 64px 72px 64px 56px; padding-bottom: 52px; }
.yc.v2 .v26 .v25-nd { position: relative; height: 56px; gap: 0; }
.yc.v2 .v26 .v25-nd .ic { width: 56px; height: 56px; margin: 0; }
.yc.v2 .v26 .v25-nd:not(.s) > b, .yc.v2 .v26 .v25-nd > span:not(.ic) { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.yc.v2 .v26 .v25-nd:not(.s) > b { top: 64px; font-size: 13.5px; }
.yc.v2 .v26 .v25-nd > span:not(.ic) { top: 84px; font-size: 12.5px; }
.yc.v2 .v26 .v25-nd.s { width: 72px; height: 56px; min-height: 0; padding: 0 10px; justify-content: center; }
.yc.v2 .v26 .v25-nd.s .v-logo-b .logo-spts { width: 52px; }
.yc.v2 .v26 .v25-nd.s::before, .yc.v2 .v26 .v25-nd.s::after { content: none !important; }
.yc.v2 .v26 .v25-ln { position: relative; height: 56px; width: auto; grid-column: auto; grid-row: auto; }
.yc.v2 .v26 .v25-ln::before { content: ""; position: absolute; left: 8px; right: 14px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--marine); border-radius: 1px; }
.yc.v2 .v26 .v25-ln::after { content: ""; position: absolute; right: 8px; top: 50%; width: 0; height: 0; margin-top: -4.5px; border-left: 8px solid var(--marine); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-right: 0; transform: none; }
/* Modèle B : votre agence sous SPTS, flèche courte vers le bas */
.yc.v2 .v26.v25-b .v25-ln.v { grid-column: 3; grid-row: 2; height: 34px; }
.yc.v2 .v26.v25-b .v25-ln.v::before { left: 50%; right: auto; top: 6px; bottom: 12px; width: 1.5px; height: auto; margin: 0 0 0 -.75px; }
.yc.v2 .v26.v25-b .v25-ln.v::after { right: auto; left: 50%; top: auto; bottom: 6px; margin: 0 0 0 -4.5px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 8px solid var(--marine); border-bottom: 0; }
.yc.v2 .v26.v25-b .v25-ag { grid-column: 3; grid-row: 3; justify-self: center; width: 56px; }
.yc.v2 .v26.v25-b .v25-c1, .yc.v2 .v26.v25-b .v25-l1, .yc.v2 .v26.v25-b .s, .yc.v2 .v26.v25-b .v25-l2, .yc.v2 .v26.v25-b .v25-f { grid-row: 1; }
@media (max-width: 560px) {
  .yc.v2 .v25-flux.v26.v25-a { grid-template-columns: 46px 30px 58px 30px 46px 30px 46px; }
  .yc.v2 .v25-flux.v26.v25-b { grid-template-columns: 46px 40px 58px 40px 46px; }
  .yc.v2 .v26 .v25-nd, .yc.v2 .v26 .v25-nd .ic, .yc.v2 .v26 .v25-ln { height: 46px; }
  .yc.v2 .v26 .v25-nd .ic { width: 46px; }
  .yc.v2 .v26 .v25-nd.s { width: 58px; height: 46px; }
  .yc.v2 .v26 .v25-nd.s .v-logo-b .logo-spts { width: 42px; }
  .yc.v2 .v26 .v25-nd:not(.s) > b { top: 52px; font-size: 11.5px; }
  .yc.v2 .v26 .v25-nd > span:not(.ic) { top: 69px; font-size: 11px; }
  .yc.v2 .v26 .v25-ln::before { left: 5px; right: 10px; }
  .yc.v2 .v26 .v25-ln::after { right: 5px; }
  .yc.v2 .v26.v25-b .v25-ln.v { height: 30px; }
  .yc.v2 .v26.v25-b .v25-ln.v::before { left: 50%; right: auto; }
  .yc.v2 .v26.v25-b .v25-ln.v::after { left: 50%; right: auto; }
  .yc.v2 .v26.v25-b .v25-ag { grid-column: 3; grid-row: 3; width: 46px; }
  .yc.v2 .v26.v25-b .s { width: 58px; }
}
/* Téléphone : les schémas de ce soir restent en ligne ; les règles de placement et de flèches verticales
   de la première version ne s'y appliquent plus */
@media (max-width: 560px) {
  .yc.v2 .v25-flux.v26.v25-a { grid-template-columns: 46px 34px 58px 34px 46px 34px 46px; }
  .yc.v2 .v26.v25-b .v25-c1 { grid-column: 1; grid-row: 1; }
  .yc.v2 .v26.v25-b .v25-l1 { grid-column: 2; grid-row: 1; }
  .yc.v2 .v26.v25-b .s { grid-column: 3; grid-row: 1; justify-self: center; }
  .yc.v2 .v26.v25-b .v25-l2 { grid-column: 4; grid-row: 1; }
  .yc.v2 .v26.v25-b .v25-f { grid-column: 5; grid-row: 1; }
  .yc.v2 .v26 .v25-ln:not(.v)::before { left: 5px; right: 10px; top: 50%; bottom: auto; width: auto; height: 1.5px; margin: -.75px 0 0; }
  .yc.v2 .v26 .v25-ln:not(.v)::after { left: auto; right: 4px; top: 50%; bottom: auto; margin: -4.5px 0 0; transform: none; border-left: 8px solid var(--marine); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-right: 0; }
  .yc.v2 .v26 .v25-ln > span { display: none; }
}

/* ===== Demandes du 20.10.2026 (VLast, VLast2) : « Qui fait quoi ? », Pour les entreprises =====
   Fidèle à la capture de VLast2 : deux flèches continues au bleu marine du logo, le libellé centré
   sous chaque flèche, « Le consultant » exactement au centre. Le schéma est en miroir : les deux
   blocs extérieurs ont la même largeur, les deux flèches aussi. SPTS garde le marine du logo. */
.yc.v2 .v13-axe:has(.v22-m) .v-logo-b{color:var(--marine)}
.yc.v2 .v13-fl.v22-m .ln,.yc.v2 .v13-fl.v22-e .ln{background:var(--marine)}
@media (min-width:1101px){
  .yc.v2 .v13-axe:has(.v22-m){--bout:236px;--fleche:168px;grid-template-columns:var(--bout) var(--fleche) auto var(--fleche) var(--bout);justify-content:center;gap:0 22px;padding-block:clamp(26px,3vw,40px) clamp(46px,4.4vw,58px)}
  .yc.v2 .v13-axe:has(.v22-m)>.v13-act:first-child{justify-content:flex-end}
  .yc.v2 .v13-axe:has(.v22-m)>.v13-act:last-child{justify-content:flex-start}
  .yc.v2 .v13-axe:has(.v22-m) .tx b,.yc.v2 .v13-axe:has(.v22-m) .tx span{white-space:nowrap}
  /* La liaison : une flèche continue ; son libellé se pose dessous, hors du flux, pour que la
     flèche reste à mi-hauteur des blocs */
  .yc.v2 .v13-fl.v22-m,.yc.v2 .v13-fl.v22-e{position:relative;display:block;height:14px}
  .yc.v2 .v13-fl.v22-m .fl,.yc.v2 .v13-fl.v22-e .fl{display:none}
  .yc.v2 .v13-fl.v22-m .ln,.yc.v2 .v13-fl.v22-e .ln{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
  .yc.v2 .v13-fl.v22-m .ln::after,.yc.v2 .v13-fl.v22-e .ln::after{content:'';position:absolute;top:50%;width:9px;height:9px;margin-top:-5.5px;border:solid var(--marine);border-width:2px 2px 0 0;border-radius:1px}
  .yc.v2 .v13-fl.v22-m .ln::after{right:1px;transform:rotate(45deg)}
  .yc.v2 .v13-fl.v22-e .ln::after{left:1px;transform:rotate(-135deg)}
  .yc.v2 .v13-fl.v22-m span,.yc.v2 .v13-fl.v22-e span{position:absolute;left:0;right:0;top:calc(100% + 10px);width:auto;max-width:none;white-space:normal;text-align:center;font:600 13.5px/1.3 var(--inter);color:var(--marine)}
}
@media (min-width:1101px) and (max-width:1340px){
  .yc.v2 .v13-axe:has(.v22-m){--bout:200px;--fleche:132px;gap:0 14px;padding-inline:24px}
  .yc.v2 .v13-axe:has(.v22-m) .v13-act.centre{padding:14px 18px}
  .yc.v2 .v13-axe:has(.v22-m) .v13-act{gap:10px}
  .yc.v2 .v13-fl.v22-m span,.yc.v2 .v13-fl.v22-e span{font-size:12.5px}
}

/* ===== Demande du 20.10.2026 (Vlast3) =====
   « Qui fait quoi ? » : la phrase d'introduction tient sur une ligne dès que la largeur le permet.
   Le logo SPTS n'est jamais rogné, quel que soit le zoom : son cadre couvre tout le dessin (construire.mjs)
   et rien ne le coupe s'il déborde d'un demi-pixel à l'arrondi. */
@media (min-width:1101px){ .yc.v2 .v-lead.v26-lead-ligne{white-space:nowrap;max-width:none} }
.yc.v2 .logo-spts{overflow:visible}
.yc.v2 svg[viewBox="0 -2 1000 266"]{overflow:visible}


:root{
  --navy:#10416C; --navy-dark:#0B3055; --cyan:#45BDDF; --cyan-light:#81CEE2;
  /* --muted etait #5A7285 : 5,02 sur blanc mais **4,49 sur --mist**, soit un
     centieme sous le seuil AA. Le texte secondaire des sections bleu pale
     tombait donc, et aucune sonde ne le voyait. #566D80 donne 5,39 sur blanc
     et 4,82 au pire des quatre fonds. Mesure du 2026-09-12. */
  --text:#0F2C43; --muted:#566D80; --border:#D6E1EA; --bg:#fff; --sub:#F1F6FA;
  --on-navy:#C6DAE8; --warn:#9A6B12;
  --gutter:24px; --sec:56px; --tight:40px;
}
/* 320 px. L en-tete demandait 298 px pour 272 disponibles : le burger sortait
   de 6 px, sur les quatorze pages, et `verifier-mobile.mjs` ne le voyait pas
   parce qu il ne descend qu a 360. Huit pixels de gouttiere et douze de
   gouttiere d en-tete suffisent, sans toucher au logo ni a sa proportion. */
@media(max-width:359px){ :root{ --gutter:16px; } }
@media(min-width:768px){ :root{ --gutter:32px; --sec:80px; --tight:56px; } }
@media(min-width:1024px){ :root{ --gutter:40px; --sec:104px; --tight:72px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
@media(min-width:768px){ body{padding-bottom:0} }
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--cyan)}
h1,h2,h3{margin:0;font-weight:600;color:var(--text)}
/* ── Echelle fluide ───────────────────────────────────────────
   Il n y avait AUCUN clamp() dans la feuille : toute l echelle etait
   en tailles fixes commutees a 768 et 1024, avec des demi-pixels qui
   s arrondissent differemment d un navigateur a l autre. Entre deux
   paliers, le titre ne suivait pas la largeur : a 1000 px on lisait
   encore du 44 px dans un conteneur de 960.
   Les bornes reprennent les valeurs dessinees (32 / 24 / 19 en bas) et
   montent jusqu a 1280 px. Le H1 va desormais a 58 et non 52 : l ecart
   H1/H2 passe de 1,58 a 1,71, ce qui est la hierarchie plus expressive
   demandee, sans changer la graisse ni la police.
   L interlignage, lui, reste commute : une interpolation d interlignage
   non unitaire est illisible a la relecture pour un gain invisible. */
h1{font-size:clamp(2rem, 1.458rem + 2.708vw, 3.625rem);line-height:1.2;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem, 1.292rem + 1.042vw, 2.125rem);line-height:1.3}
h3{font-size:clamp(1.1875rem, 1.146rem + .208vw, 1.3125rem);line-height:1.35}
@media(min-width:768px){
  h1{letter-spacing:-.015em}
  h2{letter-spacing:-.01em}
}
p{margin:0}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}
.tight{padding:var(--tight) 0}
.rule{width:48px;height:3px;background:linear-gradient(to right,var(--navy),var(--cyan));margin-top:14px}
@media(min-width:768px){.rule{width:56px;margin-top:16px}}
.muted{color:var(--muted)}
.sm{font-size:14px;line-height:1.5}
.cap{font-size:13px;line-height:1.45}
.lg{font-size:17px;line-height:1.6}
@media(min-width:768px){.lg{font-size:18px}}
.num{font-variant-numeric:tabular-nums}
.sub{background:var(--sub)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:6px;font-weight:500;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
@media(min-width:768px){.btn{height:48px;font-size:16px}}
.btn-p{background:var(--navy);color:#fff}
.btn-p:hover{background:var(--navy-dark);color:#fff}
.btn-s{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-s:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-c{background:var(--cyan);color:var(--navy-dark)}
.btn-full{width:100%}
.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;min-height:44px}
.lnk:hover{color:var(--cyan)}
:focus-visible{outline:3px solid rgba(69,189,223,.25);outline-offset:2px;border-radius:4px}

.block{border:1px solid var(--border);border-radius:8px;padding:24px}
.fill{background:var(--sub);border-radius:8px;padding:24px}
.ico{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico16{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph{font-size:11px;color:var(--navy);background:var(--warn-bg);border:1px dashed var(--warn);border-radius:4px;padding:2px 6px;display:inline-block}
@media(min-width:768px){.ph{font-size:12px}}

/* header */
header{position:sticky;top:0;z-index:40;height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center}
@media(min-width:1024px){header{height:72px}}
.hrow{display:flex;align-items:center;gap:24px;width:100%}
@media(max-width:359px){.hrow{gap:12px}}
.logo{display:flex;align-items:baseline;gap:6px;flex:none}
.logo b{font-size:18px;font-weight:600;color:var(--navy)}
.logo span{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
@media(min-width:1024px){.logo b{font-size:20px}.logo span{font-size:13px}}
nav.desk{display:none}
@media(min-width:1024px){nav.desk{display:flex;align-items:center;gap:26px;font-size:15px}}
.hact{margin-left:auto;display:flex;align-items:center;gap:16px}
.burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin-right:-10px;background:none;border:0;color:var(--text);cursor:pointer}
@media(min-width:1024px){.burger{display:none}}
.hcta{display:none}
@media(min-width:1024px){.hcta{display:inline-flex}}
.login{display:none}
@media(min-width:1024px){.login{display:inline;font-size:14px;color:var(--navy)}}

/* mobile panel */
/* Le panneau etait masque par une seule translation. Un element
   translate hors ecran reste dans le parcours clavier : un visiteur
   qui tabule depuis le haut de la page tombait sur deux cibles
   invisibles. aria-hidden ne suffit pas, il ne retire pas du focus.
   visibility:hidden le fait, et reste animable, contrairement a
   display, donc la transition d ouverture est conservee. */
#panel{position:fixed;inset:0;z-index:50;background:#fff;transform:translateX(100%);visibility:hidden;transition:transform 200ms ease-out,visibility 200ms;overflow-y:auto;box-shadow:0 1px 3px rgba(15,44,67,.10)}
#panel[data-open="1"]{transform:translateX(0);visibility:visible}
@media(prefers-reduced-motion:reduce){#panel{transition:none}}
#panel .prow{min-height:48px;display:flex;align-items:center;justify-content:space-between}

/* sticky mobile cta */
#stick{position:fixed;left:0;right:0;bottom:0;z-index:30;height:64px;background:#fff;border-top:1px solid var(--border);box-shadow:0 1px 3px rgba(15,44,67,.10);display:flex;align-items:center;padding:0 var(--gutter)}
@media(min-width:768px){#stick{display:none}}

/* Le bandeau de consentement (z-index 120, 254 px de haut, jusqu a 86vh avec
   les preferences ouvertes) recouvrait ENTIEREMENT l appel a l action collant
   (z-index 30, 64 px). Mesure du 2026-09-12 a 390 px : bandeau de 590 a 844,
   CTA a 780. Pour tout premier visiteur mobile, le bouton principal du site
   etait donc invisible, et le prototype ne traitait ce chevauchement que pour
   le message #toast.
   On retire le CTA tant que le choix n est pas fait, plutot que de l empiler
   au-dessus du bandeau : 64 + 254 px occuperaient 38 % d un ecran de 844, et
   le CTA entrerait en concurrence avec la decision de consentement. Il revient
   des que le bandeau se replie. La reserve de 64 px du corps part avec lui,
   sinon elle laisse un vide mort en bas de page. */
body:has(#cookie[data-on="1"]) #stick{display:none}
body:has(#cookie[data-on="1"]){padding-bottom:0}

/* grids */
.g3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.g2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.g4{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.g4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.hero{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:1024px){.hero{grid-template-columns:1.1fr .9fr;gap:48px}}

/* logo strip */
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;filter:grayscale(1);opacity:.75}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}}
.logos span{font-size:15px;font-weight:600;color:var(--muted);text-align:center}
.logos img{display:block;margin:0 auto;max-width:100%;object-fit:contain}
@media(max-width:639px){.logos img{max-height:30px;height:auto !important}}
@media(min-width:1024px){.logos span{font-size:17px}}

/* tripartite diagram: vertical on mobile, horizontal from lg */
.tri{display:flex;flex-direction:column;align-items:stretch}
@media(min-width:1024px){.tri{display:grid;grid-template-columns:1fr 180px 1fr 180px 1fr;align-items:center}}
.node{border:1px solid var(--navy);border-radius:8px;padding:16px;text-align:center}
.node.mid{border:2px solid var(--cyan);padding:20px}


.wbar{grid-column:1 / -1}
@media(min-width:768px){.wbar{grid-column:auto}}
.wamt{text-align:right}

/* compliance band */
.comp{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.comp{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}}
@media(min-width:1024px){.comp{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px}}
.crow{display:flex;gap:10px}

/* footer cols */
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media(min-width:1024px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.fh{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.fl{display:flex;flex-direction:column;gap:10px;margin-top:14px;font-size:14px}
/* Les entrees du pied de page etaient des <span> : aucune n etait
   cliquable, pas meme celles dont la page existe. Un bouton porte la
   navigation, sans rien changer au dessin. */
.flink{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;align-self:flex-start}
.flink:hover{color:var(--navy)}
.fl .navsoon,.fl .lnksoon{align-self:flex-start}
/* Distincte de .navsoon : la page n est pas absente, c est l adresse
   exterieure qui n a pas encore ete fournie. */
.lnksoon{color:var(--muted);border-bottom:1px dotted var(--border);cursor:help}

/* page switching */
.page{display:none}
.page.on{display:block}

/* prototype ribbon */
#ribbon{background:var(--navy-dark);color:var(--on-navy);font-size:13px;padding:8px var(--gutter);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
#ribbon b{color:#fff;font-weight:600}
#ribbon button{background:transparent;border:1px solid rgba(198,218,232,.4);color:var(--on-navy);border-radius:4px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
#ribbon button[aria-current="true"]{background:var(--cyan);color:var(--navy-dark);border-color:var(--cyan)}

/* ============================================================
   ANIMATION — deux endroits seulement, tous deux fonctionnels.
   Règle : le contenu est COMPLET et LISIBLE sans JavaScript.
   L'animation est un ajout, jamais une condition d'affichage.
   ============================================================ */

/* état par défaut, sans JS : tout est en place */
.bar{width:var(--w)}

/* avec JS (classe posée par le script) et si le visiteur ne
   demande pas moins de mouvement : les barres partent de zéro */
@media(prefers-reduced-motion:no-preference){
  .js .bar{width:0;transition:width 700ms cubic-bezier(.22,.61,.36,1)}
  .js .seen .bar{width:var(--w)}
  .js .seen .bar:nth-of-type(1){transition-delay:0ms}

  /* cascade : chaque ligne part après la précédente, dans l'ordre
     de lecture. C'est ce décalage qui fait le travail explicatif */
  .js .wrow:nth-of-type(1) .bar{transition-delay:0ms}
}

/* un visiteur qui demande moins de mouvement voit tout, tout de suite */
@media(prefers-reduced-motion:reduce){
  .js .bar{width:var(--w);transition:none}
  .js .arrow svg line,.js .arrow svg path{stroke-dashoffset:0;transition:none}
}


/* bande de preuve — cartes sur fond teinte */
.proof{background:var(--sub);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proof-head{text-align:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.proof-claim{text-align:center;margin:14px auto 0;max-width:34ch;font-size:21px;line-height:1.3;font-weight:500;color:var(--text)}
@media(min-width:768px){.proof-claim{font-size:27px;margin-top:16px}}
/* .lgrid et .lcard, la grille de logos en cartes blanches bordees d avant la
   refonte du 11.09, ont ete retirees le 2026-09-12 : plus aucun element ne les
   portait, et le brief demande justement moins de cartes et de bordures. La
   grille qui les remplace est .logos, plus bas, sans carte ni contour. */
/* Sept pastilles bordées et centrées se lisaient comme une barre de
   filtres cliquable, alors qu'elles ne sont qu'une énumération. Le
   contour, le fond blanc et le rayon partent le 2026-09-12 ; restent
   les mots, séparés d'un point médian. La même information, sans la
   promesse d'interaction qu'elle ne tient pas. */
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;margin-top:22px}
.tag{font-size:13px;color:var(--muted);white-space:nowrap}
.tag:not(:last-child)::after{content:"·";margin:0 9px;color:var(--cyan-deep)}

.lang{background:none;border:0;padding:0 2px;font:inherit;color:var(--muted);cursor:pointer}
.lang.on{color:var(--text);font-weight:600}
.lang:hover{color:var(--navy)}
.navlink{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer}
.navlink:hover{color:var(--navy)}
.navsoon{color:var(--muted);border-bottom:1px dotted var(--border);cursor:help}
#ribbon button[aria-current="true"]{outline:2px solid var(--cyan)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
details[open] summary::after{content:"−"}


/* ── 1. Échelle typographique ─────────────────────────────────
   Le H1 était à 44px sur un conteneur de 1200. Trop petit pour
   porter seul le haut de page : le regard n'avait pas de point
   d'entrée. La taille est desormais fluide (voir le bloc de base) et
   monte a 58 px ; il ne reste ici que l interlignage et l interlettrage,
   qui se commutent, avec l interlettrage resserre qui evite l effet
   « gros texte ». */
@media(min-width:1024px){
  h1{line-height:1.1;letter-spacing:-.022em}
  h2{line-height:1.22;letter-spacing:-.012em}
}
/* Le français a des accents : ils occupent la hauteur que l'anglais laisse
   libre. Un interlignage réglé sur une maquette anglaise fait toucher
   l'accent d'une ligne au jambage de la ligne au-dessus. 1,14 est le
   minimum sûr à 52 px. */
h1,h2{text-wrap:balance}
/* L espace avant :lang faisait de ce selecteur un selecteur DESCENDANT :
   il ne visait que les enfants des titres, jamais les titres eux-memes.
   La regle n avait donc aucun effet sur les titres francais, ce qu elle
   etait censee proteger. Corrige le 2026-09-12. */
h1:lang(fr),h2:lang(fr){hyphens:none}

/* ── 2. Cartes cliquables ─────────────────────────────────────
   Les trois cartes d orientation sont des liens qui ne ressemblaient
   pas à des liens : même bordure, aucun état de survol. Le visiteur
   qui doit se reconnaître en cinq secondes ne voyait pas qu'il
   pouvait cliquer. */
a.block{transition:border-color 180ms ease-out,box-shadow 180ms ease-out,transform 180ms ease-out}
a.block:hover{border-color:var(--cyan);box-shadow:0 6px 20px -8px rgba(15,44,67,.18);transform:translateY(-2px)}
a.block:hover .lnk{color:var(--cyan)}
a.block .lnk svg{transition:transform 180ms ease-out}
a.block:hover .lnk svg{transform:translateX(3px)}
a.block:focus-visible{border-color:var(--cyan)}
@media(prefers-reduced-motion:reduce){
  a.block,a.block .lnk svg{transition:none}
  a.block:hover{transform:none}
  a.block:hover .lnk svg{transform:none}
}

/* ── 3. Pastille d'icône ──────────────────────────────────────
   L'icône flottait au-dessus du titre sans poids. Posée sur un
   aplat teinté, elle ancre la carte et crée un rythme vertical. */
a.block > svg.ico:first-child{
  width:40px;height:40px;padding:10px;border-radius:9px;
  background:var(--sub);color:var(--navy);box-sizing:border-box;
  transition:background 180ms ease-out,color 180ms ease-out}
a.block:hover > svg.ico:first-child{background:var(--navy);color:#fff}
@media(prefers-reduced-motion:reduce){a.block > svg.ico:first-child{transition:none}}

/* ── 4. Bandes marine ─────────────────────────────────────────
   Un aplat marine plein écrase le bas de page. Un dégradé très
   léger vers le marine foncé, plus un filet cyan en haut, donnent
   de la profondeur sans effet décoratif. */
section[style*="var(--navy)"]{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%) !important;
  border-top:3px solid var(--cyan);position:relative}

/* ── 5. Image de hero ─────────────────────────────────────────
   Bordure 1px et rayon 8px : timide. La bordure disparaît au profit
   d'une ombre portée basse, qui pose l'image sur la page au lieu de la
   découper.
   Cette regle visait `.hero > div:last-child` avec deux `!important`,
   donc le MEME element que `.hero-media`, plus bas, mais avec un rayon
   de 12 px contre 14 et une autre ombre. Les deux valeurs nommees de
   `.hero-media` etaient donc silencieusement ecrasees. Les huit heros
   portant tous la classe `.hero-media`, la regle generique est retiree
   le 2026-09-12 et la classe nommee gouverne seule. */

/* ── 6. Ligne de crédibilité du hero ──────────────────────────
   Autorisations, ancienneté et certification étaient en gris 14px
   sous les boutons : l'information la plus probante du hero était
   la moins visible. Elle devient une rangée à filet supérieur, avec
   les termes clés en couleur de texte pleine. */
.cred{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);
  font-size:13.5px;line-height:1.7;color:var(--muted)}
.cred strong{color:var(--text);font-weight:600}

/* ── Panneaux déroulants du menu (§F1) ────────────────────────
   Ouverture au survol et au focus clavier. Aucune dépendance au
   JavaScript : sans lui, le panneau s'ouvre quand même. */
.nav-dd{position:relative;display:inline-flex}
.dd-btn{display:inline-flex;align-items:center;gap:6px}
.dd-btn svg{transition:transform 160ms ease-out}
.nav-dd:hover .dd-btn svg,.nav-dd:focus-within .dd-btn svg{transform:rotate(180deg)}
.dd-panel{
  position:absolute;top:100%;left:-18px;margin-top:10px;z-index:60;
  display:flex;flex-direction:column;gap:2px;min-width:290px;padding:10px;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 16px 40px -18px rgba(15,44,67,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 160ms ease-out,transform 160ms ease-out,visibility 160ms}
.dd-wide{min-width:340px}
.nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd[data-closed="1"] .dd-panel{opacity:0 !important;visibility:hidden !important}
/* une zone tampon évite que le panneau se ferme en traversant l'espace */
.nav-dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.dd-item{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  background:none;border:0;padding:10px 12px;border-radius:7px;font:inherit;cursor:pointer;
  transition:background 140ms ease-out}
.dd-item:hover{background:var(--sub)}
.dd-t{font-size:15px;font-weight:600;color:var(--text)}
.dd-item:hover .dd-t{color:var(--navy)}
.dd-d{font-size:13px;line-height:1.45;color:var(--muted)}
.dd-soon{cursor:help}
.dd-soon .dd-t{color:var(--muted)}
.dd-soon:hover{background:transparent}
@media(prefers-reduced-motion:reduce){
  .dd-panel,.dd-btn svg,.dd-item{transition:none}
  .dd-panel{transform:none}
}

/* ── Liens sans destination dans le prototype ─────────────────
   Un lien qui a l'air cliquable et ne fait rien ne se distingue
   pas d'une panne. Trait pointillé, et un retour au clic. */
a[href="#"]:not([data-go]):not(.btn){text-decoration-style:dotted;text-underline-offset:3px}

/* Une carte entière n'a pas de soulignement : la règle ci-dessus ne
   pouvait donc rien marquer. Le signal se pose sur la ligne de lien
   qu'elle contient, et sur la carte elle-même, dont l'élévation au
   survol promettait une page qui n'existe pas dans le prototype. */
a.block[href="#"]:not([data-go]) .lnk{
  text-decoration-style:dotted;color:var(--muted)}
/* Le texte de la pastille suit la langue de la page. L attribut
   lang est pose sur la racine par le selecteur de langue. */
a.block[href="#"]:not([data-go]) .lnk::after{
  content:"not included";margin-left:2px;font-size:11px;font-weight:500;
  letter-spacing:.03em;color:var(--warn);background:var(--warn-bg);
  border:1px dashed var(--warn);border-radius:4px;padding:1px 6px;
  text-decoration:none}
html[lang="fr"] a.block[href="#"]:not([data-go]) .lnk::after{content:"non incluse"}

/* Toutes les cartes ne portent pas de ligne de lien : celles de la
   page Ressources sont un titre et une phrase, et la regle ci-dessus
   ne pouvait donc rien marquer. Quatorze cartes paraissaient
   cliquables sans aucun signal. La pastille se pose alors sur la carte
   elle-meme. */
a.block[href="#"]:not([data-go]):not(:has(.lnk))::after{
  content:"not included";display:inline-block;margin-top:14px;
  font-size:11px;font-weight:500;letter-spacing:.03em;color:var(--warn);
  background:var(--warn-bg);border:1px dashed var(--warn);border-radius:4px;padding:1px 6px}
html[lang="fr"] a.block[href="#"]:not([data-go]):not(:has(.lnk))::after{content:"non incluse"}
a.block[href="#"]:not([data-go]):hover{
  border-color:var(--border);box-shadow:none;transform:none}
a.block[href="#"]:not([data-go]):hover .lnk{color:var(--muted)}
a.block[href="#"]:not([data-go]):hover .lnk svg{transform:none}
a[href="#"]:not([data-go]).btn{position:relative}
/* Les boutons etaient exclus du pointille, et a juste titre : un
   bouton souligne en pointille est laid. Ils promettaient donc une
   action sans rien annoncer. La pastille se pose en surplomb, dans le
   coin, ce que le position:relative ci-dessus permettait deja. */
a[href="#"]:not([data-go]).btn::after{
  content:"not included";position:absolute;top:-9px;right:-10px;
  font-size:10.5px;font-weight:500;letter-spacing:.03em;line-height:1.5;
  color:var(--warn);background:var(--warn-bg);border:1px dashed var(--warn);
  border-radius:4px;padding:0 5px;white-space:nowrap}
html[lang="fr"] a[href="#"]:not([data-go]).btn::after{content:"non incluse"}
/* Le message se posait a 24 px du bas, c est-a-dire derriere le
   bandeau de consentement a la premiere visite. Sa position est
   calculee a l affichage, au-dessus de ce qui occupe le bas de
   l ecran. Filet cyan pour qu il se distingue du bandeau marine. */
#toast{position:fixed;left:50%;bottom:var(--toast-bas,24px);transform:translateX(-50%) translateY(8px);z-index:200;
  background:var(--navy-dark);color:#fff;font-size:14.5px;line-height:1.45;padding:14px 20px;
  border-left:3px solid var(--cyan);
  border-radius:8px;box-shadow:0 18px 44px -14px rgba(15,44,67,.7);max-width:min(440px,92vw);
  text-align:center;opacity:0;visibility:hidden;transition:opacity 200ms ease-out,transform 200ms ease-out,visibility 200ms}
#toast[data-on="1"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){#toast{transition:none}}

/* ── En-tête : tenir en français comme en anglais ─────────────
   Mesuré le 29.08.2026 à 1024 px : le conteneur offre 1120 px
   utiles, l'en-tête anglais en réclame ~987, le français ~1114.
   Six pixels de marge d'un côté, 133 de l'autre. Le français
   débordait donc à la moindre variation de rendu, et les éléments
   se chevauchaient au lieu de s'aligner.

   Trois mesures qui rendent les deux langues équivalentes, plus
   deux garde-fous pour que rien ne puisse jamais se superposer. */

/* Le conteneur est plafonné à 1200 px : au-delà de 1024, le budget
   de l'en-tête ne grandit plus jamais. Les trois économies sont donc
   permanentes, sinon elles s'annuleraient là où elles servent encore. */
@media(min-width:1024px){
  nav.desk{gap:20px;font-size:14.5px}   /* −38 px */
  .hrow{gap:20px}                        /* −4 px  */
  .hcta{padding:0 18px}                  /* −12 px */
}
/* « Connexion » n'apparaît qu'à partir de 1280 : c'est un lien pour
   clients existants, il ne concurrence pas la conversion. −84 px */
@media(max-width:1279px){ .login{display:none !important} }

/* garde-fous : aucune de ces zones ne peut se réduire sous son
   contenu, donc aucun chevauchement n'est possible */
nav.desk > *, nav.desk .dd-btn, .hact > *, .logo{flex:none;white-space:nowrap}
.hrow{min-width:0;flex-wrap:nowrap}
.hact{flex:none}

/* ── Page de simulation ───────────────────────────────────────
   Une page de conversion n'offre pas dix portes de sortie : la
   navigation complète et le bouton du header disparaissent. */
html.on-sim nav.desk,html.on-sim .hcta,html.on-sim .login,html.on-sim #stick{display:none !important}
.prog{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap}
.pstep{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  padding:7px 14px 7px 8px;border:1px solid var(--border);border-radius:999px;white-space:nowrap}
.pstep b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--sub);color:var(--muted);font-size:12px;font-weight:600}
.pstep.on{color:var(--text);border-color:var(--navy)}
.pstep.on b{background:var(--navy);color:#fff}
.pstep.past b{background:var(--cyan);color:var(--navy-dark)}
.simform{margin-top:28px}
.step{display:none;border:0;padding:0;margin:0}
.step.on{display:block}
.f{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.fl{font-size:14px;font-weight:600;color:var(--text)}
.fh{font-size:12.5px;color:var(--muted)}
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--text);background:#fff;
  border:1px solid var(--border);border-radius:7px;padding:11px 13px;width:100%;
  transition:border-color 140ms ease-out,box-shadow 140ms ease-out}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(69,189,223,.18)}
.fnote{font-size:12.5px;line-height:1.5;color:var(--warn);background:var(--warn-bg);border-radius:6px;
  padding:9px 12px;margin-top:8px}
.ferr{font-size:13.5px;color:#9A2617;background:#FDECEA;border-radius:6px;padding:10px 13px;margin-top:14px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.recap{margin-top:20px;background:var(--sub);border:1px solid var(--border);border-radius:8px;
  padding:16px;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace}
.devbox{margin-top:44px;padding:20px;border:1px dashed var(--warn);border-radius:10px;background:#FEFBF4}
.devh{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);font-weight:600}
.devbox code{font-size:12.5px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:1px 5px}
/* ── Outils internes : absents de la version publique ─────────
   Le bandeau de navigation du prototype et les deux panneaux « Ce que
   l'ERP reçoit » portent data-interne. Ils sont masqués PAR DÉFAUT ; le
   script pose la classe mode-interne sur <html> seulement là où l'on
   travaille. Masquer par défaut plutôt qu'afficher par défaut : si le
   script ne tourne pas, c'est le public qui est protégé, pas l'outil. */
html:not(.mode-interne) [data-interne]{display:none !important}
.notif{margin-top:14px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px;
  font-size:12.5px;line-height:1.75;white-space:pre-wrap;overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text)}
@media(prefers-reduced-motion:reduce){.f input,.f select,.f textarea{transition:none}}
.req{font-style:normal;font-size:11.5px;font-weight:500;color:var(--warn);
  background:var(--warn-bg);border-radius:4px;padding:1px 6px;margin-left:6px;letter-spacing:.02em}

/* ════════════════════════════════════════════════════════════════
   REFONTE VISUELLE — 11.09.2026
   Demande : plus lumineux, plus humain, plus premium, moins SaaS.

   Le diagnostic n'était pas « trop sombre » : il n'y avait que deux
   aplats marine sur toute la page d'accueil. Le vrai défaut était
   l'absence de relief. Deux fonds presque identiques, un seul niveau
   de titre, un seul gris de texte, et la plus belle photographie du
   dossier réduite à une vignette dans un cadre de 1 px.

   Ce qui suit ajoute du relief sans ajouter de décor : cinq registres
   de fond au lieu de deux, une hiérarchie typographique qui donne un
   point d'entrée à l'œil, et les photographies traitées comme des
   surfaces et non comme des illustrations.

   Aucun dégradé décoratif, aucun halo, aucun verre dépoli, aucune
   forme abstraite. Le relief vient du contraste et de l'espace.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Registres de fond. Les deux précédents (#fff et #F1F6FA) étaient
     trop proches pour que l'alternance se voie. --mist est plus franc,
     --stone est neutre et casse la monotonie du bleu. */
  --mist:#EDF3F9;        /* bleu très clair, registre principal alterné */
  --stone:#F4F5F6;       /* gris neutre, registre de rupture */
  --line:#E4EBF1;        /* filet plus doux que --border */
  --ink-soft:#40586C;    /* gris de texte plus sombre que --muted,
                            pour les paragraphes qui doivent se lire */
  --shadow-s:0 1px 2px rgba(15,44,67,.04),0 4px 12px -6px rgba(15,44,67,.10);
  --shadow-m:0 2px 4px rgba(15,44,67,.04),0 18px 40px -22px rgba(15,44,67,.34);

  /* ── Trois couleurs qui vivaient en dur, mesurées le 2026-09-12 ──
     --cyan-deep etait #2D7D9A, ecrit en dur dans .eyebrow et dans deux
     jeux de coches. Il donnait 4,65 sur blanc mais **4,28 sur --mist**,
     sous le seuil AA. La sonde du projet ne le voyait pas : elle mesure
     la premiere occurrence du surtitre, qui est sur blanc. #2A7691 donne
     5,12 sur blanc et 4,71 sur bleu pale, dans la meme famille.
     --paper-tint etait #F6FAFD, un quatrieme bleu pale sans nom, dans le
     seul degrade du hero.
     --warn-bg etait #FDF4E3, repete sept fois en dur. */
  --cyan-deep:#2A7691;   /* surtitres et coches, tient AA sur blanc ET sur --mist */
  --paper-tint:#F6FAFD;  /* teinte du degrade de hero, la plus pale de la famille */
  --warn-bg:#FDF4E3;     /* fond des marques « donnee non fournie » */
}

/* Inter n'était déclarée nulle part ailleurs que dans font-family :
   le site rendait en Segoe UI sur Windows, donc la typographie
   dessinée n'était pas celle qu'on regardait. */
body{font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

/* ── Hiérarchie ───────────────────────────────────────────────
   Tout était au même niveau : h2 à 33 px, corps à 16-17 px, un seul
   gris. Le paragraphe d'introduction d'une section passe en 18-19 px
   et prend le gris sombre : c'est lui qui retient le lecteur. */
.lead{font-size:clamp(1.0625rem, 1.021rem + .208vw, 1.1875rem);line-height:1.6;color:var(--ink-soft);max-width:62ch}
@media(min-width:768px){.lead{line-height:1.62}}

/* Surtitre de section. Remplace l'usage du filet seul, qui ne dit
   rien, par un mot qui situe la section avant qu'on la lise. */
.eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--cyan-deep);display:block;margin-bottom:12px}
.eyebrow.on-navy{color:var(--cyan-light)}

/* ── Registres de section ─────────────────────────────────────
   Règle tenue sur toute la page : jamais deux sections consécutives
   du même registre, et deux aplats marine au maximum. */
.reg-mist{background:var(--mist)}
.reg-stone{background:var(--stone)}
.reg-paper{background:#fff}
/* Applique a l existant : les sections « tight sub » prennent le bleu
   tres clair, les sections « sec sub », plus longues, prennent le gris
   neutre. L alternance se voit enfin, sans qu aucune section ait eu a
   changer de classe dans le corps du document. */
.sub{background:var(--mist)}
.sec.sub{background:var(--stone)}
.proof{background:var(--mist);border-top-color:var(--line);border-bottom-color:var(--line)}
.fill{background:#fff;border:1px solid var(--line)}
.sec.sub .fill,.sub .fill{background:#fff}

/* ── Hero ─────────────────────────────────────────────────────
   La photographie passait dans 40 % de la largeur, dans un cadre de
   1 px. Elle occupe maintenant une colonne pleine hauteur, sans
   cadre, débordant en bas de la section : c'est ce débordement qui
   fait la différence entre une illustration et une mise en scène. */
.hero-wrap{position:relative;background:linear-gradient(180deg,var(--paper-tint) 0%,#fff 76%)}
.hero-wrap::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
   background:linear-gradient(90deg,var(--navy),var(--cyan) 58%,rgba(69,189,223,0))}
@media(min-width:1024px){
  .hero{grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
}
.hero-media{position:relative;border-radius:14px;overflow:hidden;
   box-shadow:var(--shadow-m)}
/* ── Recadrage pilotable, par image ───────────────────────────
   Il n y avait AUCUN object-position dans la feuille. Tout le cadrage
   reposait sur object-fit:cover et sur l aspect-ratio du conteneur, qui
   passe de 4/3.05 au-dessus de 1024 a 16/10 en dessous : une photographie
   prise en 4/3 perdait donc son sujet en mobile sans qu aucun reglage ne
   permette de le rattraper.
   Chaque image porte desormais son propre point d ancrage, reglable par
   la variable --pos posee en style sur la balise, et un --pos-mob distinct
   pour le mobile, ou le cadre est plus large que haut. Sans reglage, le
   comportement est celui d avant.

   ── Priorite de chargement ────────────────────────────────────
   Les quatorze pages vivent dans le meme document, et les HUIT heros
   portaient tous fetchpriority="high" sans loading : environ 1,2 Mo
   partaient en priorite haute, dont sept huitiemes sur des pages
   masquees. Seul le hero de #home, la seule page visible au chargement,
   garde la priorite haute ; les sept autres sont en loading="lazy".
   En production, chaque page redevenant un document, chacune gardera
   son propre hero en priorite haute. */
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%)}
@media(max-width:1023px){.hero-media img{object-position:var(--pos-mob,var(--pos,50% 50%))}}
@media(min-width:1024px){.hero-media{aspect-ratio:4/3.05}}
@media(max-width:1023px){.hero-media{aspect-ratio:16/10}}

/* Un cartouche posé sur la photographie. Il porte le seul chiffre
   qui compte au premier écran, et il évite que l'image soit une
   surface décorative sans fonction. */
.hero-badge{position:absolute;left:12px;right:12px;bottom:12px;
  background:rgba(255,255,255,.97);
  border-radius:10px;padding:9px 13px;box-shadow:var(--shadow-s);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
/* Emprise reduite le 2026-09-12. Le cartouche occupait 80 % de la
   largeur de la photographie et en masquait le sujet ; la phrase
   « Publie, pas sur demande » y faisait une deuxieme ligne pour rien,
   puisqu elle figure deja dans « Tarif publie » plus bas. Il ne reste
   que le chiffre et le plancher mensuel, qui sont le seul contenu
   necessaire au premier ecran. Sur mobile il garde toute la largeur :
   en dessous de 640 px, un cartouche etroit se lit moins bien qu une
   bande, et il n y a pas de sujet a degager sur une image recadree. */
@media(min-width:640px){.hero-badge{left:20px;bottom:20px;right:auto;
  max-width:min(300px,62%);padding:11px 15px}}
.hero-badge b{font-size:18px;font-weight:600;color:var(--navy);
  font-variant-numeric:tabular-nums}
.hero-badge span{font-size:13px;color:var(--ink-soft);line-height:1.4}

/* Ligne de crédibilité : les points médians ne séparaient rien.
   Filets verticaux, et les termes probants en pleine couleur. */
.cred{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.cred-i{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;line-height:1.4;color:var(--ink-soft)}
.cred-i b{color:var(--text);font-weight:600}
.cred-i svg{color:var(--cyan-deep);flex:none}
/* Le filet vertical se posait en tete de ligne des que la rangee
   passait sur deux lignes. Les coches suffisent a separer. */
.cred{gap:10px 22px}

/* ── Bande de logos ───────────────────────────────────────────
   Elle défilait en continu, portée par deux pistes identiques qui se
   suivaient pour rendre la boucle invisible. Le défilement permanent
   est retiré le 2026-09-12, pour trois raisons mesurées : un logo
   était toujours coupé au bord du cadre, le dégradé de masque en
   effaçait deux autres, et un mouvement qui ne s'arrête jamais rend
   la bande illisible au moment précis où l'on veut la lire.

   La grille qui la remplace existait déjà dans ce fichier : c'était
   le repli servi sous `prefers-reduced-motion`. Le repli devient
   l'état normal, ce qui est le bon sens de la dépendance. La seconde
   piste, duplicata strict qui n'existait que pour la boucle, part
   avec ses dix images : 52 images encodées dans le document, 32
   désormais.

   Le poids optique est corrigé logo par logo, et non par la hauteur
   CSS. Mesure du 2026-09-12 sur la surface d'encre, alpha et densité
   confondues : à boîte constante de 148 × 40, l'écart entre le logo
   le plus léger et le plus lourd était de 4,8 fois. `--k` le ramène
   à 2,4 sans uniformiser, ce qui rendrait un monogramme carré aussi
   large qu'un logotype. Les facteurs viennent de la mesure, pas de
   l'œil. */
.logogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 16px;margin-top:30px;align-items:center;justify-items:center;
  grid-auto-rows:minmax(calc(var(--logo-h) * 1.3),auto);
  --logo-h:30px;--logo-w:104px}
@media(min-width:720px){.logogrid{grid-template-columns:repeat(5,minmax(0,1fr));
  gap:26px 20px;--logo-h:34px;--logo-w:118px}}
@media(min-width:1024px){.logogrid{gap:30px 26px;--logo-h:40px;--logo-w:148px}}
/* `min(100%, …)` est la garde qui empêche un logo large de déborder
   sa colonne quand la grille passe à cinq colonnes sur un écran
   juste assez large : il rétrécit au lieu de sortir. */
/* La hauteur est DEFINIE, pas `auto`, et c'est mesure. Deux essais du
   2026-09-12, tous deux fautifs, valent d'etre notes ici :
     `width:auto;height:auto` ecrase les attributs width et height des
   balises, qui sont des proprietes de presentation. L'image en
   chargement differe n'a alors plus de taille avant d'etre chargee : son
   rectangle rendu tombe a 0 x 0, elle ne reserve plus sa place, et la
   bande saute quand les dix logos arrivent.
     Retirer les deux `auto` sans autre precaution est pire. La largeur
   et la hauteur se font alors borner CHACUNE de son cote, sans rapport
   entre elles : Peugeot Motocycles, 169 x 98, se rendait en 169 x 49,
   soit un etirement horizontal du simple au double.
   Une hauteur definie plus `object-fit:contain` regle les deux : la
   place est reservee avant chargement, et le rapport tient meme quand
   c'est la largeur maximale qui borne, ce qui est le cas d'Almatech. */
.logogrid img{display:block;object-fit:contain;
  height:calc(var(--logo-h) * var(--k,1));width:auto;
  max-width:min(100%,calc(var(--logo-w) * var(--k,1)));
  filter:grayscale(1);opacity:.9;
  transition:filter 260ms ease-out,opacity 260ms ease-out}
.logogrid img:hover{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.logogrid img{transition:none}}

/* ── Citation ─────────────────────────────────────────────────
   Pas de carrousel, pas de carte, pas de guillemets décoratifs de
   120 px. Un filet, un corps large, et l'attribution en petit. */
/* ── Avis Google : un seul interrupteur ───────────────────────
   La Home affichait « 4.X sur X avis Google » et un témoignage dont
   le corps était le marqueur « Avis Google intégral, mot pour mot ».
   Rendu tel quel, cela se voit davantage qu'une absence : le
   visiteur lit « 4.X », il ne lit pas une donnée en attente.

   Rien n'est inventé. Tout ce qui dépend d'un avis réel porte la
   classe `gr` et reste masqué tant que `<html>` n'a pas
   `data-avis="1"`. Le jour où la note, le nombre et deux avis
   existent, on pose l'attribut et on remplace les marqueurs : une
   ligne à changer, rien à retrouver dans la page.

   Les marqueurs `.ph` restent dans le document, masqués. Ils sont le
   décompte de ce qui attend une donnée de SPTS, que
   `controle-general.mjs` recense : les supprimer ferait disparaître
   le suivi en même temps que le symptôme. */
html:not([data-avis="1"]) .gr{display:none !important}
/* 01.10.2026 : les blocs d avis sont retirés du portage. Ce sont les avis de la
   fiduciaire ; le portage affichera les siens quand sa fiche en aura assez. */
/* Section masquée, la bande photographique et le rappel marine se
   touchaient, et deux aplats marine consécutifs se lisent comme un
   seul bloc de 900 px. Deux corrections ont été tentées ici, et c'est
   la seconde qui vaut :
     Un filet cyan posé sur la section suivant la section masquée. Il
   ne servait à rien, la règle `section[style*="var(--navy)"]` plus
   haut donnant déjà un filet cyan à toute bande marine, et il est
   devenu nuisible après la permutation des deux dernières sections :
   il se posait alors sur « Au-delà de l'emploi », qui est claire.
     La permutation elle-même, qui règle le problème par la structure
   plutôt que par un trait. La bande photographique est désormais
   suivie d'une section claire, et la page se ferme sur l'action. */

/* Composant de témoignage, réutilisable tel quel sur les autres
   pages. Deux citations plutôt qu'une : un avis isolé se lit comme
   l'exception qu'on a trouvée, deux comme un échantillon. */
.testi{display:grid;gap:26px;margin-top:22px}
@media(min-width:840px){.testi{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
.testi .quote{max-width:none}
.testi .quote p{font-size:17px}

.quote{border-left:3px solid var(--cyan);padding-left:22px;max-width:56ch}
.quote p{font-size:19px;line-height:1.5;color:var(--text);font-weight:500}
@media(min-width:768px){.quote p{font-size:22px;line-height:1.45}
  .quote{padding-left:28px}}
.quote .qattrib{margin-top:12px;font-size:13.5px;color:var(--muted)}
.quote .qattrib b{color:var(--text);font-weight:600}

/* ── Section photographique pleine largeur ────────────────────
   Un seul usage par page. Le voile est un aplat marine à opacité
   fixe, pas un dégradé décoratif : il sert uniquement à tenir le
   contraste du texte au-dessus, quel que soit le cadrage de la
   photographie. Le texte ne descend jamais sous 4,5:1. */
.photoband{position:relative;isolation:isolate;overflow:hidden}
.photoband > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;object-position:var(--pos,50% 50%)}
@media(max-width:1023px){.photoband > img{object-position:var(--pos-mob,var(--pos,50% 50%))}}
/* Le voile allait de .95 à .90 puis à .72 en trois arrêts. Le plancher
   à .72 était une vraie faiblesse et pas seulement une complication :
   mesuré le 2026-09-12, le surtitre `.eyebrow.on-navy` en --cyan-light
   tombait à 4,20 pour un seuil de 4,5 sur le pixel le plus clair de la
   bande. Ni `verifier-visuel` ni `verifier-contraste-photo` ne
   regardaient ce sélecteur, l'angle mort est refermé dans la seconde.
   Deux arrêts au lieu de trois, et un plancher à .82 : le surtitre
   passe à 5,41, et encore à 5,02 sous une photographie franchement
   claire, ce qui importe puisque cette image va changer. */
.photoband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,42,74,.94) 0%,rgba(9,42,74,.82) 100%)}
@media(max-width:767px){.photoband::after{background:rgba(9,42,74,.9)}}
.photoband h2,.photoband h3{color:#fff}
.photoband p{color:#DCE8F1}

/* ── Chiffres ─────────────────────────────────────────────────
   Trois repères chiffrés valent mieux qu'un paragraphe de promesses,
   à condition qu'ils soient vérifiables. Tous ceux qui figurent ici
   le sont : l'année, le nombre de cantons, le taux et le plancher. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.stat b{display:block;font-size:29px;line-height:1.1;font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media(min-width:768px){.stat b{font-size:35px}}
.stat span{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.photoband .stat b{color:#fff}
.photoband .stat span{color:#C6DAE8}

/* ── Étapes numérotées ────────────────────────────────────────
   Reprend le déroulé de la vidéo d'onboarding, en cinq temps.
   Le filet horizontal relie les étapes entre elles : c'est lui qui
   dit que c'est une séquence et non une liste de services. */
.steps{display:grid;grid-template-columns:1fr;gap:26px;counter-reset:s}
@media(min-width:620px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
.step5{position:relative;padding-top:42px}
.step5::before{counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
@media(min-width:1024px){
  .step5::after{content:"";position:absolute;top:15px;left:40px;right:-20px;
    height:1px;background:var(--border)}
  .step5:last-child::after{display:none}
}
.step5 h3{font-size:16.5px;line-height:1.35}
.step5 p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* ── « Comment ça marche » en mobile : rien de retiré, tout resserré ──
   La page mesurait 11,6 écrans à 390 px. Couper du contenu aurait trahi
   sa promesse, « en une page, sans renvoi ». La hauteur perdue venait de
   trois choix de présentation, mesurés le 2026-09-13, et c'est eux qu'on
   corrige :
     Chaque étape posait son numéro sur une ligne à lui seul, AU-DESSUS du
   titre (padding-top:42px). En colonne unique, le numéro passe à gauche du
   titre, là où l'œil le lit de toute façon.
     Les douze cartes bordées s'empilaient en pleine largeur avec 24 px de
   rembourrage et une bordure sur les quatre côtés. En colonne unique, une
   bordure n'isole plus rien, puisqu'il n'y a pas de voisine : un filet à
   gauche suffit à marquer le bloc, pour une fraction de la hauteur.
   Au-dessus de 620 px les étapes, et de 640 px les cartes, gardent leur
   dessin d'origine : c'est le téléphone seul qui payait ce coût. */
@media(max-width:619px){
  .step5{padding-top:2px;padding-left:44px}
}
@media(max-width:639px){
  #hiw .block,#hiw-fr .block{border:0;border-left:3px solid var(--line);
    border-radius:0;padding:2px 0 2px 16px}
  #hiw .g2,#hiw-fr .g2,#hiw .g3,#hiw-fr .g3{gap:22px}
}

/* Sommaire de page. Des étiquettes et non des boutons : ce sont des
   raccourcis internes, et ils ne doivent pas rivaliser avec l'appel
   principal du hero, qui reste le seul bouton plein. */
.onpage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.onpage-t{width:100%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:2px}
.onpage a{font-size:13px;line-height:1;color:var(--navy);text-decoration:none;
  padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  min-height:34px;display:inline-flex;align-items:center}
.onpage a:hover{border-color:var(--cyan);color:var(--navy-dark)}
.onpage a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(min-width:1024px){.onpage-t{width:auto;margin:0 6px 0 0}}

/* ── Page de simulation ───────────────────────────────────────
   C'était un formulaire nu sur fond blanc, sans un mot de
   réassurance : la page qui convertit était la plus pauvre du site.
   Deux colonnes à partir de 1024, le panneau de droite reste visible
   pendant que le formulaire défile. Sous 1024, le panneau passe
   AVANT le formulaire mais réduit, pour ne pas repousser le premier
   champ sous la ligne de flottaison. */
.simlayout{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:1024px){
  .simlayout{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:56px;
    align-items:start}
  .simaside{position:sticky;top:96px}
  .simcol-form{order:1}
  .simaside{order:2}
}
.simaside{background:var(--mist);border-radius:12px;padding:24px;
  border:1px solid var(--line)}
@media(min-width:768px){.simaside{padding:28px}}
.simaside h2{font-size:20px;line-height:1.32}
@media(min-width:768px){.simaside h2{font-size:22px}}
.simaside p{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.simaside ul{list-style:none;margin:20px 0 0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.simaside li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--text)}
.simaside li svg{color:var(--cyan-deep);flex:none;margin-top:3px}
.simaside .simfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--muted)}
/* Sur mobile le panneau est réduit à son essentiel : le pied est
   masqué, pas déplacé, pour que le formulaire reste à portée. */
@media(max-width:1023px){
  .simaside .simfoot{display:none}
  .simaside p.simlong{display:none}
}

/* ── Bandeau de consentement ──────────────────────────────────
   Ancré en bas, jamais en surimpression centrale : un bandeau modal
   qui bloque la page fait fuir avant d'avoir informé. Les trois
   actions ont le même poids visuel, ce qui est la condition d'un
   consentement libre : un « Tout accepter » en couleur face à un
   refus en gris pâle est un consentement dirigé, et c'est
   exactement ce que les autorités sanctionnent. */
#cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 32px -16px rgba(15,44,67,.35);
  padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform 260ms ease-out;
  max-height:86vh;overflow-y:auto}
#cookie[data-on="1"]{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){#cookie{transition:none}}
.ckrow{max-width:1200px;margin:0 auto;display:grid;gap:16px}
@media(min-width:1024px){.ckrow{grid-template-columns:1fr auto;align-items:center;gap:36px}}
.cktext{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:76ch}
.cktext b{color:var(--text);font-weight:600}
.ckacts{display:flex;flex-wrap:wrap;gap:10px}
.ckacts .btn{height:42px;font-size:14px;padding:0 18px;flex:1 1 auto;white-space:nowrap}
@media(min-width:640px){.ckacts .btn{flex:0 0 auto}}
/* Le bouton de préférences n'est pas un lien discret : il est un
   bouton de plein droit, à la même hauteur que les deux autres. */
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
#ckprefs{margin:18px auto 0;padding-top:18px;border-top:1px solid var(--line);
  max-width:1200px}
.ckcat{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ckcat:last-of-type{border-bottom:0}
.ckcat h4{margin:0;font-size:14.5px;font-weight:600;color:var(--text)}
.ckcat p{margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.ckcat input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy);flex:none}
.ckcat input:disabled{accent-color:var(--muted);opacity:.6}
/* Le lien permanent du pied de page : il rouvre le bandeau à tout
   moment. Sans lui, un choix fait une fois ne peut plus être repris,
   ce qui n'est pas conforme. */
.cklink{background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cklink:hover{color:var(--navy)}

/* ── Pied de page ─────────────────────────────────────────────
   Il était blanc, puis bleu très clair, puis blanc de nouveau : trois
   registres en trois bandes, pour la partie de la page qui devrait
   au contraire se lire d'un bloc. Il passe en marine le 2026-09-12,
   ce qui referme la page au lieu de la laisser se dissoudre, et rend
   les trois bandes à une seule.

   AUCUNE ligne réglementaire n'est retirée ni reformulée. Les six
   rangées de la zone de confiance portent des mentions légales, que
   le brief interdit de modifier sans validation. Deux d'entre elles
   font pourtant doublon, et c'est signalé à part plutôt que tranché
   ici : le registre cantonal genevois redit le registre suisse, et
   la certification Swissdec figure déjà dans la ligne de
   crédibilité du hero. La compacité vient donc de la mise en page,
   pas d'une coupe dans le contenu.

   Toutes les valeurs de texte sont reprises pour le fond marine. Un
   gris de texte prévu pour du blanc ne tient aucun seuil sur marine,
   et c'est l'erreur classique d'une inversion de fond. Les trois
   sélecteurs sont mesurés par verifier-visuel.mjs, qui lit ici un
   aplat et non une photographie : sa méthode y est valable. */
footer{background:var(--navy);border-top:3px solid var(--cyan)}
footer .fh{color:var(--cyan-light)}
footer .fl{color:#fff}
footer .flink{color:#fff}
footer .flink:hover{color:var(--cyan-light)}
footer .sm{color:#fff}
footer .cap,footer .muted,footer .cap.muted{color:var(--on-navy)}
footer a{color:var(--on-navy)}
footer a:hover{color:var(--cyan-light)}
footer .cklink{color:var(--on-navy)}
footer .cklink:hover{color:var(--cyan-light)}
footer .navsoon,footer .lnksoon{color:var(--on-navy);border-bottom-color:rgba(255,255,255,.3)}
/* La bande de confiance se détachait par un bleu très clair. Sur
   marine, c'est l'inverse : elle se détache en s'enfonçant. */
footer .sub{background:var(--navy-dark)}
footer > div:last-child{border-top:1px solid rgba(255,255,255,.14) !important}
/* Quatre colonnes de liens à partir de 900 px plutôt que deux : le
   pied de page tenait sur quatre rangées inutiles en desktop. */
@media(min-width:900px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
/* Zone de confiance resserrée : trois colonnes dès 820 px au lieu de
   1024, et l'interligne des rangées réduit. Six rangées sur deux
   lignes de trois au lieu de six lignes pleines. */
@media(min-width:820px){.comp{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 36px}}
footer .comp .ico16{color:var(--cyan-light)}

/* ── Quatre situations, quatre services ───────────────────────
   Historique : la Home portait deux grilles de trois cartes, l une
   nommant le public, l autre le service. Leur fusion a revele un
   public oublie, l entreprise qui emploie deja, d ou QUATRE situations.

   Refonte du 13.09.2026. Les quatre rangees « situation a gauche,
   solution a droite » se lisaient comme un tableau : petites icones,
   puces, liens discrets, aucun visage. Elles deviennent quatre blocs
   editoriaux en grille 2 x 2 des 1024 px, empiles en dessous.
   - Une photographie par bloc, chacune d un sujet distinct (un
     recrutement, une personne a son poste, un echange a deux, un
     examen de chiffres), pour que le visiteur se projette.
   - Le besoin en titre, le service au second niveau : on se reconnait
     avant de lire un nom technique.
   - Un CTA explicite par service, toujours visible, jamais au seul survol.
   Fond : la section reste blanche et les blocs prennent --mist, parce
   que la bande de logos qui suit est deja en --mist et que deux
   registres identiques ne se suivent jamais.
   Photos basses (16:10, 2:1 sous 600 px) : le hero juste au-dessus
   porte deja une grande photographie. */
.situ-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
@media(min-width:1024px){.situ-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.situ{position:relative;display:flex;flex-direction:column;background:var(--mist);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:box-shadow .25s ease,border-color .25s ease}
/* Survol : un liseré turquoise se déploie en tête du bloc. Rien ne se
   déplace, et le même signal accompagne le focus clavier. */
.situ::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:1;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.situ:hover,.situ:focus-within{box-shadow:var(--shadow-s);border-color:#D3E1EC}
.situ:hover::before,.situ:focus-within::before{transform:scaleX(1)}
.situ-media{aspect-ratio:2/1;background:var(--line);overflow:hidden}
@media(min-width:600px){.situ-media{aspect-ratio:16/10}}
.situ-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
@media(max-width:599px){.situ-media img{object-position:var(--pos-mob,var(--pos,50% 50%))}}
/* Tablette : une colonne de quatre photos pleine largeur faisait 3 800 px
   de haut à 768 px. Le bloc passe en rangée, photo à gauche sur 38 %,
   et la section retrouve la hauteur de sa version desktop. */
@media(min-width:600px) and (max-width:1023px){
  .situ{flex-direction:row}
  .situ::before{z-index:2}
  .situ-media{flex:0 0 38%;aspect-ratio:auto;min-height:100%}
}
.situ-body{display:flex;flex-direction:column;flex:1;padding:24px 22px 22px}
@media(min-width:768px){.situ-body{padding:30px 34px 28px}}
.situ-body .eyebrow{margin-bottom:10px}
.situ-need{font-size:clamp(1.375rem, 1.25rem + .55vw, 1.6875rem);line-height:1.22;
  letter-spacing:-.012em;font-weight:650;color:var(--navy);text-wrap:balance}
.situ-svc{display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:14.5px;font-weight:600;color:var(--cyan-deep)}
.situ-svc::before{content:"";width:22px;height:2px;background:var(--cyan);flex:none}
.situ-txt{margin-top:14px;color:var(--ink-soft)}
.situ-l{list-style:none;margin-top:18px;padding:16px 0 0;border-top:1px solid #D6E2EC;
  display:flex;flex-direction:column;gap:9px}
.situ-l li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.situ-l li strong{font-weight:600;color:var(--navy)}
.situ-l svg{width:16px;height:16px;margin-top:3px;flex:none;fill:none;stroke:var(--cyan-deep);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.situ-cta{margin-top:auto;padding-top:22px}
.situ-go{display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-weight:600;color:var(--navy);text-decoration:none}
.situ-go span{text-decoration:underline;text-decoration-color:var(--cyan);
  text-decoration-thickness:2px;text-underline-offset:5px}
.situ-go i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;flex:none;transition:transform .25s ease,background-color .25s ease}
.situ-go i svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.situ-go:hover i,.situ-go:focus-visible i{background:var(--cyan-deep);transform:translateX(3px)}
.situ-go:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:4px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.situ::before,.situ-go i{transition:none}}
.offer-l{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.offer-l li{position:relative;padding-left:19px;color:var(--ink-soft)}
/* Un carre de 6 px, pas une puce ronde : la meme geometrie que les
   filets et les cartouches du reste de la page. */
.offer-l li::before{content:"";position:absolute;left:0;top:.52em;
  width:6px;height:6px;border-radius:2px;background:var(--cyan-deep)}

/* Actions du hero. Le nom `hact` est deja pris par la rangee de
   l en-tete, qui porte margin-left:auto : la reutiliser poussait le
   hero contre la marge droite. Le principal reste un bouton, le
   secondaire redevient un lien, ce qui les distingue au premier
   regard au lieu de les mettre sur le meme plan. */
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:28px}

/* ── Boutons ──────────────────────────────────────────────────
   Le cyan portait du texte marine clair : contraste limite. Le
   marine très foncé sur cyan tient largement le seuil. */
.btn-c{background:var(--cyan);color:#062033;font-weight:600}
.btn-c:hover{background:var(--cyan-light);color:#062033}
.btn-p{box-shadow:0 1px 2px rgba(15,44,67,.16)}

/* ── Deux blocs retires le 2026-09-12, apres verification ─────
   .ratio-32 et .ratio-169 devaient reserver la place des images avant
   chargement, mais AUCUNE image ne les portait : la reservation se fait
   en realite par les attributs width et height, presents sur 50 des 52
   images, et par l aspect-ratio de .hero-media.
   .conf decrivait une « bande de conformite du haut de page » dont le
   commentaire affirmait qu elle « existe sur toutes les pages ». Aucun
   element du document ne portait cette classe : la bande vit en bas, dans
   le pied de page, sous .comp. Vingt lignes de style pour un composant
   qui n existait pas, et un commentaire qui affirmait le contraire. */

/* ── Header et hero, passe du 2026-09-13 ───────────────────────
   « SPTS | Portage » était à 20 px de « Services », au même pas que les
   liens entre eux : le logo se lisait comme le premier intitulé du menu,
   « Portage Services ». Le logo reçoit son territoire, 40 px puis un
   filet court et pâle, et les liens un pas régulier de 30 px : 71 px du
   logo au premier lien contre 30 entre deux liens.

   Mesure préalable du 13.09 : en français, le bouton de l'en-tête
   s'arrêtait à 3 px du bord du conteneur au-delà de 1280, et sortait de
   l'écran de 86 px à 1024. La séparation demandait 70 px de plus. Deux
   décisions de SPTS : « Connexion » quitte la rangée (il reste dans le
   panneau et le pied de page), et le menu complet ne s'affiche qu'à
   partir de 1280 px, le burger prenant le relais en dessous.
   verifier-entete.mjs mesure tout cela à six largeurs et deux langues.

   Correction du même jour : le budget comptait 1200 px utiles, or le
   conteneur de 1200 px INCLUT ses 40 px de marge intérieure. Il en restait
   1120, et le français séparé en demandait 1200. Troisième décision de
   SPTS : le conteneur du site passe à 1320 px, soit 1240 utiles, et le pas
   des liens à 28 px. Header et hero restent sur la même grille. */
.wrap{max-width:1320px}
.login{display:none !important}
header{border-bottom-color:var(--line)}
@media(min-width:768px){.hcta{display:inline-flex;height:40px;padding:0 18px;font-size:14.5px}}
@media(min-width:1024px){header{height:76px}}
/* Seuil ramené de 1280 à 1200 px le 13.09 : beaucoup de portables sous Windows
   mis à l'échelle affichent entre 1200 et 1279 px CSS, et n'avaient que le
   burger. Entre 1200 et 1279, le rythme est resserré (mesuré : 31 px de marge
   en français à 1200). Sous 1200, le français déborde : burger. */
@media(min-width:1024px) and (max-width:1199px){
  nav.desk{display:none}
  .burger{display:inline-flex}
}
@media(min-width:1200px) and (max-width:1279px){
  nav.desk{margin-left:32px !important;gap:20px !important;font-size:14.5px !important}
  .hact{gap:16px !important;padding-left:20px !important}
  .hcta{padding:0 16px !important;font-size:14.5px !important}
}
@media(min-width:1200px){
  .hrow{gap:0}
  nav.desk{margin-left:40px;gap:28px;font-size:15px;letter-spacing:.005em}
  /* Le filet est un élément du flux : le pas de 30 px s'applique aussi
     entre lui et « Services ». Plus court et plus pâle que le trait cyan
     du logo, il ne peut pas passer pour une partie du logo. */
  nav.desk::before{content:"";flex:none;width:1px;height:18px;background:rgba(16,65,108,.16)}
  .hact{gap:24px;padding-left:32px}
  .hcta{height:44px;padding:0 22px;font-size:15px}
}

/* Liens : couleur et trait fin, jamais de fond. L'état actif garde la
   même graisse, pour que rien ne se décale en changeant de page. */
.navlink{position:relative;color:var(--ink-soft);transition:color 160ms ease-out}
.navlink:hover,.nav-dd:focus-within .dd-btn{color:var(--navy)}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:rgba(16,65,108,.35);transform:scaleX(0);transform-origin:left center;
  transition:transform 180ms ease-out}
.navlink:hover::after{transform:scaleX(1)}
.navlink[aria-current="page"]{color:var(--navy)}
.navlink[aria-current="page"]::after{transform:scaleX(1);height:1.5px;background:var(--cyan)}
.dd-btn{gap:5px}
.dd-btn::after{right:21px}

/* Menus déroulants : titres alignés au pixel sur le texte du bouton
   (bordure 1 + padding 8 + padding d'entrée 12 = 21). */
.dd-panel{left:-21px;margin-top:14px;padding:8px;border-color:var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(15,44,67,.04),0 14px 36px -22px rgba(15,44,67,.30)}
.nav-dd::after{height:18px}
.dd-item{border-radius:8px}
.dd-item:hover{background:var(--paper-tint)}
.dd-item[aria-current="page"] .dd-t{color:var(--navy)}
.dd-item[aria-current="page"] .dd-t::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--cyan);margin-left:8px;vertical-align:middle;transform:translateY(-1px)}

/* Sélecteur de langue : le caractère « | » devient un filet. */
.langsw{display:inline-flex;align-items:center}
.lang{font-size:13.5px;letter-spacing:.04em;padding:4px 2px;transition:color 160ms ease-out}
.langsw .muted{display:inline-block;width:1px;height:12px;margin:0 9px;background:var(--border);
  font-size:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){.navlink,.navlink::after,.lang{transition:none}}


/* ── Bande de logos : le défilement revient, le 2026-09-13 ─────
   Retiré le 12.09 au profit d'une grille, rétabli à la demande de SPTS.
   Mécanique d'origine, reprise telle quelle : deux pistes identiques qui
   se suivent, la seconde masquée aux lecteurs d'écran (sinon vingt
   organisations annoncées pour dix), un cycle de 58 s, 42 s sur écran
   étroit, porté à 145 et 105 s quand la bande passe de 10 à 25 logos,
   pour garder la même vitesse, un fondu sur les bords, une pause au survol.
   Ce qui est gardé de la grille : la correction du poids optique, --k,
   posée logo par logo sur la surface d'encre mesurée.
   Sous prefers-reduced-motion, la bande s'arrête et redevient une rangée
   centrée de dix logos, jamais une piste figée à mi-course.
   Les raisons du retrait restent vraies et sont à connaître : un logo est
   toujours coupé au bord, et une bande qui bouge se lit moins bien qu'une
   grille au moment où l'on veut la lire. */
.marquee{position:relative;overflow:hidden;margin-top:34px;padding:6px 0;
  --logo-h:30px;--logo-w:104px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media(min-width:720px){.marquee{--logo-h:34px;--logo-w:118px}}
@media(min-width:1024px){.marquee{--logo-h:40px;--logo-w:148px}}
.marquee-track{display:flex;width:max-content;animation:slide 145s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-seq{display:flex;align-items:center;gap:52px;padding-right:52px;flex:none}
@media(min-width:768px){.marquee-seq{gap:72px;padding-right:72px}}
.marquee-seq img{display:block;flex:none;object-fit:contain;
  height:calc(var(--logo-h) * var(--k,1));width:auto;
  max-width:calc(var(--logo-w) * var(--k,1));
  filter:grayscale(1);opacity:.9;
  transition:filter 260ms ease-out,opacity 260ms ease-out}
.marquee-seq img:hover{filter:none;opacity:1}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:767px){.marquee-track{animation-duration:105s}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  /* flex:1 1 100% et non flex:none : une piste de largeur max-content ne
     passe jamais à la ligne. À dix logos elle tenait sur une rangée ; à
     vingt-cinq, elle sortait du cadre et les logos du bout étaient coupés. */
  .marquee-seq{flex:1 1 100%;max-width:100%;flex-wrap:wrap;justify-content:center;gap:28px 44px;padding-right:0}
  .marquee-seq[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-seq img{transition:none}
}

/* ── Photo du hero en alternance, 2026-09-13 ──────────────────
   Sur l'accueil, la photo change avec le titre et le paragraphe, mené par
   le même minuteur : sous « Employer en Suisse », la photo d'entreprise,
   sans cartouche ;


/* Ancres du pied de page, 2026-09-13 : le header est fixe (76 px), une section
   atteinte par defilement doit s arreter sous lui, pas derriere. */
section[id]{scroll-margin-top:92px}

/* ── Pages légales, 2026-09-13 ─────────────────────────────────
   Gabarit du fichier 11 : texte long, sans encadré ni illustration, une
   colonne de lecture de 72 caractères, un sommaire ancré, aucun appel à
   l'action. Le sommaire liste les articles en colonne : dix-neuf pastilles
   en ligne seraient un mur. */
.legal{max-width:72ch}
.legal-toc{display:grid;grid-template-columns:1fr;gap:6px 24px;margin:0 0 8px;max-width:72ch}
@media(min-width:768px){.legal-toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.legal-toc .onpage-t{grid-column:1/-1}
.legal-toc a{border:0;padding:4px 0;border-radius:0;background:none;font-size:14px;line-height:1.4;
  text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.legal-toc a:hover{text-decoration-color:currentColor}
.legal-art{padding-top:36px}
.legal-art h2{font-size:21px;line-height:1.3}
.legal-art p{margin-top:12px;line-height:1.65;color:var(--ink-soft)}
.legal-art ul{margin-top:12px;padding-left:20px;color:var(--ink-soft)}
.legal-art li{margin-top:6px;line-height:1.6}
/* Texte justifié, à la demande de SPTS le 2026-09-13 : les paragraphes sont
   alignés à gauche ET à droite partout où c'est possible, à partir de 768 px.
   La césure automatique est ce qui rend le justifié acceptable à l'écran :
   sans elle, les espaces entre les mots s'étirent en rivières.
   Restent au fer à gauche, parce que le justifié n'y peut rien donner de bon :
   les surtitres et légendes (.eyebrow, .cap), la rangée de réassurance
   (.cred), la ligne de preuve centrée, le cartouche sur photo, et tout texte
   centré par un style. Les listes restent au fer à gauche, sauf sur les pages
   légales où leurs éléments sont des phrases. Sous 768 px, une ligne ne porte
   que cinq ou six mots : le justifié y creuse des trous, on ne l'applique pas. */
@media(min-width:768px){
  main.page p:not(.mq p):not(.eyebrow):not(.cap):not(.cred):not(.proof-head):not(.proof-claim):not(.hero-badge):not([style*="text-align:center"]),
  .legal-art li{text-align:justify;text-justify:inter-word;
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
}
/* Colonnes trop étroites pour le justifié. Une liste de conteneurs ne tenait
   pas : à 768 et 1024 px, des dizaines de cartes passent sous 360 px, et la
   règle générale, plus spécifique, l'emportait de toute façon. Le script
   mesure donc chaque paragraphe de la page affichée et pose .etroit sur ceux
   de moins de 360 px, qui gardent le fer à gauche. */
main.page p.etroit{text-align:left !important;-webkit-hyphens:manual !important;hyphens:manual !important}

/* Pages légales : le sommaire suit l’introduction sans double marge. */
.page[id^="cg"] > section.tight,.page[id^="cu"] > section.tight,.page[id^="pd"] > section.tight{padding-top:8px}

/* ── home : maquette appliquée le 01.10.2026 */
main.page .mq-home :is(h1,h2,h3,h4){color:inherit}
main.page .mq-home{
  --navy:#10416C; --navy-dark:#0B3055; --cyan:#45BDDF; --cyan-light:#81CEE2;
  --text:#0F2C43; --muted:#566D80; --border:#D6E1EA; --line:#D6E1EA;
  --bg:#fff; --sub:#F1F6FA; --mist:#F7FAFC; --on-navy:#C6DAE8; --warn:#9A6B12;
   --sec:72px;
}
main.page .mq-home *{box-sizing:border-box}
main.page .mq-home{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
main.page .mq-home img{max-width:100%}
main.page .mq-home h1,main.page .mq-home h2,main.page .mq-home h3{margin:0;line-height:1.2;letter-spacing:-.015em}
main.page .mq-home p{margin:0}
main.page .mq-home button{font:inherit;color:inherit}
main.page .mq-home .m-wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
main.page .mq-home .m-sec{padding:var(--sec) 0}
main.page .mq-home .m-muted{color:var(--muted)}
main.page .mq-home .m-eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:0 0 14px}
main.page .mq-home .m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 24px;border-radius:6px;font-weight:500;font-size:15px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
main.page .mq-home .m-btn-p{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(15,44,67,.16)}
main.page .mq-home .m-btn-p:hover{background:var(--navy-dark)}
main.page .mq-home .m-btn-s{border-color:var(--navy);color:var(--navy);background:transparent}
main.page .mq-home .m-btn-s:hover{background:var(--sub)}
main.page .mq-home .m-btn-full{width:100%}
main.page .mq-home .m-hero{position:relative;padding:76px 0 84px;overflow:hidden;
  background:linear-gradient(180deg,#EDF4FA 0%,#F6FAFD 46%,#fff 100%)}
main.page .mq-home .m-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;
  opacity:.16;filter:saturate(.7)}
main.page .mq-home .m-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(237,244,250,.55) 0%,rgba(255,255,255,.9) 100%)}
main.page .mq-home .m-hero .m-wrap{position:relative}
main.page .mq-home .m-hero-kicker{text-align:center;font-size:17px;color:var(--navy);margin:0 0 14px}
main.page .mq-home .m-hero h1{text-align:center;font-size:clamp(34px,6vw,62px);font-weight:700;color:var(--navy)}
main.page .mq-home .m-hero-sub{text-align:center;font-size:clamp(17px,2.2vw,21px);color:var(--navy);
  margin:16px auto 0;max-width:40ch}
main.page .mq-home .m-situ-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:46px}
@media(min-width:900px){main.page .mq-home .m-situ-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
}
main.page .mq-home .m-situ{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(15,44,67,.05);
  transition:transform 180ms ease-out,box-shadow 180ms ease-out,border-color 180ms ease-out}
main.page .mq-home .m-situ:hover{transform:translateY(-4px);border-color:#BFD4E4;
  box-shadow:0 16px 36px rgba(15,44,67,.13),0 3px 8px rgba(15,44,67,.06)}
main.page .mq-home .m-situ-media{aspect-ratio:16/9;background:var(--line);overflow:hidden}
main.page .mq-home .m-situ-media img{width:100%;height:100%;object-fit:cover;display:block}
main.page .mq-home .m-situ-body{display:flex;flex-direction:column;gap:14px;padding:24px;flex:1}
main.page .mq-home .m-situ-head{display:flex;align-items:center;gap:12px}
main.page .mq-home .m-situ-ico{width:38px;height:38px;flex:none;color:var(--navy)}
main.page .mq-home .m-situ h3{font-size:20px;font-weight:600;color:var(--navy)}
main.page .mq-home .m-situ p{font-size:15.5px;color:var(--muted);line-height:1.55}
main.page .mq-home .m-ticks{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
main.page .mq-home .m-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text)}
main.page .mq-home .m-ticks svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--navy);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
main.page .mq-home .m-situ .m-btn{margin-top:auto}
main.page .mq-home .m-proof{background:var(--sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
main.page .mq-home .m-proof h2{text-align:center;font-size:clamp(23px,3vw,30px);font-weight:600;color:var(--navy)}
main.page .mq-home .m-proof-sub{text-align:center;font-size:16.5px;color:var(--muted);margin:10px auto 0}
main.page .mq-home .m-marquee{position:relative;overflow:hidden;margin-top:34px;padding:8px 0;
  --logo-h:34px;--logo-w:120px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@media(min-width:1024px){main.page .mq-home .m-marquee{--logo-h:40px;--logo-w:150px}
}
main.page .mq-home .m-marquee-track{display:flex;width:max-content;animation:m-slide 120s linear infinite}
main.page .mq-home .m-marquee:hover .m-marquee-track{animation-play-state:paused}
main.page .mq-home .m-marquee-seq{display:flex;align-items:center;gap:62px;padding-right:62px;flex:none}
main.page .mq-home .m-marquee-seq img{display:block;flex:none;object-fit:contain;
  height:var(--logo-h);width:var(--logo-w);filter:grayscale(1);opacity:.62;
  transition:filter 160ms ease-out,opacity 160ms ease-out}
main.page .mq-home .m-marquee-seq img:hover{filter:none;opacity:1}
@keyframes m-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){main.page .mq-home .m-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
main.page .mq-home .m-marquee-seq{flex:1 1 100%;flex-wrap:wrap;justify-content:center;gap:26px 42px;padding-right:0}
main.page .mq-home .m-marquee-seq[aria-hidden="true"]{display:none}
main.page .mq-home .m-marquee{-webkit-mask-image:none;mask-image:none}
}
main.page .mq-home .m-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:30px auto 0;
  font-size:14px;color:var(--muted);max-width:76ch;text-align:center}
main.page .mq-home .m-hiw{background:linear-gradient(180deg,#fff 0%,#F4F9FC 100%)}
main.page .mq-home .m-hiw h2{text-align:center;font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--navy)}
main.page .mq-home .m-hiw .m-hiw-sub{text-align:center;font-size:17px;color:var(--muted);margin:14px auto 0}
main.page .mq-home .m-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;margin-top:48px}
@media(min-width:980px){main.page .mq-home .m-flow{grid-template-columns:1fr auto 1.08fr auto 1fr;gap:0}
}
main.page .mq-home .m-node{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;
  display:flex;align-items:center;gap:16px;box-shadow:0 2px 10px rgba(15,44,67,.05)}
main.page .mq-home .m-node-mid{border-color:#BBD9EA;box-shadow:0 10px 30px rgba(16,65,108,.14);
  background:linear-gradient(180deg,#fff 0%,#F7FCFE 100%);flex-direction:column;
  text-align:center;gap:8px;padding:28px 24px}
main.page .mq-home .m-node-ico{width:44px;height:44px;flex:none;border-radius:10px;background:var(--sub);
  display:flex;align-items:center;justify-content:center;color:var(--navy)}
main.page .mq-home .m-node-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
main.page .mq-home .m-node h3{font-size:17.5px;font-weight:600;color:var(--navy)}
main.page .mq-home .m-node-mid h3{font-size:27px;font-weight:700;letter-spacing:-.02em}
main.page .mq-home .m-node p{font-size:14.5px;color:var(--muted)}
main.page .mq-home .m-node-mid .m-tagline{font-size:15px;color:var(--text)}
main.page .mq-home .m-node-mid .m-chips{font-size:13.5px;color:var(--muted);margin-top:4px}
main.page .mq-home .m-conn{display:flex;flex-direction:column;gap:6px;padding:0 18px;text-align:center}
@media(max-width:979px){main.page .mq-home .m-conn{padding:6px 0}
}
main.page .mq-home .m-conn span{font-size:12.5px;color:var(--muted);line-height:1.35}
main.page .mq-home .m-conn svg{width:100%;height:14px;fill:none;stroke:#9FB6C7;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
main.page .mq-home .m-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:52px}
@media(min-width:820px){main.page .mq-home .m-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
}
main.page .mq-home .m-step{display:flex;gap:16px;align-items:flex-start}
main.page .mq-home .m-step-n{width:40px;height:40px;flex:none;border-radius:50%;background:#E3EFF7;
  color:var(--navy);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
main.page .mq-home .m-step-b{border-left:1px solid var(--line);padding-left:18px}
main.page .mq-home .m-step h3{font-size:16.5px;font-weight:600;color:var(--navy);margin-bottom:5px}
main.page .mq-home .m-step p{font-size:14.5px;color:var(--muted)}
main.page .mq-home .m-lnk{display:inline-flex;align-items:center;gap:9px;margin-top:40px;font-size:15px;
  color:var(--navy);font-weight:500;text-decoration:none;border-bottom:1px solid var(--navy);
  padding-bottom:3px}
main.page .mq-home .m-lnk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
main.page .mq-home .m-why{position:relative;color:#fff;overflow:hidden}
main.page .mq-home .m-why-bg{position:absolute;inset:0;background-size:cover;background-position:center}
main.page .mq-home .m-why-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,48,85,.94) 0%,rgba(16,65,108,.93) 100%)}
main.page .mq-home .m-why .m-wrap{position:relative;padding-top:78px;padding-bottom:78px}
main.page .mq-home .m-why .m-eyebrow{color:var(--cyan)}
main.page .mq-home .m-why h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;max-width:26ch}
main.page .mq-home .m-why-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px 56px;margin-top:44px}
@media(min-width:860px){main.page .mq-home .m-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
main.page .mq-home .m-why-grid h3{font-size:20px;font-weight:600;margin-bottom:8px}
main.page .mq-home .m-why-grid p{font-size:15.5px;color:var(--on-navy);line-height:1.6;max-width:46ch}
main.page .mq-home .m-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;
  margin-top:52px;padding-top:42px;border-top:1px solid rgba(198,218,232,.3)}
@media(min-width:900px){main.page .mq-home .m-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
}
main.page .mq-home .m-stat b{display:block;font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.02em}
main.page .mq-home .m-stat span{display:block;font-size:14px;color:var(--on-navy);margin-top:6px;line-height:1.45}
main.page .mq-home .m-group{background:var(--sub)}
main.page .mq-home .m-group h2{font-size:clamp(21px,2.6vw,27px);font-weight:600;color:var(--navy)}
main.page .mq-home .m-group>.m-wrap>p{font-size:15.5px;color:var(--muted);margin-top:12px;max-width:78ch}
main.page .mq-home .m-fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;margin-top:38px}
@media(min-width:860px){main.page .mq-home .m-fcols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
main.page .mq-home .m-fcols h3{font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:5px}
main.page .mq-home .m-fcols p{font-size:14.5px;color:var(--muted)}
main.page .mq-home .m-note{position:relative}

/* ── pay : maquette appliquée le 01.10.2026 */
main.page .mq-pay :is(h1,h2,h3,h4){color:inherit}
main.page .mq-pay{
  --navy:#10416C; --navy-dark:#0B3055; --cyan:#45BDDF; --cyan-light:#81CEE2;
  --cyan-deep:#2A7691; --hl:#1E88B5;
  --text:#0F2C43; --muted:#566D80; --ink-soft:#40586C;
  --border:#D6E1EA; --line:#E4EBF1; --mist:#EDF3F9; --stone:#F4F5F6;
  --paper-tint:#F6FAFD; --on-navy:#C6DAE8; --tint:#E6F0F7; --cyan-tint:#E4F5FA;
  --ok-bg:#EEF7F1; --ok-line:#CFE6D8; --ok-ink:#2F7A52;
  --shadow-s:0 1px 2px rgba(15,44,67,.04),0 4px 12px -6px rgba(15,44,67,.10);
  --shadow-m:0 2px 4px rgba(15,44,67,.04),0 18px 40px -22px rgba(15,44,67,.34);
  --shadow-h:0 4px 10px rgba(15,44,67,.06),0 22px 44px -20px rgba(16,65,108,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
   --sec:104px;
}
@media(max-width:767px){main.page .mq-pay{--sec:68px}
}
main.page .mq-pay *{box-sizing:border-box}
main.page .mq-pay{margin:0;background:#fff;color:var(--text);
  font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main.page .mq-pay h1,main.page .mq-pay h2,main.page .mq-pay h3{margin:0;color:var(--navy);text-wrap:balance}
main.page .mq-pay h1{font-size:clamp(2.1rem,1.5rem + 2.9vw,3.75rem);line-height:1.06;letter-spacing:-.025em;font-weight:700}
main.page .mq-pay h2{font-size:clamp(1.85rem,1.35rem + 1.9vw,2.85rem);line-height:1.12;letter-spacing:-.022em;font-weight:700}
main.page .mq-pay h3{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
main.page .mq-pay .m-hl{color:var(--hl)}
main.page .mq-pay p{margin:0}
main.page .mq-pay a{color:inherit}
main.page .mq-pay :focus-visible{outline:3px solid var(--hl);outline-offset:3px;border-radius:4px}
main.page .mq-pay .m-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
main.page .mq-pay .m-sec{padding:var(--sec) 0;position:relative}
main.page .mq-pay .m-ruled{border-top:1px solid var(--line)}
main.page .mq-pay .m-mist{background:var(--mist)}
main.page .mq-pay .m-paper{background:var(--paper-tint)}
main.page .mq-pay .m-lead{font-size:clamp(1.0625rem,1.02rem + .25vw,1.2rem);line-height:1.6;color:var(--ink-soft)}
main.page .mq-pay .m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:0 24px;border-radius:6px;font-weight:500;font-size:15px;text-decoration:none;
  border:1px solid transparent;transition:background 150ms ease-out,transform 150ms ease-out,box-shadow 150ms ease-out}
main.page .mq-pay .m-btn-p{background:var(--navy);color:#fff}
main.page .mq-pay .m-btn-p:hover{background:var(--navy-dark)}
main.page .mq-pay .m-btn-c{background:var(--cyan);color:var(--navy-dark);font-weight:600}
main.page .mq-pay .m-btn-c:hover{background:var(--cyan-light)}
main.page .mq-pay .m-btn-l{min-height:54px;padding:0 28px;font-size:16px;font-weight:600;box-shadow:0 10px 22px -16px rgba(16,65,108,.6)}
main.page .mq-pay .m-btn-l:hover{transform:translateY(-1px)}
@media(max-width:599px){main.page .mq-pay .m-hero-act .m-btn-l,main.page .mq-pay .m-simc .m-btn-l{width:100%}
}
main.page .mq-pay .m-lnk{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;min-height:44px}
main.page .mq-pay .m-lnk:hover{color:var(--hl)}
main.page .mq-pay .m-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
main.page .mq-pay .m-num{font-variant-numeric:tabular-nums}
main.page .mq-pay .m-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main.page .mq-pay .m-eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--cyan-deep);margin:0 0 16px}
main.page .mq-pay .m-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-pay .m-shead .m-sub{margin-top:16px;font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:#5E7890;line-height:1.55;max-width:62ch}
main.page .mq-pay .m-shead.m-c{text-align:center}
main.page .mq-pay .m-shead.m-c .m-eyebrow{justify-content:center}
main.page .mq-pay .m-shead.m-c .m-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-pay .m-shead.m-c .m-sub{margin-left:auto;margin-right:auto}
main.page .mq-pay .m-more{margin-top:12px}
main.page .mq-pay .m-more summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--navy);min-height:32px;border-bottom:1px solid var(--cyan)}
main.page .mq-pay .m-more summary::-webkit-details-marker{display:none}
main.page .mq-pay .m-more summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform 200ms var(--ease)}
main.page .mq-pay .m-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
main.page .mq-pay .m-more summary:hover{color:var(--hl)}
main.page .mq-pay .m-more p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);text-align:left;
  padding-left:14px;border-left:2px solid #CFE0EC}
main.page .mq-pay .m-hero{background:linear-gradient(180deg,var(--paper-tint) 0%,#fff 72%);padding:32px 0 var(--sec);position:relative}
main.page .mq-pay .m-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan) 58%,rgba(69,189,223,0))}
main.page .mq-pay .m-crumb{font-size:14px;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
main.page .mq-pay .m-crumb li{display:flex;align-items:center;gap:10px}
main.page .mq-pay .m-crumb a{text-decoration:none;color:var(--navy)}
main.page .mq-pay .m-crumb a:hover{text-decoration:underline}
main.page .mq-pay .m-crumb svg{width:14px;height:14px;color:var(--muted)}
main.page .mq-pay .m-crumb [aria-current]{color:var(--muted)}
main.page .mq-pay .m-hero-t{margin-top:36px}
main.page .mq-pay .m-hero-g{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;margin-top:8px}
@media(min-width:960px){main.page .mq-pay .m-hero-g{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
}
main.page .mq-pay .m-aud{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:22px}
main.page .mq-pay .m-aud .m-ico{width:16px;height:16px;color:var(--hl)}
main.page .mq-pay .m-hero h1 .m-l2{display:block}
main.page .mq-pay .m-hero .m-lead{margin-top:22px;max-width:50ch}
main.page .mq-pay .m-hero .m-lead strong{color:var(--navy);font-weight:600}
@media(min-width:960px){main.page .mq-pay .m-hero .m-lead{margin-top:0}
}
main.page .mq-pay .m-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
main.page .mq-pay .m-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin:52px 0 0;padding:30px 0 0;list-style:none;border-top:1px solid var(--line)}
@media(min-width:600px){main.page .mq-pay .m-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
}
@media(min-width:1024px){main.page .mq-pay .m-proof{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
main.page .mq-pay .m-proof li{padding:0 26px}
main.page .mq-pay .m-proof li:first-child{padding-left:0}
main.page .mq-pay .m-proof li:last-child{padding-right:0}
main.page .mq-pay .m-proof li+li{border-left:1px solid var(--line)}
}
main.page .mq-pay .m-proof li{display:grid;align-content:start;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
main.page .mq-pay .m-proof li>.m-ico{width:28px;height:28px;stroke-width:1.5;color:var(--hl);margin-top:1px}
main.page .mq-pay .m-proof b{display:block;color:var(--navy);font-weight:600;font-size:15.5px;line-height:1.35}
main.page .mq-pay .m-proof li div>span{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
main.page .mq-pay .m-proof .m-more{margin-top:8px}
main.page .mq-pay .m-proof .m-more summary{font-size:13px;min-height:28px}
main.page .mq-pay .m-proof .m-more p{font-size:14px;margin-top:10px}
main.page .mq-pay .m-steps{margin-top:44px;background:var(--paper-tint);border:1px solid var(--line);border-radius:18px;padding:30px 36px 34px}
@media(max-width:599px){main.page .mq-pay .m-steps{padding:24px 20px 26px}
}
main.page .mq-pay .m-steps-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
main.page .mq-pay .m-steps-h .m-eyebrow{margin:0}
main.page .mq-pay .m-steps-h .m-lnk{font-size:14px;min-height:36px}
main.page .mq-pay .m-steps ol{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
main.page .mq-pay .m-steps li{position:relative;display:grid;align-content:start;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:center}
main.page .mq-pay .m-steps .m-n{width:48px;height:48px;border-radius:50%;background:linear-gradient(150deg,#15548A 0%,var(--navy-dark) 100%);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--paper-tint),0 8px 16px -8px rgba(16,65,108,.6)}
main.page .mq-pay .m-steps li::after{content:"";position:absolute;left:23px;top:48px;bottom:-22px;width:2px;background:linear-gradient(180deg,var(--navy),var(--cyan));opacity:.45}
main.page .mq-pay .m-steps li:last-child::after{display:none}
main.page .mq-pay .m-steps b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--cyan-deep);line-height:1.3}
main.page .mq-pay .m-steps li div>span{display:block;margin-top:4px;font-size:16px;font-weight:600;line-height:1.4;color:var(--navy)}
@media(min-width:960px){main.page .mq-pay .m-steps ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:28px}
main.page .mq-pay .m-steps li{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
main.page .mq-pay .m-steps li::after{left:62px;right:-14px;top:23px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--navy),var(--cyan))}
main.page .mq-pay .m-steps li div>span{max-width:22ch}
}
main.page .mq-pay .m-hero-media{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-m);aspect-ratio:4/3;margin:0}
main.page .mq-pay .m-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 40%}
main.page .mq-pay .m-pico{position:relative;overflow:hidden;
  width:80px;height:80px;border-radius:24px;display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(150deg,#FFFFFF 0%,#DCEDF8 100%);border:1px solid #BFD8EA;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -10px rgba(16,65,108,.42);color:var(--navy);
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease)}
main.page .mq-pay .m-pico::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 88% at 24% 4%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%)}
main.page .mq-pay .m-pico svg{position:relative;width:40px;height:40px}
main.page .mq-pay .m-pico .m-fill{fill:var(--cyan);opacity:.26;stroke:none}
main.page .mq-pay .m-pico .m-st{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main.page .mq-pay .m-twin{position:relative;margin-top:56px;border-radius:22px;overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-m);background:#fff;display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){main.page .mq-pay .m-twin{grid-template-columns:repeat(2,minmax(0,1fr))}
}
main.page .mq-pay .m-half{padding:42px 40px 38px;position:relative}
@media(max-width:599px){main.page .mq-pay .m-half{padding:30px 22px 26px}
}
main.page .mq-pay .m-half.m-you{background:linear-gradient(180deg,#FFFFFF 0%,var(--paper-tint) 100%)}
main.page .mq-pay .m-half.m-us{background:linear-gradient(155deg,#15548A 0%,var(--navy) 46%,var(--navy-dark) 100%);color:#fff}
main.page .mq-pay .m-half-h{display:flex;align-items:center;gap:12px}
main.page .mq-pay .m-half-h .m-tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 11px;flex:none}
main.page .mq-pay .m-you .m-tag{background:var(--tint);color:var(--navy);border:1px solid var(--border)}
main.page .mq-pay .m-us .m-tag{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24)}
main.page .mq-pay .m-half-h h3{font-size:clamp(19px,1.3rem,23px)}
main.page .mq-pay .m-us .m-half-h h3{color:#fff}
main.page .mq-pay .m-half ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px) and (max-width:899px){main.page .mq-pay .m-half ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}
main.page .mq-pay .m-half li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
main.page .mq-pay .m-us li{border-top-color:rgba(255,255,255,.14)}
main.page .mq-pay .m-half li:first-child{border-top:0;padding-top:0}
@media(min-width:600px) and (max-width:899px){main.page .mq-pay .m-half li:nth-child(2){border-top:0;padding-top:0}
}
main.page .mq-pay .m-half li>.m-ico{width:28px;height:28px;stroke-width:1.5;margin-top:1px}
main.page .mq-pay .m-you li>.m-ico{color:var(--hl)}
main.page .mq-pay .m-us li>.m-ico{color:var(--cyan-light)}
main.page .mq-pay .m-half li b{display:block;font-size:16.5px;font-weight:600;line-height:1.35}
main.page .mq-pay .m-you li b{color:var(--navy)}
main.page .mq-pay .m-us li b{color:#fff}
main.page .mq-pay .m-half li span{display:block;margin-top:3px;font-size:15px;line-height:1.5}
main.page .mq-pay .m-you li span{color:var(--ink-soft)}
main.page .mq-pay .m-us li span{color:var(--on-navy)}
main.page .mq-pay .m-seam{position:absolute;z-index:2;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--border);
  box-shadow:0 10px 22px -12px rgba(16,65,108,.55);display:flex;align-items:center;justify-content:center;color:var(--hl);
  right:0;top:50%;transform:translate(50%,-50%)}
main.page .mq-pay .m-seam svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
@media(max-width:899px){main.page .mq-pay .m-seam{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%,50%)}
main.page .mq-pay .m-half.m-you{padding-bottom:50px}
main.page .mq-pay .m-half.m-us{padding-top:50px}
}
main.page .mq-pay .m-motto{margin-top:40px;text-align:center}
main.page .mq-pay .m-motto p{font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);font-weight:700;color:var(--navy);line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
main.page .mq-pay .m-motto p span{color:var(--hl)}
main.page .mq-pay .m-motto .m-rule{display:block;width:48px;height:2px;border-radius:2px;background:var(--cyan);margin:0 auto 18px}
main.page .mq-pay .m-money{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1040px){main.page .mq-pay .m-money{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
}
main.page .mq-pay .m-money-l p.m-txt{margin-top:22px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:34ch}
@media(min-width:1040px){main.page .mq-pay .m-money-l{position:sticky;top:96px}
}
main.page .mq-pay .m-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-m);padding:28px}
@media(max-width:767px){main.page .mq-pay .m-card{padding:18px;border-radius:12px}
}
main.page .mq-pay .m-sum{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:700px){main.page .mq-pay .m-sum{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.12fr);align-items:stretch;gap:8px}
}
main.page .mq-pay .m-sum-c{display:flex;align-items:center;gap:12px;background:var(--paper-tint);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
main.page .mq-pay .m-sum-c .m-pico{width:54px;height:54px;border-radius:16px}
main.page .mq-pay .m-sum-c .m-pico svg{width:28px;height:28px}
main.page .mq-pay .m-sum-c b{display:block;font-size:clamp(16px,1.3vw,19px);font-weight:700;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
main.page .mq-pay .m-sum-c div span{display:block;font-size:13.5px;color:var(--muted)}
main.page .mq-pay .m-sum-c.m-net{background:linear-gradient(150deg,var(--navy) 0%,#15548A 100%);border-color:var(--navy);box-shadow:0 14px 30px -16px rgba(16,65,108,.6)}
main.page .mq-pay .m-sum-c.m-net b{color:#fff;font-size:clamp(17px,1.45vw,21px)}
main.page .mq-pay .m-sum-c.m-net div span{color:var(--on-navy)}
main.page .mq-pay .m-sum-c.m-net .m-pico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);box-shadow:none;color:#fff}
main.page .mq-pay .m-sum-c.m-net .m-pico .m-fill{fill:var(--cyan-light);opacity:.4}
main.page .mq-pay .m-sum-a{color:var(--hl);display:flex;align-items:center;justify-content:center}
main.page .mq-pay .m-sum-a svg{width:20px;height:20px}
@media(max-width:699px){main.page .mq-pay .m-sum-a svg{transform:rotate(90deg)}
}
main.page .mq-pay .m-hyp{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.5}
main.page .mq-pay .m-card h3.m-rd{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:20px;font-weight:700}
main.page .mq-pay .m-stage{margin-top:18px}
main.page .mq-pay .m-stage-h{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:10px;padding:11px 14px;font-size:15px;font-weight:500;color:var(--navy)}
main.page .mq-pay .m-stage-h i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
main.page .mq-pay .m-wrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) 118px;gap:16px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);transition:background 180ms var(--ease)}
main.page .mq-pay .m-wrow:hover{background:var(--paper-tint)}
main.page .mq-pay .m-wl{font-size:14.5px;color:var(--ink-soft)}
main.page .mq-pay .m-wbar{height:14px;background:#F0F5F9;border-radius:4px;overflow:hidden}
main.page .mq-pay .m-wbar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--cyan-light)}
main.page .mq-pay .m-wa{text-align:right;font-size:14.5px;color:var(--ink-soft);white-space:nowrap}
main.page .mq-pay .m-wrow.m-base .m-wbar i{background:var(--navy)}
main.page .mq-pay .m-wrow.m-base .m-wl,main.page .mq-pay .m-wrow.m-base .m-wa{color:var(--text)}
main.page .mq-pay .m-wrow.m-tot{background:var(--tint);border-radius:10px;border-bottom:0;margin-top:6px;padding:14px}
main.page .mq-pay .m-wrow.m-tot .m-wl{color:var(--navy);font-weight:700;font-size:15.5px}
main.page .mq-pay .m-wrow.m-tot .m-wbar{height:22px;background:#fff}
main.page .mq-pay .m-wrow.m-tot .m-wbar i{background:var(--navy)}
main.page .mq-pay .m-wrow.m-tot .m-wa{color:var(--navy);font-weight:700;font-size:17px}
@media(max-width:599px){main.page .mq-pay .m-wrow{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
main.page .mq-pay .m-wbar{grid-column:1 / -1;grid-row:2}
}
main.page .mq-pay .m-info{display:flex;gap:16px;align-items:flex-start;margin-top:24px;background:var(--paper-tint);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
main.page .mq-pay .m-info>svg{width:24px;height:24px;color:var(--hl);flex:none;margin-top:1px}
main.page .mq-pay .m-info b{display:block;font-size:14px;color:var(--navy);font-weight:600}
main.page .mq-pay .m-info b em{font-style:italic;font-weight:600}
main.page .mq-pay .m-info p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:3px}
main.page .mq-pay .m-join{display:flex;flex-direction:column;align-items:center;margin:28px 0;color:var(--hl)}
main.page .mq-pay .m-join::before{content:"";width:1px;height:36px;background:linear-gradient(180deg,rgba(30,136,181,0),var(--hl))}
main.page .mq-pay .m-join svg{width:22px;height:22px;margin-top:4px}
main.page .mq-pay .m-simc{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:36px;
  background:linear-gradient(135deg,#FFFFFF 0%,var(--paper-tint) 48%,var(--cyan-tint) 100%);
  border:1px solid #CFE2EE;border-radius:22px;padding:44px 40px;box-shadow:var(--shadow-m);scroll-margin-top:88px}
main.page .mq-pay .m-simc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan) 68%,rgba(69,189,223,0))}
@media(min-width:960px){main.page .mq-pay .m-simc{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding:56px}
}
@media(max-width:599px){main.page .mq-pay .m-simc{padding:32px 22px;border-radius:16px}
}
main.page .mq-pay .m-simc .m-txt{margin-top:16px;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.55;color:var(--ink-soft);max-width:48ch}
main.page .mq-pay .m-simc .m-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
main.page .mq-pay .m-simc .m-perso{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
main.page .mq-pay .m-simc .m-perso .m-ico{width:17px;height:17px;color:var(--cyan-deep)}
main.page .mq-pay .m-gets{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-s)}
main.page .mq-pay .m-gets-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
main.page .mq-pay .m-gets ul{list-style:none;margin:12px 0 0;padding:0}
main.page .mq-pay .m-gets li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--text)}
main.page .mq-pay .m-gets li:first-child{border-top:0}
main.page .mq-pay .m-gets li .m-ico{width:19px;height:19px;color:var(--hl);margin-top:2px}
main.page .mq-pay .m-gets .m-when{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--tint);
  font-size:14px;font-weight:600;color:var(--navy)}
main.page .mq-pay .m-gets .m-when .m-ico{width:18px;height:18px}
main.page .mq-pay .m-cond{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:56px}
@media(min-width:720px) and (max-width:1023px){main.page .mq-pay .m-cond{grid-template-columns:repeat(2,minmax(0,1fr))}
main.page .mq-pay .m-cond .m-c3{grid-column:1 / -1}
}
@media(min-width:1024px){main.page .mq-pay .m-cond{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
main.page .mq-pay .m-cc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px 30px;box-shadow:var(--shadow-s)}
main.page .mq-pay .m-cc::before{content:"";position:absolute;left:32px;top:0;width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--cyan)}
main.page .mq-pay .m-cc-h{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--cyan-deep)}
main.page .mq-pay .m-cc .m-v{margin-top:18px;font-size:clamp(46px,4.4vw,60px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--navy)}
main.page .mq-pay .m-cc .m-v.m-w{font-size:clamp(28px,2.5vw,34px);letter-spacing:-.025em;line-height:1.12}
main.page .mq-pay .m-cc .m-s1{margin-top:10px;font-size:17px;font-weight:600;color:var(--navy)}
main.page .mq-pay .m-cc .m-s2{margin-top:8px;font-size:15px;color:var(--ink-soft);line-height:1.5}
main.page .mq-pay .m-pts{list-style:none;margin:auto 0 0;padding:22px 0 0}
main.page .mq-pay .m-pts li{display:flex;align-items:flex-start;gap:11px;padding:12px 0 0;font-size:15px;line-height:1.5;color:var(--text)}
main.page .mq-pay .m-pts li:first-child{border-top:1px solid var(--line);padding-top:18px}
main.page .mq-pay .m-pts .m-ico{width:19px;height:19px;color:var(--navy);margin-top:2px}
main.page .mq-pay .m-pts.m-ok .m-ico{color:var(--ok-ink);stroke-width:2.2}
main.page .mq-pay .m-pts.m-ok li{font-weight:600;color:var(--navy)}
main.page .mq-pay .m-reg{margin-top:52px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border)}
@media(min-width:860px){main.page .mq-pay .m-reg{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px}
}
main.page .mq-pay .m-reg-i{display:grid;align-content:start;grid-template-columns:44px minmax(0,1fr);gap:6px 18px;padding:30px 0;border-bottom:1px solid var(--border)}
@media(min-width:860px){main.page .mq-pay .m-reg-i{border-bottom:0}
}
main.page .mq-pay .m-reg-i>.m-ico{grid-row:span 3;width:30px;height:30px;stroke-width:1.5;color:var(--navy);margin-top:2px}
main.page .mq-pay .m-reg-i .m-k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-deep)}
main.page .mq-pay .m-reg-i h3{font-size:18px}
main.page .mq-pay .m-reg-i p{font-size:15px;color:var(--ink-soft);line-height:1.55}
main.page .mq-pay .m-reg-i .m-vf{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--cyan);min-height:32px}
main.page .mq-pay .m-reg-i .m-vf:hover{color:var(--hl)}
main.page .mq-pay .m-reg-i .m-vf .m-ico{width:14px;height:14px}
main.page .mq-pay .m-vs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:56px;filter:drop-shadow(0 14px 22px rgba(15,44,67,.07))}
main.page .mq-pay .m-vs-row{display:contents}
main.page .mq-pay .m-vs-c{background:#fff;border-left:1px solid var(--border);border-right:1px solid var(--border);padding:20px 32px;border-top:1px solid var(--line)}
main.page .mq-pay .m-vs-head .m-vs-c{border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:34px 32px 26px;position:relative}
main.page .mq-pay .m-vs-head .m-vs-c::before{content:"";position:absolute;left:32px;top:0;width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--cyan)}
main.page .mq-pay .m-vs-head .m-vs-c.m-b::before{background:#B9CFDF}
main.page .mq-pay .m-vs-last .m-vs-c{border-bottom:1px solid var(--border);border-radius:0 0 20px 20px;padding-bottom:30px}
main.page .mq-pay .m-vs-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:6px 12px}
main.page .mq-pay .m-vs-c.m-a .m-vs-tag{background:var(--navy);color:#fff}
main.page .mq-pay .m-vs-c.m-b .m-vs-tag{background:#fff;color:var(--navy);border:1px solid var(--border)}
main.page .mq-pay .m-vs-head h3{margin-top:16px;font-size:clamp(19px,1.3rem,23px);line-height:1.3}
main.page .mq-pay .m-vs-or{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--border);box-shadow:0 8px 18px -10px rgba(16,65,108,.5);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--hl);font-style:italic}
main.page .mq-pay .m-vs .m-k{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--cyan-deep)}
main.page .mq-pay .m-vs-c.m-b .m-k{color:var(--muted)}
main.page .mq-pay .m-vs .m-k .m-ico{width:18px;height:18px}
main.page .mq-pay .m-vs .m-v{margin-top:6px;font-size:16.5px;font-weight:600;color:var(--navy);line-height:1.45}
@media(max-width:699px){main.page .mq-pay .m-vs{column-gap:10px}
main.page .mq-pay .m-vs-c{padding:14px 14px}
main.page .mq-pay .m-vs-head .m-vs-c{padding:24px 14px 18px;border-radius:14px 14px 0 0}
main.page .mq-pay .m-vs-head .m-vs-c::before{left:14px}
main.page .mq-pay .m-vs-last .m-vs-c{border-radius:0 0 14px 14px;padding-bottom:18px}
main.page .mq-pay .m-vs-tag{font-size:10.5px;padding:5px 9px;letter-spacing:.06em}
main.page .mq-pay .m-vs-head h3{font-size:15.5px;margin-top:12px}
main.page .mq-pay .m-vs .m-k{font-size:10.5px;letter-spacing:.06em}
main.page .mq-pay .m-vs .m-k .m-ico{display:none}
main.page .mq-pay .m-vs .m-v{font-size:14.5px}
main.page .mq-pay .m-vs-or{top:auto;bottom:auto;width:34px;height:34px;font-size:12px;top:-17px}
}
main.page .mq-pay .m-verdict{max-width:760px;margin:52px auto 0;text-align:center}
main.page .mq-pay .m-verdict::before{content:"";display:block;width:48px;height:2px;border-radius:2px;background:var(--cyan);margin:0 auto 20px}
main.page .mq-pay .m-verdict .m-vt{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);font-weight:700;color:var(--navy);line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
main.page .mq-pay .m-verdict .m-vt span{color:var(--hl)}
main.page .mq-pay .m-verdict p:not(.m-vt){margin-top:14px;font-size:clamp(1rem,.97rem + .2vw,1.1rem);line-height:1.65;color:var(--ink-soft)}
main.page .mq-pay .m-verdict .m-vlnk{margin-top:14px;font-size:15px}
main.page .mq-pay .m-final{background:var(--navy);padding:var(--sec) 0}
main.page .mq-pay .m-final .m-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
main.page .mq-pay .m-final h2{color:#fff}
main.page .mq-pay .m-final p{color:var(--on-navy);margin-top:14px;max-width:48ch;font-size:18px}
main.page .mq-pay .m-final .m-alt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
main.page .mq-pay .m-final .m-alt a:not(.m-btn){font-size:14px;color:var(--on-navy);text-underline-offset:3px}
main.page .mq-pay .m-grp{padding:56px 0;border-top:1px solid var(--line)}
main.page .mq-pay .m-grp h2{font-size:21px}
main.page .mq-pay .m-grp>.m-wrap>p{margin-top:12px;font-size:15px;color:var(--muted);max-width:72ch}
main.page .mq-pay .m-grp-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:22px 0 0;padding:0;list-style:none;font-size:14.5px}
@media(min-width:860px){main.page .mq-pay .m-grp-l{grid-template-columns:repeat(4,minmax(0,1fr))}
}
main.page .mq-pay .m-grp-l b{display:block;font-weight:600}
main.page .mq-pay .m-grp-l span{color:var(--muted)}

/* ── hiw : maquette appliquée le 01.10.2026 */
main.page .mq-hiw :is(h1,h2,h3,h4){color:inherit}
main.page .mq-hiw{
  --navy:#10416C; --navy-dark:#0B3055; --cyan:#45BDDF; --cyan-light:#81CEE2;
  --cyan-deep:#2A7691; --hl:#1E88B5;
  --text:#0F2C43; --muted:#566D80; --ink-soft:#40586C;
  --border:#D6E1EA; --line:#E4EBF1; --mist:#EDF3F9; --stone:#F4F5F6;
  --paper-tint:#F6FAFD; --on-navy:#C6DAE8; --tint:#E6F0F7; --cyan-tint:#E4F5FA;
  --ok-bg:#EEF7F1; --ok-line:#CFE6D8; --ok-ink:#2F7A52;
  --shadow-s:0 1px 2px rgba(15,44,67,.04),0 4px 12px -6px rgba(15,44,67,.10);
  --shadow-m:0 2px 4px rgba(15,44,67,.04),0 18px 40px -22px rgba(15,44,67,.34);
  --shadow-h:0 4px 10px rgba(15,44,67,.06),0 22px 44px -20px rgba(16,65,108,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
   --sec:88px;
}
@media(max-width:767px){main.page .mq-hiw{--sec:60px}
}
main.page .mq-hiw *{box-sizing:border-box}
main.page .mq-hiw{margin:0;background:#fff;color:var(--text);
  font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main.page .mq-hiw h1,main.page .mq-hiw h2,main.page .mq-hiw h3{margin:0;color:var(--navy);text-wrap:balance}
main.page .mq-hiw h1{font-size:clamp(2rem,1.458rem + 2.708vw,3.625rem);line-height:1.1;letter-spacing:-.022em;font-weight:700}
main.page .mq-hiw h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
main.page .mq-hiw h3{font-size:16.5px;line-height:1.35;font-weight:600}
main.page .mq-hiw p{margin:0}
main.page .mq-hiw a{color:inherit}
main.page .mq-hiw .m-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
main.page .mq-hiw .m-wrap-l{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
main.page .mq-hiw .m-sec{padding:var(--sec) 0;position:relative}
main.page .mq-hiw .m-mist{background:var(--mist)}
main.page .mq-hiw .m-lead{font-size:clamp(1.0625rem,1.021rem + .208vw,1.1875rem);line-height:1.6;color:var(--ink-soft)}
main.page .mq-hiw .m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;
  padding:0 24px;border-radius:6px;font-weight:500;font-size:15px;text-decoration:none;
  border:1px solid transparent;transition:background 150ms ease-out}
main.page .mq-hiw .m-btn-p{background:var(--navy);color:#fff}
main.page .mq-hiw .m-btn-p:hover{background:var(--navy-dark)}
main.page .mq-hiw .m-btn-c{background:var(--cyan);color:var(--navy-dark);font-weight:600}
main.page .mq-hiw .m-lnk{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;min-height:44px}
main.page .mq-hiw .m-lnk:hover{color:var(--hl)}
main.page .mq-hiw .m-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
main.page .mq-hiw .m-num{font-variant-numeric:tabular-nums}
main.page .mq-hiw .m-eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--cyan-deep);margin:0 0 14px}
main.page .mq-hiw .m-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-hiw .m-shead .m-sub{margin-top:12px;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);color:#5E7890;line-height:1.5}
main.page .mq-hiw .m-shead.m-c{text-align:center}
main.page .mq-hiw .m-shead.m-c .m-eyebrow{justify-content:center}
main.page .mq-hiw .m-shead.m-c .m-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-hiw .m-intro{background:linear-gradient(180deg,var(--paper-tint) 0%,#fff 80%);padding:36px 0 0;position:relative}
main.page .mq-hiw .m-intro::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan) 58%,rgba(69,189,223,0))}
main.page .mq-hiw .m-crumb{font-size:14px;color:var(--navy);display:flex;align-items:center;gap:10px}
main.page .mq-hiw .m-crumb a{text-decoration:none;color:var(--navy)}
main.page .mq-hiw .m-crumb svg{width:14px;height:14px;color:var(--muted)}
main.page .mq-hiw .m-intro .m-eyebrow{margin-top:40px}
main.page .mq-hiw .m-intro h1{margin-top:4px}
main.page .mq-hiw .m-intro .m-lead{margin-top:18px;max-width:52ch;font-size:clamp(1.1rem,1rem + .45vw,1.35rem);color:#5E7890}
main.page .mq-hiw .m-intro-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
main.page .mq-hiw .m-toc{margin-top:52px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.7)}
main.page .mq-hiw .m-toc .m-wrap{display:flex;align-items:center;gap:28px;min-height:60px}
main.page .mq-hiw .m-toc-t{flex:none;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
main.page .mq-hiw .m-toc ol{list-style:none;margin:0;padding:0;display:flex;flex:1;justify-content:space-between;align-items:center}
main.page .mq-hiw .m-toc li{display:flex;align-items:center}
main.page .mq-hiw .m-toc li+li::before{content:"";width:1px;height:16px;background:var(--border);margin-right:clamp(10px,1.4vw,22px)}
main.page .mq-hiw .m-toc a{position:relative;display:block;padding:18px 0;margin-right:clamp(10px,1.4vw,22px);font-size:14px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:color 160ms var(--ease)}
main.page .mq-hiw .m-toc li:last-child a{margin-right:0}
main.page .mq-hiw .m-toc a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease)}
main.page .mq-hiw .m-toc a:hover{color:var(--navy)}
main.page .mq-hiw .m-toc a:hover::after{transform:scaleX(1)}
@media(max-width:1079px){main.page .mq-hiw .m-toc .m-wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:16px;padding-bottom:8px}
main.page .mq-hiw .m-toc-t{padding-bottom:6px}
main.page .mq-hiw .m-toc ol{flex-direction:column;align-items:stretch}
main.page .mq-hiw .m-toc li+li::before{display:none}
main.page .mq-hiw .m-toc li{border-top:1px solid var(--line)}
main.page .mq-hiw .m-toc a{padding:12px 0;margin:0;font-size:15px;white-space:normal}
main.page .mq-hiw .m-toc a::after{display:none}
}
main.page .mq-hiw .m-tl{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:52px}
main.page .mq-hiw .m-tl-step{position:relative;padding:0 0 30px 58px}
main.page .mq-hiw .m-tl-n{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(150deg,#15548A 0%,var(--navy-dark) 100%);
  color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;
  box-shadow:0 0 0 5px var(--mist),0 6px 14px -8px rgba(16,65,108,.6)}
main.page .mq-hiw .m-tl-step::before{content:"";position:absolute;left:18.5px;top:42px;bottom:0;width:1px;background:#C9D8E4}
main.page .mq-hiw .m-tl-step:last-child::before{display:none}
main.page .mq-hiw .m-tl-delay{display:flex;align-items:center;gap:6px;margin-top:14px;
  font-size:11.5px;letter-spacing:.075em;text-transform:uppercase;font-weight:600;
  color:var(--cyan-deep);line-height:1.35}
main.page .mq-hiw .m-tl-delay svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main.page .mq-hiw .m-tl-step h3{margin-top:7px;font-size:17px;font-weight:700;letter-spacing:-.01em}
main.page .mq-hiw .m-tl-lead{margin-top:8px;font-size:14px;line-height:1.55;color:#5E7890}
main.page .mq-hiw .m-tl-more{margin-top:12px}
main.page .mq-hiw .m-tl-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--navy);min-height:28px}
main.page .mq-hiw .m-tl-more summary::-webkit-details-marker{display:none}
main.page .mq-hiw .m-tl-more summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform 200ms var(--ease)}
main.page .mq-hiw .m-tl-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
main.page .mq-hiw .m-tl-more summary:hover{color:var(--hl)}
main.page .mq-hiw .m-tl-more p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);
  padding-left:12px;border-left:2px solid #CFE0EC}
@media(min-width:1100px){main.page .mq-hiw .m-tl{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:26px;
      grid-template-rows:auto auto auto 1fr auto}
main.page .mq-hiw .m-tl-step{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;padding:0}
main.page .mq-hiw .m-tl-step::before{display:none}
main.page .mq-hiw .m-tl-head{position:relative;height:38px}
main.page .mq-hiw .m-tl-n{position:relative;box-shadow:0 0 0 6px var(--mist),0 6px 14px -8px rgba(16,65,108,.6)}
main.page .mq-hiw .m-tl-head::after{content:"";position:absolute;left:50px;right:-20px;top:19px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--navy) 0%,#9FC2D8 100%);opacity:.35}
main.page .mq-hiw .m-tl-step:last-child .m-tl-head::after{display:none}
main.page .mq-hiw .m-tl-delay{margin-top:16px}
main.page .mq-hiw .m-tl-step h3{margin-top:6px}
main.page .mq-hiw .m-tl-more{align-self:start;margin-top:14px}
}
main.page .mq-hiw .m-tl-cta{margin-top:48px}
main.page .mq-hiw .m-collab{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
@media(min-width:1000px){main.page .mq-hiw .m-collab{grid-template-columns:.9fr 1.1fr;gap:56px}
}
main.page .mq-hiw .m-shead h2 .m-hl,main.page .mq-hiw .m-fees h2 .m-hl{color:var(--hl)}
main.page .mq-hiw .m-bens{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
main.page .mq-hiw .m-bens li{display:flex;gap:16px;align-items:flex-start}
main.page .mq-hiw .m-bens .m-bi{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,#fff,var(--tint));border:1px solid #D5E5F0;
  color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
main.page .mq-hiw .m-bens .m-bi svg{width:22px;height:22px}
main.page .mq-hiw .m-bens b{display:block;font-size:16px;font-weight:600;color:var(--navy)}
main.page .mq-hiw .m-bens span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:2px;line-height:1.5}
main.page .mq-hiw .m-diagram{width:100%;height:auto;display:block;overflow:visible}
main.page .mq-hiw .m-lk{transition:opacity 260ms var(--ease)}
main.page .mq-hiw .m-link{transition:opacity 260ms var(--ease),stroke-width 260ms var(--ease)}
main.page .mq-hiw .m-flow{animation:m-flux 3.4s linear infinite}
@keyframes m-flux{to{stroke-dashoffset:-44}}
main.page .mq-hiw .m-pulse{animation:m-souffle 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes m-souffle{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){main.page .mq-hiw .m-flow,main.page .mq-hiw .m-pulse,main.page .mq-hiw .m-dot{animation:none}
main.page .mq-hiw .m-dot{display:none}
}
main.page .mq-hiw .m-dmob{display:none}
@media(max-width:639px){
main.page .mq-hiw .m-dmob{display:flex;flex-direction:column;border-top:1px solid var(--line)}
main.page .mq-hiw .m-dmob div{padding:16px 0;border-bottom:1px solid var(--line)}
main.page .mq-hiw .m-dmob b{display:block;color:var(--navy);font-size:15.5px}
main.page .mq-hiw .m-dmob span{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
main.page .mq-hiw .m-dmob .m-rel{color:var(--hl);font-weight:600;font-size:13.5px;margin-top:6px}
}
main.page .mq-hiw .m-pico{position:relative;overflow:hidden;
  width:76px;height:76px;border-radius:22px;display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(150deg,#FFFFFF 0%,#DCEDF8 100%);border:1px solid #BFD8EA;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -10px rgba(16,65,108,.42);color:var(--navy);
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),filter 240ms var(--ease)}
main.page .mq-hiw .m-pico::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 88% at 24% 4%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%)}
main.page .mq-hiw .m-pico svg{position:relative;width:38px;height:38px}
main.page .mq-hiw .m-pico .m-fill{fill:var(--cyan);opacity:.26;stroke:none}
main.page .mq-hiw .m-pico .m-st{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main.page .mq-hiw .m-money{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1040px){main.page .mq-hiw .m-money{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
}
main.page .mq-hiw .m-money-l p.m-txt{margin-top:22px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:34ch}
@media(min-width:1040px){main.page .mq-hiw .m-money-l{position:sticky;top:96px}
}
main.page .mq-hiw .m-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-m);padding:28px}
@media(max-width:767px){main.page .mq-hiw .m-card{padding:18px;border-radius:12px}
}
main.page .mq-hiw .m-sum{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:700px){main.page .mq-hiw .m-sum{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.12fr);align-items:stretch;gap:8px}
}
main.page .mq-hiw .m-sum-c{display:flex;align-items:center;gap:12px;background:var(--paper-tint);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0;
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),filter 240ms var(--ease)}
main.page .mq-hiw .m-sum-c:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-h);filter:brightness(1.02)}
main.page .mq-hiw .m-sum-c:hover .m-pico{transform:scale(1.06)}
main.page .mq-hiw .m-sum-c .m-pico{width:54px;height:54px;border-radius:16px}
main.page .mq-hiw .m-sum-c .m-pico svg{width:28px;height:28px}
main.page .mq-hiw .m-sum-c b{display:block;font-size:clamp(16px,1.3vw,19px);font-weight:700;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
main.page .mq-hiw .m-sum-c div span{display:block;font-size:13.5px;color:var(--muted)}
main.page .mq-hiw .m-sum-c.m-net{background:linear-gradient(150deg,var(--navy) 0%,#15548A 100%);border-color:var(--navy);box-shadow:0 14px 30px -16px rgba(16,65,108,.6)}
main.page .mq-hiw .m-sum-c.m-net b{color:#fff;font-size:clamp(17px,1.45vw,21px)}
main.page .mq-hiw .m-sum-c.m-net div span{color:var(--on-navy)}
main.page .mq-hiw .m-sum-c.m-net .m-pico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);box-shadow:none;color:#fff}
main.page .mq-hiw .m-sum-c.m-net .m-pico .m-fill{fill:var(--cyan-light);opacity:.4}
main.page .mq-hiw .m-sum-a{color:var(--hl);display:flex;align-items:center;justify-content:center}
main.page .mq-hiw .m-sum-a svg{width:20px;height:20px}
@media(max-width:699px){main.page .mq-hiw .m-sum-a svg{transform:rotate(90deg)}
}
main.page .mq-hiw .m-hyp{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.5}
main.page .mq-hiw .m-card h3.m-rd{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:20px;font-weight:700}
main.page .mq-hiw .m-stage{margin-top:18px}
main.page .mq-hiw .m-stage-h{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:10px;padding:11px 14px;font-size:15px;font-weight:500;color:var(--navy)}
main.page .mq-hiw .m-stage-h i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
main.page .mq-hiw .m-wrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) 118px;gap:16px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);transition:background 180ms var(--ease)}
main.page .mq-hiw .m-wrow:hover{background:var(--paper-tint)}
main.page .mq-hiw .m-wl{font-size:14.5px;color:var(--ink-soft)}
main.page .mq-hiw .m-wbar{height:14px;background:#F0F5F9;border-radius:4px;overflow:hidden}
main.page .mq-hiw .m-wbar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--cyan-light)}
main.page .mq-hiw .m-wa{text-align:right;font-size:14.5px;color:var(--ink-soft);white-space:nowrap}
main.page .mq-hiw .m-wrow.m-base .m-wbar i{background:var(--navy)}
main.page .mq-hiw .m-wrow.m-base .m-wl,main.page .mq-hiw .m-wrow.m-base .m-wa{color:var(--text)}
main.page .mq-hiw .m-wrow.m-tot{background:var(--tint);border-radius:10px;border-bottom:0;margin-top:6px;padding:14px}
main.page .mq-hiw .m-wrow.m-tot .m-wl{color:var(--navy);font-weight:700;font-size:15.5px}
main.page .mq-hiw .m-wrow.m-tot .m-wbar{height:22px;background:#fff}
main.page .mq-hiw .m-wrow.m-tot .m-wbar i{background:var(--navy)}
main.page .mq-hiw .m-wrow.m-tot .m-wa{color:var(--navy);font-weight:700;font-size:17px}
@media(max-width:599px){main.page .mq-hiw .m-wrow{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
main.page .mq-hiw .m-wbar{grid-column:1 / -1;grid-row:2}
}
main.page .mq-hiw .m-info{display:flex;gap:16px;align-items:flex-start;margin-top:24px;background:var(--paper-tint);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
main.page .mq-hiw .m-info>svg{width:24px;height:24px;color:var(--hl);flex:none;margin-top:1px}
main.page .mq-hiw .m-info b{display:block;font-size:14px;color:var(--navy);font-weight:600}
main.page .mq-hiw .m-info b em{font-style:italic;font-weight:600}
main.page .mq-hiw .m-info p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:3px}
main.page .mq-hiw .m-fees-top{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
@media(min-width:960px){main.page .mq-hiw .m-fees-top{grid-template-columns:minmax(0,1fr) 372px;gap:60px;align-items:center}
}
main.page .mq-hiw .m-fees h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1.06;letter-spacing:-.025em}
main.page .mq-hiw .m-price{position:relative;overflow:hidden;text-align:center;color:var(--navy);
  background:linear-gradient(160deg,#FFFFFF 0%,var(--paper-tint) 58%,#E9F3FA 100%);
  border:1px solid #D3E4EF;border-radius:20px;padding:32px 26px 28px;
  box-shadow:0 10px 26px -18px rgba(16,65,108,.38);transition:transform 260ms var(--ease),box-shadow 260ms var(--ease)}
main.page .mq-hiw .m-price::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan) 68%,rgba(69,189,223,0))}
main.page .mq-hiw .m-price:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(16,65,108,.45)}
main.page .mq-hiw .m-price .m-big{position:relative;font-size:clamp(58px,6vw,82px);font-weight:700;line-height:1;letter-spacing:-.045em;color:var(--navy)}
main.page .mq-hiw .m-price .m-of{position:relative;margin-top:8px;font-size:16.5px;font-weight:500;color:var(--muted)}
main.page .mq-hiw .m-price .m-min{position:relative;display:inline-block;margin-top:18px;background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;padding:9px 20px;border-radius:999px}
main.page .mq-hiw .m-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

main.page .mq-hiw .m-lbl{display:flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:68px 0 30px}
main.page .mq-hiw .m-lbl::after{content:"";width:48px;height:1px;background:var(--cyan)}
main.page .mq-hiw .m-incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(min-width:680px){main.page .mq-hiw .m-incl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1100px){main.page .mq-hiw .m-incl{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto 1fr}
main.page .mq-hiw .m-incl>div{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;row-gap:0}
main.page .mq-hiw .m-incl>div h3{margin-top:18px}
main.page .mq-hiw .m-incl>div p{margin-top:7px}
}
main.page .mq-hiw .m-incl div{text-align:center;padding:24px 12px 22px;border-radius:16px;border:1px solid transparent;transition:transform 240ms var(--ease),background 240ms var(--ease),border-color 240ms var(--ease),box-shadow 240ms var(--ease)}
main.page .mq-hiw .m-incl div:hover{transform:translateY(-4px);background:#fff;border-color:var(--line);box-shadow:var(--shadow-h)}
main.page .mq-hiw .m-incl div:hover .m-pico{transform:scale(1.07);filter:brightness(1.03)}
main.page .mq-hiw .m-incl .m-pico{margin:0 auto}
main.page .mq-hiw .m-incl h3{margin-top:18px;font-size:18px;letter-spacing:-.01em}
main.page .mq-hiw .m-incl p{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
main.page .mq-hiw .m-notincl{margin-top:14px;font-size:13px;line-height:1.55;color:var(--muted);max-width:60ch}
main.page .mq-hiw .m-reass{display:flex;gap:20px;align-items:center;margin-top:34px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:14px;padding:20px 24px}
main.page .mq-hiw .m-reass .m-ok{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ok-ink);display:flex;align-items:center;justify-content:center;flex:none}
main.page .mq-hiw .m-reass .m-ok svg{width:22px;height:22px}
main.page .mq-hiw .m-reass .m-bar{width:1px;align-self:stretch;background:var(--ok-line)}
main.page .mq-hiw .m-reass b{display:block;font-size:clamp(15.5px,1.15rem,19px);font-weight:700;color:var(--navy);line-height:1.4}
main.page .mq-hiw .m-reass b em{font-style:normal;color:var(--ok-ink);margin:0 8px}
main.page .mq-hiw .m-reass span{display:block;margin-top:4px;font-size:15px;color:var(--ink-soft)}
@media(max-width:599px){main.page .mq-hiw .m-reass{flex-direction:column;align-items:flex-start}
main.page .mq-hiw .m-reass .m-bar{display:none}
}
main.page .mq-hiw .m-pay{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center;margin-top:44px}
@media(min-width:960px){main.page .mq-hiw .m-pay{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}
}
main.page .mq-hiw .m-pay-key{display:flex;align-items:center;gap:26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 32px;box-shadow:var(--shadow-m)}
main.page .mq-hiw .m-pay-key .m-big{font-size:clamp(72px,8vw,104px);font-weight:700;color:var(--navy);line-height:.9;letter-spacing:-.05em}
main.page .mq-hiw .m-pay-key .m-u{font-size:22px;font-weight:700;color:var(--navy);line-height:1.2}
main.page .mq-hiw .m-pay-key .m-u small{display:block;margin-top:6px;font-size:15px;font-weight:400;color:var(--ink-soft);line-height:1.5}
main.page .mq-hiw .m-pay-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
main.page .mq-hiw .m-pay-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
main.page .mq-hiw .m-pay-list svg{width:24px;height:24px;color:var(--hl);margin-top:2px}
main.page .mq-hiw .m-pay-list b{display:block;color:var(--navy);font-size:17px}
main.page .mq-hiw .m-pay-list span{display:block;margin-top:4px;color:var(--ink-soft);font-size:15px;line-height:1.55}
main.page .mq-hiw .m-perm{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
main.page .mq-hiw .m-prow{position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px 30px;align-items:center;
  padding:26px;border:1px solid var(--line);border-radius:16px;background:#fff;
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
main.page .mq-hiw .m-prow:hover{border-color:#C9DCEA;box-shadow:var(--shadow-s)}
@media(min-width:900px){main.page .mq-hiw .m-prow{grid-template-columns:220px minmax(0,1fr);padding:30px 190px 30px 30px}
}
main.page .mq-hiw .m-ptag{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:13px;font-weight:600;color:var(--navy);background:var(--tint);border-radius:999px;padding:7px 14px}
main.page .mq-hiw .m-prow h3{font-size:18px}
main.page .mq-hiw .m-prow p{margin-top:5px;font-size:15px;color:var(--ink-soft);line-height:1.55;max-width:62ch}
main.page .mq-hiw .m-pmark{position:absolute;right:26px;top:50%;transform:translateY(-50%);
  width:130px;height:130px;color:var(--navy);opacity:.13;pointer-events:none;
  transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
main.page .mq-hiw .m-prow:hover .m-pmark{opacity:.16;transform:translateY(-50%) scale(1.03)}
main.page .mq-hiw .m-pmark svg{width:100%;height:100%;display:block}
main.page .mq-hiw .m-pmark .m-fill{fill:var(--cyan);opacity:.5;stroke:none}
main.page .mq-hiw .m-pmark .m-st{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:899px){main.page .mq-hiw .m-pmark{display:none}
}
main.page .mq-hiw .m-band{display:flex;gap:18px;align-items:center;margin-top:22px;padding:4px 0}
main.page .mq-hiw .m-band svg{width:26px;height:26px;color:var(--hl);flex:none}
main.page .mq-hiw .m-band b{color:var(--navy);font-size:15.5px}
main.page .mq-hiw .m-band span{color:var(--ink-soft);font-size:15px}
main.page .mq-hiw .m-fine{margin-top:10px;font-size:12.5px;color:var(--muted)}
main.page .mq-hiw .m-ends{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media(min-width:960px){main.page .mq-hiw .m-ends{grid-template-columns:360px minmax(0,1fr);gap:64px}
}
main.page .mq-hiw .m-qa{border-top:2px solid var(--navy)}
main.page .mq-hiw .m-qa div{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 32px;padding:24px 0;border-bottom:1px solid var(--border)}
@media(min-width:720px){main.page .mq-hiw .m-qa div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
main.page .mq-hiw .m-qa dt{font-size:17.5px;font-weight:600;color:var(--navy);line-height:1.35}
main.page .mq-hiw .m-qa dd{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
main.page .mq-hiw .m-qa dl{margin:0}
main.page .mq-hiw .m-faq{max-width:80ch;margin-top:32px}
main.page .mq-hiw .m-faq details{border-bottom:1px solid var(--border);padding:16px 0}
main.page .mq-hiw .m-faq summary{cursor:pointer;font-weight:600;list-style:none;color:var(--text)}
main.page .mq-hiw .m-faq summary::-webkit-details-marker{display:none}
main.page .mq-hiw .m-faq p{margin-top:12px;font-size:15px;color:var(--muted)}
main.page .mq-hiw .m-final{background:var(--navy);padding:var(--sec) 0}
main.page .mq-hiw .m-final .m-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
main.page .mq-hiw .m-final h2{color:#fff}
main.page .mq-hiw .m-final p{color:var(--on-navy);margin-top:14px;max-width:46ch;font-size:18px}
main.page .mq-hiw .m-final a.m-tel{font-size:14px;color:var(--on-navy)}

/* ── eor : maquette appliquée le 01.10.2026 */
main.page .mq-eor :is(h1,h2,h3,h4){color:inherit}
main.page .mq-eor{
  --navy:#10416C; --navy-dark:#0B3055; --cyan:#45BDDF; --cyan-light:#81CEE2;
  --cyan-deep:#2A7691; --hl:#1E88B5;
  --text:#0F2C43; --muted:#566D80; --ink-soft:#40586C;
  --border:#D6E1EA; --line:#E4EBF1; --mist:#EDF3F9; --stone:#F4F5F6;
  --paper-tint:#F6FAFD; --on-navy:#C6DAE8; --tint:#E6F0F7; --cyan-tint:#E4F5FA;
  --ok-bg:#EEF7F1; --ok-line:#CFE6D8; --ok-ink:#2F7A52;
  --shadow-s:0 1px 2px rgba(15,44,67,.04),0 4px 12px -6px rgba(15,44,67,.10);
  --shadow-m:0 2px 4px rgba(15,44,67,.04),0 18px 40px -22px rgba(15,44,67,.34);
  --shadow-h:0 4px 10px rgba(15,44,67,.06),0 22px 44px -20px rgba(16,65,108,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
   --sec:96px;
}
@media(max-width:767px){main.page .mq-eor{--sec:64px}
}
main.page .mq-eor *{box-sizing:border-box}
main.page .mq-eor{margin:0;background:#fff;color:var(--text);
  font-family:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main.page .mq-eor h1,main.page .mq-eor h2,main.page .mq-eor h3{margin:0;color:var(--navy);text-wrap:balance}
main.page .mq-eor h1{font-size:clamp(2.1rem,1.5rem + 2.9vw,3.75rem);line-height:1.06;letter-spacing:-.025em;font-weight:700}
main.page .mq-eor h2{font-size:clamp(1.75rem,1.3rem + 1.7vw,2.7rem);line-height:1.12;letter-spacing:-.022em;font-weight:700}
main.page .mq-eor h3{font-size:16.5px;line-height:1.35;font-weight:600}
main.page .mq-eor .m-hl{color:var(--hl)}
main.page .mq-eor p{margin:0}
main.page .mq-eor a{color:inherit}
main.page .mq-eor :focus-visible{outline:3px solid var(--hl);outline-offset:3px;border-radius:4px}
main.page .mq-eor .m-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
main.page .mq-eor .m-sec{padding:var(--sec) 0;position:relative}
main.page .mq-eor .m-mist{background:var(--mist)}
main.page .mq-eor .m-paper{background:var(--paper-tint)}
main.page .mq-eor .m-lead{font-size:clamp(1.0625rem,1.02rem + .25vw,1.2rem);line-height:1.6;color:var(--ink-soft)}
main.page .mq-eor .m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:0 24px;border-radius:6px;font-weight:500;font-size:15px;text-decoration:none;
  border:1px solid transparent;transition:background 150ms ease-out,transform 150ms ease-out}
main.page .mq-eor .m-btn-p{background:var(--navy);color:#fff}
main.page .mq-eor .m-btn-p:hover{background:var(--navy-dark)}
main.page .mq-eor .m-btn-c{background:var(--cyan);color:var(--navy-dark);font-weight:600}
main.page .mq-eor .m-btn-c:hover{background:var(--cyan-light)}
main.page .mq-eor .m-lnk{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;min-height:44px}
main.page .mq-eor .m-lnk:hover{color:var(--hl)}
main.page .mq-eor .m-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
main.page .mq-eor .m-num{font-variant-numeric:tabular-nums}
main.page .mq-eor .m-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main.page .mq-eor .m-eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--cyan-deep);margin:0 0 14px}
main.page .mq-eor .m-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-eor .m-shead .m-sub{margin-top:14px;font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:#5E7890;line-height:1.55;max-width:62ch}
main.page .mq-eor .m-shead.m-c{text-align:center}
main.page .mq-eor .m-shead.m-c .m-eyebrow{justify-content:center}
main.page .mq-eor .m-shead.m-c .m-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
main.page .mq-eor .m-shead.m-c .m-sub{margin-left:auto;margin-right:auto}
main.page .mq-eor .m-shead .m-sub.m-sub-large{max-width:none;font-size:clamp(1rem,.96rem + .2vw,1.12rem)}
main.page .mq-eor .m-hero{background:linear-gradient(180deg,var(--paper-tint) 0%,#fff 72%);padding:32px 0 0;position:relative}
main.page .mq-eor .m-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--cyan) 58%,rgba(69,189,223,0))}
main.page .mq-eor .m-crumb{font-size:14px;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
main.page .mq-eor .m-crumb li{display:flex;align-items:center;gap:10px}
main.page .mq-eor .m-crumb a{text-decoration:none;color:var(--navy)}
main.page .mq-eor .m-crumb a:hover{text-decoration:underline}
main.page .mq-eor .m-crumb svg{width:14px;height:14px;color:var(--muted)}
main.page .mq-eor .m-crumb [aria-current]{color:var(--muted)}
main.page .mq-eor .m-hero-g{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;margin-top:28px}
@media(min-width:960px){main.page .mq-eor .m-hero-g{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
}
main.page .mq-eor .m-aud{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:22px}
main.page .mq-eor .m-aud .m-ico{width:16px;height:16px;color:var(--hl)}
main.page .mq-eor .m-hero .m-lead{margin-top:22px;max-width:50ch}
main.page .mq-eor .m-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
main.page .mq-eor .m-trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin:30px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-soft)}
main.page .mq-eor .m-trust li{display:flex;align-items:center;gap:9px}
main.page .mq-eor .m-trust .m-ico{color:var(--navy);width:19px;height:19px}
main.page .mq-eor .m-hero-media{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-m);aspect-ratio:4/3}
main.page .mq-eor .m-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
main.page .mq-eor .m-situ{margin-top:64px;position:relative;z-index:2}
main.page .mq-eor .m-situ-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 32px}
main.page .mq-eor .m-situ-h h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem)}
main.page .mq-eor .m-situ-h p{color:var(--muted);font-size:15px;max-width:46ch}
main.page .mq-eor .m-situ-p{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-m);
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;list-style:none;padding:0}
@media(min-width:640px){main.page .mq-eor .m-situ-p{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1000px){main.page .mq-eor .m-situ-p{grid-template-columns:repeat(3,minmax(0,1fr))}
}
main.page .mq-eor .m-situ-p li{position:relative;display:flex;flex-direction:column;gap:16px;padding:30px 30px 30px 28px;border-top:1px solid var(--line);transition:background 200ms ease-out}
main.page .mq-eor .m-situ-p li:hover{background:var(--paper-tint)}
main.page .mq-eor .m-situ-p li::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:2px;background:var(--cyan);transform:scaleY(0);transform-origin:top;transition:transform 260ms var(--ease)}
main.page .mq-eor .m-situ-p li:hover::before{transform:scaleY(1)}
main.page .mq-eor .m-situ-p li:first-child{border-top:0}
@media(min-width:640px){main.page .mq-eor .m-situ-p li:nth-child(2){border-top:0}
main.page .mq-eor .m-situ-p li:nth-child(even){border-left:1px solid var(--line)}
}
@media(min-width:1000px){main.page .mq-eor .m-situ-p li:nth-child(3){border-top:0}
main.page .mq-eor .m-situ-p li:nth-child(even){border-left:0}
main.page .mq-eor .m-situ-p li:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
}
main.page .mq-eor .m-situ-i{position:relative;width:48px;height:48px;color:var(--navy);display:flex;align-items:center;justify-content:flex-start;flex:none}
main.page .mq-eor .m-situ-i::before{content:"";position:absolute;left:-7px;top:-5px;width:46px;height:46px;border-radius:50%;background:var(--cyan-tint);z-index:0}
main.page .mq-eor .m-situ-i .m-ico{position:relative;z-index:1;width:42px;height:42px;stroke-width:1.3}
main.page .mq-eor .m-situ-p li:hover .m-situ-i{color:var(--hl)}
@media(max-width:639px){main.page .mq-eor .m-situ-p li{flex-direction:row;gap:18px;padding:22px 20px}
main.page .mq-eor .m-situ-p li::before{top:22px;bottom:22px}
}
main.page .mq-eor .m-situ-p b{display:block;color:var(--navy);font-size:16px;font-weight:600;line-height:1.35}
main.page .mq-eor .m-situ-p span{display:block;margin-top:5px;font-size:14.5px;color:var(--muted);line-height:1.5}
main.page .mq-eor .m-rel{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow-s)}
@media(min-width:900px){main.page .mq-eor .m-rel{grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr);align-items:center;padding:30px 36px}
}
main.page .mq-eor .m-node{display:flex;align-items:center;gap:14px}
main.page .mq-eor .m-node .m-ni{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
main.page .mq-eor .m-node b{display:block;color:var(--navy);font-size:16px}
main.page .mq-eor .m-node small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4}
main.page .mq-eor .m-node.m-cli .m-ni{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
main.page .mq-eor .m-node.m-spts .m-ni{background:var(--tint);color:var(--navy);border:1px solid var(--border)}
main.page .mq-eor .m-node.m-col{justify-content:center;text-align:left;background:var(--paper-tint);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
main.page .mq-eor .m-node.m-col .m-ni{background:#fff;color:var(--navy);border:1px solid var(--border)}
main.page .mq-eor .m-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 0;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-align:center}
main.page .mq-eor .m-link .m-ln{width:1px;height:22px;background:var(--border)}
main.page .mq-eor .m-link .m-arr{width:18px;height:18px}
main.page .mq-eor .m-link.m-cli{color:var(--ok-ink)}
main.page .mq-eor .m-link.m-spts{color:var(--navy)}
@media(min-width:900px){main.page .mq-eor .m-link{flex-direction:row;padding:0 18px;gap:10px}
main.page .mq-eor .m-link .m-ln{width:34px;height:1px}
main.page .mq-eor .m-link .m-t{max-width:10ch;line-height:1.3}
main.page .mq-eor .m-node.m-cli{flex-direction:row-reverse;text-align:right}
}
main.page .mq-eor .m-link .m-arr.m-d{transform:rotate(90deg)}
main.page .mq-eor .m-link .m-arr.m-u{transform:rotate(-90deg)}
@media(min-width:900px){main.page .mq-eor .m-link .m-arr.m-d{transform:none}
main.page .mq-eor .m-link .m-arr.m-u{transform:rotate(180deg)}
}
main.page .mq-eor .m-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px}
@media(min-width:900px){main.page .mq-eor .m-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
main.page .mq-eor .m-side{border-radius:16px;padding:30px 30px 14px;border:1px solid var(--border)}
main.page .mq-eor .m-side.m-spts{background:linear-gradient(180deg,#fff 0%,var(--paper-tint) 100%)}
main.page .mq-eor .m-side.m-cli{background:linear-gradient(180deg,#fff 0%,#F7FBF8 100%);border-color:var(--ok-line)}
main.page .mq-eor .m-side-h{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
main.page .mq-eor .m-side-h .m-tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 11px;flex:none}
main.page .mq-eor .m-side.m-spts .m-tag{background:var(--navy);color:#fff}
main.page .mq-eor .m-side.m-cli .m-tag{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
main.page .mq-eor .m-side-h h3{font-size:clamp(18px,1.2rem,21px);font-weight:700}
main.page .mq-eor .m-side ul{list-style:none;margin:0;padding:0}
main.page .mq-eor .m-side li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
main.page .mq-eor .m-side li:last-child{border-bottom:0}
main.page .mq-eor .m-side li .m-ico{width:22px;height:22px;margin-top:2px}
main.page .mq-eor .m-side.m-spts li .m-ico{color:var(--hl)}
main.page .mq-eor .m-side.m-cli li .m-ico{color:var(--ok-ink)}
main.page .mq-eor .m-side li b{display:block;font-size:15.5px;color:var(--text);font-weight:600}
main.page .mq-eor .m-side li span{display:block;font-size:14.5px;color:var(--muted);margin-top:2px;line-height:1.5}
main.page .mq-eor .m-costs{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-m);overflow:hidden}
main.page .mq-eor .m-ctab{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
main.page .mq-eor .m-ctab th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:right;padding:22px 24px 14px;vertical-align:bottom;line-height:1.35}
main.page .mq-eor .m-ctab th:first-child,main.page .mq-eor .m-ctab td:first-child{text-align:left}
main.page .mq-eor .m-ctab td{padding:20px 24px;text-align:right;border-top:1px solid var(--line);color:var(--ink-soft)}
main.page .mq-eor .m-ctab td:first-child{font-weight:700;color:var(--text);font-size:17px}
main.page .mq-eor .m-ctab .m-tot{background:var(--navy);color:#fff}
main.page .mq-eor .m-ctab th.m-tot{color:#fff;border-radius:12px 12px 0 0;padding-top:24px}
main.page .mq-eor .m-ctab td.m-tot{font-weight:700;font-size:19px;border-top-color:rgba(255,255,255,.14);letter-spacing:-.01em}
main.page .mq-eor .m-ctab tr:last-child td.m-tot{border-radius:0 0 12px 12px}
main.page .mq-eor .m-ctab td.m-gap{color:var(--hl);font-weight:600}
main.page .mq-eor .m-ctab-wrap{padding:0 12px 12px}
main.page .mq-eor .m-ctab .m-u{display:block;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:inherit;opacity:.75;margin-top:3px}
main.page .mq-eor .m-ccards{display:none;list-style:none;margin:0;padding:12px;gap:12px}
main.page .mq-eor .m-ccard{border:1px solid var(--line);border-radius:12px;overflow:hidden}
main.page .mq-eor .m-ccard-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--navy);color:#fff;padding:14px 16px}
main.page .mq-eor .m-ccard-h span{font-size:12.5px;color:var(--on-navy)}
main.page .mq-eor .m-ccard-h b{font-size:19px;white-space:nowrap}
main.page .mq-eor .m-ccard dl{margin:0;padding:6px 16px 10px}
main.page .mq-eor .m-ccard dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
main.page .mq-eor .m-ccard dl div:last-child{border-bottom:0}
main.page .mq-eor .m-ccard dt{color:var(--muted)}
main.page .mq-eor .m-ccard dd{margin:0;font-weight:600;color:var(--text)}
@media(max-width:719px){main.page .mq-eor .m-ctab-wrap{display:none}
main.page .mq-eor .m-ccards{display:grid}
}
main.page .mq-eor .m-reads{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--border)}
@media(min-width:860px){main.page .mq-eor .m-reads{grid-template-columns:repeat(3,minmax(0,1fr))}
}
main.page .mq-eor .m-read{padding:22px 0;border-bottom:1px solid var(--border)}
@media(min-width:860px){main.page .mq-eor .m-read{padding:24px 28px;border-bottom:0}
main.page .mq-eor .m-read+.m-read{border-left:1px solid var(--border)}
main.page .mq-eor .m-read:first-child{padding-left:0}
}
main.page .mq-eor .m-read b{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--navy);line-height:1.35}
main.page .mq-eor .m-read b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none}
main.page .mq-eor .m-read p{margin-top:6px;font-size:15px;color:var(--muted)}
main.page .mq-eor .m-cfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:40px;padding:22px 26px;border-radius:12px;background:var(--mist)}
main.page .mq-eor .m-cfoot p{font-size:14px;color:var(--ink-soft);max-width:70ch;font-style:italic}
main.page .mq-eor .m-del-g{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
@media(min-width:960px){main.page .mq-eor .m-del-g{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:stretch}
}
main.page .mq-eor .m-dep{margin-top:36px;background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:12px;padding:16px 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
main.page .mq-eor .m-dep b{display:block;color:var(--navy);font-size:14.5px;font-weight:600}
main.page .mq-eor .m-dep ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--ink-soft)}
main.page .mq-eor .m-reassure{display:flex;align-items:flex-start;gap:9px;margin-top:8px;font-size:14px;color:var(--muted);font-style:italic;max-width:60ch}
main.page .mq-eor .m-reassure .m-ico{width:17px;height:17px;color:var(--cyan-deep);margin-top:2px}
main.page .mq-eor .m-dep li{display:flex;gap:9px;align-items:flex-start}
main.page .mq-eor .m-dep li .m-ico{width:17px;height:17px;color:var(--hl);margin-top:3px}
main.page .mq-eor .m-del-ph{border-radius:16px;overflow:hidden;min-height:320px;position:relative;box-shadow:var(--shadow-m)}
main.page .mq-eor .m-del-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
main.page .mq-eor .m-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;position:relative;counter-reset:st}
@media(min-width:860px){main.page .mq-eor .m-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
main.page .mq-eor .m-step{position:relative;padding:0 0 32px 60px}
main.page .mq-eor .m-step::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1.5px solid var(--navy);color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:1}
main.page .mq-eor .m-step::after{content:"";position:absolute;left:20px;top:40px;bottom:0;width:1px;background:var(--border)}
main.page .mq-eor .m-step:last-child::after{display:none}
@media(min-width:860px){main.page .mq-eor .m-step{padding:60px 0 0}
main.page .mq-eor .m-step::after{left:52px;right:-32px;top:20px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,var(--navy),var(--border))}
main.page .mq-eor .m-step:last-child::after{display:none}
}
main.page .mq-eor .m-step h3{font-size:17.5px}
main.page .mq-eor .m-step p{margin-top:8px;font-size:15px;color:var(--muted);max-width:36ch}
@media(min-width:860px){main.page .mq-eor .m-step{padding-bottom:28px}
}
main.page .mq-eor .m-when{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--navy);background:var(--tint);border-radius:999px;padding:6px 13px}
main.page .mq-eor .m-when .m-ico{width:16px;height:16px}
main.page .mq-eor .m-disclaim{margin-top:6px;font-size:13.5px;color:var(--muted);font-style:italic}
main.page .mq-eor .m-reg{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--border)}
@media(min-width:860px){main.page .mq-eor .m-reg{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
}
main.page .mq-eor .m-reg-i{display:grid;align-content:start;grid-template-columns:44px minmax(0,1fr);gap:4px 18px;padding:26px 0;border-bottom:1px solid var(--border)}
main.page .mq-eor .m-reg-i .m-ico{grid-row:span 3;width:26px;height:26px;color:var(--navy);margin-top:2px}
main.page .mq-eor .m-reg-i .m-k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-deep)}
main.page .mq-eor .m-reg-i h3{font-size:17.5px}
main.page .mq-eor .m-reg-i p{font-size:15px;color:var(--muted)}
main.page .mq-eor .m-reg-i .m-vf{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--cyan);min-height:32px}
main.page .mq-eor .m-reg-i .m-vf:hover{color:var(--hl)}
main.page .mq-eor .m-reg-i .m-vf .m-ico{grid-row:auto;width:14px;height:14px;margin:0}
main.page .mq-eor .m-insur{display:flex;gap:14px;align-items:flex-start;margin-top:32px;font-size:14.5px;color:var(--ink-soft);max-width:86ch}
main.page .mq-eor .m-insur .m-ico{color:var(--ok-ink);width:22px;height:22px;margin-top:1px}
main.page .mq-eor .m-intl{background:linear-gradient(180deg,var(--mist) 0%,#fff 100%)}
main.page .mq-eor .m-intl-g{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:stretch}
@media(min-width:980px){main.page .mq-eor .m-intl-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}
}
main.page .mq-eor .m-aud-line{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--navy);list-style:none;padding:0}
main.page .mq-eor .m-aud-line li:not(:last-child)::after{content:"·";margin:0 10px;color:var(--cyan-deep)}
main.page .mq-eor .m-bens{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--border)}
main.page .mq-eor .m-bens li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0;border-top:1px solid var(--border)}
@media(min-width:640px){main.page .mq-eor .m-bens li{grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:baseline}
}
main.page .mq-eor .m-bens b{display:block;color:var(--navy);font-size:17px;font-weight:700}
main.page .mq-eor .m-bens span{display:block;font-size:15px;color:var(--ink-soft)}
main.page .mq-eor .m-intl .m-shead .m-sub+.m-sub{margin-top:12px}
main.page .mq-eor .m-intl-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
main.page .mq-eor .m-intl-ph{position:relative;border-radius:16px;overflow:hidden;min-height:420px;box-shadow:var(--shadow-m)}
main.page .mq-eor .m-intl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 78%}
main.page .mq-eor .m-intl-ph figcaption{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-s)}
main.page .mq-eor .m-intl-ph figcaption b{display:block;color:var(--navy);font-size:16px}
main.page .mq-eor .m-intl-ph figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
main.page .mq-eor .m-faq{max-width:80ch;margin-top:32px}
main.page .mq-eor .m-faq details{border-bottom:1px solid var(--border);padding:16px 0}
main.page .mq-eor .m-faq summary{cursor:pointer;font-weight:600;list-style:none;color:var(--text);display:flex;justify-content:space-between;gap:16px;min-height:28px}
main.page .mq-eor .m-faq summary::-webkit-details-marker{display:none}
main.page .mq-eor .m-faq summary::after{content:"+";color:var(--navy);font-weight:400;font-size:22px;line-height:1}
main.page .mq-eor .m-faq details[open] summary::after{content:"–"}
main.page .mq-eor .m-faq p{margin-top:12px;font-size:15px;color:var(--muted)}
main.page .mq-eor .m-grp{padding:56px 0;border-top:1px solid var(--line)}
main.page .mq-eor .m-grp h2{font-size:21px}
main.page .mq-eor .m-grp-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:22px 0 0;padding:0;list-style:none;font-size:14.5px}
@media(min-width:860px){main.page .mq-eor .m-grp-l{grid-template-columns:repeat(4,minmax(0,1fr))}
}
main.page .mq-eor .m-grp-l b{display:block;font-weight:600}
main.page .mq-eor .m-grp-l span{color:var(--muted)}
main.page .mq-eor .m-final{background:var(--navy);padding:var(--sec) 0}
main.page .mq-eor .m-final .m-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
main.page .mq-eor .m-final h2{color:#fff}
main.page .mq-eor .m-final p{color:var(--on-navy);margin-top:14px;max-width:48ch;font-size:18px}
main.page .mq-eor .m-final .m-alt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
main.page .mq-eor .m-final .m-alt a:not(.m-btn){font-size:14px;color:var(--on-navy);text-underline-offset:3px}
main.page .mq-home .m-wrap{max-width:1320px}
main.page .mq-pay .m-wrap{max-width:1320px}
main.page .mq-hiw .m-wrap{max-width:1320px}
main.page .mq-eor .m-wrap{max-width:1320px}
main.page .mq-home .m-marquee-seq img{height:calc(var(--logo-h) * var(--k, 1))}