/* Systeme graphique Mixdata — maquette de refonte.
   Une seule feuille pour les 135 pages : le designer change une valeur ici
   et tout le site suit. Les jetons de rayon sont releves sur app.mixdata.com. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
 --blanc:#FFFFFF;--encre:#0E1116;--gris:#6C7480;--gris2:#9AA1AB;
 --filet:#E3E5E8;--fort:#0E1116;--bleu:#1265AE;--bleu-c:#2F86D2;--bleu-p:#EDF3FA;
 --marron:#C4531F;--marron-p:#FBEFE9;--vertweb:#217F93;--vertweb-p:#E9F3F5;
 --nuit:#0B0F15;--nuit2:#141A22;--vert:#1F8A4C;--ambre:#B4761A;
 --mono:ui-monospace,"SF Mono",Menlo,monospace;
 /* Echelle de rayons relevee sur app.mixdata.com : 6 / 8 / 10 / 14 / 16 / 24,
    plus la pilule et le cercle. Le 8px y est le pas dominant (50 occurrences
    sur 81). Le 12px en est absent — c'est justement la valeur par defaut de
    Tailwind. L'arrondi de ce site cite donc le produit du client, il ne sort
    pas d'un catalogue. */
 --r-2xs:3px;--r-xs:6px;--r-s:8px;--r-m:10px;--r-l:14px;--r-xl:16px;
 --r-2xl:24px;--r-pill:999px;
}
html{scroll-behavior:smooth}
/* §2.6 « Ancres et en-tête fixe » : l'entete colle a 63 px recouvrait le titre
   de la section visee apres un clic sur une ancre. La cible s'arrete sous
   l'entete, titre compris. Portee sur toute cible d'ancre, y compris le
   sommaire des articles. */
:target,[id]{scroll-margin-top:84px}
body{background:var(--blanc);color:var(--encre);font-family:"Plus Jakarta Sans",sans-serif;
 -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.028;mix-blend-mode:multiply}
.grain svg{width:100%;height:100%}
.wrap{max-width:1420px;margin:0 auto;padding:0 30px}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris)}
.cap b{color:var(--bleu);font-weight:400}
h1,h2,h3{font-weight:800;letter-spacing:-.045em;line-height:.99}
h1{font-size:clamp(36px,5.4vw,78px)}
h2{font-size:clamp(25px,3.5vw,47px)}
h3{font-size:19px;letter-spacing:-.03em}

.cta-primaire,.cta-b,.cta-c{text-decoration:none;display:inline-block;
 transition:background .18s ease,color .18s ease,border-color .18s ease}
.cta-primaire,.cta-b{border-radius:var(--r-s)}
.cta-c{border-radius:0}
.cta-primaire{background:var(--encre);color:var(--blanc);padding:18px 30px;font-weight:700;
 font-size:15.5px;border:1px solid var(--encre)}
.cta-primaire:hover{background:var(--bleu);border-color:var(--bleu)}
.cta-b{padding:16px 26px;color:var(--encre);border:1px solid var(--fort);font-weight:700;font-size:15px}
.cta-b:hover{background:var(--encre);color:var(--blanc)}
.cta-c{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--bleu);border-bottom:1px solid var(--bleu);padding-bottom:3px}
.cta-c:hover{color:var(--encre);border-color:var(--encre)}
.actions{margin-top:28px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

header{position:sticky;top:0;z-index:60;background:var(--blanc);border-bottom:1px solid var(--filet)}
.entete{max-width:1420px;margin:0 auto;padding:13px 30px;display:flex;justify-content:space-between;
 align-items:center;gap:18px}
.logo{height:30px;width:auto;display:block}
.logo-ui{height:19px;width:auto;display:block}
.logo-f{height:40px;width:auto;display:block;margin-bottom:14px}
.marque{font-weight:800;font-size:17px;letter-spacing:-.055em}
.marque i{font-style:normal;color:var(--bleu)}
header nav{display:flex;gap:1px}
header nav a{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gris);text-decoration:none;padding:8px 11px;border:1px solid transparent;
 border-radius:var(--r-s)}
header nav a:hover{border-color:var(--filet);color:var(--encre)}
.entete-cta{display:flex;gap:8px;align-items:center}
.lien-co{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gris);text-decoration:none}
.mini-cta{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 background:var(--bleu);color:var(--blanc);padding:10px 15px;text-decoration:none;
 border-radius:var(--r-s)}
.mini-cta:hover{background:var(--encre)}

/* @interface-reproduite:debut */
/* ============ REPRODUCTION D'INTERFACE, en HTML pur ============ */
.ui{border:1px solid var(--filet);background:var(--blanc);border-radius:var(--r-xl);
 box-shadow:0 22px 54px rgba(14,17,22,.11);overflow:hidden}
.ui-barre{display:flex;align-items:center;gap:14px;padding:10px 14px;
 border-bottom:1px solid var(--filet);background:#FAFBFC}
.ui-marque{font-weight:800;font-size:13px;letter-spacing:-.05em}
.ui-marque i{font-style:normal;color:var(--bleu)}
.ui-nav{display:flex;gap:4px;margin-left:6px}
.ui-nav span{font-size:10.5px;color:var(--gris);padding:5px 9px;white-space:nowrap}
.ui-nav span.on{background:var(--bleu);color:var(--blanc);font-weight:600;
 border-radius:var(--r-xs)}
.ui-compte{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--gris)}
.ui-pastille{width:18px;height:18px;background:var(--bleu-p);border:1px solid var(--bleu);
 border-radius:50%;
 font-family:var(--mono);font-size:8px;color:var(--bleu);display:flex;align-items:center;
 justify-content:center;letter-spacing:.02em}
.ui-recherche{padding:12px 14px;border-bottom:1px solid var(--filet);display:flex;gap:8px}
.ui-scope{background:var(--bleu);color:var(--blanc);font-size:11px;padding:9px 13px;
 display:flex;align-items:center;gap:6px;white-space:nowrap}
.ui-scope.orange{background:#C4622A}
.ui-champ{flex:1;border:1px solid var(--filet);padding:9px 12px;font-size:11.5px;color:var(--gris2);
 display:flex;align-items:center;justify-content:space-between}
.ui-corps{display:grid;grid-template-columns:224px minmax(0,1fr)}
.ui-filtres{border-right:1px solid var(--filet);background:#FCFCFD;padding:0 0 10px}
.ui-ft{background:var(--bleu);color:var(--blanc);padding:9px 12px;font-size:10px;
 letter-spacing:.1em;text-transform:uppercase;display:flex;gap:10px}
.ui-ft b{background:rgba(255,255,255,.2);padding:3px 7px;font-weight:500}
.ui-fgroupe{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--encre);padding:13px 12px 7px;font-weight:600}
.ui-fl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding:0 10px}
.ui-fl span{border:1px solid var(--filet);background:var(--blanc);padding:7px 8px;font-size:9.5px;
 color:#3A414A;line-height:1.25}
.ui-fl span::after{content:"·";display:block;color:var(--gris2);font-size:9px;margin-top:2px}
.ui-resultats{min-width:0}
.ui-rt{background:var(--bleu);color:var(--blanc);padding:9px 13px;display:flex;
 align-items:center;gap:12px;font-size:10.5px}
.ui-rt .nb{margin-left:auto;font-family:var(--mono);font-size:13px;letter-spacing:-.02em;text-align:right}
.ui-rt .nb small{display:block;font-size:8px;letter-spacing:.14em;opacity:.75}
.ui-rt .btn{border:1px solid rgba(255,255,255,.45);padding:5px 10px;font-size:9.5px}
.ui-ligne{padding:11px 13px;border-bottom:1px solid var(--filet);display:grid;
 grid-template-columns:30px minmax(0,1fr);gap:11px}
.ui-logo{width:30px;height:30px;border:1px solid var(--filet);display:flex;align-items:center;
 justify-content:center;font-family:var(--mono);font-size:10px;color:var(--bleu);background:var(--bleu-p)}
.ui-nom{font-weight:700;font-size:13px;letter-spacing:-.02em;margin-bottom:3px}
.ui-nom em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--vert);border:1px solid var(--vert);padding:2px 5px;margin-left:7px}
.ui-meta{font-size:10px;color:var(--gris);display:flex;gap:11px;flex-wrap:wrap;margin-bottom:5px}
.ui-desc{font-size:10.5px;color:#4A515A;line-height:1.45;margin-bottom:5px}
.ui-chiffres{display:flex;gap:13px;font-family:var(--mono);font-size:9.5px;color:var(--gris);flex-wrap:wrap}
.ui-chiffres b{color:var(--encre);font-weight:600}
@media(max-width:900px){.ui{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
 .ui > *{min-width:660px}
 .app-barre,.app-compteurs,.app-ligne,.ui-barre{min-width:660px}}
@media(max-width:860px){.ui-corps{grid-template-columns:minmax(0,1fr)}
 .ui-filtres{display:none}}

/* fiche entreprise reproduite */
.fiche-ui{display:grid;grid-template-columns:96px minmax(0,1fr)}
.fiche-onglets{border-right:1px solid var(--filet);background:#FCFCFD;padding:8px 0}
.fiche-onglets div{padding:9px 8px;font-size:9px;text-align:center;color:var(--gris);line-height:1.3}
.fiche-onglets div.on{color:var(--bleu);font-weight:700;border-left:2px solid var(--bleu);background:var(--blanc)}
.fiche-corps{min-width:0}
.fiche-tete{padding:11px 14px;border-bottom:1px solid var(--filet);display:flex;
 align-items:center;gap:10px;flex-wrap:wrap}
.fiche-tete .nom{font-weight:800;font-size:16px;letter-spacing:-.04em}
.fiche-tete .etat{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--vert);border:1px solid var(--vert);padding:2px 6px}
.fiche-tags{padding:9px 14px;border-bottom:1px solid var(--filet);display:flex;gap:5px;flex-wrap:wrap}
.fiche-tags span{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
 border:1px solid var(--filet);border-radius:var(--r-xs);padding:4px 7px;color:#4A515A}
.fiche-tags span.acc{border-color:var(--bleu);color:var(--bleu)}
.fiche-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.fiche-grille > div{padding:13px 14px}
.fiche-grille > div + div{border-left:1px solid var(--filet)}
.fiche-grille h5{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--bleu);margin-bottom:10px;font-weight:600}
.fiche-l{display:grid;grid-template-columns:104px 1fr;gap:8px;padding:5px 0;font-size:10.5px;
 border-top:1px solid #F1F2F4}
.fiche-l:first-of-type{border-top:0}
.fiche-l dt{color:var(--gris)}
.fiche-l dd{color:var(--encre);font-weight:500}
.fiche-l dd.num{font-family:var(--mono);letter-spacing:-.01em}
.carte-mini{height:104px;border:1px solid var(--filet);border-radius:var(--r-s);
 margin-top:9px;position:relative;overflow:hidden}
.carte-mini svg{width:100%;height:100%;display:block}
.carte-pin{position:absolute;left:50%;top:46%;width:9px;height:9px;background:var(--bleu);
 transform:translate(-50%,-50%) rotate(45deg)}
@media(max-width:760px){.fiche-grille{grid-template-columns:minmax(0,1fr)}
 .fiche-grille > div + div{border-left:0;border-top:1px solid var(--filet)}
 .fiche-onglets{display:none}.fiche-ui{grid-template-columns:minmax(0,1fr)}}

/* table contacts reproduite */
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:var(--bleu);color:var(--blanc);font-family:var(--mono);font-size:8.5px;
 letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:8px 11px;font-weight:400}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--filet);font-size:11px;vertical-align:middle}
.tbl .ini{width:24px;height:24px;background:var(--bleu-p);border:1px solid var(--bleu);
 border-radius:var(--r-s);
 font-family:var(--mono);font-size:8.5px;color:var(--bleu);display:flex;align-items:center;
 justify-content:center}
