/* Accueil, deuxième version (novembre 2026) : chaleureux et précis.
   Papier clair à peine doré, couleurs des six facettes et safran utilisées comme information,
   titres en Archivo élargi (caractère « plaque industrielle »), texte en Instrument Sans, chiffres alignés.
   L'étoile des six facettes, avec le diapason au centre, sert de signature au haut de page.
   Chargée après style.css et competences.css : elle les corrige sans les réécrire. */
@font-face{font-family:"Archivo";src:url("police/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --fond:#FBF7F0;
  --surface:#FFFFFF;
  --texte:#1D2731;
  --doux:#5A6169;
  --trait:#EAE2D5;
  --trait-fort:#D3C8B6;
  --titre:"Archivo","Instrument Sans",system-ui,sans-serif;
  --r:6px;
  --v-oui:#1A6E72;--v-non:#A9512B;--v-part:#8A5A12;
  --lave:color-mix(in srgb,var(--accent) 9%,var(--surface));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fond:#161C22;--surface:#1E262E;--texte:#EDE6DA;--doux:#B3AA9C;--trait:#2F3A45;--trait-fort:#46525E;
  --v-oui:#6CC3C7;--v-non:#E59A78;--v-part:#E3B25A;--lave:#252C33}}
:root[data-theme="dark"]{--fond:#161C22;--surface:#1E262E;--texte:#EDE6DA;--doux:#B3AA9C;--trait:#2F3A45;--trait-fort:#46525E;--v-oui:#6CC3C7;--v-non:#E59A78;--v-part:#E3B25A;--lave:#252C33}

body{font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3{font-family:var(--titre);font-style:normal;font-stretch:108%}
h1,h2{font-weight:650;letter-spacing:-0.01em}
h2{font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.12}
h3{font-weight:650}
.sur{color:var(--accent-texte) !important;font-weight:600 !important;font-size:.92rem !important;letter-spacing:0 !important}
.sur::before{display:none !important}

/* Navigation : soulignement safran pour la rubrique en cours */
nav ul a,#menu-liste a.nav-cat{border:0 !important;border-radius:0 !important;background:none !important;margin:0 !important;padding:6px 0 !important}
nav ul{gap:26px}
nav ul a[aria-current],nav ul a.nav-cat[aria-current]{color:var(--texte) !important;box-shadow:inset 0 -3px 0 var(--accent) !important}
nav ul a:hover{color:var(--texte);box-shadow:inset 0 -2px 0 var(--trait-fort)}
@media (max-width:900px){#menu-liste a,#menu-liste a.nav-cat{padding:12px 0 !important;margin:0 !important}}
.langue,.menu{border-radius:var(--r) !important;color:var(--texte)}

/* ===== Accueil ===== (organisation d'origine conservée ; seul l'habillage change) */
.s-hero h1{font-family:var(--titre);font-stretch:110%;font-weight:650;font-size:clamp(1.95rem,3vw,2.6rem);line-height:1.06;letter-spacing:-0.012em;color:var(--texte)}
.hero-chapo{margin-top:16px;font-size:1.08rem;line-height:1.55;color:var(--doux);max-width:34em}
@media (max-width:900px){.hero-chapo{order:2;margin-top:12px;font-size:1rem}}
@media (max-width:760px){.s-hero h1{font-size:clamp(1.85rem,8vw,2.3rem)}}

/* Les deux offres : même place, même contenu ; feuille blanche aux coins légers, sans ombre ni carré pastel */
.hero-offres a{border-radius:var(--r);border-color:var(--trait);box-shadow:none !important;transform:none !important}
.hero-offres a:hover{border-color:var(--accent)}
.ho-ico{background:none !important;border-radius:0}
.ho-ico.po-fac i{width:6px;height:22px;border-radius:2px}
.ho-ico.ho-mr{width:40px;height:40px;border-radius:50%;background:var(--accent) !important}
.ho-mr svg{stroke:#1D2731 !important}
.ho-t b{font-family:var(--titre);font-stretch:108%;font-weight:650;font-size:1.08rem}
/* Les six facettes : des étiquettes pleines dans les vraies couleurs de facette, lisibles d'un coup d'œil */
.ho-axes{gap:5px}
.ho-axes i,.ho-axes i.r1,.ho-axes i.r2,.ho-axes i.r3,.ho-axes i.r4,.ho-axes i.r5,.ho-axes i.r6{font-style:normal;font-weight:600;font-size:.8rem;line-height:1;padding:6px 9px;border-radius:4px;color:#fff}
.ho-axes i.k-cg{background:#1A6E72}.ho-axes i.k-ink{background:#4A5866}.ho-axes i.k-ro{background:#4B55B0}
.ho-axes i.k-dia{background:#C9932E;color:#1D2731}.ho-axes i.k-mi{background:#A9512B}.ho-axes i.k-sec{background:#6E4C7E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ho-axes i.k-ink{background:#5E6E7E}}
:root[data-theme="dark"] .ho-axes i.k-ink{background:#5E6E7E}
.hero-eng li::before{background:none !important;width:auto !important;height:auto !important;color:var(--accent-texte) !important;font-size:.95rem !important}
.hero-cherche input,.hero-loupe{border-radius:var(--r) !important}

/* Le carrousel : même place ; la carte prend un bandeau à la couleur de sa facette */
.vt-pile>i{border-radius:calc(var(--r) + 2px)}
.vt-carte.fi-corps{display:flex;flex-direction:column;gap:0;padding:0;border-radius:var(--r);box-shadow:0 22px 44px -34px rgba(60,44,20,.45);overflow:hidden;min-height:424px;height:auto}
.vt-carte.fi-corps .fi-su{margin-top:auto}
@media (max-width:900px){.vt-carte.fi-corps{min-height:0}}
.vt-fl{border-radius:var(--r) !important}
.vt-suite{border-radius:var(--r) !important;box-shadow:none !important}
.vt-suite .hero-n{font-family:var(--titre) !important;font-style:normal !important;font-stretch:108%;font-weight:650 !important}
/* La fiche de question : un bandeau franc aux couleurs de la facette */
.fi-corps{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 var(--trait);padding:0}
.fi-corps.fondu .fi-q,.fi-corps.fondu .fi-txt{animation:fi-fondu .4s ease-out}
@keyframes fi-fondu{from{opacity:.2}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fi-corps.fondu .fi-q,.fi-corps.fondu .fi-txt{animation:none}}
.fi-bande{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--c);color:var(--cf,#fff);padding:14px 24px;font-size:.88rem;transition:background .4s}
.fi-fac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.fi-fac b{font-family:var(--titre);font-stretch:108%;font-weight:650;font-size:1rem}
.fi-dom{opacity:.85}
.fi-ico svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fi-n{white-space:nowrap;font-weight:600;opacity:.9}
.fi-q{font-family:var(--titre);font-stretch:106%;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:650;line-height:1.15;letter-spacing:-0.01em;margin:20px 24px 10px;color:var(--texte)}
.fi-q a{color:inherit;text-decoration:none}
.fi-q a:hover{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:6px}
.fi-txt{margin:0 24px;display:grid;gap:6px}
.fi-obt{font-size:1.06rem;line-height:1.5}
.fi-conc{font-size:.92rem;color:var(--doux)}
.fi-conc b{color:var(--texte);font-weight:600}
.fi-verdict{margin:18px 24px 0;padding:14px 18px;background:var(--lave);border-radius:var(--r);border-left:4px solid var(--accent)}
.fi-v-t{font-size:.84rem;font-weight:600;color:var(--accent-texte)}
.fi-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-family:var(--titre);font-stretch:110%;font-weight:700;font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.1;margin-top:4px}
.fi-v .v0{color:var(--v-oui)}.fi-v .v1{color:var(--v-non)}.fi-v .v2{color:var(--v-part)}
.fi-v-sep{color:var(--trait-fort);font-weight:400}
.fi-pourquoi{color:var(--texte);margin-top:4px}
.fi-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:16px 24px}
.fi-act .vt-go{font:600 .92rem/1 var(--police);min-height:42px;padding:0 18px;border:2px solid var(--c);border-radius:var(--r);background:transparent;color:var(--texte);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.fi-act .vt-go:hover,.fi-act .vt-go.on{background:var(--c);color:var(--cf,#fff)}
.fi-act .vt-voir{color:var(--accent-texte);font-weight:600;font-size:.92rem;text-underline-offset:3px}
.fi-su{margin:0;padding:12px 24px 14px;background:color-mix(in srgb,var(--c) 7%,var(--surface));border-top:1px solid var(--trait);border-radius:0;display:block}
.fi-su .su-t{display:block;font-size:.8rem;font-weight:600;color:var(--doux);text-transform:none;letter-spacing:0;margin-bottom:4px}
.fi-su .su-l{display:flex;flex-wrap:wrap;gap:2px 18px}
.fi-su .su{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:500;color:var(--texte);background:none;border:0;padding:0}
.fi-su .su i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--doux));flex:none}
.fi-pied{display:flex;align-items:center;gap:8px;margin-top:12px}
.fi-pied .vt-fl{width:38px;height:38px;border-radius:var(--r);border:1px solid var(--trait-fort);background:var(--surface);color:var(--texte);font:600 1rem/1 var(--police);cursor:pointer;display:grid;place-items:center;padding:0}
.fi-pied .vt-pause{font-size:.7rem}
.fi-pied .vt-fl:hover{border-color:var(--accent)}
.fi-pied .vt-barre{flex:1;height:3px;background:var(--trait);position:relative;border-radius:2px;display:block;overflow:hidden}
.fi-pied .vt-barre span{position:absolute;left:0;top:0;bottom:0;background:var(--accent);display:block}
.fi-suite{margin-top:12px;font-size:.95rem}
.fi-suite a{color:var(--texte);font-weight:600;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}

@media (max-width:560px){
  .fi-bande,.fi-su{padding-inline:16px}
  .fi-q,.fi-txt,.fi-verdict,.fi-act{margin-inline:16px}
  .fi-dom{display:none}
}

/* ===== Plus bas ===== */
input,select,textarea{border-radius:var(--r) !important}
form#besoin{border-radius:var(--r);box-shadow:none}
.btn,.btn-plein,button[type=submit],.p-cta,.ql-go,.qn,.fbranche,.cand-go,.cand-lien,.fam-retour,.effacer,.vt-go,.cta-fixe,.pt-pastille{border-radius:var(--r) !important}
.btn-plein,#f-envoyer{background:var(--accent) !important;color:#1D2731 !important;box-shadow:none !important}
.tuile,.ct-etapes,.fam-plan,.cand-porte,.pt-cote,.famille-panneau,.ql,.carte-plan,.q-carte,.pt-plan,.ca-tout a,.qp-cta{border-radius:var(--r) !important}
.pt-cote{box-shadow:none !important}
.ambition .fam-plan{background:var(--lave) !important;border-color:var(--trait) !important}
.ambition .fn-ico,.ambition .fparent{box-shadow:0 0 0 6px var(--lave) !important}
.ambition .fam-centre,.ambition .fam-centre.focus{box-shadow:0 0 0 8px var(--lave),0 0 0 9px var(--accent) !important}
.ambition .fn-nom{background:var(--surface) !important}

/* Notre approche : quatre étapes numérotées (une vraie suite), sans cercles d'icônes */
.chaine .rail{display:none}
.maillon .anneau{display:none}
.maillon{border-top:4px solid var(--c);padding-top:12px;grid-template-columns:none !important}
.maillon .m-n{margin:0;font-family:var(--titre);font-stretch:110%;font-weight:700;font-size:1.25rem;letter-spacing:0;line-height:1;color:var(--ct,var(--c))}
.maillon h3{font-size:1.25rem}
.engagements li{background:none !important;border:0 !important;padding:0 !important;display:inline-flex;align-items:center;gap:6px}
.engagements li::before{content:"✓" !important;width:auto !important;height:auto !important;background:none !important;color:var(--accent-texte) !important;font-weight:700;font-size:1rem !important;border-radius:0 !important}

/* Ce qui fonde nos réponses : un filet de facette, sans disque décoratif */
.offre{box-shadow:none !important;border:0 !important;background:transparent !important;padding:16px 0 0 !important;border-radius:0 !important}
.offre::after{display:none !important}
.offre::before{height:4px !important}

/* Pied : liseré aux six couleurs des facettes ; le fondateur, en photo, à côté de sa présentation */
footer::before{height:5px;background:linear-gradient(90deg,var(--cg) 0 16.66%,#4A5866 16.66% 33.33%,var(--ro) 33.33% 50%,var(--dia) 50% 66.66%,var(--mi) 66.66% 83.33%,var(--sec) 83.33%)}
.fondateur-bloc{display:grid;grid-template-columns:80px minmax(0,1fr);gap:18px;align-items:start;justify-items:start;text-align:left;margin-bottom:12px;max-width:62em}
.fondateur-bloc img{width:80px;height:100px;object-fit:cover;border-radius:var(--r);display:block;box-shadow:0 0 0 2px var(--accent)}
.fondateur-bloc .fondateur-pied{margin:0}
@media (max-width:900px){footer .legal{justify-items:start}}

/* ===== Lavis : couleurs dégressives irrégulières, comme de l'encre posée à la main sur du papier =====
   Quelques dégradés radiaux et coniques à centres décalés, aux arrêts volontairement inégaux,
   tirés du safran et des couleurs des facettes ; un grain de papier (feTurbulence) par-dessus. Aucune animation. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .06 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-op:.2;--grain-mode:multiply;--grain-inv:none;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--grain-op:.15;--grain-mode:screen;--grain-inv:invert(1)}}
:root[data-theme="dark"]{--grain-op:.15;--grain-mode:screen;--grain-inv:invert(1)}

.s-hero{position:relative;isolation:isolate;background:
  radial-gradient(34% 44% at 79% 29%,rgb(215 154 43 / .17) 0%,rgb(215 154 43 / .09) 26%,rgb(215 154 43 / .13) 33%,rgb(215 154 43 / .04) 49%,transparent 63%),
  radial-gradient(19% 27% at 90% 47%,rgb(31 127 132 / .11) 0%,rgb(31 127 132 / .045) 44%,transparent 71%),
  radial-gradient(23% 17% at 64% 11%,rgb(194 100 58 / .10) 0%,rgb(194 100 58 / .03) 52%,transparent 83%),
  radial-gradient(14% 22% at 71% 47%,rgb(110 76 126 / .07) 0%,transparent 68%),
  conic-gradient(from 203deg at 82% 33%,transparent 0%,rgb(215 154 43 / .05) 9%,transparent 17%,transparent 46%,rgb(75 85 176 / .045) 53%,transparent 61%,transparent 100%),
  var(--fond) !important}
.s-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:var(--grain-op);mix-blend-mode:var(--grain-mode);filter:var(--grain-inv)}
.s-hero .wrap{position:relative;z-index:1}
@media (max-width:900px){
  .s-hero{background:
    radial-gradient(70% 9% at 78% 7%,rgb(215 154 43 / .15) 0%,rgb(215 154 43 / .06) 37%,rgb(215 154 43 / .10) 44%,transparent 71%),
    radial-gradient(48% 7% at 14% 31%,rgb(31 127 132 / .08) 0%,transparent 68%),
    radial-gradient(66% 13% at 61% 63%,rgb(215 154 43 / .13) 0%,rgb(215 154 43 / .05) 33%,rgb(215 154 43 / .09) 41%,transparent 69%),
    radial-gradient(38% 8% at 88% 54%,rgb(194 100 58 / .08) 0%,transparent 74%),
    radial-gradient(34% 6% at 22% 86%,rgb(110 76 126 / .06) 0%,transparent 70%),
    var(--fond) !important}
}

/* Le bandeau de la fiche : un aplat de la facette, assombri par endroits (ou éclairci quand le texte est foncé) */
.fi-corps{--lav:0 0 0}
.fi-corps.k-dia{--lav:255 255 255}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fi-corps.k-ink{--lav:255 255 255}}
:root[data-theme="dark"] .fi-corps.k-ink{--lav:255 255 255}
.fi-bande{position:relative;isolation:isolate;background:
  radial-gradient(44% 170% at 86% 118%,rgb(var(--lav) / .24) 0%,rgb(var(--lav) / .09) 34%,rgb(var(--lav) / .14) 41%,transparent 72%),
  radial-gradient(27% 120% at 57% -18%,rgb(var(--lav) / .13) 0%,transparent 63%),
  radial-gradient(18% 90% at 9% 96%,rgb(var(--lav) / .10) 0%,transparent 70%),
  conic-gradient(from 112deg at 71% 40%,transparent 0%,rgb(var(--lav) / .06) 12%,transparent 21%,transparent 100%),
  linear-gradient(rgb(var(--lav) / .08),rgb(var(--lav) / .08)),
  var(--c)}
.fi-bande::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.32;mix-blend-mode:multiply}
.fi-bande>*{position:relative}
.fi-verdict{background:
  radial-gradient(40% 120% at 92% 10%,rgb(215 154 43 / .12) 0%,rgb(215 154 43 / .05) 45%,transparent 75%),
  radial-gradient(30% 90% at 18% 110%,rgb(215 154 43 / .08) 0%,transparent 70%),
  var(--lave)}

/* ===== 4e version : nuances, profondeur, motifs de la marque =====
   Chaque facette a une petite famille de tons : lavis très clair, ton moyen, ton profond.
   Les plans se superposent comme des feuilles : ombres teintées de la couleur de la zone, jamais grises.
   Aucune animation nouvelle. */
.k-cg{--lav-c:#E3F0EF;--moy-c:#1F7F84;--pro-c:#0F4D51}
.k-ink{--lav-c:#E8EBEE;--moy-c:#4A5866;--pro-c:#2A3540}
.k-ro{--lav-c:#E7E8F6;--moy-c:#4B55B0;--pro-c:#2D3478}
.k-dia{--lav-c:#F6EDDA;--moy-c:#C9932E;--pro-c:#7A5410}
.k-mi{--lav-c:#F6E6DD;--moy-c:#C2643A;--pro-c:#7E3517}
.k-sec{--lav-c:#EEE6F1;--moy-c:#6E4C7E;--pro-c:#47305A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.k-cg,.k-ink,.k-ro,.k-dia,.k-mi,.k-sec){--lav-c:color-mix(in srgb,var(--moy-c) 16%,#1E262E)}}
:root[data-theme="dark"] :is(.k-cg,.k-ink,.k-ro,.k-dia,.k-mi,.k-sec){--lav-c:color-mix(in srgb,var(--moy-c) 16%,#1E262E)}

/* Le labyrinthe de la signature, en filigrane dans un coin du haut de page */
.s-hero::before{content:"";display:block !important;position:absolute;z-index:0;pointer-events:none;top:auto;right:auto;left:-80px;bottom:-90px;width:360px;height:360px;background:url("labyrinthe-signature.svg") center/contain no-repeat;opacity:.055;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
@media (max-width:900px){.s-hero::before{left:auto;right:-60px;top:-40px;bottom:auto;width:220px;height:220px;opacity:.06}}

/* Les deux offres : des feuilles lavées, chacune de ses propres couleurs */
.hero-offres a{position:relative;isolation:isolate;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 22%,var(--trait))}
.hero-offres li:first-child a{background:
  radial-gradient(38% 70% at 96% 8%,rgb(31 127 132 / .10) 0%,rgb(31 127 132 / .04) 41%,rgb(31 127 132 / .07) 49%,transparent 74%),
  radial-gradient(26% 52% at 71% 108%,rgb(194 100 58 / .08) 0%,transparent 68%),
  radial-gradient(21% 44% at 4% 92%,rgb(75 85 176 / .06) 0%,transparent 71%),
  var(--surface);
  box-shadow:0 1px 0 rgb(31 127 132 / .10),0 16px 30px -24px rgb(15 77 81 / .55) !important}
.hero-offres li:last-child a{background:
  radial-gradient(44% 80% at 88% 14%,rgb(215 154 43 / .14) 0%,rgb(215 154 43 / .05) 37%,rgb(215 154 43 / .09) 46%,transparent 76%),
  radial-gradient(24% 60% at 12% 100%,rgb(110 76 126 / .05) 0%,transparent 70%),
  var(--surface);
  box-shadow:0 1px 0 rgb(215 154 43 / .14),0 16px 30px -24px rgb(122 84 16 / .55) !important}
.hero-offres a::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:calc(var(--grain-op) * .8);mix-blend-mode:var(--grain-mode);filter:var(--grain-inv)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-offres a{box-shadow:0 1px 0 rgb(255 255 255 / .03),0 18px 30px -22px rgb(0 0 0 / .7) !important}}
:root[data-theme="dark"] .hero-offres a{box-shadow:0 1px 0 rgb(255 255 255 / .03),0 18px 30px -22px rgb(0 0 0 / .7) !important}
.ho-ico.po-fac i{background:linear-gradient(var(--c) 62%,color-mix(in srgb,var(--c) 70%,#000))}

/* Les facettes : couleur pleine, avec un liseré plus profond en pied (le second ton) */
.ho-axes i{box-shadow:inset 0 -2px 0 rgb(0 0 0 / .22),inset 0 1px 0 rgb(255 255 255 / .12)}
.ho-axes i.k-dia{box-shadow:inset 0 -2px 0 #7A5410,inset 0 1px 0 rgb(255 255 255 / .2)}

/* Le carrousel : la carte, surélevée, au-dessus d'un panneau lavé à la couleur de sa facette ; les cartes de fond restent visibles */
#vitrine{--fc:#4B55B0;--fp:#2D3478}
#vitrine:has(.vt-carte.k-cg){--fc:#1F7F84;--fp:#0F4D51}
#vitrine:has(.vt-carte.k-ink){--fc:#4A5866;--fp:#2A3540}
#vitrine:has(.vt-carte.k-ro){--fc:#4B55B0;--fp:#2D3478}
#vitrine:has(.vt-carte.k-dia){--fc:#C9932E;--fp:#7A5410}
#vitrine:has(.vt-carte.k-mi){--fc:#C2643A;--fp:#7E3517}
#vitrine:has(.vt-carte.k-sec){--fc:#6E4C7E;--fp:#47305A}
.vt-pile{isolation:isolate}
.vt-pile::before{content:"";position:absolute;z-index:-2;inset:-14px -12px -30px;border-radius:calc(var(--r) + 4px);pointer-events:none;background:
  radial-gradient(52% 34% at 86% 12%,color-mix(in srgb,var(--fc) 15%,transparent) 0%,color-mix(in srgb,var(--fc) 6%,transparent) 39%,color-mix(in srgb,var(--fc) 10%,transparent) 47%,transparent 77%),
  radial-gradient(40% 30% at 9% 88%,color-mix(in srgb,var(--fc) 11%,transparent) 0%,transparent 70%),
  radial-gradient(30% 22% at 64% 102%,rgb(215 154 43 / .10) 0%,transparent 72%),
  color-mix(in srgb,var(--fc) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--fc) 14%,transparent)}
.vt-pile>i{background:color-mix(in srgb,var(--fc) 8%,var(--surface)) !important;border:1px solid color-mix(in srgb,var(--fc) 24%,var(--trait)) !important;box-shadow:0 10px 18px -16px color-mix(in srgb,var(--fp) 60%,transparent)}
.vt-pile>i+i{background:color-mix(in srgb,var(--fc) 14%,var(--surface)) !important}
.vt-carte.fi-corps{border-color:color-mix(in srgb,var(--fc) 26%,var(--trait));box-shadow:0 2px 0 color-mix(in srgb,var(--fp) 12%,transparent),0 26px 40px -28px color-mix(in srgb,var(--fp) 70%,transparent)}
@media (max-width:600px){.vt-pile::before{inset:-10px -8px -26px}}

/* Détails exacts mis en valeur : 18 sur 135, dans les 6 facettes */
.vt-sur{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.vt-sur-n{font-weight:500;color:var(--doux);font-size:.88rem}
.vt-sur-n b{font-family:var(--titre);font-stretch:108%;font-weight:650;color:var(--accent-texte);font-variant-numeric:tabular-nums}
.vt-suite .hero-n,.fi-n{font-variant-numeric:tabular-nums}

/* Le diapason, en filigrane dans le bloc du catalogue complet */
.vt-suite{position:relative;isolation:isolate}
.vt-suite::after{content:"";position:absolute;z-index:-1;right:170px;top:50%;width:64px;height:64px;transform:translateY(-50%) rotate(-8deg);background:url("dataiknow-symbole-inverse.svg") center/contain no-repeat;opacity:.09;pointer-events:none}
@media (max-width:600px){.vt-suite::after{display:none}}

/* ===== 6e version : nuances franches =====
   Six encres (sarcelle, vermillon, indigo, safran, violet, ardoise), en lavis denses par endroits,
   presque absents ailleurs, qui se chevauchent ; en sombre, les mêmes encres, plus lumineuses.
   Dans les zones lavées, le texte secondaire est foncé (clair) ou éclairci (sombre) pour rester AA. */
:root{
  --w-sar:215 154 43;--w-teal:31 127 132;--w-ver:194 100 58;--w-ind:75 85 176;--w-vio:110 76 126;--w-ard:74 88 102;
  --grain-op:.3;
  --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .07 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --w-sar:232 178 84;--w-teal:58 178 182;--w-ver:236 134 92;--w-ind:126 140 238;--w-vio:178 132 206;--w-ard:142 162 184;--grain-op:.2;
  --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .24 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{--w-sar:232 178 84;--w-teal:58 178 182;--w-ver:236 134 92;--w-ind:126 140 238;--w-vio:178 132 206;--w-ard:142 162 184;--grain-op:.2;
  --grain-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .24 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* Zones lavées : texte secondaire renforcé */
.s-hero,.qp-page main.qp{--doux:#454C54;--accent-texte:#6A440A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.s-hero,.qp-page main.qp){--doux:#D6CFC3;--accent-texte:#F2C877}}
:root[data-theme="dark"] :is(.s-hero,.qp-page main.qp){--doux:#D6CFC3;--accent-texte:#F2C877}

/* Haut de page, ordinateur : encre dense en haut à droite et derrière le carrousel, un voile sarcelle à gauche sous le titre, presque rien ailleurs */
.s-hero{background:
  radial-gradient(26% 30% at 93% 6%,rgb(var(--w-ver) / .34) 0%,rgb(var(--w-ver) / .16) 38%,rgb(var(--w-ver) / .24) 47%,transparent 72%),
  radial-gradient(34% 40% at 76% 24%,rgb(var(--w-sar) / .38) 0%,rgb(var(--w-sar) / .18) 29%,rgb(var(--w-sar) / .28) 37%,rgb(var(--w-sar) / .06) 58%,transparent 70%),
  radial-gradient(22% 30% at 98% 62%,rgb(var(--w-ind) / .30) 0%,rgb(var(--w-ind) / .12) 44%,transparent 73%),
  radial-gradient(30% 26% at 6% 64%,rgb(var(--w-teal) / .26) 0%,rgb(var(--w-teal) / .09) 41%,rgb(var(--w-teal) / .15) 50%,transparent 76%),
  radial-gradient(18% 20% at 47% 98%,rgb(var(--w-vio) / .24) 0%,transparent 70%),
  radial-gradient(16% 16% at 31% 3%,rgb(var(--w-ard) / .16) 0%,transparent 72%),
  var(--fond) !important}
.s-hero::after{opacity:var(--grain-op)}
@media (max-width:900px){
  .s-hero{background:
    radial-gradient(80% 7% at 92% 3%,rgb(var(--w-ver) / .30) 0%,rgb(var(--w-ver) / .12) 40%,rgb(var(--w-ver) / .2) 49%,transparent 74%),
    radial-gradient(90% 9% at 70% 12%,rgb(var(--w-sar) / .34) 0%,rgb(var(--w-sar) / .14) 33%,rgb(var(--w-sar) / .24) 41%,transparent 70%),
    radial-gradient(60% 8% at 2% 27%,rgb(var(--w-teal) / .30) 0%,rgb(var(--w-teal) / .1) 45%,transparent 74%),
    radial-gradient(70% 6% at 100% 40%,rgb(var(--w-ind) / .28) 0%,transparent 72%),
    radial-gradient(95% 14% at 40% 66%,rgb(var(--w-sar) / .22) 0%,rgb(var(--w-sar) / .08) 38%,rgb(var(--w-sar) / .16) 47%,transparent 72%),
    radial-gradient(60% 7% at 0% 80%,rgb(var(--w-vio) / .26) 0%,transparent 72%),
    radial-gradient(70% 6% at 96% 93%,rgb(var(--w-ard) / .24) 0%,transparent 72%),
    var(--fond) !important}
}

/* Les deux offres : un lavis franc dans un angle et sur un bord, loin du texte principal */
.hero-offres li:first-child a{background:
  radial-gradient(34% 62% at 104% -6%,rgb(var(--w-teal) / .36) 0%,rgb(var(--w-teal) / .16) 42%,rgb(var(--w-teal) / .24) 51%,transparent 78%),
  radial-gradient(28% 46% at 88% 112%,rgb(var(--w-ver) / .30) 0%,rgb(var(--w-ver) / .1) 46%,transparent 74%),
  radial-gradient(14% 60% at -3% 70%,rgb(var(--w-ind) / .22) 0%,transparent 72%),
  var(--surface)}
.hero-offres li:last-child a{background:
  radial-gradient(40% 80% at 102% 8%,rgb(var(--w-sar) / .40) 0%,rgb(var(--w-sar) / .17) 36%,rgb(var(--w-sar) / .28) 45%,transparent 76%),
  radial-gradient(22% 56% at 72% 118%,rgb(var(--w-vio) / .22) 0%,transparent 70%),
  var(--surface)}
.hero-offres a::after{opacity:var(--grain-op)}
.ho-ico.ho-diap{display:grid;place-items:center;width:40px;height:40px}
.ho-ico.ho-diap picture{display:contents}
.ho-ico.ho-diap img{width:auto;height:30px}

/* Le carrousel : toute la zone (titre, pile, commandes) lavée franchement de la couleur de la facette affichée */
#vitrine{position:relative;isolation:isolate}
#vitrine::before{content:"";position:absolute;z-index:-3;inset:-16px -14px -16px;border-radius:calc(var(--r) + 6px);pointer-events:none;background:
  radial-gradient(46% 26% at 94% 4%,color-mix(in srgb,var(--fc) 38%,transparent) 0%,color-mix(in srgb,var(--fc) 15%,transparent) 37%,color-mix(in srgb,var(--fc) 26%,transparent) 46%,transparent 75%),
  radial-gradient(40% 30% at 2% 62%,color-mix(in srgb,var(--fc) 34%,transparent) 0%,color-mix(in srgb,var(--fc) 12%,transparent) 44%,transparent 76%),
  radial-gradient(52% 18% at 70% 88%,color-mix(in srgb,var(--fc) 30%,transparent) 0%,color-mix(in srgb,var(--fc) 10%,transparent) 40%,transparent 74%),
  radial-gradient(30% 14% at 20% 100%,rgb(var(--w-sar) / .26) 0%,transparent 72%),
  color-mix(in srgb,var(--fc) 9%,transparent)}
#vitrine::after{content:"";position:absolute;z-index:-2;inset:-16px -14px -16px;border-radius:calc(var(--r) + 6px);pointer-events:none;background-image:var(--grain-bg);background-size:200px 200px}
.vt-pile::before{display:none}
.vt-pile>i{background:color-mix(in srgb,var(--fc) 22%,var(--surface)) !important;border-color:color-mix(in srgb,var(--fc) 40%,var(--trait)) !important}
.vt-pile>i+i{background:color-mix(in srgb,var(--fc) 34%,var(--surface)) !important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #vitrine{--fc-l:color-mix(in srgb,var(--fc) 70%,#fff)}:root:not([data-theme="light"]) #vitrine::before{filter:brightness(1.5) saturate(1.1)}}
:root[data-theme="dark"] #vitrine::before{filter:brightness(1.5) saturate(1.1)}
@media (max-width:600px){#vitrine::before,#vitrine::after{inset:-12px -12px -14px}}

/* Reste de l'accueil : des lavis aux angles des sections, et le grain du papier */
main>section{position:relative;isolation:isolate}
main>section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain-bg);background-size:200px 200px;opacity:.6}
#catalogue{background:radial-gradient(30% 22% at 100% 0%,rgb(var(--w-teal) / .22) 0%,rgb(var(--w-teal) / .08) 44%,transparent 72%),radial-gradient(22% 18% at 0% 100%,rgb(var(--w-ind) / .18) 0%,transparent 70%),var(--surface) !important}
#ressources{background:radial-gradient(34% 20% at 0% 0%,rgb(var(--w-sar) / .26) 0%,rgb(var(--w-sar) / .1) 40%,rgb(var(--w-sar) / .16) 49%,transparent 74%),radial-gradient(24% 16% at 100% 100%,rgb(var(--w-ver) / .18) 0%,transparent 70%),var(--fond) !important}
#point{background:radial-gradient(28% 24% at 100% 6%,rgb(var(--w-vio) / .20) 0%,transparent 72%),radial-gradient(26% 20% at 2% 96%,rgb(var(--w-teal) / .16) 0%,transparent 70%),var(--surface) !important}
#probleme{background:radial-gradient(30% 22% at 0% 4%,rgb(var(--w-ver) / .20) 0%,rgb(var(--w-ver) / .07) 45%,transparent 72%),radial-gradient(26% 20% at 100% 100%,rgb(var(--w-sar) / .22) 0%,transparent 72%),var(--fond) !important}
#demarche{background:radial-gradient(32% 26% at 100% 0%,rgb(var(--w-ind) / .18) 0%,transparent 72%),radial-gradient(22% 22% at 0% 100%,rgb(var(--w-sar) / .2) 0%,transparent 70%),var(--fond) !important}
#expertises{background:radial-gradient(30% 24% at 0% 0%,rgb(var(--w-teal) / .18) 0%,transparent 72%),radial-gradient(30% 26% at 100% 100%,rgb(var(--w-ver) / .18) 0%,transparent 70%),var(--fond) !important}
.maillon{background:linear-gradient(color-mix(in srgb,var(--c) 10%,transparent),transparent 70%);padding:12px 12px 6px}

/* Pages de questions et page candidats : même papier, la couleur de la facette en lavis franc en tête */
.qp-page{background:var(--fond)}
.qp-page main.qp{position:relative;isolation:isolate}
.qp-page main.qp::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:min(620px,90vh);pointer-events:none;background:
  radial-gradient(34% 46% at 94% 4%,color-mix(in srgb,var(--c,rgb(var(--w-sar))) 34%,transparent) 0%,color-mix(in srgb,var(--c,rgb(var(--w-sar))) 13%,transparent) 38%,color-mix(in srgb,var(--c,rgb(var(--w-sar))) 22%,transparent) 47%,transparent 74%),
  radial-gradient(24% 30% at 2% 70%,color-mix(in srgb,var(--c,rgb(var(--w-teal))) 22%,transparent) 0%,transparent 72%),
  radial-gradient(20% 22% at 60% 0%,rgb(var(--w-sar) / .2) 0%,transparent 70%),
  var(--grain-bg)}
.qp-page main.qp.qp-ensemble::before{background:radial-gradient(30% 40% at 96% 2%,rgb(var(--w-teal) / .3) 0%,transparent 72%),radial-gradient(26% 30% at 70% 0%,rgb(var(--w-sar) / .3) 0%,transparent 70%),radial-gradient(22% 30% at 0% 60%,rgb(var(--w-ver) / .22) 0%,transparent 70%),var(--grain-bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .qp-page main.qp::before{filter:brightness(1.6) saturate(1.1)}}
:root[data-theme="dark"] .qp-page main.qp::before{filter:brightness(1.6) saturate(1.1)}
.qp-f{text-transform:none !important;letter-spacing:0 !important;font-size:.92rem !important;font-weight:600 !important}
.qp-f .qp-pastille{display:none}
.qp-chapo{font-family:var(--police) !important;font-style:normal !important;color:var(--doux)}
.qp h1,.qp h2,.qp h3{font-family:var(--titre);font-weight:650;font-stretch:108%}
.qp-recu{border-radius:var(--r) !important;background:radial-gradient(30% 70% at 100% 0%,color-mix(in srgb,var(--c,#C9932E) 18%,transparent) 0%,transparent 72%),var(--surface) !important}
.qp-cta{border-radius:var(--r) !important;background:radial-gradient(40% 80% at 100% 0%,rgb(var(--w-sar) / .26) 0%,rgb(var(--w-sar) / .1) 42%,transparent 75%),radial-gradient(30% 60% at 0% 100%,color-mix(in srgb,var(--c,#1F7F84) 18%,transparent) 0%,transparent 72%),var(--surface) !important}
.qp-page .qp-barre{background:var(--fond)}
.cd-anneau{border-radius:50%}

/* Lavis « encre » : cœur moyen, bord plus dense (la ligne de séchage de l'aquarelle), arrêt net ; pas de flou */
.s-hero{background:
  radial-gradient(24% 30% at 94% 5%,rgb(var(--w-ver) / .16) 0%,rgb(var(--w-ver) / .22) 44%,rgb(var(--w-ver) / .34) 53%,rgb(var(--w-ver) / .08) 57%,transparent 60%),
  radial-gradient(33% 42% at 77% 22%,rgb(var(--w-sar) / .22) 0%,rgb(var(--w-sar) / .30) 38%,rgb(var(--w-sar) / .16) 46%,rgb(var(--w-sar) / .26) 55%,rgb(var(--w-sar) / .38) 61%,rgb(var(--w-sar) / .06) 64%,transparent 67%),
  radial-gradient(20% 30% at 99% 63%,rgb(var(--w-ind) / .18) 0%,rgb(var(--w-ind) / .26) 48%,rgb(var(--w-ind) / .34) 56%,transparent 60%),
  radial-gradient(29% 27% at 5% 66%,rgb(var(--w-teal) / .14) 0%,rgb(var(--w-teal) / .22) 47%,rgb(var(--w-teal) / .32) 57%,rgb(var(--w-teal) / .05) 61%,transparent 64%),
  radial-gradient(17% 20% at 46% 99%,rgb(var(--w-vio) / .16) 0%,rgb(var(--w-vio) / .30) 55%,transparent 60%),
  radial-gradient(14% 15% at 30% 2%,rgb(var(--w-ard) / .10) 0%,rgb(var(--w-ard) / .2) 54%,transparent 59%),
  var(--fond) !important}
.s-hero::after{opacity:calc(var(--grain-op) * .75)}
@media (max-width:900px){
  .s-hero{background:
    radial-gradient(70% 7% at 96% 2%,rgb(var(--w-ver) / .16) 0%,rgb(var(--w-ver) / .24) 45%,rgb(var(--w-ver) / .34) 55%,transparent 60%),
    radial-gradient(86% 9% at 72% 11%,rgb(var(--w-sar) / .2) 0%,rgb(var(--w-sar) / .28) 42%,rgb(var(--w-sar) / .14) 50%,rgb(var(--w-sar) / .36) 59%,transparent 63%),
    radial-gradient(58% 8% at 0% 27%,rgb(var(--w-teal) / .16) 0%,rgb(var(--w-teal) / .26) 50%,rgb(var(--w-teal) / .34) 57%,transparent 61%),
    radial-gradient(64% 6% at 100% 41%,rgb(var(--w-ind) / .16) 0%,rgb(var(--w-ind) / .3) 55%,transparent 60%),
    radial-gradient(60% 7% at 0% 80%,rgb(var(--w-vio) / .14) 0%,rgb(var(--w-vio) / .28) 55%,transparent 60%),
    radial-gradient(66% 6% at 98% 94%,rgb(var(--w-ard) / .14) 0%,rgb(var(--w-ard) / .26) 54%,transparent 59%),
    var(--fond) !important}
}
.hero-offres li:first-child a{background:
  radial-gradient(32% 60% at 104% -6%,rgb(var(--w-teal) / .2) 0%,rgb(var(--w-teal) / .28) 46%,rgb(var(--w-teal) / .38) 56%,transparent 61%),
  radial-gradient(26% 46% at 90% 112%,rgb(var(--w-ver) / .16) 0%,rgb(var(--w-ver) / .3) 54%,transparent 59%),
  radial-gradient(12% 58% at -3% 70%,rgb(var(--w-ind) / .14) 0%,rgb(var(--w-ind) / .26) 55%,transparent 60%),
  var(--surface)}
.hero-offres li:last-child a{background:
  radial-gradient(38% 78% at 103% 6%,rgb(var(--w-sar) / .24) 0%,rgb(var(--w-sar) / .32) 44%,rgb(var(--w-sar) / .18) 50%,rgb(var(--w-sar) / .4) 58%,transparent 62%),
  radial-gradient(20% 54% at 74% 118%,rgb(var(--w-vio) / .14) 0%,rgb(var(--w-vio) / .28) 55%,transparent 60%),
  var(--surface)}
#vitrine::before{background:
  radial-gradient(44% 26% at 95% 3%,color-mix(in srgb,var(--fc) 22%,transparent) 0%,color-mix(in srgb,var(--fc) 30%,transparent) 46%,color-mix(in srgb,var(--fc) 42%,transparent) 56%,transparent 61%),
  radial-gradient(38% 30% at 1% 64%,color-mix(in srgb,var(--fc) 18%,transparent) 0%,color-mix(in srgb,var(--fc) 28%,transparent) 48%,color-mix(in srgb,var(--fc) 40%,transparent) 57%,transparent 62%),
  radial-gradient(50% 18% at 72% 90%,color-mix(in srgb,var(--fc) 16%,transparent) 0%,color-mix(in srgb,var(--fc) 34%,transparent) 56%,transparent 61%),
  radial-gradient(28% 13% at 18% 101%,rgb(var(--w-sar) / .2) 0%,rgb(var(--w-sar) / .34) 55%,transparent 60%),
  color-mix(in srgb,var(--fc) 8%,var(--fond))}
.vt-carte.fi-corps .fi-su{margin-top:0;flex:1}

/* Lavis peints : des taches d'encre irrégulières (assets/lavis/*.svg : bord déformé par une turbulence,
   ligne de séchage plus dense, intérieur moucheté), posées une à une ; multiplication sur papier clair, écran sur fond sombre. */
:root{--mel:multiply}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mel:screen}}
:root[data-theme="dark"]{--mel:screen}
.k-cg,#vitrine:has(.vt-carte.k-cg){--t1:url("lavis/teal-a.svg");--t2:url("lavis/teal-b.svg")}
.k-ink,#vitrine:has(.vt-carte.k-ink){--t1:url("lavis/ard-a.svg");--t2:url("lavis/ard-b.svg")}
.k-ro,#vitrine:has(.vt-carte.k-ro){--t1:url("lavis/ind-a.svg");--t2:url("lavis/ind-b.svg")}
.k-dia,#vitrine:has(.vt-carte.k-dia){--t1:url("lavis/sar-a.svg");--t2:url("lavis/sar-b.svg")}
.k-mi,#vitrine:has(.vt-carte.k-mi){--t1:url("lavis/ver-a.svg");--t2:url("lavis/ver-b.svg")}
.k-sec,#vitrine:has(.vt-carte.k-sec){--t1:url("lavis/vio-a.svg");--t2:url("lavis/vio-b.svg")}

.s-hero{background:
  url("lavis/ver-b.svg") right -90px top -120px/400px auto no-repeat,
  url("lavis/sar-a.svg") 74% -60px/620px auto no-repeat,
  url("lavis/ind-a.svg") right -150px top 52%/380px auto no-repeat,
  url("lavis/teal-b.svg") left -170px top 56%/460px auto no-repeat,
  url("lavis/vio-a.svg") 46% calc(100% + 150px)/340px auto no-repeat,
  var(--fond) !important;background-blend-mode:var(--mel) !important}
@media (max-width:900px){
  .s-hero{background:
    url("lavis/ver-b.svg") right -120px top -90px/300px auto no-repeat,
    url("lavis/sar-a.svg") right -40px top 150px/420px auto no-repeat,
    url("lavis/teal-b.svg") left -170px top 640px/340px auto no-repeat,
    url("lavis/ind-a.svg") right -170px top 1180px/330px auto no-repeat,
    url("lavis/sar-b.svg") left -120px top 1720px/360px auto no-repeat,
    url("lavis/vio-a.svg") right -150px bottom 260px/300px auto no-repeat,
    url("lavis/ard-b.svg") left -110px bottom -90px/260px auto no-repeat,
    var(--fond) !important;background-blend-mode:var(--mel) !important}
}
.hero-offres li:first-child a{background:
  url("lavis/teal-a.svg") right -110px top -120px/280px auto no-repeat,
  url("lavis/ver-a.svg") right 40px bottom -150px/220px auto no-repeat,
  url("lavis/ind-b.svg") left -120px bottom -80px/190px auto no-repeat,
  var(--surface);background-blend-mode:var(--mel)}
.hero-offres li:last-child a{background:
  url("lavis/sar-b.svg") right -100px top -110px/320px auto no-repeat,
  url("lavis/vio-b.svg") right 110px bottom -160px/200px auto no-repeat,
  var(--surface);background-blend-mode:var(--mel)}
#vitrine::before{background:
  var(--t1) right -140px top -140px/420px auto no-repeat,
  var(--t2) left -170px top 46%/400px auto no-repeat,
  var(--t1) right -60px bottom -180px/340px auto no-repeat,
  url("lavis/sar-b.svg") left -60px bottom -170px/280px auto no-repeat,
  color-mix(in srgb,var(--fc) 10%,var(--fond));background-blend-mode:var(--mel)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #vitrine::before{filter:none}}
:root[data-theme="dark"] #vitrine::before{filter:none}

#catalogue{background:url("lavis/teal-a.svg") right -140px top -150px/420px auto no-repeat,url("lavis/ind-b.svg") left -140px bottom -150px/320px auto no-repeat,var(--surface) !important;background-blend-mode:var(--mel) !important}
#ressources{background:url("lavis/sar-a.svg") left -150px top -150px/460px auto no-repeat,url("lavis/ver-b.svg") right -130px bottom -130px/320px auto no-repeat,var(--fond) !important;background-blend-mode:var(--mel) !important}
#point{background:url("lavis/vio-a.svg") right -140px top -120px/360px auto no-repeat,url("lavis/teal-b.svg") left -140px bottom -130px/300px auto no-repeat,var(--surface) !important;background-blend-mode:var(--mel) !important}
#probleme{background:url("lavis/ver-a.svg") left -150px top -130px/340px auto no-repeat,url("lavis/sar-b.svg") right -140px bottom -140px/400px auto no-repeat,var(--fond) !important;background-blend-mode:var(--mel) !important}
#demarche{background:url("lavis/ind-a.svg") right -140px top -140px/360px auto no-repeat,url("lavis/sar-a.svg") left -130px bottom -150px/320px auto no-repeat,var(--fond) !important;background-blend-mode:var(--mel) !important}
#expertises{background:url("lavis/teal-b.svg") left -140px top -140px/340px auto no-repeat,url("lavis/ver-b.svg") right -140px bottom -150px/360px auto no-repeat,var(--fond) !important;background-blend-mode:var(--mel) !important}

.qp-page main.qp::before{height:min(560px,85vh);background:
  var(--t1,url("lavis/sar-a.svg")) right -130px top -150px/480px auto no-repeat,
  var(--t2,url("lavis/teal-b.svg")) left -190px top 220px/360px auto no-repeat,
  url("lavis/sar-b.svg") 58% -170px/280px auto no-repeat,
  var(--grain-bg);background-blend-mode:normal}
.qp-page main.qp::before{mix-blend-mode:var(--mel);filter:none !important}
.qp-page main.qp.qp-ensemble::before{background:url("lavis/teal-a.svg") right -130px top -150px/460px auto no-repeat,url("lavis/sar-a.svg") 62% -170px/360px auto no-repeat,url("lavis/ver-b.svg") left -170px top 200px/340px auto no-repeat,var(--grain-bg)}

/* Texte secondaire renforcé partout où l'encre peut passer dessous (contraste AA vérifié sur captures) */
:root{--doux:#454C54;--accent-texte:#6A440A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--doux:#E0D9CD;--accent-texte:#F2C877}}
:root[data-theme="dark"]{--doux:#E0D9CD;--accent-texte:#F2C877}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.s-hero,.qp-page main.qp){--doux:#E0D9CD}}
:root[data-theme="dark"] :is(.s-hero,.qp-page main.qp){--doux:#E0D9CD}
.cand-lien{color:var(--accent-texte) !important;border-color:var(--accent-texte) !important}
.hero-eng li{color:var(--texte) !important}
.vt-sur{background:color-mix(in srgb,var(--fond) 80%,transparent);padding:5px 9px;margin-inline:-9px;border-radius:4px}
@media (max-width:600px){main>section{background-size:280px auto,240px auto !important}}
.qp-f,.cd-gratuit,.qp-ensemble .q-fac-t,.qp-fac h2{color:var(--pro-c,var(--texte)) !important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.qp-f,.cd-gratuit,.qp-fac h2){color:color-mix(in srgb,var(--moy-c,#E3B25A) 35%,#fff) !important}}
:root[data-theme="dark"] :is(.qp-f,.cd-gratuit,.qp-fac h2){color:color-mix(in srgb,var(--moy-c,#E3B25A) 35%,#fff) !important}
.qp-retour a,.qp-ret{color:var(--texte) !important}
@media (max-width:600px){
  .qp-page main.qp::before{background-size:300px auto,260px auto,200px auto,200px 200px;background-position:right -150px top -170px,left -170px top 260px,60% -150px,0 0}
  .qp-page main.qp.qp-ensemble::before{background-size:300px auto,240px auto,240px auto,200px 200px;background-position:right -150px top -170px,62% -170px,left -160px top 260px,0 0}
}
/* Pages de questions : coins légers partout, intitulés en casse normale, grain sur toute la page */
.qp-nav a.qp-nav-cta,.qp-retour a,.qp-bas a,.qp-sauts a,.qp-nav a.qp-langue,.cd-gratuit,.cd-metiers li,.qp-cta a,.qp-cta .btn{border-radius:var(--r) !important}
.qp-fac h2{text-transform:none !important;letter-spacing:0 !important;font-family:var(--titre) !important;font-stretch:108%;font-weight:650 !important;font-size:1.05rem !important}
.qp-fac h2 .qp-pastille,.qp-sauts a .qp-pastille{border-radius:2px}
body.qp-page{background:var(--grain-bg),var(--fond);background-size:200px 200px,auto}
.qp-page main.qp::before{background-blend-mode:normal}
.qp-page main.qp::before{background:
  var(--t1,url("lavis/sar-a.svg")) right -130px top -150px/480px auto no-repeat,
  var(--t2,url("lavis/teal-b.svg")) left -190px top 220px/360px auto no-repeat,
  url("lavis/sar-b.svg") 58% -170px/280px auto no-repeat}
.qp-page main.qp.qp-ensemble::before{background:url("lavis/teal-a.svg") right -130px top -150px/460px auto no-repeat,url("lavis/sar-a.svg") 62% -170px/360px auto no-repeat,url("lavis/ver-b.svg") left -170px top 200px/340px auto no-repeat}
@media (max-width:600px){
  .qp-page main.qp::before{background-size:300px auto,260px auto,200px auto;background-position:right -150px top -170px,left -170px top 260px,60% -150px}
  .qp-page main.qp.qp-ensemble::before{background-size:300px auto,240px auto,240px auto;background-position:right -150px top -170px,62% -170px,left -160px top 260px}
}
/* Intitulés : casse normale partout (pas de petites capitales espacées) */
.etq-o,.dir,.etiquettes,.cx .c-et,.etq-ex,.groupe-titre,.connexion .c-et,.offre .meth,.eco .role,.faits dt,.coord dt,.ambition .fam-et,.p-sur,.p-et,.fx-t,.filtre-ligne .etq-g,.hero-ex-t,.pt-h,.pt-tab thead th,.vt-r-t,.su-t,.qp-su-f,.qp-pn span{text-transform:none !important;letter-spacing:0 !important}
.qp-su-f{font-weight:600}
@media (max-width:600px){#catalogue,#ressources,#point,#probleme,#demarche,#expertises{background-size:260px auto,220px auto !important}}
.qp-su-f{color:var(--pro-c,var(--ct)) !important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .qp-su-f{color:var(--ct) !important}}
:root[data-theme="dark"] .qp-su-f{color:var(--ct) !important}
.vt-carte.fi-corps .fi-su{display:flex;flex-direction:column;justify-content:flex-start;gap:6px}

/* ===== Le diapason (le « I » du logo), fil conducteur =====
   Dessiné par masque à partir du symbole de la marque : jamais déformé (proportions 56 × 100), couleur choisie selon l'endroit
   (safran, encre, couleur de facette). Toujours décoratif : pseudo-éléments, donc invisibles pour les lecteurs d'écran. */
:root{--diap:url("dataiknow-symbole-couleur.svg")}
.diap,.sur::before,.qp-f::before,nav ul a[aria-current]::before,.fi-act .vt-go::before,.vt-suite .hero-n::before,footer .pied-sig::after,main>section::before,.s-hero .wrap::before{
  -webkit-mask:var(--diap) center/contain no-repeat;mask:var(--diap) center/contain no-repeat}
/* 1. Marqueur des intitulés de section (safran) */
.sur{display:flex !important;align-items:center;gap:8px}
.sur::before{content:"" !important;display:inline-block !important;flex:none;width:9px !important;height:16px !important;background:var(--accent) !important;border-radius:0 !important}
/* 2. Séparateur entre les sections : un diapason d'encre posé sur la limite */
main>section{border-top:1px solid color-mix(in srgb,var(--trait-fort) 60%,transparent)}
main>section::before{content:"";position:absolute;z-index:2;left:50%;top:-13px;width:14px;height:25px;margin-left:-7px;background:var(--texte);opacity:.75;pointer-events:none;box-shadow:none}
main>section:first-child{border-top:0}
/* 3. Haut de page : un grand diapason en filigrane, à côté du labyrinthe (ordinateur) ou sous les garanties (téléphone) */
.s-hero .wrap::before{content:"";position:absolute;pointer-events:none;left:max(20px,env(safe-area-inset-left,0px));bottom:-46px;width:32px;height:57px;background:var(--accent);opacity:.55}
@media (max-width:900px){.s-hero .wrap::before{left:auto;right:max(20px,env(safe-area-inset-right,0px));bottom:6px;width:22px;height:39px}}
/* 4. Menu : la rubrique en cours est marquée d'un petit diapason safran */
nav ul a[aria-current]::before{content:"";display:inline-block;width:7px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--accent)}
/* 5. « C'est ma question » : le diapason à la couleur de la facette */
.fi-act .vt-go::before{content:"";display:inline-block;flex:none;width:9px;height:16px;background:var(--c)}
.fi-act .vt-go:hover::before,.fi-act .vt-go.on::before{background:var(--cf,#fff)}
/* 6. Bloc du catalogue complet : un diapason safran devant le nombre (téléphone et ordinateur) */
.vt-suite .hero-n::before{content:"";display:inline-block;width:12px;height:22px;margin-right:10px;vertical-align:-2px;background:var(--accent)}
@media (max-width:600px){.vt-suite::after{display:none}}
/* 7. Pages de questions et page candidats : le diapason à la couleur de la facette, en tête */
.qp-f::before{content:"";display:inline-block;flex:none;width:10px;height:18px;background:currentColor}
/* 8. Pied de page, près de la signature */
footer .pied-sig::after{content:"";display:inline-block;flex:none;width:9px;height:16px;margin-left:4px;background:var(--accent)}

/* ===== Les questions sont des nuages ; la mise en relation, deux mondes qui se rapprochent ===== */
:root{--mondes:url("mondes-relation.svg");--dr-ink:#1D2731;--dr-saf:#D79A2B;--dr-sep:var(--surface)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mondes:url("mondes-relation-inverse.svg");--dr-ink:#EDE6DA;--dr-saf:#E3B25A}}
:root[data-theme="dark"]{--mondes:url("mondes-relation-inverse.svg");--dr-ink:#EDE6DA;--dr-saf:#E3B25A}
.k-cg,#vitrine:has(.vt-carte.k-cg){--n1:url("lavis/nuage-teal.svg")}
.k-ink,#vitrine:has(.vt-carte.k-ink){--n1:url("lavis/nuage-ard.svg")}
.k-ro,#vitrine:has(.vt-carte.k-ro){--n1:url("lavis/nuage-ind.svg")}
.k-dia,#vitrine:has(.vt-carte.k-dia){--n1:url("lavis/nuage-sar.svg")}
.k-mi,#vitrine:has(.vt-carte.k-mi){--n1:url("lavis/nuage-ver.svg")}
.k-sec,#vitrine:has(.vt-carte.k-sec){--n1:url("lavis/nuage-vio.svg")}

/* Carrousel : la carte se pose sur des nuages ; autour d'elle, le ciel s'éclaircit */
#vitrine::before{background:
  var(--n1) right -70px top -60px/360px auto no-repeat,
  url("lavis/nuage-sar.svg") left -90px top 34%/300px auto no-repeat,
  var(--n1) left -40px bottom -40px/320px auto no-repeat,
  url("lavis/nuage-teal.svg") right -60px bottom 40px/260px auto no-repeat,
  var(--n1) 46% 58%/440px auto no-repeat,
  color-mix(in srgb,var(--fc) 8%,var(--fond));background-blend-mode:var(--mel)}
.vt-pile::before{display:block !important;content:"";position:absolute;z-index:-2;inset:-38px -30px -46px;border:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fond) 92%,transparent) 0%,color-mix(in srgb,var(--fond) 70%,transparent) 55%,transparent 100%)}
@media (max-width:600px){#vitrine::before{background-size:240px auto,200px auto,220px auto,180px auto,300px auto,auto}}

/* Section du catalogue : des nuages aux couleurs des facettes, superposés */
#catalogue{background:
  url("lavis/nuage-teal.svg") right -60px top -40px/420px auto no-repeat,
  url("lavis/nuage-ind.svg") right 120px top 40px/300px auto no-repeat,
  url("lavis/nuage-sar.svg") left -80px bottom -30px/340px auto no-repeat,
  url("lavis/nuage-ver.svg") left 160px bottom -60px/240px auto no-repeat,
  var(--surface) !important;background-blend-mode:var(--mel) !important}
@media (max-width:600px){#catalogue{background-size:260px auto,190px auto,230px auto,160px auto !important;background-position:right -70px top -40px,right 80px top 30px,left -70px bottom -20px,left 110px bottom -40px !important}}

/* En-tête des pages de questions : le nuage de la facette */
.qp-page main.qp::before{background:
  var(--n1,url("lavis/nuage-sar.svg")) right -60px top -50px/460px auto no-repeat,
  url("lavis/nuage-sar.svg") right 260px top -90px/300px auto no-repeat,
  var(--n1,url("lavis/nuage-teal.svg")) left -110px top 250px/320px auto no-repeat}
@media (max-width:600px){.qp-page main.qp::before{background-size:280px auto,180px auto,220px auto;background-position:right -80px top -50px,right 150px top -80px,left -110px top 300px}}
.qp-page main.qp.qp-ensemble::before{background:url("lavis/nuage-teal.svg") right -60px top -50px/440px auto no-repeat,url("lavis/nuage-ind.svg") right 280px top -70px/300px auto no-repeat,url("lavis/nuage-ver.svg") left -120px top 240px/320px auto no-repeat}

/* Mise en relation : deux mondes qui se rapprochent, et les deux diapasons qui se serrent la main au point de contact */
.ho-ico.ho-poignee{background:none !important;width:60px;height:30px;border-radius:0}
.ho-poignee .dr{width:60px;height:auto;display:block}
.hero-offres li:last-child a{background:var(--surface) !important;background-blend-mode:normal !important}
.hero-offres li:last-child a>span:not(.ho-ico){position:relative}
#ressources{background:
  var(--mondes) right -90px top -30px/560px auto no-repeat,
  url("lavis/ver-b.svg") left -130px bottom -130px/320px auto no-repeat,
  var(--fond) !important;background-blend-mode:normal,var(--mel) !important}
@media (max-width:900px){#ressources{background-size:380px auto,240px auto !important;background-position:right -150px top -60px,left -130px bottom -130px !important}}
main.qp.cd::before{background:
  var(--mondes) right -120px top -40px/520px auto no-repeat,
  url("lavis/teal-b.svg") left -190px top 240px/320px auto no-repeat !important;mix-blend-mode:normal !important}
@media (max-width:600px){main.qp.cd::before{background-size:330px auto,220px auto !important;background-position:right -150px top -40px,left -150px top 320px !important}}

/* ===== La réponse et sa mise en place : le labyrinthe de la signature, traversé à l'encre des six facettes, sortie marquée du diapason ===== */
:root{--laby:url("labyrinthe-traverse.svg")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--laby:url("labyrinthe-traverse-inverse.svg")}}
:root[data-theme="dark"]{--laby:url("labyrinthe-traverse-inverse.svg")}
/* Les deux blocs de l'accueil : le dessin vit dans un pseudo-élément, sous le texte, avec un halo de papier autour des lettres */
.hero-offres a::before{content:"";position:absolute;z-index:-1;pointer-events:none}
.hero-offres li:first-child a::before{right:-14px;bottom:-16px;width:min(48%,210px);aspect-ratio:470/428;background:var(--laby) center/contain no-repeat;opacity:.95}
.hero-offres li:last-child a{background:var(--surface) !important}
.hero-offres li:last-child a::before{display:none}
.hero-offres .ho-t>*{text-shadow:0 0 2px var(--surface),0 0 4px var(--surface),0 0 8px var(--surface),0 0 12px var(--surface)}
.hero-offres .ho-axes i{text-shadow:none}
.hero-offres li:first-child a{min-height:0}
/* Notre approche : le même labyrinthe, plus grand, en bas à droite de la section */
#demarche{background:
  var(--laby) right max(20px,calc(50% - 560px)) bottom 36px/120px auto no-repeat,
  url("lavis/ind-a.svg") right -140px top -140px/360px auto no-repeat,
  url("lavis/sar-a.svg") left -130px bottom -150px/320px auto no-repeat,
  var(--fond) !important;background-blend-mode:normal,var(--mel),var(--mel) !important}
@media (max-width:900px){#demarche{background-size:200px auto,260px auto,240px auto !important;background-position:right 16px bottom 18px,right -140px top -140px,left -130px bottom -150px !important}#demarche .wrap{padding-bottom:200px}}
/* Haut de page, téléphone : pas de lavis gris */
@media (max-width:900px){.s-hero{background:
    url("lavis/ver-b.svg") right -120px top -90px/300px auto no-repeat,
    url("lavis/sar-a.svg") right -40px top 150px/420px auto no-repeat,
    url("lavis/teal-b.svg") left -170px top 640px/340px auto no-repeat,
    url("lavis/ind-a.svg") right -170px top 1180px/330px auto no-repeat,
    url("lavis/sar-b.svg") left -120px top 1720px/360px auto no-repeat,
    url("lavis/vio-a.svg") right -150px bottom 260px/300px auto no-repeat,
    url("lavis/teal-a.svg") left -110px bottom -90px/240px auto no-repeat,
    var(--fond) !important}}
/* Le labyrinthe en bandeau, sous le texte du bloc : visible en entier, sans rien recouvrir */
.hero-offres li:first-child a{flex-wrap:wrap}
.hero-offres li:first-child a::before{position:static;order:5;flex:0 0 100%;width:auto;height:118px;aspect-ratio:auto;margin:6px 0 -4px;background:var(--laby) right 4px center/auto 118px no-repeat,linear-gradient(90deg,transparent 0 40%,color-mix(in srgb,var(--surface) 0%,transparent));opacity:1;z-index:auto}
@media (max-width:760px){.hero-offres li:first-child a::before{height:132px;background-size:auto 132px;background-position:center}}
.hero-offres li:last-child a::before{right:-64px;top:50%;height:176px;transform:translateY(-50%);opacity:.92}
@media (max-width:760px){.hero-offres li:last-child a::before{right:-92px;height:170px}}
.hero-offres li:first-child a .ho-t{flex:1 1 0;min-width:0}
.hero-offres li:last-child a::before{top:-40px;transform:none}
@media (max-width:760px){.hero-offres li:last-child a::before{right:-100px;top:-44px}}
/* Haut de page : des nuages autour de la zone des questions */
.s-hero{background:
  url("lavis/ver-b.svg") right -90px top -120px/400px auto no-repeat,
  url("lavis/sar-a.svg") 74% -60px/620px auto no-repeat,
  url("lavis/nuage-ind.svg") right -90px top 32%/420px auto no-repeat,
  url("lavis/nuage-teal.svg") 58% calc(100% + 40px)/420px auto no-repeat,
  url("lavis/nuage-sar.svg") right -40px bottom -30px/320px auto no-repeat,
  url("lavis/teal-b.svg") left -170px top 56%/460px auto no-repeat,
  var(--fond) !important;background-blend-mode:var(--mel) !important}
@media (max-width:900px){.s-hero{background:
    url("lavis/ver-b.svg") right -120px top -90px/300px auto no-repeat,
    url("lavis/sar-a.svg") right -40px top 150px/420px auto no-repeat,
    url("lavis/teal-b.svg") left -170px top 640px/340px auto no-repeat,
    url("lavis/nuage-ind.svg") right -70px bottom 1000px/320px auto no-repeat,
    url("lavis/nuage-teal.svg") left -90px bottom 1040px/280px auto no-repeat,
    url("lavis/nuage-sar.svg") left -70px bottom 210px/300px auto no-repeat,
    url("lavis/nuage-ver.svg") right -90px bottom 280px/250px auto no-repeat,
    url("lavis/vio-a.svg") right -150px bottom -60px/260px auto no-repeat,
    var(--fond) !important;background-blend-mode:var(--mel) !important}}
/* Voile de papier local sous les petits intitulés posés sur l'encre */
.sur,.qp-f{background:color-mix(in srgb,var(--fond) 84%,transparent);padding:3px 9px 3px 7px;margin-left:-7px;border-radius:4px;width:fit-content}
#ressources{background:
  var(--mondes) right -150px top -130px/440px auto no-repeat,
  url("lavis/ver-b.svg") left -130px bottom -130px/320px auto no-repeat,
  var(--fond) !important;background-blend-mode:normal,var(--mel) !important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-offres li:last-child a::before{opacity:.6}}
:root[data-theme="dark"] .hero-offres li:last-child a::before{opacity:.6}

/* ===== Garde-fou : chaque encre a un sens =====
   Nuages = les questions (carrousel, catalogue, pages de questions), dans la couleur de la facette concernée ;
   labyrinthe traversé = la réponse et sa mise en place (bloc de l'accueil, « Notre approche ») ;
   deux mondes = la mise en relation (bloc de l'accueil, section, page candidats). Ailleurs : papier calme. */
.s-hero{background:var(--fond) !important}
@media (max-width:900px){.s-hero{background:var(--fond) !important}}
.s-hero::before{display:none !important}
.hero-offres li:first-child a{background:var(--surface) !important}
#vitrine::before{background:
  var(--n1) right -70px top -60px/360px auto no-repeat,
  var(--n1) left -90px top 40%/300px auto no-repeat,
  var(--n1) right -40px bottom -50px/320px auto no-repeat,
  color-mix(in srgb,var(--fc) 7%,var(--fond)) !important;background-blend-mode:var(--mel)}
@media (max-width:600px){#vitrine::before{background-size:240px auto,200px auto,220px auto,auto !important}}
#catalogue{background:
  url("lavis/nuage-teal.svg") right -60px top -40px/400px auto no-repeat,
  url("lavis/nuage-ind.svg") right 150px top 30px/260px auto no-repeat,
  url("lavis/nuage-sar.svg") left -80px bottom -30px/320px auto no-repeat,
  var(--surface) !important;background-blend-mode:var(--mel) !important}
@media (max-width:600px){#catalogue{background-size:250px auto,170px auto,220px auto !important;background-position:right -70px top -40px,right 90px top 20px,left -70px bottom -20px !important}}
#ressources{background:var(--mondes) right -150px top -130px/440px auto no-repeat,var(--fond) !important;background-blend-mode:normal !important}
@media (max-width:900px){#ressources{background-size:340px auto !important;background-position:right -150px top -90px !important}}
#point{background:var(--surface) !important}
#probleme{background:var(--fond) !important}
#expertises{background:var(--fond) !important}
#demarche{background:var(--laby) right max(20px,calc(50% - 560px)) bottom 36px/120px auto no-repeat,var(--fond) !important;background-blend-mode:normal !important}
@media (max-width:900px){#demarche{background-size:200px auto !important;background-position:right 16px bottom 18px !important}}
/* Étapes de la démarche et « Comment cela se passe » : ce ne sont pas des facettes, donc pas de couleurs de facette */
.maillon{background:none !important;border-top-color:var(--accent) !important;padding:12px 0 0 !important}
.maillon .m-n{color:var(--accent-texte) !important}
.ct-etapes li{--c:var(--accent);--ct:var(--accent-texte)}
.ct-etapes li::before,.ct-etapes li span,.ct-etapes li i{color:var(--accent-texte) !important}
/* Pages de questions : le seul nuage de la facette de la question ; page candidats : les deux mondes seuls */
.qp-page main.qp::before{background:
  var(--n1,url("lavis/nuage-sar.svg")) right -60px top -50px/460px auto no-repeat,
  var(--n1,url("lavis/nuage-sar.svg")) left -120px top 260px/300px auto no-repeat}
@media (max-width:600px){.qp-page main.qp::before{background-size:280px auto,200px auto;background-position:right -80px top -50px,left -110px top 320px}}
main.qp.cd::before{background:var(--mondes) right -120px top -40px/520px auto no-repeat !important;mix-blend-mode:normal !important}
@media (max-width:600px){main.qp.cd::before{background-size:330px auto !important;background-position:right -150px top -40px !important}}
.qp-recu{background:var(--surface) !important}
.qp-cta{background:var(--surface) !important;border:1px solid var(--trait)}
.s-hero .wrap::before{display:none !important}
#demarche{background:var(--laby) right max(20px,calc(50% - 560px)) top 56px/220px auto no-repeat,var(--fond) !important}
@media (max-width:900px){#demarche{background-size:200px auto !important;background-position:right 16px bottom 18px !important}}

/* ===== Retouches du 1er novembre : labyrinthe plus petit, diapasons moins nombreux, séparateurs discrets ===== */
/* Labyrinthe de l'accueil : plus petit, calé à droite sous le texte */
.hero-offres li:first-child a::before{height:84px !important;background-size:auto 84px !important;background-position:right 4px center !important;margin:2px 0 -6px !important}
@media (min-width:761px){.hero-offres li:first-child a::before{height:96px !important;background-size:auto 96px !important}}
/* Séparateurs entre sections : un petit diapason pâle, presque un repère */
main>section::before{top:-10px !important;width:11px !important;height:20px !important;margin-left:-5.5px !important;background:var(--accent) !important;opacity:.85 !important}
/* Seul le filigrane du haut de page est retiré ; le menu et « C'est ma question » gardent leur diapason */
.s-hero .wrap::before{content:none !important;display:none !important}

/* Libellé de la vitrine : bien lisible, avec un repère de couleur */
.vt-sur{font-family:var(--titre);font-size:1.22rem;font-weight:700;letter-spacing:0;line-height:1.25;color:#1D2731;
  background:var(--surface);border-left:5px solid var(--accent);padding:12px 16px;margin:0 0 12px;border-radius:4px;
  box-shadow:0 1px 0 rgba(29,39,49,.06),0 6px 18px -10px rgba(29,39,49,.25)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vt-sur{color:#EDE6DA}}
:root[data-theme="dark"] .vt-sur{color:#EDE6DA}
@media (max-width:600px){.vt-sur{font-size:1.05rem;padding:10px 12px}}

/* Titres de section bien visibles ; labyrinthe de la carte réduit ; suites de la carte sans vide */
.sur{font-size:1.08rem !important;font-weight:700 !important;color:var(--accent-texte) !important}
.sur::before{height:20px !important;width:10px !important}
.hero-offres li:first-child a::before{width:min(24%,96px) !important;right:12px !important;bottom:12px !important;opacity:.9}
.fi-su{display:flex !important;flex-direction:column;justify-content:flex-start;gap:8px}
.fi-su .su-t{margin-bottom:0;font-size:.85rem}
.vt-carte.fi-corps .fi-su{margin-top:0}
.fi-su>*{flex:0 0 auto !important;margin:0 !important}
.fi-su{gap:8px !important}
.hero-offres li:first-child a::before{height:64px !important;margin:2px 0 -2px !important;background-size:auto 64px !important}
@media (max-width:760px){.hero-offres li:first-child a::before{height:64px !important;background-size:auto 64px !important}}
.fi-su{flex-wrap:nowrap !important;align-content:flex-start !important}
.fi-su .su-l{flex-wrap:wrap}
.fi-su{display:block !important}
.fi-su>.su-t{display:block !important;margin:0 0 6px !important}
.fi-su>.su-l{display:flex !important;margin:0 !important}

/* Chapitres : fonds qui alternent nettement, filet de couleur en tête, labyrinthe discret */
:root{--chap-a:var(--surface);--chap-b:#F2E9D8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chap-b:#1A232B}}
:root[data-theme="dark"]{--chap-b:#1A232B}
main > section#catalogue,main > section#point,main > section#demarche{background-color:var(--chap-a) !important}
main > section#ressources,main > section#probleme,main > section#expertises{background-color:var(--chap-b) !important}
main > section#catalogue,main > section#ressources,main > section#point,main > section#probleme,main > section#demarche,main > section#expertises{
  border-top:4px solid var(--accent);box-shadow:inset 0 14px 18px -16px rgba(29,39,49,.28)}
.hero-offres li:first-child a::before{opacity:.4 !important;height:48px !important;background-size:auto 48px !important}
@media (max-width:760px){.hero-offres li:first-child a::before{height:48px !important;background-size:auto 48px !important}}

/* Étiquettes de chapitre numérotées : pastille pleine, sobre, lisible sur tous les fonds */
main{counter-reset:chap}
main > section{counter-increment:chap}
main > section .sur{background:#1D2731 !important;color:#F6EFE2 !important;padding:9px 18px 9px 12px !important;margin-left:0 !important;border-radius:5px !important;
  font-size:clamp(1.2rem,1.7vw,1.5rem) !important;font-weight:650 !important;letter-spacing:.01em !important;box-shadow:none !important;gap:12px !important}
main > section .sur::before{content:counter(chap,decimal-leading-zero) !important;display:inline-block !important;width:auto !important;height:auto !important;
  background:none !important;color:#E3B25A !important;font-weight:750 !important;font-variant-numeric:tabular-nums;padding-right:12px;border-right:1px solid rgba(246,239,226,.35)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) main > section .sur{background:#E3B25A !important;color:#1D2731 !important}
  :root:not([data-theme="light"]) main > section .sur::before{color:#1D2731 !important;border-right-color:rgba(29,39,49,.35)}}
:root[data-theme="dark"] main > section .sur{background:#E3B25A !important;color:#1D2731 !important}
:root[data-theme="dark"] main > section .sur::before{color:#1D2731 !important;border-right-color:rgba(29,39,49,.35)}
main > section .sur::before{font-family:inherit !important;font-weight:700 !important;font-variant-numeric:lining-nums !important;clip-path:none !important;-webkit-mask:none !important;mask:none !important;
  transform:none !important;position:static !important;overflow:visible !important;border-radius:0 !important;opacity:1 !important;filter:none !important;line-height:1.2;min-width:1.4em;text-align:center}

/* « Faisons le point » : tant que rien n'est retenu, pas de seconde roue (elle doublerait celle du catalogue) ; un bandeau simple à la place */
.pt-plan.vide{display:none !important}
.pt-cote .pt-vide{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 26px;background:var(--surface);border:1px solid var(--trait);border-left:5px solid var(--accent);border-radius:var(--r,10px);padding:22px 26px}
.pt-cote .pt-vide p{margin:0}
.pt-cote .pt-vide .pt-v1{font-size:1.15rem}
.pt-cote .pt-vide p:not(.pt-v1){flex:1 1 280px;color:var(--doux)}
.pt-cote .pt-vide .btn{margin-left:auto}
@media (max-width:600px){.pt-cote .pt-vide{padding:18px}.pt-cote .pt-vide .btn{margin-left:0;width:100%;text-align:center;justify-content:center}}
section[hidden]{display:none !important}

/* « Avec vos mots » : une alternative au catalogue (fond distinct, filet, « ou » en pastille, étiquette pleine non numérotée) ; coordonnées en pied de page */
main > section#probleme{counter-increment:none;background-color:var(--chap-b) !important;padding-top:34px !important}
main > section#probleme .sur::before{content:none !important;display:none !important;border:0 !important;padding:0 !important}
main > section#probleme .sur{padding:9px 18px !important}
main > section#contact{counter-increment:none;background-color:var(--chap-b) !important;padding:28px 0 !important}
main > section#contact .coord{display:flex;flex-wrap:wrap;gap:12px 48px;margin:0}
main > section#contact .coord>div{margin:0}
main > section#probleme .ct-sujets a{display:none !important}

/* Fin de l'accueil, début du développement : bande-sommaire sombre */
.sommaire{background:#1D2731;color:#F6EFE2;border-bottom:4px solid var(--accent)}
.sommaire .wrap{display:flex;align-items:center;gap:10px 28px;padding-top:14px;padding-bottom:14px}
.sommaire .som-t{flex:none;color:#E3B25A;font-weight:750;font-size:1rem}
.sommaire ul{display:flex;gap:6px 22px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.sommaire ul::-webkit-scrollbar{display:none}
.sommaire a{color:#F6EFE2;text-decoration:none;font-weight:600;font-size:.98rem;padding:6px 0;border-bottom:2px solid transparent}
.sommaire a:hover,.sommaire a:focus-visible{border-bottom-color:#E3B25A}
@media (max-width:600px){.sommaire .wrap{flex-direction:column;align-items:flex-start;gap:4px}.sommaire ul{max-width:100%}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sommaire{background:#0F161C}}
:root[data-theme="dark"] .sommaire{background:#0F161C}
main > section#catalogue{border-top:0 !important;box-shadow:none !important}
.sommaire .wrap{box-sizing:border-box}
.sommaire{display:block;width:100%}.sommaire .wrap{width:100%;max-width:1120px}

/* Labyrinthe net dans la carte d'accueil (sans voile dégradé) ; signature visible aussi sur téléphone */
.hero-offres li:first-child a::before{background:var(--laby) center/contain no-repeat !important;opacity:1 !important}
@media (max-width:1160px){
  nav .logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  nav .logo .logo-sig{display:inline-flex !important;align-items:center;gap:5px;font-size:.6rem;padding:0;border:0}
  nav .logo .logo-sig img{height:12px;width:12px}
}
@media (min-width:901px){.hero-offres li:first-child a::before{width:150px !important;height:137px !important;aspect-ratio:470/428 !important;right:22px !important;bottom:18px !important}}
/* 261108 : labyrinthe de la carte d'accueil plus lisible sur téléphone et tablette */
@media (max-width:900px){.hero-offres li:first-child a::before{height:150px !important;background-size:contain !important;background-position:center !important;margin:8px 0 0 !important}}
@media (max-width:359px){nav .logo .logo-sig,.qp-barre nav .logo .logo-sig{display:none !important}}