.tbl .qui{display:flex;align-items:center;gap:8px}
.tbl .nom{font-weight:600}
.tbl .fn{color:#4A515A}
.tbl .loc,.tbl .ent{color:var(--gris);font-size:10.5px}
.tbl .ent b{display:block;color:var(--bleu);font-weight:600;font-size:11px}
.tbl .act{display:flex;gap:3px;justify-content:flex-end}
.tbl .act i{width:20px;height:20px;border:1px solid var(--filet);display:block;
 border-radius:var(--r-2xs)}
.tbl .act i.v{border-color:#BEDCC7;background:#F1F9F4}
.tbl .act i.a{border-color:#E4CFA8;background:#FCF7EC}
@media(max-width:720px){.tbl .loc,.tbl .act{display:none}}

/* bandeau de compteurs de la plateforme */
.ui-compteurs{display:flex;gap:0;border-bottom:1px solid var(--filet);background:#FAFBFC}
.ui-compteurs > div{padding:10px 14px;border-right:1px solid var(--filet)}
.ui-compteurs > div:last-child{border-right:0}
.ui-compteurs .v{font-family:var(--mono);font-size:14px;letter-spacing:-.03em;color:var(--bleu)}
.ui-compteurs .l{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:2px}


/* @interface-reproduite:fin */

/* --- chaine de collecte : trois temps, en frise --- */
.collecte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.collecte > div{padding:22px 20px;border:1px solid var(--filet);border-radius:var(--r-l);
 position:relative}
.collecte .et{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--bleu);margin-bottom:12px}
.collecte h3{font-size:17px;margin-bottom:9px}
.collecte p{font-size:14.5px;color:#3A414A;line-height:1.55}
.collecte .src{margin-top:14px;display:flex;flex-wrap:wrap;gap:5px}
.collecte .src span{font-family:var(--mono);font-size:10px;color:#4A515A;
 border:1px solid var(--filet);border-radius:var(--r-xs);padding:4px 8px}
@media(max-width:860px){.collecte{grid-template-columns:minmax(0,1fr)}}

/* --- benefices : quatre bandes horizontales --- */
.benefs{border-top:2px solid var(--fort)}
.benef{display:grid;grid-template-columns:44px minmax(0,290px) minmax(0,1fr);gap:22px;
 padding:17px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.benef:hover{background:var(--bleu-p)}
.benef .n{font-family:var(--mono);font-size:11px;color:var(--bleu)}
.benef b{font-size:16px;letter-spacing:-.02em}
.benef span{font-size:14.5px;color:#3A414A;line-height:1.55}
@media(max-width:800px){.benef{grid-template-columns:36px 1fr;gap:14px}.benef span{grid-column:2}}

/* --- clients par secteur --- */
.secteurs{border-top:2px solid var(--fort);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.secteur{border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:16px 18px}
.secteur:nth-child(3n){border-right:0}
.secteur h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 font-weight:400;color:var(--bleu);margin-bottom:11px}
.secteur img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media(max-width:900px){.secteurs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .secteur:nth-child(3n){border-right:1px solid var(--filet)}
 .secteur:nth-child(2n){border-right:0}}
@media(max-width:560px){.secteurs{grid-template-columns:minmax(0,1fr)}
 .secteur{border-right:0!important}}

/* --- connecteurs --- */
.connecteurs{border-top:2px solid var(--fort);border-bottom:1px solid var(--filet);
 padding:26px 0;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.connecteurs img{max-width:620px;width:100%;height:auto;display:block;opacity:.82}
.connecteurs .txt{font-family:var(--mono);font-size:12px;color:var(--gris);line-height:1.8;max-width:32ch}

/* --- databtob : encart d'offre secondaire --- */
.frere{background:var(--bleu);color:var(--blanc);margin-top:0}
.frere-int{max-width:1420px;margin:0 auto;padding:44px 30px;display:grid;
 grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:center}
.frere .cap{color:rgba(255,255,255,.66)}
.frere h2{font-size:clamp(23px,2.8vw,36px);margin:11px 0 12px;max-width:20ch}
.frere p{color:rgba(255,255,255,.86);max-width:52ch;font-size:16px}
.frere .cta-b{color:var(--blanc);border-color:var(--blanc)}
.frere .cta-b:hover{background:var(--blanc);color:var(--bleu)}
.frere .marque-f{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
 border:1px solid rgba(255,255,255,.5);padding:16px 20px;text-align:center;line-height:1.9}
.frere .marque-f b{display:block;font-size:20px;letter-spacing:-.03em;text-transform:none;
 font-family:"Plus Jakarta Sans",sans-serif;font-weight:800}
@media(max-width:860px){.frere-int{grid-template-columns:minmax(0,1fr);gap:24px}}

/* --- RGPD en deux volets --- */
.rgpd-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
 border:1px solid #CFDDEC;border-radius:var(--r-xl);overflow:hidden}
.rgpd-duo > div{padding:20px 22px}
.rgpd-duo > div + div{border-left:1px solid #CFDDEC}
.rgpd-duo h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 font-weight:400;color:var(--bleu);margin-bottom:13px}
.rgpd-duo li{list-style:none;font-size:14.5px;color:#3A414A;padding:8px 0;line-height:1.5;
 border-top:1px solid #DCE7F2}
.rgpd-duo li:first-child{border-top:0}
.rgpd-duo a{color:var(--bleu)}
@media(max-width:820px){.rgpd-duo{grid-template-columns:minmax(0,1fr)}
 .rgpd-duo > div + div{border-left:0;border-top:1px solid #CFDDEC}}


/* --- sous-blocs : un H3 remplace un H2, le rythme reste marque --- */
.sous{margin-top:46px;padding-top:30px;border-top:1px solid var(--filet)}
.sous-t{font-size:clamp(19px,2.05vw,27px);letter-spacing:-.035em;max-width:30ch;margin-bottom:9px}
.sous-p{max-width:56ch;color:#3A414A;font-size:16px;margin-bottom:24px}
/* Quand l'intitule d'origine est une phrase, il devient chapo et se retrouve
   directement sous le h2 de section : il lui faut l'air que le sous-titre
   apportait. */
.module .txt > .sous-p:first-child{margin-top:12px}

/* --- cloture : CTA, conformite et offre secondaire en un seul bloc --- */
/* la section de cloture n'est plus sombre de bout en bout : les objections
   se levent sur blanc, seul l'appel final bascule en aplat. Cela evite trois
   blocs sombres consecutifs avec le pied de page. */
.cloture{background:var(--blanc);color:var(--encre)}
.cl-objections{padding:58px 0 52px;border-top:1px solid var(--filet)}
.cl-tete{color:var(--blanc);padding:40px 0 62px}
.cl-slab{background:var(--encre);border-radius:var(--r-2xl);padding:48px 40px 46px}
@media(max-width:700px){.cl-slab{padding:36px 22px 34px;border-radius:var(--r-l)}}
.cl-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;
 align-items:center;margin-top:12px}
.cloture h2{max-width:15ch}
.cl-tete p{margin-top:15px;color:#AEB6C0;max-width:44ch;font-size:16.5px}
.cloture .cta-primaire{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.cloture .cta-primaire:hover{background:var(--bleu);color:var(--blanc);border-color:var(--bleu)}
.cl-coord{font-family:var(--mono);font-size:12px;line-height:2;color:#AEB6C0}
.cl-coord a{color:var(--blanc);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.cl-objections .cl-duo .sous-t{color:var(--encre)}
.cl-objections .rgpd-duo{border-color:var(--filet)}
.cl-objections .rgpd-duo > div + div{border-left:1px solid var(--filet)}
.cl-objections .rgpd-duo h3{color:var(--bleu)}
.cl-objections .rgpd-duo li{color:#3A414A;border-top-color:var(--filet)}
.cl-objections .rgpd-duo a{color:var(--bleu)}
.cl-objections .cl-frere{border-color:var(--filet);background:var(--bleu-p)}
.cl-objections .cl-frere .sous-t{color:var(--encre)!important}
.cl-objections .cl-frere p{color:#3A414A}
.cl-objections .cl-frere .marque-f{border-color:#CFDDEC;color:var(--gris)}
.cl-objections .cl-frere .marque-f b{color:var(--encre)}
.cl-objections .cl-frere .cta-b{color:var(--encre);border-color:var(--encre)}
.cl-objections .cl-frere .cta-b:hover{background:var(--encre);color:var(--blanc)}
.cl-duo{margin-top:8px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:46px;align-items:start}
.cl-duo .sous-t{color:var(--blanc);font-size:19px;max-width:26ch;margin-bottom:16px}
.cl-duo .rgpd-duo{border-color:rgba(255,255,255,.18);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cl-duo .rgpd-duo > div{padding:16px 18px 6px}
.cl-duo .rgpd-duo > div + div{border-left:1px solid rgba(255,255,255,.14)}
.cl-duo .rgpd-duo h3{color:#8FC0EE;margin-bottom:11px}
.cl-duo .rgpd-duo li{color:#AEB6C0;font-size:13.5px;border-top-color:rgba(255,255,255,.12)}
.cl-duo .rgpd-duo a{color:#8FC0EE}
.cl-frere{border:1px solid rgba(255,255,255,.2);border-radius:var(--r-l);padding:24px}
.cl-frere p{color:#AEB6C0;font-size:15px;line-height:1.6;margin-bottom:18px}
.cl-frere .marque-f{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
 text-transform:uppercase;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-s);
 padding:14px 16px;
 line-height:1.8;color:#AEB6C0;margin-bottom:18px}
.cl-frere .marque-f b{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:19px;
 font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--blanc);margin-bottom:4px}
.cl-frere .cta-b{color:var(--blanc);border-color:var(--blanc);display:block;text-align:center}
.cl-frere .cta-b:hover{background:var(--blanc);color:var(--encre)}
@media(max-width:1000px){.cl-grille,.cl-duo{grid-template-columns:minmax(0,1fr);gap:26px}
 .cl-duo .rgpd-duo{grid-template-columns:minmax(0,1fr)}
 .cl-duo .rgpd-duo > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}}


/* --- temoins : un seul a la fois, navigation nominative --- */
/* Pas de points anonymes ni de fleches rondes : le visiteur choisit la
   personne qu'il veut lire. Le carrousel generique figure dans les
   marqueurs de design genere, la navigation nominative non. */
.temoins{border-top:2px solid var(--fort);position:relative}
.temoin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,296px);
 gap:48px;align-items:start;
 padding:38px 0 34px;
 opacity:0;visibility:hidden;position:absolute;inset:0 0 auto 0;
 transition:opacity .5s ease}
.temoin blockquote{grid-column:1;grid-row:1/span 2}
.temoin .attrib{grid-column:2;grid-row:1}
.temoin .contexte{grid-column:2;grid-row:2;align-self:start}
.temoin.on{opacity:1;visibility:visible;position:relative}
.temoin blockquote{font-size:clamp(20px,2.5vw,31px);line-height:1.36;letter-spacing:-.03em;
 color:#1A1F26;font-weight:500;max-width:30ch}
.temoin blockquote::before{content:"«";color:var(--bleu);font-size:1.5em;line-height:0;
 vertical-align:-.2em;margin-right:.12em}
.temoin blockquote b{color:var(--bleu);font-weight:700}
.temoin .contexte{margin-top:16px;font-family:var(--mono);font-size:12px;line-height:1.9;
 color:var(--gris)}

.temoins-nav{display:flex;gap:0;border-top:1px solid var(--filet);margin-top:6px}
.temoins-nav button{flex:1;text-align:left;background:none;border:0;border-top:2px solid transparent;
 padding:16px 20px 16px 0;cursor:pointer;font-family:inherit;position:relative;
 transition:border-color .3s ease}
.temoins-nav button + button{padding-left:24px;border-left:1px solid var(--filet)}
.temoins-nav button b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;
 color:var(--gris);transition:color .3s ease}
.temoins-nav button span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--gris2);margin-top:4px}
.temoins-nav button[aria-selected="true"]{border-top-color:var(--bleu)}
.temoins-nav button[aria-selected="true"] b{color:var(--encre)}
.temoins-nav button[aria-selected="true"] span{color:var(--bleu)}
.temoins-nav button:hover b{color:var(--encre)}
.temoins-nav .jauge{position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--bleu);
 transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
@media(max-width:820px){.temoin{grid-template-columns:minmax(0,1fr);gap:4px}
 .temoin blockquote,.temoin .attrib,.temoin .contexte{grid-column:1;grid-row:auto}
 .temoins-nav{flex-direction:column}
 .temoins-nav button + button{padding-left:0;border-left:0;border-top:1px solid var(--filet)}}


/* --- navigation principale, conforme a l'arborescence validee --- */
header nav{display:flex;gap:2px;align-items:center}
header nav > a, .menu-parent > a{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--gris);text-decoration:none;padding:9px 11px;
 border:1px solid transparent;border-radius:var(--r-s);display:block;white-space:nowrap;
 transition:color .18s ease,border-color .18s ease}
header nav > a:hover, .menu-parent > a:hover{border-color:var(--filet);color:var(--encre)}
header nav > a[aria-current="page"]{color:var(--encre);border-color:var(--filet)}
.menu-parent{position:relative}
.menu-parent > a::after,.menu-parent > .a-produire::after{content:"·";margin-left:7px;
 color:var(--bleu)}
/* Une entree grisee reste depliable : au survol elle se comporte comme un
   parent de menu, seul son lien propre manque. */
.menu-parent > .a-produire{cursor:pointer}
.menu-parent > .a-produire:hover,.menu-parent.ouvert > .a-produire{color:var(--encre);
 border-color:var(--filet)}
.sous-menu{position:absolute;top:100%;left:0;min-width:262px;background:var(--blanc);
 border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;
 box-shadow:0 18px 40px rgba(14,17,22,.13);
 opacity:0;visibility:hidden;transform:translateY(-4px);
 transition:opacity .16s ease,transform .16s ease;z-index:70;padding:5px 0}
.menu-parent.ouvert > .sous-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* `nav a` impose la mono en capitales pour la barre principale. A specificite
   egale, ses proprietes non redefinies fuyaient dans le sous-menu : le lien
   actif s'affichait en capitales mono, alors que les entrees grisees, qui
   remettent explicitement les deux valeurs, s'affichaient bien. */
.sous-menu a{display:block;padding:10px 16px;text-decoration:none;color:var(--encre);
 font-family:"Plus Jakarta Sans",sans-serif;text-transform:none;
 font-size:14px;font-weight:600;letter-spacing:-.015em}
.sous-menu a span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--gris);font-weight:400;margin-top:3px}
.sous-menu a:hover{background:var(--bleu-p);color:var(--bleu)}
/* Sous 1080 px, la navigation devient une barre d'onglets defilante. Elle
   reste visible : une maquette qu'on ouvre au telephone doit montrer le menu.
   Cette regle doit rester APRES `nav{display:flex}`, sinon elle est ecrasee. */
@media(max-width:1080px){
  .entete{flex-wrap:wrap;row-gap:0}
  header nav{order:3;width:100%;margin-top:11px;padding-top:9px;gap:0;
    border-top:1px solid var(--filet);overflow-x:auto;scrollbar-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav > a,.menu-parent > a{padding:9px 13px 9px 0;white-space:nowrap}
  .menu-parent > a::after{display:none}
  .sous-menu{display:none}
  .entete-cta{margin-left:auto}
}
@media(max-width:620px){
  header nav{flex-wrap:wrap;overflow-x:visible;column-gap:16px;row-gap:0}
  header nav > a,.menu-parent > a{padding:8px 0}
}

/* ============ SECTIONS ============ */
.hero{padding:56px 0 62px}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:center}
.hero h1{max-width:13ch;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--bleu)}
.hero .att{display:block;font-size:.3em;font-weight:600;color:var(--gris);letter-spacing:-.01em;
 line-height:1.35;margin-bottom:15px;max-width:28ch}
.hero p{margin-top:22px;max-width:46ch;font-size:17px;color:#2C333C;line-height:1.6}
/* §2.1 « Définition du produit dès le premier écran » (priorite critique de
   l'audit) : la phrase qui dit ce qu'est Mixdata ouvrait le premier ecran dans
   la meme graisse et sans respiration que le paragraphe suivant. Elle porte la
   definition, elle se lit avant le detail. */
.hero p.hero-def{font-size:19px;font-weight:600;color:var(--encre);
 letter-spacing:-.015em;margin-bottom:18px;max-width:46ch}
@media(max-width:620px){.hero p.hero-def{font-size:17.5px}}
.note{margin-top:15px;font-family:var(--mono);font-size:11px;color:var(--gris2)}
@media(max-width:1040px){.hero-grille{grid-template-columns:minmax(0,1fr);gap:34px}}

.bloc{padding:62px 0;border-top:1px solid var(--filet)}
/* Le filet de la premiere section se collait sous l'accroche : un trait en
   double sous l'accroche claire, une barre orpheline sous la dalle sombre.
   L'espace de la section suffit a separer. */
.hi + .bloc{border-top:0}
.bloc h2{max-width:20ch;margin:12px 0 8px}
.bloc h2 em{font-style:normal;color:var(--bleu)}
.bloc .chapo{max-width:56ch;color:#3A414A;font-size:16.5px;margin-bottom:28px}

/* module : texte a gauche, interface a droite, alterne */
.module{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:46px;align-items:center}
.module.inv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.module.inv .txt{order:2}
.module.inv .vis{order:1}
.module .liste{margin-top:20px}
.module .liste div{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:9px 0;
 border-top:1px solid var(--filet);font-size:14.5px;color:#3A414A;line-height:1.5}
.module .liste div b{font-family:var(--mono);font-size:10px;color:var(--bleu);padding-top:3px}
@media(max-width:1000px){.module,.module.inv{grid-template-columns:minmax(0,1fr);gap:30px}
 .module.inv .txt{order:1}.module.inv .vis{order:2}}

/* technologies : champ dense */
.technos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.technos > div{padding:18px 16px;border:1px solid var(--filet);border-radius:var(--r-l)}
.technos h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 font-weight:400;color:var(--bleu);margin-bottom:12px}
.technos .noms{display:flex;flex-wrap:wrap;gap:4px}
.technos .noms span{font-family:var(--mono);font-size:10px;color:#4A515A;border:1px solid var(--filet);
 border-radius:var(--r-xs);padding:3px 6px}
.technos .noms span:hover{border-color:var(--bleu);color:var(--bleu)}
@media(max-width:960px){.technos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){.technos{grid-template-columns:minmax(0,1fr)}}

/* reacteur */
.reacteur{color:var(--blanc);margin:62px 0}
.rea-int{max-width:1420px;margin:0 auto;padding:0 30px}
.rea-slab{background:var(--nuit2);border-radius:var(--r-2xl);padding:58px 40px 64px}
@media(max-width:700px){.rea-slab{padding:40px 22px 44px;border-radius:var(--r-l)}}
.reacteur .cap{color:var(--gris2)}
.reacteur h2{max-width:17ch;margin:12px 0 10px}
.reacteur .chapo{max-width:58ch;color:#B4BCC6;font-size:16.5px;margin-bottom:32px}
.console{border:1px solid rgba(255,255,255,.14);background:#080B10;
 border-radius:var(--r-l);overflow:hidden}
.cbarre{display:flex;align-items:center;gap:11px;padding:11px 15px;
 border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--gris2)}
.led{width:6px;height:6px;background:var(--bleu-c)}
.ccorps{display:grid;grid-template-columns:minmax(0,326px) minmax(0,1fr);min-height:380px}
.cfiltres{border-right:1px solid rgba(255,255,255,.14);padding:17px 15px}
.req{font-family:var(--mono);font-size:12.5px;line-height:1.75;background:#111823;
 border-left:2px solid var(--bleu-c);border-radius:0 var(--r-s) var(--r-s) 0;
 padding:12px 13px;margin-bottom:17px;min-height:84px}
.curs{display:inline-block;width:6px;height:14px;background:var(--bleu-c);vertical-align:-2px;
 animation:cl 1.1s steps(2) infinite}
@keyframes cl{0%,50%{opacity:1}51%,100%{opacity:0}}
.fl{display:flex;justify-content:space-between;gap:10px;padding:10px 0;
 border-top:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11px;
 color:var(--gris2);opacity:.3;transition:opacity .4s ease,color .4s ease}
.fl.on{opacity:1;color:var(--blanc)}
.fl em{font-style:normal;color:var(--bleu-c)}
.fl.on em{color:var(--blanc)}
.cvue{position:relative;padding:0}
#grille{width:100%;height:100%;display:block}
/* les survivantes se resolvent en resultats lisibles */
.resultats{position:absolute;inset:0;background:#080B10;opacity:0;pointer-events:none;
 transition:opacity .7s ease;display:flex;flex-direction:column}
.resultats.on{opacity:1;pointer-events:auto}
.res-tete{display:flex;align-items:center;gap:11px;padding:9px 14px;
 border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:9.5px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--gris2)}
.res-tete b{margin-left:auto;color:var(--blanc);font-size:11px;letter-spacing:.06em}
.res-liste{flex:1;overflow:hidden}
.res-l{display:grid;grid-template-columns:26px minmax(0,1fr) 132px;gap:11px;padding:9px 14px;
 border-bottom:1px solid rgba(255,255,255,.09);align-items:center}
.res-l:hover{background:rgba(44,127,206,.12)}
.res-ini{width:26px;height:26px;border:1px solid var(--bleu-c);background:rgba(44,127,206,.14);
 border-radius:var(--r-s);
 font-family:var(--mono);font-size:9px;color:#8FC0EE;display:flex;align-items:center;justify-content:center}
.res-nom{font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:var(--blanc);margin-bottom:2px}
.res-meta{font-family:var(--mono);font-size:9.5px;color:var(--gris2);display:flex;gap:10px;flex-wrap:wrap}
.res-signal{font-family:var(--mono);font-size:9.5px;color:#8FC0EE;line-height:1.4;text-align:right}
.res-pied{padding:9px 14px;border-top:1px solid rgba(255,255,255,.14);display:flex;
 justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);
 font-size:9.5px;color:var(--gris2);flex-wrap:wrap}
.res-pied .exp{border:1px solid var(--blanc);border-radius:var(--r-s);color:var(--blanc);padding:6px 12px;
 text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.res-pied .exp:hover{background:var(--blanc);color:#080B10}
@media(max-width:760px){.res-l{grid-template-columns:26px minmax(0,1fr)}
 .res-signal{grid-column:2;text-align:left;margin-top:3px}}
.fiche-r{position:absolute;right:19px;bottom:19px;background:var(--blanc);color:var(--encre);
 border-radius:var(--r-l);
 padding:14px 16px;max-width:246px;box-shadow:0 16px 40px rgba(0,0,0,.55);opacity:0;
 transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.fiche-r.on{opacity:1;transform:translateY(0)}
.fiche-r h4{font-size:14.5px;letter-spacing:-.03em;margin-bottom:2px}
.fiche-r .lieu{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--gris);margin-bottom:9px}
.fiche-r dl{border-top:1px solid var(--filet);padding-top:8px;font-family:var(--mono);
 font-size:10.5px;line-height:1.7}
.fiche-r dt{color:var(--gris);display:inline}
.fiche-r dd{display:inline;font-weight:500}
.fiche-r .motif{margin-top:9px;padding-top:8px;border-top:1px solid var(--filet);font-size:12px;line-height:1.5}
.fiche-r .motif b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--bleu);margin-bottom:3px}
.rea-pied{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rea-pied .cta-b{color:var(--blanc);border-color:var(--blanc)}
.rea-pied .cta-b:hover{background:var(--blanc);color:var(--nuit2)}
.rea-pied .cta-c{color:#8FC0EE;border-color:#8FC0EE}
@media(max-width:1000px){.ccorps{grid-template-columns:minmax(0,1fr)}
 .cfiltres{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.cvue{min-height:290px}}

/* paroles clientes, mises en valeur */
.paroles{padding:62px 0}
.paroles h2{max-width:18ch;margin:12px 0 32px}
.parole{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:36px;padding:30px 0;
 border-top:2px solid var(--fort)}
.parole:last-of-type{border-bottom:2px solid var(--fort)}
.parole blockquote{font-size:clamp(17px,1.9vw,23px);line-height:1.42;letter-spacing:-.025em;
 color:#1A1F26;font-weight:500}
.parole blockquote::before{content:"«";color:var(--bleu);font-size:1.6em;line-height:0;
 vertical-align:-.22em;margin-right:.14em}
.parole blockquote b{color:var(--bleu);font-weight:700}
.parole .qui{font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--gris);letter-spacing:.04em}
.parole .qui strong{display:block;color:var(--encre);font-size:13px;letter-spacing:.06em;
 text-transform:uppercase;margin-bottom:6px;font-weight:700}
.parole .qui .org{display:inline-block;margin-top:9px;border:1px solid var(--filet);
 border-radius:var(--r-xs);padding:6px 10px;
 font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
@media(max-width:860px){.parole{grid-template-columns:minmax(0,1fr);gap:16px}}

.rgpd{background:var(--bleu-p);border-top:1px solid var(--filet)}
.rgpd-int{max-width:1420px;margin:0 auto;padding:44px 30px;display:grid;
 grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:34px}
.rgpd h2{font-size:clamp(21px,2.4vw,31px);max-width:12ch}
.rgpd ul{list-style:none;columns:2;column-gap:34px}
.rgpd li{font-size:14.5px;color:#3A414A;padding:7px 0;break-inside:avoid;line-height:1.5}
.rgpd li::before{content:"·";color:var(--bleu);margin-right:9px}
@media(max-width:860px){.rgpd-int{grid-template-columns:minmax(0,1fr);gap:18px}.rgpd ul{columns:1}}

.final{background:var(--encre);color:var(--blanc)}
.final-int{max-width:1420px;margin:0 auto;padding:58px 30px;display:grid;
 grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:center}
.final h2{max-width:15ch}
.final p{margin-top:15px;color:#AEB6C0;max-width:44ch;font-size:16.5px}
.final .cta-primaire{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.final .cta-primaire:hover{background:var(--bleu);color:var(--blanc);border-color:var(--bleu)}
.final .coord{font-family:var(--mono);font-size:12px;line-height:2;color:#AEB6C0}
.final .coord a{color:var(--blanc);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
@media(max-width:900px){.final-int{grid-template-columns:minmax(0,1fr);gap:26px}}

/* VRAI PIED DE PAGE */
footer{background:var(--nuit);color:#AEB6C0;border-top:1px solid var(--encre)}
.f-haut{max-width:1420px;margin:0 auto;padding:52px 30px 38px;display:grid;
 grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
 gap:32px}
.f-marque{font-weight:800;font-size:22px;letter-spacing:-.055em;color:var(--blanc);margin-bottom:12px}
.f-marque i{font-style:normal;color:var(--bleu-c)}
.f-bl{font-size:14px;line-height:1.65;max-width:34ch;margin-bottom:20px}
.f-mesures{display:grid;gap:10px;margin-top:4px}
.f-mesures div{display:flex;align-items:baseline;gap:10px}
.f-mesures div .v{font-family:var(--mono);font-size:16px;color:var(--blanc);letter-spacing:-.03em;white-space:nowrap}
.f-mesures div .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--gris2);margin-top:0;line-height:1.5}
footer h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--blanc);margin-bottom:15px;font-weight:400}
footer a{display:block;color:#AEB6C0;text-decoration:none;font-size:14px;padding:5px 0}
footer a:hover{color:var(--bleu-c)}
.f-contact{border-left:1px solid rgba(255,255,255,.13);padding-left:30px}
.f-contact .l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--gris2);margin-bottom:5px}
.f-contact .v{color:var(--blanc);font-size:15px;margin-bottom:16px}
.f-contact .v a{display:inline;color:var(--blanc);border-bottom:1px solid rgba(255,255,255,.3);padding:0}
.f-cta{margin-top:8px;display:inline-block;border:1px solid var(--blanc);color:var(--blanc);
 border-radius:var(--r-s);padding:13px 22px;text-decoration:none;font-weight:700;font-size:14px}
.f-cta:hover{background:var(--blanc);color:var(--nuit)}
.f-bas{border-top:1px solid rgba(255,255,255,.13);max-width:1420px;margin:0 auto;padding:18px 30px;
 display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
 font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris2)}
.f-bas .liens{display:flex;gap:18px;flex-wrap:wrap}
.f-bas a{display:inline;color:var(--gris2);font-size:10px;padding:0}
@media(max-width:1000px){.f-haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
 .f-contact{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.13);padding-top:24px;
  grid-column:1/-1}}
@media(max-width:620px){.f-haut{grid-template-columns:minmax(0,1fr)}}

/* ============ V9 — AJOUTS ============ */

/* logo vectoriel, une seule definition de trace reutilisee partout */
.mx{display:block;fill:currentColor}
.mx-header{width:150px;height:32px;color:var(--bleu)}
.mx-ui{width:78px;height:17px;color:var(--bleu)}
.mx-footer{width:168px;height:36px;color:var(--blanc);margin-bottom:16px}

/* @interface-reproduite:debut */
/* --- barre de recherche de l'application, reproduite au pixel --- */
.app-barre{display:flex;align-items:center;gap:9px;padding:13px 14px;background:var(--blanc);
 border-bottom:1px solid var(--filet)}
.app-scope{background:var(--bleu);color:var(--blanc);font-size:12px;font-weight:600;
 padding:9px 14px;border-radius:var(--r-m);display:flex;align-items:center;gap:7px;white-space:nowrap}
.app-scope.c{background:var(--marron)}
.app-scope.w{background:var(--vertweb)}
.app-scope svg{width:13px;height:13px;flex:none}
.app-ia{width:34px;height:34px;border-radius:var(--r-m);background:#F1F3F6;display:flex;
 align-items:center;justify-content:center;flex:none;color:#6C7480}
.app-ia svg{width:15px;height:15px}
.app-ia.on{background:var(--marron);color:var(--blanc)}
.app-ia.on::after{content:"IA";font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
 margin-left:3px}
.app-champ{flex:1;min-width:0;border:1px solid #E7EAEE;border-radius:var(--r-m);background:var(--blanc);
 padding:9px 13px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--encre)}
.app-champ .ph{color:#9AA1AB}
.app-champ .loupe{margin-left:auto;width:16px;height:16px;color:#6C7480;flex:none}
.app-icone{width:34px;height:34px;border-radius:var(--r-m);background:#F1F3F6;display:flex;
 align-items:center;justify-content:center;flex:none;color:#6C7480}
.app-icone svg{width:14px;height:14px}
.app-curs{display:inline-block;width:1.5px;height:15px;background:var(--marron);
 vertical-align:-3px;animation:clg 1.05s steps(2) infinite}
@keyframes clg{0%,50%{opacity:1}51%,100%{opacity:0}}
@media(max-width:620px){.app-icone{display:none}}

/* compteurs tricolores : bleu entreprises, marron contacts, vert sites web */
.app-compteurs{display:flex;gap:9px;padding:11px 14px;background:#FAFBFC;
 border-bottom:1px solid var(--filet);flex-wrap:wrap}
.app-cpt{display:flex;align-items:center;gap:7px;border:1px solid var(--filet);background:var(--blanc);
 border-radius:var(--r-s);padding:6px 11px}
.app-cpt i{width:7px;height:7px;border-radius:var(--r-2xs);flex:none}
.app-cpt .v{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--encre)}
.app-cpt .l{font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gris)}
.app-cpt.e i{background:var(--bleu)} .app-cpt.c i{background:var(--marron)}
.app-cpt.w i{background:var(--vertweb)}

/* lignes de resultats de l'application */
.app-ligne{padding:12px 14px;border-bottom:1px solid var(--filet);display:grid;
 grid-template-columns:32px minmax(0,1fr);gap:12px}
.app-vignette{width:32px;height:32px;border-radius:var(--r-s);display:flex;align-items:center;
 justify-content:center;font-family:var(--mono);font-size:10px;font-weight:600}
.app-vignette.e{background:var(--bleu-p);color:var(--bleu)}
.app-vignette.c{background:var(--marron-p);color:var(--marron)}
.app-vignette.w{background:var(--vertweb-p);color:var(--vertweb)}
.app-nom{font-weight:700;font-size:13.5px;letter-spacing:-.02em;margin-bottom:4px;
 display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-nom .tag{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;
 border-radius:var(--r-xs);padding:3px 6px;font-weight:500}
.app-nom .tag.exp{background:var(--marron-p);color:var(--marron)}
.app-meta{font-size:10.5px;color:var(--gris);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:5px}
.app-meta .rs{display:inline-flex;gap:3px;align-items:center}
.app-meta .rs i{width:11px;height:11px;border-radius:var(--r-2xs);display:block;background:#C7CFD8}
.app-desc{font-size:10.5px;color:#4A515A;line-height:1.5;margin-bottom:6px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-chiffres{display:flex;gap:14px;font-family:var(--mono);font-size:9.5px;color:var(--gris);flex-wrap:wrap}
.app-chiffres b{color:var(--encre);font-weight:600}

/* --- panneau de filtres reel, tel que l'application le structure --- */
.filtres-reels{border:1px solid var(--filet);border-radius:var(--r-xl);padding:2px 22px}
.fgrp{border-bottom:1px solid var(--filet);padding:15px 0 17px;display:grid;
 grid-template-columns:184px minmax(0,1fr);gap:26px;align-items:start}
.fgrp:last-child{border-bottom:0}
.fgrp > h4{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
 font-weight:400;color:var(--bleu);padding-top:3px}
.fgrp > h4 small{display:block;font-size:9px;letter-spacing:.1em;color:var(--gris2);margin-top:4px}
.fgrp .jeux{display:flex;flex-wrap:wrap;gap:5px}
.fgrp .jeux span{border:1px solid var(--filet);border-radius:var(--r-s);padding:6px 10px;font-size:12.5px;
 color:#3A414A;background:var(--blanc);transition:border-color .16s ease,color .16s ease}
.fgrp .jeux span:hover{border-color:var(--bleu);color:var(--bleu)}
.fgrp .jeux span.pt{border-color:var(--bleu);color:var(--bleu);background:var(--bleu-p)}
@media(max-width:760px){.fgrp{grid-template-columns:minmax(0,1fr);gap:11px}}

/* --- panneaux de filtre reproduits : ce que le commercial voit vraiment --- */
.panneaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.pan{border:1px solid var(--filet);border-radius:var(--r-l);background:var(--blanc);
 box-shadow:0 12px 30px rgba(14,17,22,.07);overflow:hidden;display:flex;flex-direction:column}
.pan-t{padding:12px 14px;border-bottom:1px solid var(--filet);display:flex;align-items:center;
 gap:9px;font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--bleu)}
.pan-t .x{margin-left:auto;color:var(--gris2);font-size:13px}
.pan-c{padding:13px 14px;flex:1}
.pan-c h6{font-size:11.5px;font-weight:700;margin-bottom:7px;color:var(--encre)}
.pan-c h6 + .sub{font-size:10px;color:var(--gris);margin:-4px 0 8px;line-height:1.45}
.pan-c .seg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}
.pan-c .seg span{border:1px solid var(--filet);border-radius:var(--r-s);padding:6px 10px;font-size:10.5px;
 color:#3A414A}
.pan-c .seg span.on{border-color:var(--bleu);background:var(--bleu);color:var(--blanc)}
.pan-c .sel{border:1px solid var(--filet);border-radius:var(--r-s);padding:8px 11px;font-size:10.5px;
 color:var(--gris2);display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.pan-c .sel::after{content:"⌄";color:#9AA1AB}
.pan-c .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:13px}
.pan-c .coche{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:11px;color:#3A414A}
.pan-c .coche i{width:14px;height:14px;border:1px solid #C7CFD8;border-radius:var(--r-2xs);flex:none;display:block}
.pan-c .coche i.on{background:var(--bleu);border-color:var(--bleu);position:relative}
.pan-c .coche i.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
 border:solid var(--blanc);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.pan-c .curseur{margin:4px 0 13px}
.pan-c .curseur .rail{height:3px;background:#E7EAEE;border-radius:var(--r-pill);position:relative}
.pan-c .curseur .rail i{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--bleu);
 border-radius:var(--r-pill)}
.pan-c .curseur .rail b{position:absolute;left:34%;top:50%;width:13px;height:13px;border-radius:50%;
 background:var(--blanc);border:3px solid var(--bleu);transform:translate(-50%,-50%)}
.pan-c .curseur .ech{display:flex;justify-content:space-between;font-family:var(--mono);
 font-size:9px;color:var(--gris2);margin-top:8px}
.pan-c .bulle{background:var(--bleu);color:var(--blanc);font-family:var(--mono);font-size:9.5px;
 border-radius:var(--r-pill);padding:4px 9px;float:right;margin-top:-4px}
.pan-carte{height:96px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--filet);
 position:relative;margin-bottom:11px}
.pan-carte svg{width:100%;height:100%;display:block}
.pan-p{padding:10px 14px;border-top:1px solid var(--filet);display:flex;align-items:center;
 justify-content:space-between;gap:10px}
.pan-p .raz{font-size:10.5px;color:var(--bleu)}
.pan-p .bts{display:flex;gap:7px}
.pan-p .bts span{border-radius:var(--r-s);padding:6px 13px;font-size:10.5px}
.pan-p .bts .an{border:1px solid #E88D7C;color:#D0563E}
.pan-p .bts .ap{background:var(--bleu);color:var(--blanc)}
.pan-p .bts .ap.off{background:#EBEDF1;color:#9AA1AB}
@media(max-width:1000px){.panneaux{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:640px){.panneaux{grid-template-columns:minmax(0,1fr)}}

/* @interface-reproduite:fin */

/* --- capacites : ce que vous pouvez faire avec Mixdata --- */
.capas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.capa{padding:24px;border:1px solid var(--filet);border-radius:var(--r-l);
 transition:background .18s ease,border-color .18s ease}
.capa:hover{background:var(--bleu-p);border-color:#CFDDEC}
.capa .pic{width:34px;height:34px;margin-bottom:15px;color:var(--bleu)}
.capa .pic svg{width:100%;height:100%;display:block}
.capa.c .pic{color:var(--marron)} .capa.w .pic{color:var(--vertweb)}
.capa h3{font-size:16.5px;margin-bottom:9px;max-width:22ch}
.capa p{font-size:14.5px;color:#3A414A;line-height:1.55}
@media(max-width:900px){.capas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){.capas{grid-template-columns:minmax(0,1fr)}}

/* --- bande de references fixe, sous le premier ecran ---
   Sept references, arretees avec l'equipe le 2 octobre. Elles ne defilent plus :
   une bande fixe se lit, une bande qui glisse se regarde. */
.bande-refs{border-top:2px solid var(--fort);border-bottom:1px solid var(--filet);
 padding:24px 0 26px}
.bande-refs .cap{margin-bottom:15px}
.refs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.refs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .refs .plaque{font-size:14px;padding:0 12px}}

/* --- les chiffres du referentiel, en une seule section ---
   Trois volumes, trois unites distinctes. Les barres et les deux categories
   « Postes recenses » et « Entreprises avec contacts » ont ete retirees : elles
   n'apportaient pas d'information utile et allongeaient la page. */
.chiffres-cles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ck{border-top:2px solid var(--fort);padding-top:16px}
.ck .v{font-family:var(--mono);font-size:clamp(28px,3.4vw,42px);letter-spacing:-.045em;
 line-height:1;color:var(--bleu)}
.ck .n{font-size:15px;font-weight:700;letter-spacing:-.025em;margin:10px 0 6px}
.ck p{font-size:13.5px;line-height:1.5;color:var(--gris)}
.mention-ck{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--gris)}
.mention-ck b{color:var(--encre)}
@media(max-width:820px){.chiffres-cles{grid-template-columns:minmax(0,1fr)}}

/* --- attribution des temoignages, sans photo ni nom complet ---
   Le document de retours demande la fonction precise, le pole ou service, la
   societe et son site web. */
.attrib{margin-top:6px;padding-bottom:14px;border-bottom:1px solid var(--filet)}
.attrib b{display:block;font-size:15px;font-weight:800;letter-spacing:-.025em}
.attrib span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
 color:var(--gris);margin-top:4px}

/* --- panneau de recherche semantique : jetons de mots-cles --- */
.jetons{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px}
.jetons span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
 background:var(--bleu-p);color:var(--bleu);border-radius:var(--r-xs);padding:4px 7px}
.jetons span.ex{background:var(--marron-p);color:var(--marron)}
.jetons i{font-style:normal;font-size:8.5px;opacity:.6}

/* --- le reacteur : la liste de quarante est un exemple, et elle le dit --- */
.illustratif{display:block;margin-top:14px;font-size:13px;line-height:1.5;color:#8FC0EE}
.res-col{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
 text-transform:uppercase;color:#8FC0EE;font-weight:400}

.plaque{display:flex;align-items:center;justify-content:center;height:62px;padding:0 30px;
 border:1px solid var(--filet);border-radius:var(--r-s);font-weight:800;font-size:17px;
 letter-spacing:-.045em;color:#4A515A;white-space:nowrap;
 transition:color .18s ease,border-color .18s ease}
.plaque:hover{color:var(--bleu);border-color:#CFDDEC}
.plaque span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 font-weight:400;color:var(--gris2);margin-left:9px}
@media(prefers-reduced-motion:reduce){.defile-piste{animation:none;flex-wrap:wrap;width:100%}}

/* --- connecteurs reconstruits en HTML, editables --- */
.conx{padding:4px 0 26px;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:38px;align-items:center}
/* --- page « CRM et API » : deux usages au choix, API, types de donnees ---
   Les retours du 2 octobre separent l'export CRM et l'acces API : ce sont deux
   possibilites distinctes, pas deux etapes d'un meme parcours. La mise en page
   les pose cote a cote plutot qu'en suite numerotee. */
.duo-usages{display:grid;gap:12px}
.us{display:block;text-decoration:none;color:inherit;border:1px solid var(--filet);
 border-radius:var(--r-l);padding:20px 22px;background:var(--blanc);
 transition:border-color .18s ease,background .18s ease}
.us:hover{border-color:var(--bleu);background:var(--bleu-p)}
.us-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--bleu)}
.us b{display:block;font-size:20px;font-weight:800;letter-spacing:-.035em;margin:7px 0 6px}
.us p{font-size:14px;line-height:1.5;color:var(--gris)}
.us-fl{display:inline-block;margin-top:11px;font-size:13px;font-weight:700;color:var(--bleu)}
.us-fl::after{content:" \2192"}

.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.op{border-top:2px solid var(--fort);padding-top:15px}
.op-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--bleu)}
.op b{display:block;font-size:19px;font-weight:800;letter-spacing:-.035em;margin:8px 0 7px}
.op p{font-size:14.5px;line-height:1.55;color:var(--gris)}

.tdd-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tdd{border:1px solid var(--filet);border-radius:var(--r-l);padding:21px 23px}
.tdd b{display:block;font-size:18px;font-weight:800;letter-spacing:-.035em;margin-bottom:9px}
.tdd p{font-size:14.5px;line-height:1.55}
/* « Une information absente ne doit pas etre montree comme systematiquement
   disponible » : la precision se lit, elle ne se devine pas. */
.tdd-p{margin-top:11px;padding-top:11px;border-top:1px solid var(--filet);
 font-size:13px;line-height:1.5;color:var(--gris)}
.mention{margin-top:16px;font-size:13px;line-height:1.55;color:var(--gris)}

@media(max-width:900px){
 .ops,.tdd-grille{grid-template-columns:minmax(0,1fr)}
}

.conx-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
/* Garde-fou : un nom de connecteur plus long que sa piste doit se replier,
   pas deborder de sa carte. */
.conx-grille > div{padding:19px 10px;border:1px solid var(--filet);
 border-radius:var(--r-s);text-align:center;line-height:1.25;
 overflow-wrap:anywhere;hyphens:auto;
 font-weight:700;font-size:13.5px;letter-spacing:-.03em;color:#4A515A;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:78px}
.conx-grille > div em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--bleu);font-weight:400}
.conx-grille > div.neuf{background:var(--bleu-p)}
.conx .txt{font-family:var(--mono);font-size:12px;color:var(--gris);line-height:1.85}
@media(max-width:1000px){.conx{grid-template-columns:minmax(0,1fr);gap:20px}
 .conx-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.conx-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* --- bandeau bidirectionnel entreprises / contacts / sites web --- */
.triade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.triade > div{padding:18px 20px;border:1px solid var(--filet);border-radius:var(--r-l)}
.triade .et{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 margin-bottom:10px;display:flex;align-items:center;gap:7px}
.triade .et i{width:7px;height:7px;border-radius:var(--r-2xs);display:block}
.triade .e .et{color:var(--bleu)} .triade .e .et i{background:var(--bleu)}
.triade .c .et{color:var(--marron)} .triade .c .et i{background:var(--marron)}
.triade .w .et{color:var(--vertweb)} .triade .w .et i{background:var(--vertweb)}
.triade .v{font-family:var(--mono);font-size:21px;letter-spacing:-.04em;margin-bottom:6px}
.triade p{font-size:13.5px;color:#3A414A;line-height:1.5}
@media(max-width:800px){.triade{grid-template-columns:minmax(0,1fr)}}

/* ============ PAGES INTERIEURES ET BLOG ============ */

/* fil d'Ariane */
.fil{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gris);display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{color:var(--bleu);border-bottom-color:var(--bleu)}
.fil span{color:var(--gris2)}

/* en-tete d'une page interieure ou d'un article */
.tete{padding:44px 0 34px;border-bottom:1px solid var(--filet)}
.tete h1{font-size:clamp(30px,4.1vw,56px);max-width:19ch;margin:16px 0 0}
.tete h1 em{font-style:normal;color:var(--bleu)}
.tete .chapo{margin-top:18px;max-width:62ch;font-size:17.5px;color:#2C333C;line-height:1.6}
.tete-meta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.etiq{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
 border:1px solid var(--filet);border-radius:var(--r-s);padding:6px 11px;color:#4A515A;
 text-decoration:none;transition:border-color .16s ease,color .16s ease}
.etiq:hover{border-color:var(--bleu);color:var(--bleu)}
.etiq.pleine{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.etiq.c{border-color:var(--marron);color:var(--marron)}
.etiq.w{border-color:var(--vertweb);color:var(--vertweb)}
.tete-date{font-family:var(--mono);font-size:11px;color:var(--gris)}

/* corps de texte riche : la seule zone ou le contenu client s'ecrit librement */
.corps{max-width:74ch;padding:38px 0 8px;font-size:17px;line-height:1.68;color:#23282F}
.corps > *:first-child{margin-top:0}
.corps p{margin:0 0 20px}
.corps h2{font-size:clamp(23px,2.7vw,33px);letter-spacing:-.035em;line-height:1.14;
 margin:44px 0 14px;max-width:26ch}
.corps h3{font-size:20px;letter-spacing:-.025em;margin:32px 0 11px;max-width:32ch}
.corps h4,.corps h5{font-size:16px;letter-spacing:-.015em;margin:26px 0 9px;color:var(--bleu)}
.corps ul,.corps ol{margin:0 0 22px;padding-left:0;list-style:none}
.corps ol{counter-reset:n}
.corps li{position:relative;padding:7px 0 7px 26px;border-top:1px solid var(--filet)}
.corps li:first-child{border-top:0}
.corps ul > li::before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;
 border-radius:var(--r-2xs);background:var(--bleu)}
.corps ol > li{counter-increment:n}
.corps ol > li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:8px;
 font-family:var(--mono);font-size:10.5px;color:var(--bleu)}
.corps a{color:var(--bleu);text-decoration:none;border-bottom:1px solid #BCD3E8}
.corps a:hover{border-bottom-color:var(--bleu);background:var(--bleu-p)}
.corps strong,.corps b{font-weight:700;color:var(--encre)}
.corps blockquote{margin:28px 0;padding:20px 24px;border:1px solid var(--filet);
 border-left:3px solid var(--bleu);border-radius:0 var(--r-l) var(--r-l) 0;
 background:var(--bleu-p);font-size:18px;line-height:1.5;color:#1A1F26}
.corps blockquote p:last-child{margin-bottom:0}
.corps hr{border:0;border-top:1px solid var(--filet);margin:34px 0}
.corps code{font-family:var(--mono);font-size:.88em;background:#F3F5F7;
 border-radius:var(--r-2xs);padding:2px 6px}
.corps pre{background:#F8F9FB;border:1px solid var(--filet);border-radius:var(--r-s);
 padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;margin:0 0 22px}
.corps table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 24px;
 border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;font-size:15px}
.corps th{background:var(--bleu-p);text-align:left;font-weight:700;font-size:13px;
 padding:11px 14px;border-bottom:1px solid var(--filet)}
.corps td{padding:11px 14px;border-bottom:1px solid var(--filet)}
.corps tr:last-child td{border-bottom:0}
/* Les visuels d'origine sont livres a leur taille de televersement : sans
   plafond de hauteur, une image en portrait occupe un ecran entier et casse
   la lecture. On borne la hauteur, la largeur suit. */
.corps img{max-width:100%;max-height:560px;width:auto;height:auto;display:block;
 border:1px solid var(--filet);border-radius:var(--r-l);margin:26px 0}
.corps figure img{max-height:520px}
.corps figure{margin:26px 0}
.corps figure img{margin:0}
.corps figcaption{font-family:var(--mono);font-size:11px;color:var(--gris);
 margin-top:10px;line-height:1.6}
@media(max-width:700px){.corps{font-size:16px}}

/* contenu tres court : on le dit plutot que de livrer une page qui parait cassee */
.corps-vide{border:1px dashed #C7CFD8;border-radius:var(--r-l);padding:26px;
 font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--gris)}

/* bandeau d'appel en pied de page interieure */
.rappel{margin:52px 0 0;border:1px solid var(--filet);border-radius:var(--r-2xl);
 padding:34px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;
 align-items:center;background:var(--bleu-p)}
.rappel h2{font-size:clamp(20px,2.2vw,28px);max-width:22ch;margin-bottom:8px}
.rappel p{font-size:15.5px;color:#3A414A;max-width:52ch}
@media(max-width:760px){.rappel{grid-template-columns:minmax(0,1fr);padding:26px 22px}}

/* index du blog : liste d'articles */
.cat-barre{display:flex;gap:8px;flex-wrap:wrap;padding:26px 0 0}
.liste-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
 padding:30px 0 0}
.carte-art{border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;
 display:flex;flex-direction:column;text-decoration:none;color:inherit;
 transition:border-color .18s ease,transform .18s ease}
.carte-art:hover{border-color:#CFDDEC;transform:translateY(-2px)}
.carte-vignette{height:132px;background:var(--bleu-p);position:relative;overflow:hidden;
 border-bottom:1px solid var(--filet)}
.carte-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.carte-vignette .sigle{position:absolute;inset:0;display:flex;align-items:center;
 justify-content:center;font-family:var(--mono);font-size:34px;letter-spacing:-.04em;
 color:var(--bleu);opacity:.5}
.carte-art .dedans{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1}
.carte-art .cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--bleu);margin-bottom:9px}
.carte-art h3{font-size:16.5px;letter-spacing:-.025em;line-height:1.24;margin-bottom:9px}
.carte-art p{font-size:13.5px;color:#4A515A;line-height:1.5;flex:1}
.carte-art .pied{margin-top:14px;padding-top:11px;border-top:1px solid var(--filet);
 font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--gris);display:flex;justify-content:space-between;gap:10px}
@media(max-width:940px){.liste-art{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.liste-art{grid-template-columns:minmax(0,1fr)}}

/* articles voisins */
.voisins{margin-top:54px;padding-top:30px;border-top:1px solid var(--filet)}
.voisins h2{font-size:21px;margin-bottom:20px}

/* sommaire d'une page interieure listant ses enfants */
.sommaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.sommaire a{border:1px solid var(--filet);border-radius:var(--r-l);padding:16px 18px;
 text-decoration:none;color:inherit;transition:border-color .18s ease,background .18s ease}
.sommaire a:hover{border-color:#CFDDEC;background:var(--bleu-p)}
.sommaire b{display:block;font-size:15.5px;letter-spacing:-.02em;margin-bottom:5px}
.sommaire span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--gris)}
@media(max-width:700px){.sommaire{grid-template-columns:minmax(0,1fr)}}

/* bandeau de maquette : cette page n'est pas le site en ligne */
.avis-maquette{background:var(--encre);color:#AEB6C0;font-family:var(--mono);font-size:10px;
 letter-spacing:.14em;text-transform:uppercase;padding:7px 30px;text-align:center}
.avis-maquette b{color:var(--blanc);font-weight:400}
.avis-maquette a{color:#8FC0EE;text-decoration:none;border-bottom:1px solid rgba(143,192,238,.4)}

/* ============ GABARITS DE PAGES INTERIEURES ============ */

/* --- accroche de page interieure : meme grammaire que l'accueil --- */
.hi{padding:52px 0 46px;border-bottom:1px solid var(--filet)}
.hi-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
 gap:52px;align-items:center}
.hi h1{font-size:clamp(31px,4.3vw,60px);max-width:17ch;margin:15px 0 0;letter-spacing:-.045em;
 line-height:1.0}
.hi h1 em{font-style:normal;color:var(--bleu)}
.hi .chapo{margin-top:20px;max-width:52ch;font-size:17px;color:#2C333C;line-height:1.6}
.hi .actions{margin-top:26px}
@media(max-width:1040px){.hi-grille{grid-template-columns:minmax(0,1fr);gap:32px}}
/* La dalle a besoin de respirer sous le menu : collee a l'en-tete elle
   donnait l'impression d'en faire partie. */
.hi.sombre{background:var(--nuit2);color:var(--blanc);border-bottom:0;
 border-radius:var(--r-2xl);margin:26px 30px 0;padding:52px 40px 50px}
.hi.sombre .cap{color:var(--gris2)}
.hi.sombre .chapo{color:#B4BCC6}
.hi.sombre h1 em{color:var(--bleu-c)}
.hi.sombre .cta-b{color:var(--blanc);border-color:var(--blanc)}
.hi.sombre .cta-b:hover{background:var(--blanc);color:var(--nuit2)}
@media(max-width:700px){.hi.sombre{margin:0 14px;padding:36px 22px;border-radius:var(--r-l)}}

/* bandeau de chiffres tires du texte */
.chb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:30px}
.chb > div{border:1px solid var(--filet);border-radius:var(--r-l);padding:16px 18px}
.chb .v{font-family:var(--mono);font-size:22px;letter-spacing:-.04em;color:var(--bleu)}
.chb .l{font-size:12.5px;color:#4A515A;margin-top:5px;line-height:1.4}
.hi.sombre .chb > div{border-color:rgba(255,255,255,.16)}
.hi.sombre .chb .v{color:var(--bleu-c)}
.hi.sombre .chb .l{color:#AEB6C0}
@media(max-width:820px){.chb{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- points d'une liste, en rangees numerotees --- */
.pts{border-top:2px solid var(--fort);margin-top:6px}
.pts > div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:20px;
 padding:15px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.pts > div:hover{background:var(--bleu-p)}
.pts .n{font-family:var(--mono);font-size:11px;color:var(--bleu)}
.pts .t{font-size:15.5px;color:#2C333C;line-height:1.55}
.pts .t strong{color:var(--encre)}
@media(max-width:640px){.pts > div{grid-template-columns:32px minmax(0,1fr);gap:12px}}

/* --- cartes generiques issues d'une liste --- */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.cartes.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.carte{border:1px solid var(--filet);border-radius:var(--r-l);padding:22px 22px 24px;
 transition:background .18s ease,border-color .18s ease}
.carte:hover{background:var(--bleu-p);border-color:#CFDDEC}
.carte .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--bleu);
 margin-bottom:12px}
.carte h3{font-size:16.5px;margin-bottom:9px;max-width:24ch}
.carte p{font-size:14.5px;color:#3A414A;line-height:1.55}
@media(max-width:900px){.cartes,.cartes.deux{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cartes,.cartes.deux{grid-template-columns:minmax(0,1fr)}}

/* --- idees de ciblage : une carte par idee, l'etiquette en exergue --- */
.idees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.idee{border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;
 display:flex;flex-direction:column;transition:border-color .18s ease}
.idee:hover{border-color:#CFDDEC}
.idee .bande{background:var(--bleu);color:var(--blanc);padding:13px 18px;
 font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.idee:nth-child(3n-1) .bande{background:var(--marron)}
.idee:nth-child(3n) .bande{background:var(--vertweb)}
.idee .dedans{padding:20px 18px 22px;flex:1}
.idee h3{font-size:17px;margin-bottom:10px;letter-spacing:-.025em}
.idee p{font-size:14.5px;color:#3A414A;line-height:1.55}
.idee p + p{margin-top:10px}
@media(max-width:900px){.idees{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.idees{grid-template-columns:minmax(0,1fr)}}

/* --- gabarit documentaire : rail lateral colle + corps --- */
.doc{display:grid;grid-template-columns:262px minmax(0,1fr);gap:54px;
 padding:42px 0 10px}
.doc-rail{position:sticky;top:78px}
.doc-rail h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;
 text-transform:uppercase;color:var(--gris);margin:0 0 12px;font-weight:400}
.doc-rail h4 + h4{margin-top:22px}
.doc-rail a{display:block;font-size:13.5px;line-height:1.4;padding:8px 0 8px 13px;
 color:#4A515A;text-decoration:none;border-left:2px solid var(--filet);
 transition:color .16s ease,border-color .16s ease}
.doc-rail a:hover{color:var(--bleu);border-left-color:#BCD3E8}
.doc-rail a[aria-current]{color:var(--bleu);font-weight:700;border-left-color:var(--bleu)}
.doc-rail .meta{border:1px solid var(--filet);border-radius:var(--r-l);padding:15px 16px;
 font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--gris)}
.doc-rail .meta b{display:block;color:var(--encre);font-weight:600;
 font-family:"Plus Jakarta Sans",sans-serif;font-size:13.5px;letter-spacing:-.02em;
 margin-bottom:6px}
@media(max-width:980px){.doc{grid-template-columns:minmax(0,1fr);gap:26px}
 .doc-rail{position:static;border-bottom:1px solid var(--filet);padding-bottom:18px}}

/* corps juridique : paragraphes numerotes, sans structure inventee */
.juridique{max-width:70ch;counter-reset:para}
.juridique p{counter-increment:para;position:relative;padding-left:46px;margin:0 0 18px;
 font-size:15.5px;line-height:1.72;color:#2C333C}
.juridique p::before{content:"§" counter(para);position:absolute;left:0;top:3px;
 font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--gris2)}
.juridique h4{font-size:16px;margin:32px 0 12px;letter-spacing:-.02em}
.juridique ul{list-style:none;margin:0 0 18px;padding-left:46px}
.juridique li{position:relative;padding:6px 0 6px 18px;font-size:15px;color:#3A414A;
 line-height:1.6}
.juridique li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
 border-radius:var(--r-2xs);background:var(--bleu)}
.juridique a{color:var(--bleu)}
.juridique img{display:none}           /* les legales n'ont pas d'illustration */
@media(max-width:640px){.juridique p{padding-left:34px}.juridique ul{padding-left:34px}}

/* --- academy : une fiche de prise en main --- */
.acad-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:8px 0 0}
.acad-bloc{border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden}
.acad-bloc > h3{background:var(--bleu-p);color:var(--bleu);margin:0;padding:12px 18px;
 font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
 font-weight:400;border-bottom:1px solid #DCE7F2}
.acad-bloc.retenir > h3{background:#FBF2EC;color:var(--marron);border-bottom-color:#F0DCD0}
.acad-bloc ul{list-style:none;margin:0;padding:6px 18px 14px}
.acad-bloc li{position:relative;padding:11px 0 11px 20px;font-size:14.5px;line-height:1.55;
 color:#3A414A;border-top:1px solid var(--filet)}
.acad-bloc li:first-child{border-top:0}
.acad-bloc li::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;
 border-radius:var(--r-2xs);background:var(--bleu)}
.acad-bloc.retenir li::before{background:var(--marron)}
.acad-bloc p{padding:14px 18px;font-size:14.5px;color:#3A414A;line-height:1.6;margin:0}
@media(max-width:820px){.acad-duo{grid-template-columns:minmax(0,1fr)}}
.acad-suite{margin-top:34px;padding-top:24px;border-top:1px solid var(--filet);
 display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acad-suite a{display:block;max-width:46%;text-decoration:none;color:inherit}
.acad-suite span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gris);display:block;margin-bottom:5px}
.acad-suite b{font-size:15px;letter-spacing:-.02em;color:var(--encre)}
.acad-suite a:hover b{color:var(--bleu)}
.acad-suite .apres{text-align:right;margin-left:auto}
@media(max-width:640px){.acad-suite a{max-width:100%}}

/* --- landing : la colonne de conversion --- */
.conv{border:1px solid var(--filet);border-radius:var(--r-2xl);overflow:hidden;
 box-shadow:0 22px 54px rgba(14,17,22,.09);background:var(--blanc)}
.conv-t{background:var(--encre);color:var(--blanc);padding:20px 24px}
.conv-t .cap{color:rgba(255,255,255,.6)}
.conv-t b{display:block;font-size:19px;letter-spacing:-.03em;margin-top:8px;font-weight:800}
.conv-c{padding:20px 24px 24px}
.conv-c label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--gris);margin:0 0 6px}
.conv-champ{border:1px solid #E7EAEE;border-radius:var(--r-s);padding:11px 13px;
 font-size:13.5px;color:var(--gris2);margin-bottom:14px;background:#FCFCFD}
.conv-c .cta-primaire{width:100%;text-align:center}
.conv-p{border-top:1px solid var(--filet);padding:13px 24px;font-family:var(--mono);
 font-size:10px;letter-spacing:.1em;color:var(--gris);line-height:1.8}

/* Le rail documentaire compte jusqu'a dix-huit entrees : sans defilement
   propre il imposait sa hauteur a toute la page. */
.doc-rail{max-height:calc(100vh - 108px);overflow-y:auto;scrollbar-width:thin}
/* Les captures sont livrees a leur taille de televersement. */
.module .vis .ui img{max-height:440px;width:auto;margin:0 auto}

/* Titres numerotes d'un document juridique : le texte source est en
   capitales non accentuees, on ne le transforme pas, on le compose. */
.juridique h4{display:flex;gap:12px;align-items:baseline;font-size:13px;
 letter-spacing:.1em;color:var(--bleu);font-weight:700;margin:38px 0 14px;
 padding-bottom:9px;border-bottom:1px solid var(--filet)}
.juridique h4 span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
 color:var(--gris2);font-weight:400}
.juridique h4:first-child{margin-top:0}

/* Entree d'arborescence dont la page reste a produire : elle figure au menu,
   elle ne feint pas d'y mener. */
.a-produire{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--gris2);padding:9px 11px;display:block;
 white-space:nowrap;cursor:default;border:1px solid transparent;
 border-radius:var(--r-s)}
.sous-menu .a-produire{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;
 font-weight:600;letter-spacing:-.015em;text-transform:none;color:var(--gris2);
 padding:10px 16px}
.sous-menu .a-produire span{display:block;font-family:var(--mono);font-size:9.5px;
 letter-spacing:.13em;text-transform:uppercase;color:#BFC5CD;font-weight:400;
 margin-top:3px}
.f-a-produire{display:block;color:#6B7480;font-size:14px;padding:5px 0}
.f-a-produire::after{content:" · à créer";font-family:var(--mono);font-size:9px;
 letter-spacing:.12em;text-transform:uppercase;color:#4E565F}

/* ============ ECRANS PRODUITS REPRODUITS EN HTML ============ */
/* @interface-reproduite:debut */

/* --- bandeau de comptage en tete d'ecran --- */
.ecr-bandeau{background:var(--marron);color:var(--blanc);padding:11px 15px;
 display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
 letter-spacing:-.01em}
.ecr-bandeau .n{font-family:var(--mono);font-size:14px;letter-spacing:-.03em}
.ecr-bandeau.e{background:var(--bleu)}

/* --- barre d'outils : recherche, liste, credits --- */
.ecr-outils{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1fr);
 gap:14px;padding:13px 15px;border-bottom:1px solid var(--filet);background:#FAFBFC}
.ecr-outils label{display:block;font-family:var(--mono);font-size:8.5px;
 letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.ecr-champ{border:1px solid #E7EAEE;border-radius:var(--r-s);background:var(--blanc);
 padding:8px 11px;font-size:11.5px;color:var(--gris2);display:flex;
 align-items:center;justify-content:space-between;gap:8px}
.ecr-champ svg{width:12px;height:12px;color:#6C7480;flex:none}
.ecr-champ b{color:var(--encre);font-weight:600}
.ecr-res{font-family:var(--mono);font-size:15px;letter-spacing:-.03em;color:var(--encre)}
.ecr-res small{display:block;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gris);margin-top:3px}
.ecr-coche{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#4A515A;
 margin-top:9px}
.ecr-coche i{width:12px;height:12px;border-radius:var(--r-2xs);background:var(--marron);
 flex:none;position:relative;display:block}
.ecr-coche i::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;
 border:solid var(--blanc);border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
.ecr-liens{display:flex;flex-direction:column;gap:6px}
.ecr-liens span{font-size:10.5px;color:#4A515A;display:flex;align-items:center;gap:7px}
.ecr-liens span svg{width:11px;height:11px;color:var(--marron);flex:none}
.ecr-liens b{color:var(--encre);font-weight:600}
@media(max-width:820px){.ecr-outils{grid-template-columns:minmax(0,1fr)}}

/* --- barre de selection et d'action --- */
.ecr-actions{display:flex;align-items:center;gap:13px;padding:10px 15px;
 border-bottom:1px solid var(--filet);font-size:10.5px;color:#4A515A;flex-wrap:wrap}
.ecr-actions .sel{font-weight:600;color:var(--encre)}
.ecr-boutons{margin-left:auto;display:flex;gap:6px;align-items:center}
.ecr-bt{width:28px;height:28px;border:1px solid var(--filet);border-radius:var(--r-s);
 display:flex;align-items:center;justify-content:center;color:#6C7480;background:var(--blanc)}
.ecr-bt svg{width:13px;height:13px}
.ecr-bt.on{border-color:var(--bleu);background:var(--bleu);color:var(--blanc)}
.ecr-bulle{position:relative}
/* A droite du bouton il n'y a pas la place, et sous le bouton l'infobulle
   recouvrait la raison sociale de la fiche. Elle se pose donc a gauche, dans
   la barre d'outils, ou l'espace est libre. */
.ecr-bulle .info{position:absolute;top:50%;right:calc(100% + 11px);
 transform:translateY(-50%);white-space:nowrap;
 background:var(--encre);color:var(--blanc);border-radius:var(--r-s);padding:7px 11px;
 font-size:10.5px;font-weight:600;z-index:3}
.ecr-bulle .info::after{content:"";position:absolute;top:50%;left:100%;
 margin-top:-4.5px;margin-left:-4.5px;width:9px;height:9px;
 background:var(--encre);transform:rotate(45deg)}

/* --- deux volets : index, liste, fiche --- */
.ecr-duo{display:grid;grid-template-columns:34px minmax(0,230px) minmax(0,1fr)}
.ecr-alpha{border-right:1px solid var(--filet);background:#FCFCFD;padding:8px 0;
 display:flex;flex-direction:column;align-items:center;gap:1px;
 font-family:var(--mono);font-size:8.5px;color:var(--gris2)}
.ecr-alpha b{background:var(--marron);color:var(--blanc);border-radius:var(--r-2xs);
 padding:3px 5px;font-weight:400}
.ecr-liste{border-right:1px solid var(--filet);min-width:0}
.ecr-l{padding:10px 12px;border-bottom:1px solid var(--filet);display:grid;
 grid-template-columns:13px minmax(0,1fr);gap:9px}
.ecr-l.on{background:var(--marron-p)}
.ecr-l i{width:12px;height:12px;border-radius:var(--r-2xs);background:var(--marron);
 margin-top:2px;position:relative;display:block}
.ecr-l i::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;
 border:solid var(--blanc);border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
.ecr-l .f{font-size:10.5px;color:#4A515A;line-height:1.35}
.ecr-l .s{font-size:10px;font-weight:700;color:var(--encre);margin-top:3px;
 letter-spacing:-.01em}
.ecr-l .masq{display:inline-block;height:8px;width:62px;border-radius:var(--r-pill);
 background:#DDE2E8;margin-bottom:4px}
.ecr-fiche2{padding:15px 17px;min-width:0}
.ecr-fiche2 .ligne1{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ecr-fiche2 .fonc{font-size:11px;color:#4A515A;text-transform:uppercase;letter-spacing:.04em}
.ecr-fiche2 .soc{text-align:right;font-size:12px;font-weight:700;color:var(--bleu);
 letter-spacing:-.02em}
.ecr-fiche2 .soc span{display:block;font-weight:400;color:var(--gris);font-size:10px;
 letter-spacing:0;margin-top:3px;line-height:1.5}
.ecr-fiche2 .mail{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:11px}
.ecr-fiche2 .mail i{width:14px;height:11px;border-radius:var(--r-2xs);background:#3A9B5C;
 display:block;flex:none}
.ecr-fiche2 .mail .masq{display:inline-block;height:9px;width:118px;border-radius:var(--r-pill);
 background:#DDE2E8}
.ecr-fiche2 .mail b{color:var(--encre);font-weight:500}
.ecr-fiche2 .bas{margin-top:16px;padding-top:13px;border-top:1px solid var(--filet);
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
 font-size:10.5px;color:#4A515A}
.ecr-fiche2 .bas .et{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.ecr-fiche2 .bas em{font-style:italic;color:var(--encre)}
.ecr-fiche2 .bas .tag{display:inline-flex;align-items:center;gap:6px;
 border:1px solid var(--filet);border-radius:var(--r-s);padding:4px 8px;font-size:10px}
@media(max-width:760px){.ecr-duo{grid-template-columns:minmax(0,1fr)}
 .ecr-alpha{display:none}.ecr-liste{border-right:0;border-bottom:1px solid var(--filet)}}

/* --- le passage de Mixdata au CRM --- */
.flux-crm{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);
 gap:0;align-items:center}
.flux-crm .fleche{display:flex;flex-direction:column;align-items:center;gap:7px;
 font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--bleu);text-align:center}
.flux-crm .fleche svg{width:26px;height:26px}
.crm-ui{border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;
 background:var(--blanc)}
.crm-tete{padding:11px 14px;border-bottom:1px solid var(--filet);display:flex;
 align-items:center;gap:10px;background:#FAFBFC}
.crm-tete b{font-size:13px;letter-spacing:-.03em}
.crm-tete .pill{margin-left:auto;background:var(--bleu);color:var(--blanc);
 border-radius:var(--r-s);padding:5px 10px;font-size:9.5px;font-weight:600}
.crm-l{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);gap:10px;
 padding:9px 14px;border-bottom:1px solid var(--filet);font-size:10.5px;align-items:center}
.crm-l .ini{width:22px;height:22px;border-radius:50%;background:var(--bleu-p);
 color:var(--bleu);font-family:var(--mono);font-size:8px;display:flex;
 align-items:center;justify-content:center}
.crm-l .fo{color:#4A515A}
.crm-l .so{color:var(--gris);text-align:right}
.crm-l .masq{display:inline-block;height:8px;width:70px;border-radius:var(--r-pill);
 background:#DDE2E8}
@media(max-width:860px){.flux-crm{grid-template-columns:minmax(0,1fr)}
 .flux-crm .fleche{padding:16px 0;flex-direction:row}
 .flux-crm .fleche svg{transform:rotate(90deg)}}

/* @interface-reproduite:fin */

/* --- quatre visuels de prestation, dessines plutot qu'illustres --- */
.viz{border:1px solid var(--filet);border-radius:var(--r-xl);overflow:hidden;
 background:var(--blanc);box-shadow:0 18px 44px rgba(14,17,22,.08)}
.viz-t{padding:11px 15px;border-bottom:1px solid var(--filet);background:#FAFBFC;
 font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--gris);display:flex;align-items:center;gap:9px}
.viz-t b{margin-left:auto;color:var(--bleu);font-weight:400}
.viz-c{padding:15px}

/* colonnes d'un fichier enrichi */
.enr{display:grid;grid-template-columns:62px repeat(4,minmax(0,1fr));gap:1px;
 background:var(--filet);border:1px solid var(--filet);border-radius:var(--r-s);
 overflow:hidden;font-size:9.5px}
.enr > span{background:var(--blanc);padding:7px 8px;color:#4A515A;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enr > span.h{background:#F3F5F7;font-family:var(--mono);font-size:8px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.enr > span.ajout{background:var(--bleu-p);color:var(--bleu);font-weight:600}
.enr > span.h.ajout{background:#DCE8F5;color:var(--bleu)}
.enr-leg{margin-top:10px;display:flex;gap:16px;font-family:var(--mono);font-size:9px;
 color:var(--gris);flex-wrap:wrap}
.enr-leg i{display:inline-block;width:8px;height:8px;border-radius:var(--r-2xs);
 margin-right:6px;vertical-align:-1px}

/* paliers de score */
.sco > div{display:grid;grid-template-columns:76px minmax(0,1fr) 62px;gap:12px;
 align-items:center;padding:9px 0;border-bottom:1px solid var(--filet)}
.sco > div:last-child{border-bottom:0}
.sco .nom{font-size:11.5px;font-weight:700;letter-spacing:-.01em}
.sco .barre{height:10px;background:#F1F2F4;border-radius:var(--r-pill);overflow:hidden}
.sco .barre i{display:block;height:100%;border-radius:var(--r-pill)}
.sco .v{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--encre)}

/* propension predite */
.pre > div{display:grid;grid-template-columns:22px minmax(0,1fr) 78px;gap:10px;
 align-items:center;padding:8px 0;border-bottom:1px solid var(--filet);font-size:10.5px}
.pre > div:last-child{border-bottom:0}
.pre .r{font-family:var(--mono);font-size:9px;color:var(--bleu)}
.pre .j{height:7px;background:#F1F2F4;border-radius:var(--r-pill);overflow:hidden;
 margin-top:5px}
.pre .j i{display:block;height:100%;background:var(--bleu);border-radius:var(--r-pill)}
.pre .p{font-family:var(--mono);font-size:10px;text-align:right;color:var(--encre)}

/* jumeaux statistiques */
.look{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
 align-items:center;gap:0}
.look .col{border:1px solid var(--filet);border-radius:var(--r-s);padding:11px 12px}
.look .col.src{background:#FAFBFC}
.look .et{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--gris);margin-bottom:9px}
.look .v{font-family:var(--mono);font-size:20px;letter-spacing:-.04em;color:var(--bleu)}
.look .l{font-size:10.5px;color:#4A515A;margin-top:4px;line-height:1.45}
.look .pts2{display:flex;flex-wrap:wrap;gap:3px;margin-top:10px}
.look .pts2 i{width:7px;height:7px;border-radius:var(--r-2xs);background:#CFD6DD;display:block}
.look .pts2 i.on{background:var(--bleu)}
.look .fl{display:flex;justify-content:center;color:var(--bleu)}
.look .fl svg{width:22px;height:22px}
@media(max-width:620px){.look{grid-template-columns:minmax(0,1fr)}
 .look .fl{padding:12px 0}.look .fl svg{transform:rotate(90deg)}}

/* ============ BLOG : GABARIT D'ARTICLE ============ */

/* barre de progression de lecture */
/* La barre appartient a l'en-tete et se pose sous lui : en `position:fixed`
   a `top:0` elle passait par-dessus le menu. Enfant de l'en-tete colle, elle
   le suit sans calcul de hauteur, y compris quand le bandeau de maquette a
   defile et que l'en-tete change de hauteur en mobile. */
.lp{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:transparent;
 pointer-events:none}
.lp i{display:block;height:100%;width:0;background:var(--bleu);
 transition:width .08s linear}

/* en-tete d'article : meta a gauche, visuel a droite */
.at{padding:34px 0 30px;border-bottom:1px solid var(--filet)}
.at-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
 gap:46px;align-items:center}
.at h1{font-size:clamp(28px,3.7vw,50px);letter-spacing:-.045em;line-height:1.03;
 margin:16px 0 0;max-width:20ch}
.at .chapo{margin-top:17px;max-width:56ch;font-size:17px;color:#2C333C;line-height:1.6}
.at-cats{display:flex;gap:7px;flex-wrap:wrap}
.at-meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--filet);
 display:flex;gap:26px;flex-wrap:wrap}
.at-meta > div{font-family:var(--mono);font-size:11px;color:var(--gris);line-height:1.7}
.at-meta b{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:13.5px;
 font-weight:700;color:var(--encre);letter-spacing:-.02em}
.at-vis{border:1px solid var(--filet);border-radius:var(--r-xl);overflow:hidden;
 background:var(--bleu-p);aspect-ratio:16/10;display:flex;align-items:center;
 justify-content:center}
.at-vis img{width:100%;height:100%;object-fit:cover;display:block}
.at-vis .sigle{font-family:var(--mono);font-size:58px;letter-spacing:-.05em;
 color:var(--bleu);opacity:.45}
@media(max-width:940px){.at-grille{grid-template-columns:minmax(0,1fr);gap:26px}}

/* barre de partage et de reprise par une IA */
.bp{display:flex;align-items:center;justify-content:space-between;gap:18px;
 flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--filet)}
.bp-lot{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bp-lot > span.et{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gris);margin-right:4px}
.bp-b{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--filet);
 border-radius:var(--r-s);padding:6px 11px;font-size:11.5px;color:#3A414A;
 text-decoration:none;background:var(--blanc);cursor:pointer;font-family:inherit;
 transition:border-color .16s ease,color .16s ease}
.bp-b:hover{border-color:var(--bleu);color:var(--bleu)}
.bp-b svg{width:13px;height:13px}
.bp-b.ia{font-family:var(--mono);font-size:10px;letter-spacing:.08em}

/* corps en trois colonnes */
/* 20/60/20 exprime en pourcentages faisait 96 % plus deux gouttieres de 4 % :
   la grille debordait et le sommaire se depliait a l'horizontale. Des pistes
   fixes pour les colonnes laterales, le corps prend ce qui reste. */
.a3{display:grid;grid-template-columns:216px minmax(0,1fr) 268px;gap:46px;
 padding:34px 0 10px}
@media(max-width:1340px){.a3{grid-template-columns:190px minmax(0,1fr) 240px;gap:34px}}
@media(max-width:1080px){.a3{grid-template-columns:minmax(0,1fr);gap:30px}
 .a3 .col-toc{order:2}.a3 .col-corps{order:1}.a3 .col-cta{order:3}}

/* sommaire colle avec suivi de lecture */
.toc{position:sticky;top:78px;font-size:13px}
.toc h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--gris);margin:0 0 12px;font-weight:400}
.toc a{display:block;padding:7px 0 7px 13px;color:#5A626C;text-decoration:none;
 border-left:2px solid var(--filet);line-height:1.4;
 transition:color .16s ease,border-color .16s ease}
.toc a:hover{color:var(--bleu)}
.toc a.n3{padding-left:24px;font-size:12px}
.toc a[aria-current]{color:var(--bleu);font-weight:700;border-left-color:var(--bleu)}
@media(max-width:1080px){.toc{position:static;border-top:1px solid var(--filet);
 padding-top:18px}}

/* appels a l'action colles */
.cc{position:sticky;top:78px;display:flex;flex-direction:column;gap:12px}
.cc-b{border:1px solid var(--filet);border-radius:var(--r-l);padding:18px}
.cc-b.fort{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.cc-b .et{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--bleu);margin-bottom:10px;display:block}
.cc-b.fort .et{color:#8FC0EE}
.cc-b b{display:block;font-size:15.5px;letter-spacing:-.025em;line-height:1.25;
 margin-bottom:8px}
.cc-b p{font-size:13px;color:#4A515A;line-height:1.5;margin-bottom:14px}
.cc-b.fort p{color:#AEB6C0}
.cc-b .cta-primaire,.cc-b .cta-b{display:block;text-align:center;font-size:13.5px;
 padding:11px 14px;width:100%}
.cc-b.fort .cta-primaire{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.cc-b.fort .cta-primaire:hover{background:var(--bleu);color:var(--blanc);border-color:var(--bleu)}
@media(max-width:1080px){.cc{position:static;flex-direction:row;flex-wrap:wrap}
 .cc-b{flex:1;min-width:260px}}

/* blocs de pied d'article */
.bloc-art{margin-top:32px;border:1px solid var(--filet);border-radius:var(--r-l);
 overflow:hidden}
.bloc-art > h2,.bloc-art > h3{background:#FAFBFC;margin:0;padding:12px 18px;
 font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
 font-weight:400;color:var(--gris);border-bottom:1px solid var(--filet)}
.bloc-art .dedans{padding:16px 18px}

/* vote utile / pas utile */
.note-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.note-a span{font-size:14px;color:#3A414A}
.note-a button{border:1px solid var(--filet);border-radius:var(--r-s);background:var(--blanc);
 padding:8px 14px;font-family:inherit;font-size:13px;cursor:pointer;color:#3A414A;
 display:inline-flex;align-items:center;gap:7px;transition:border-color .16s,color .16s}
.note-a button:hover{border-color:var(--bleu);color:var(--bleu)}
.note-a button[aria-pressed="true"]{border-color:var(--bleu);background:var(--bleu-p);
 color:var(--bleu);font-weight:600}
.note-a button svg{width:14px;height:14px}
.note-a .merci{font-family:var(--mono);font-size:11px;color:var(--vert)}

/* fiche auteur */
.auteur{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.auteur .rond{width:56px;height:56px;border-radius:50%;background:var(--bleu-p);
 border:1px solid var(--filet);display:flex;align-items:center;justify-content:center;
 font-family:var(--mono);font-size:16px;color:var(--bleu)}
.auteur b{font-size:15px;letter-spacing:-.02em;display:block}
.auteur .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--bleu);margin:4px 0 8px}
.auteur p{font-size:14px;color:#3A414A;line-height:1.55}

/* historique des versions */
.histo{list-style:none;margin:0;padding:0}
.histo li{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;
 padding:9px 0;border-top:1px solid var(--filet);font-size:14px;color:#3A414A}
.histo li:first-child{border-top:0}
.histo .d{font-family:var(--mono);font-size:11px;color:var(--gris)}

/* references */
.sources{list-style:none;margin:0;padding:0;counter-reset:s}
.sources li{counter-increment:s;position:relative;padding:9px 0 9px 32px;
 border-top:1px solid var(--filet);font-size:14px;line-height:1.5}
.sources li:first-child{border-top:0}
.sources li::before{content:"[" counter(s) "]";position:absolute;left:0;top:11px;
 font-family:var(--mono);font-size:10px;color:var(--bleu)}

/* questions frequentes */
.faq details{border-top:1px solid var(--filet)}
.faq details:first-child{border-top:0}
.faq summary{padding:13px 0;font-size:15px;font-weight:700;letter-spacing:-.02em;
 cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);font-size:15px;color:var(--bleu);
 flex:none;width:14px}
.faq details[open] summary::before{content:"–"}
.faq .rep{padding:0 0 14px 26px;font-size:14.5px;color:#3A414A;line-height:1.6}

/* etiquettes de fin d'article */
.etiqs{margin-top:28px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.etiqs .et{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gris);margin-right:4px}

/* bandeau d'inscription */
.news{background:var(--bleu-p);border-top:1px solid var(--filet)}
.news-int{max-width:1420px;margin:0 auto;padding:40px 30px;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:center}
.news h2{font-size:clamp(21px,2.4vw,30px);max-width:20ch;margin-bottom:9px}
.news p{font-size:15.5px;color:#3A414A;max-width:52ch}
.news-form{display:flex;gap:9px;flex-wrap:wrap}
.news-form .champ{flex:1;min-width:190px;border:1px solid #CFDDEC;border-radius:var(--r-s);
 background:var(--blanc);padding:13px 15px;font-size:14px;color:var(--gris2)}
.news-form .cta-primaire{padding:13px 22px}
.news .note{margin-top:10px;font-family:var(--mono);font-size:10px;color:var(--gris)}
@media(max-width:860px){.news-int{grid-template-columns:minmax(0,1fr);gap:22px}}

/* --- page mere du blog --- */
.vedette{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;
 border:1px solid var(--filet);border-radius:var(--r-xl);overflow:hidden;
 text-decoration:none;color:inherit;margin-top:30px;
 transition:border-color .18s ease}
.vedette:hover{border-color:#CFDDEC}
.vedette .vis{background:var(--bleu-p);aspect-ratio:16/10;overflow:hidden;
 display:flex;align-items:center;justify-content:center}
.vedette .vis img{width:100%;height:100%;object-fit:cover;display:block}
.vedette .vis .sigle{font-family:var(--mono);font-size:52px;color:var(--bleu);opacity:.45}
.vedette .dedans{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.vedette .et{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
 text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.vedette h2{font-size:clamp(22px,2.5vw,31px);letter-spacing:-.035em;line-height:1.13;
 margin-bottom:12px;max-width:22ch}
.vedette p{font-size:15px;color:#4A515A;line-height:1.55;max-width:50ch}
.vedette .pied{margin-top:18px;font-family:var(--mono);font-size:10.5px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--gris);display:flex;gap:16px}
@media(max-width:860px){.vedette{grid-template-columns:minmax(0,1fr)}
 .vedette .vis{order:-1}}

.nuage{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.nuage a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
 border:1px solid var(--filet);border-radius:var(--r-pill);padding:5px 11px;
 color:#5A626C;text-decoration:none;transition:border-color .16s,color .16s}
.nuage a:hover{border-color:var(--bleu);color:var(--bleu)}

.pagi{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:36px;
 flex-wrap:wrap}
.pagi a,.pagi span{min-width:36px;height:36px;border:1px solid var(--filet);
 border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;
 font-family:var(--mono);font-size:12px;color:#4A515A;text-decoration:none;padding:0 11px}
.pagi a:hover{border-color:var(--bleu);color:var(--bleu)}
.pagi .on{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.pagi .vide{border:0;color:var(--gris2)}

/* --- impression : on ne garde que l'article --- */
@media print{
  .avis-maquette,header,footer,.lp,.bp,.cc,.toc,.news,.rappel,.voisins,
  .grain,.note-a,.etiqs{display:none!important}
  .a3{display:block;padding:0}
  body{font-size:11pt;background:#fff}
  .at{border-bottom:1px solid #999;padding:0 0 12pt}
  .at-grille{display:block}
  .at-vis{display:none}
  .corps{max-width:none;font-size:11pt}
  .corps a{color:#000;border:0;text-decoration:underline}
  .corps a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .corps img{max-height:9cm}
  .bloc-art{break-inside:avoid;border-color:#bbb}
  .wrap{max-width:none;padding:0}
}

/* Pied de bloc de cloture : l'offre secondaire s'y range, subordonnee a
   l'appel principal au lieu de lui faire concurrence. */
.rappel-pied{grid-column:1/-1;margin-top:24px;padding-top:18px;
 border-top:1px solid #CFDDEC;display:flex;align-items:center;gap:16px;
 flex-wrap:wrap;font-size:14.5px;color:#3A414A;line-height:1.5}
.rappel-pied b{font-weight:700;color:var(--encre)}
.rappel-pied .cta-c{margin-left:auto;white-space:nowrap}
@media(max-width:760px){.rappel-pied .cta-c{margin-left:0}}