@charset "UTF-8";
/* ===== SyndiLibre · BLOCS DA06, designs retenus =====
   Le CSS des designs arbitrés par le client le 2026-09-17, un par modèle de bloc, extrait de
   sa page template. Se charge APRÈS site-da06.css (le socle : jetons, base, en-tête,
   sections, pied) : ce fichier ne porte QUE les classes propres aux blocs.

   ⚠ Les pages template ne sont PAS vidées de leur CSS : la planche d'arbitrage et la
   matrice modeles de blocs affichent chaque design DEPUIS sa page template. Les vider
   casserait les deux. La page template reste l'archive de la comparaison, ce fichier est
   la copie de production.

   Modèles gardés à l'original (aucun CSS ici) : MB-03 MB-10 MB-16 MB-31 MB-41 MB-44 MB-49.
   ===================================================== */

/* ======================================================================
   MB-01 · En-tête de page
   Design retenu : MB-01-B · Entrée encre
   18 blocs du site : APR-01 CEN-01 CON-01 CPD-01 ECO-01 FIN-01 FLO-01 FSY-01 LSY-01 MAI-01 MAN-01 MIG-01 OGC-01 PRO-01 TAR-01 VIC-01 VLO-01 VSE-01
   ====================================================================== */
.phb{--sol:var(--encre);color:var(--creme);padding-bottom:0}
/* Le titre n'a rien en face : il prend toute la mesure de la colonne (règle générale
   des titres de la charte). Aucun plafond en caractères. */
.phb h1{font-size:clamp(32px,5vw,62px);line-height:1.02;letter-spacing:-.03em;color:var(--blanc);max-width:none}
.phb h1 i{font-style:italic;color:inherit}
.phb .dit{color:rgba(251,246,236,.86);max-width:56ch;margin-top:20px}
.phb-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.phb-rep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px;border-top:1px solid rgba(251,246,236,.22)}
.phb-rep>div{padding:22px clamp(16px,2vw,28px) 26px;border-right:1px solid rgba(251,246,236,.22)}
.phb-rep>div:last-child{border-right:none}
.phb-rep>div:first-child{padding-left:0}
.phb-rep .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.phb-rep .v{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--blanc)}
.phb-rep p{margin:8px 0 0;font-size:14.5px;color:rgba(251,246,236,.84)}
@media(max-width:760px){.phb-rep{grid-template-columns:1fr}.phb-rep>div{border-right:none;border-bottom:1px solid rgba(251,246,236,.22);padding-left:0}}

/* ----------------------------------------------------------------------
   MB-01 · les sept autres designs d'en-tête, validés le 20 sept. 2026
   C photo en bandeau · D vis-à-vis texte et photo · E titre plein puis bande
   photo · F le lecteur est le bloc · G vis-à-vis titre et lecteur ·
   H vidéo de fond en boucle · J entrée sobre.
   Règle d'attribution : voir « Registre - En-tetes de page.md ».
   Les emplacements de photo et de vidéo encore vides portent l'étiquette
   .ph-att : elle disparaît dès que le fichier attendu est déposé.
   ---------------------------------------------------------------------- */
.ph-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.ph-att{position:absolute;top:12px;left:12px;z-index:3;max-width:min(60vw,380px);line-height:1.6;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);border:1px solid rgba(239,191,110,.55);background:rgba(27,20,38,.6);padding:4px 8px}
.ph-play{width:76px;height:76px;border-radius:50%;border:1px solid rgba(251,246,236,.6);background:rgba(27,20,38,.42);color:var(--creme);display:grid;place-items:center;cursor:pointer;transition:background .18s,border-color .18s}
.ph-play:hover{background:var(--or);border-color:var(--or);color:var(--encre)}
.ph-play svg{width:20px;height:24px;fill:currentColor;margin-left:3px}
.ph-play.vide{opacity:.45;cursor:default}
.ph-play.vide:hover{background:rgba(27,20,38,.42);border-color:rgba(251,246,236,.6);color:var(--creme)}

/* MB-01-C · Photo en bandeau */
.phc{--sol:var(--encre);padding:0}
.phc .wrap{padding-left:0;padding-right:0}
.phc-fig{position:relative;min-height:clamp(340px,40vw,500px);display:flex;align-items:flex-end;background:var(--encre) center/cover no-repeat}
.phc-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,20,38,.18) 0%,rgba(27,20,38,.58) 52%,rgba(27,20,38,.86) 100%)}
.phc-txt{position:relative;z-index:1;padding:clamp(28px,4vw,54px);max-width:900px}
.phc-txt .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.phc-txt h1{font-size:clamp(32px,5.2vw,64px);line-height:1;letter-spacing:-.03em;color:var(--blanc);max-width:none;margin:0}
.phc-txt p{color:rgba(251,246,236,.88);margin:18px 0 0;max-width:52ch}
.phc-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* MB-01-D · Vis-à-vis texte et photo */
.phd .wrap{padding-right:0}
.phd-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center}
.phd-g h1{font-size:clamp(30px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;margin:10px 0 0}
.phd-g .dit{margin-top:18px;max-width:44ch}
.phd-l{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.phd-img{position:relative;min-height:clamp(260px,32vw,420px);background:var(--creme-2) center/cover no-repeat;border-top:3px solid var(--or)}
@media(max-width:900px){.phd .wrap{padding-right:var(--pad)}.phd-g{grid-template-columns:1fr}.phd-img{min-height:240px}}

/* MB-01-E · Titre plein, puis bande photo */
.phe h1{font-size:clamp(32px,5.4vw,66px);line-height:1;letter-spacing:-.03em;max-width:none;margin:10px 0 0}
.phe-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);margin-top:22px;padding-top:20px;border-top:1px solid var(--filet)}
.phe-sub p{margin:0}
.phe-sub:has(p:only-child){grid-template-columns:1fr}
.phe-sub:has(p:only-child) p{max-width:66ch}
.phe-band{position:relative;margin-top:clamp(26px,3.4vw,44px);height:clamp(180px,22vw,280px);background:var(--creme-2) center/cover no-repeat;border-top:3px solid var(--or)}
.phe-leg{display:flex;justify-content:space-between;gap:16px;margin-top:10px;flex-wrap:wrap}
.phe-leg span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}
@media(max-width:760px){.phe-sub{grid-template-columns:1fr;gap:14px}}

/* MB-01-F · Le lecteur est le bloc */
.phf{--sol:var(--encre);color:var(--creme)}
.phf h1{font-size:clamp(30px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;color:var(--blanc);max-width:none;margin:0}
.phf .dit{color:rgba(251,246,236,.86);margin:16px 0 0;max-width:56ch}
.phf-stage{position:relative;margin-top:clamp(24px,3vw,40px);aspect-ratio:16/9;background:#000 center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.phf-stage::after{content:"";position:absolute;inset:0;background:rgba(27,20,38,.34);pointer-events:none;transition:opacity .2s}
.phf-stage.on::after{opacity:0}
.phf-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phf-stage .ph-play{position:relative;z-index:2}
.phf-stage.on .ph-play{display:none}
.phf-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.phf-bar span:last-child{color:rgba(251,246,236,.6)}

/* MB-01-G · Vis-à-vis titre et lecteur */
.phg-g{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,60px);align-items:center}
.phg-g h1{font-size:clamp(28px,4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:10px 0 0}
.phg-g .dit{margin-top:16px;max-width:42ch}
.phg-acts{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.phg-p{position:relative;aspect-ratio:16/9;background:var(--encre) center/cover no-repeat;display:grid;place-items:center;overflow:hidden;border:1px solid var(--filet)}
.phg-p::after{content:"";position:absolute;inset:0;background:rgba(27,20,38,.3);transition:opacity .2s}
.phg-p.on::after{opacity:0}
.phg-p video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phg-p .ph-play{position:relative;z-index:2;width:66px;height:66px}
.phg-p.on .ph-play{display:none}
.phg-meta{display:flex;gap:14px;align-items:center;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or-f)}
@media(max-width:900px){.phg-g{grid-template-columns:1fr}}

/* MB-01-H · Vidéo de fond en boucle. Un seul emploi sur tout le site. */
.phh{--sol:var(--encre);position:relative;padding:0;overflow:hidden}
.phh-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phh::after{content:"";position:absolute;inset:0;background:rgba(27,20,38,.68)}
.phh>.ph-att{top:calc(var(--nav-h) + 12px)}
.phh .wrap{position:relative;z-index:1;padding-top:clamp(72px,9vw,124px);padding-bottom:clamp(72px,9vw,124px)}
.phh h1{font-size:clamp(34px,5.6vw,70px);line-height:1;letter-spacing:-.03em;color:var(--blanc);max-width:none;margin:0}
.phh .dit{color:rgba(251,246,236,.9);margin:20px 0 0;max-width:50ch}
.phh-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
.phh-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,236,.6);margin-top:26px}

/* MB-01-J · Entrée sobre */
.phj{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.phj-r{border-top:3px solid var(--or);padding-top:22px}
.phj h1{font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.03em;max-width:none;margin:14px 0 0}
.phj-l{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-top:18px}
.phj-l p{margin:0;max-width:46ch}
.phj-l a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--or);padding-bottom:3px}
.phj-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}

/* ======================================================================
   MB-02 · Hero produit à panneau latéral
   Design retenu : MB-02-B · Bandeau clair à socle
   2 blocs du site : LOC-01 TRA-01
   ====================================================================== */
.hrb{padding:clamp(44px,5.4vw,80px) 0 0}
.hrb .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-f)}
.hrb h1{font-size:clamp(32px,5.2vw,66px);line-height:1;letter-spacing:-.034em;color:var(--navy);max-width:none;margin:16px 0 0}
.hrb-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,68px);align-items:start;margin-top:26px}
.hrb .dit{max-width:56ch}
.hrb-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hrb-p{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:20px 22px 22px}
.hrb-p .pk{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f);margin-bottom:14px}
.hrb-p div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:10px 0;border-bottom:1px solid var(--filet);font-size:14.5px;color:var(--encre-2)}
.hrb-p div:last-child{border-bottom:none}
.hrb-p b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--navy);white-space:nowrap}
.hrb-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--filet);border-bottom:3px solid var(--or)}
.hrb-s>div{padding:22px clamp(14px,1.8vw,26px) 26px;border-right:1px solid var(--filet)}
.hrb-s>div:last-child{border-right:none}
.hrb-s>div:first-child{padding-left:0}
.hrb-s .v{font-family:var(--serif);font-size:36px;line-height:.94;letter-spacing:-.03em;color:var(--navy)}
.hrb-s .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-top:9px}
@media(max-width:900px){.hrb-g{grid-template-columns:1fr;gap:24px}.hrb-s{grid-template-columns:1fr}.hrb-s>div{border-right:none;border-bottom:1px solid var(--filet);padding-left:0}}

/* ======================================================================
   MB-04 · Bloc de prose
   Design retenu : MB-04-B · Prose à appui latéral
   9 blocs du site : APR-02 VIC-02 VLO-02 VSE-04 GRD-01 TAR-09 MAN-02 FIN-09 BIE-01
   ====================================================================== */
.prb{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4.4vw,80px);align-items:start;margin-top:12px;border-top:1px solid var(--filet);padding-top:34px}
.prb-a{position:sticky;top:calc(var(--nav-h) + 24px)}
.prb-a h2{font-size:clamp(26px,3.4vw,42px);line-height:1.05;letter-spacing:-.028em;color:var(--navy);max-width:none}
.prb-a .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:14px}
.prb-b p{margin:0 0 18px;font-size:16.5px;line-height:1.7;color:var(--encre-2)}
.prb-b p:last-child{margin-bottom:0}
.prb-b p:first-child{color:var(--encre)}
.prb-b strong{font-weight:600;color:var(--encre)}
.prb-b em{font-style:italic}
@media(max-width:900px){.prb{grid-template-columns:1fr;gap:20px}.prb-a{position:static}}

/* ======================================================================
   MB-05 · Conviction numérotée
   Design retenu : MB-05-B · Conviction sur encre
   4 blocs du site : MAN-03 MAN-05 MAN-07 MAN-08
   ====================================================================== */
.cvb{--sol:var(--encre);color:rgba(251,246,236,.86)}
.cvb-n{font-family:var(--serif);font-size:clamp(56px,8vw,104px);line-height:.82;letter-spacing:-.04em;color:var(--or)}
.cvb h2{font-size:clamp(29px,4vw,52px);line-height:1.03;letter-spacing:-.03em;color:var(--blanc);max-width:none;margin:18px 0 26px;padding-top:24px;border-top:1px solid rgba(251,246,236,.24)}
.cvb-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.6vw,58px);align-items:start}
.cvb-g p{margin:0 0 16px;font-size:16.5px;line-height:1.7}
.cvb-g p:last-child{margin-bottom:0}
.cvb-g strong{font-weight:600;color:var(--blanc)}
@media(max-width:860px){.cvb-g{grid-template-columns:1fr;gap:0}}

/* ======================================================================
   MB-07 · Citation détachée
   Design retenu : MB-07-B · Citation sur encre
   4 blocs du site : ACC-06 CPD-06 VLO-03 VLO-06
   ====================================================================== */
.ctb7{--sol:var(--encre);color:var(--creme);padding:clamp(60px,7.4vw,112px) 0}
.ctb7-g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(26px,4.4vw,76px);align-items:end}
.ctb7 blockquote{margin:0}
.ctb7 blockquote p{font-family:var(--serif);font-size:clamp(30px,4.6vw,62px);line-height:1.06;letter-spacing:-.03em;color:var(--blanc);margin:0}
.ctb7 blockquote p em{font-style:italic;color:var(--or)}
.ctb7-side{padding-top:22px;border-top:1px solid rgba(251,246,236,.26)}
.ctb7-side cite{font-style:normal;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--or)}
.ctb7-side cite span{display:block;color:rgba(251,246,236,.8);margin-top:7px}
.ctb7-side p{margin:16px 0 0;font-size:14.5px;color:rgba(251,246,236,.82)}
@media(max-width:860px){.ctb7-g{grid-template-columns:1fr;gap:24px;align-items:start}}

/* ======================================================================
   MB-08 · Encadré de note
   Design retenu : MB-08-B · Note en marge
   5 blocs du site : CEN-05 CON-04 ECO-02 VIC-05 GRD-08
   ====================================================================== */
.ntb{display:grid;grid-template-columns:172px minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:26px 0 28px}
.ntb-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);line-height:1.7}
.ntb-k span{display:block;color:var(--encre-2);letter-spacing:.1em}
.ntb-b p{margin:0 0 11px;font-size:16.5px;line-height:1.7;color:var(--encre-2);max-width:74ch}
.ntb-b p:last-child{margin-bottom:0}
.ntb-b p:first-child{color:var(--encre)}
.ntb-b strong{font-weight:600;color:var(--encre)}
@media(max-width:760px){.ntb{grid-template-columns:1fr;gap:12px}}

/* ======================================================================
   MB-11 · Grille de cartes à icône
   Design retenu : MB-11-B · Énumération à filets
   18 blocs du site : CEN-03 CPD-02 CPD-04 MAI-03 MAI-05 TRA-04 TRA-05 OGC-03 OGC-04 GRD-03 GRD-04 GRD-05 GRD-06 GRD-07 VSE-03 PRO-04 LOC-03 BLD-02
   ====================================================================== */
.gcb{margin-top:48px;border-top:1px solid var(--filet)}
.gcb-l{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,3vw,48px);align-items:start;padding:26px 0 28px;border-bottom:1px solid var(--filet)}
.gcb-ic{width:26px;height:26px;stroke:var(--or-f);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.gcb-l h3{font-size:25px;letter-spacing:-.022em;color:var(--navy)}
.gcb-l .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:8px}
.gcb-l p{margin:0;color:var(--encre-2)}
.gcb-l:hover h3{color:var(--violet)}
@media(max-width:860px){.gcb-l{grid-template-columns:36px minmax(0,1fr);gap:16px}.gcb-l p{grid-column:2}}

/* ======================================================================
   MB-12 · Grille de cartes numérotées
   Design retenu : MB-12-B · Numéro en exergue
   13 blocs du site : FIN-03 FIN-06 FIN-07 MIG-02 MIG-05 TAR-07 LSY-04 LOC-06 CPD-03 MAN-03 BLD-06 OGC-02 GRD-02
   ====================================================================== */
.gnb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:50px}
.gnb-c{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:24px 24px 28px}
.gnb-c .n{font-family:var(--serif);font-size:54px;line-height:.9;letter-spacing:-.03em;color:var(--or-f)}
.gnb-c .r{height:1px;background:var(--filet);margin:18px 0 18px}
.gnb-c h3{font-size:24px;letter-spacing:-.022em;margin:0 0 10px;color:var(--navy)}
.gnb-c p{margin:0;font-size:15px;color:var(--encre-2)}
.gnb-c .tag{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);border:1px solid var(--filet);border-radius:var(--r);padding:4px 8px}
@media(max-width:980px){.gnb{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.gnb{grid-template-columns:1fr}}

/* ======================================================================
   MB-13 · Liste d’items à icône
   Design retenu : MB-13-A · Mosaïque serrée
   3 blocs du site : PRO-03 CEN-04 MAI-04
   ====================================================================== */
.lia{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1px;margin-top:44px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.lia>div{background:var(--blanc);padding:18px 20px 20px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:13px;align-items:start}
.lia svg{width:20px;height:20px;stroke:var(--or-f);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.lia p{margin:0;font-size:14.5px;line-height:1.55;color:var(--encre-2)}
.lia p b{display:block;font-weight:600;color:var(--navy);font-size:15px;margin-bottom:3px}
.lia-n{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}

/* ======================================================================
   MB-14 · Liste de paragraphes numérotés
   Design retenu : MB-14-B · Compteur en exergue
   2 blocs du site : CON-03 ECO-04
   ====================================================================== */
.pnb{margin-top:44px;counter-reset:pnb}
.pnb-e{counter-increment:pnb;display:grid;grid-template-columns:92px minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:24px 26px 26px;margin-bottom:14px}
.pnb-e:last-child{margin-bottom:0}
.pnb-e::before{content:counter(pnb,decimal-leading-zero);font-family:var(--serif);font-size:50px;line-height:.86;letter-spacing:-.03em;color:var(--or-f)}
.pnb-e h3{font-size:25px;letter-spacing:-.022em;color:var(--navy);margin-bottom:10px}
.pnb-e p{margin:0 0 11px;color:var(--encre-2);max-width:74ch}
.pnb-e p:last-child{margin-bottom:0}
.pnb-e strong{font-weight:600;color:var(--encre)}
@media(max-width:700px){.pnb-e{grid-template-columns:1fr;gap:8px}.pnb-e::before{font-size:38px}}

/* ======================================================================
   MB-15 · Grille de domaines à listes
   Design retenu : MB-15-B · Domaines en fiches
   1 bloc du site : LSY-02
   ====================================================================== */
.dmb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:46px}
.dmb-c{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:24px clamp(18px,2.4vw,30px) 26px}
.dmb-h{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--filet)}
.dmb-gl{width:44px;height:44px;border:1px solid var(--filet);border-radius:var(--r);display:grid;place-items:center;background:var(--creme)}
.dmb-gl svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dmb-h .n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:4px}
.dmb-h h3{font-size:24px;letter-spacing:-.022em;color:var(--navy)}
.dmb-h .ct{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-2);white-space:nowrap}
.dmb-c ul{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.dmb-c li{break-inside:avoid;position:relative;padding-left:17px;font-size:14.5px;line-height:1.5;color:var(--encre-2);margin-bottom:8px}
.dmb-c li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--or)}
@media(max-width:940px){.dmb{grid-template-columns:1fr}}
@media(max-width:560px){.dmb-c ul{columns:1}}

/* ======================================================================
   MB-17 · Cartes d’appel par profil
   Design retenu : MB-17-A · Profils en cartes
   1 bloc du site : GRD-10
   ====================================================================== */
.pfa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.pfa-c{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:22px 22px 24px;display:flex;flex-direction:column}
.pfa .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f);margin-bottom:11px}
.pfa h3{font-size:23px;letter-spacing:-.022em;color:var(--navy);margin-bottom:9px}
.pfa p{margin:0 0 16px;font-size:14.5px;color:var(--encre-2)}
.pfa .gain{margin:0 0 18px;padding-top:14px;border-top:1px solid var(--filet);font-size:14.5px;color:var(--encre)}
.pfa .gain b{font-weight:600}
.pfa .btn{margin-top:auto;justify-content:center;width:100%}
@media(max-width:1040px){.pfa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pfa{grid-template-columns:1fr}}

/* ======================================================================
   MB-18 · Passerelles vers d’autres pages
   Design retenu : MB-18-A · Cartes de renvoi
   2 blocs du site : LSY-05 BLD-10
   ====================================================================== */
.psa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.psa a{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:22px 24px 24px;color:inherit}
.psa a:hover{border-color:var(--violet)}
.psa .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f);margin-bottom:12px}
.psa h3{font-size:24px;letter-spacing:-.022em;color:var(--navy);margin-bottom:9px}
.psa a:hover h3{color:var(--violet)}
.psa p{margin:0 0 20px;font-size:15px;color:var(--encre-2)}
.psa .fl{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);display:flex;gap:9px;align-items:center}
.psa a:hover .fl{color:var(--violet)}
@media(max-width:940px){.psa{grid-template-columns:1fr}}

/* ======================================================================
   MB-19 · Répertoire de produits par statut
   Design retenu : MB-19-C · Vitrine photo
   1 bloc du site : ECO-03
   ====================================================================== */
.st{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r);border:1px solid var(--filet);color:var(--encre-2);white-space:nowrap}
.st.ok{background:#E6F4EC;border-color:var(--vert);color:var(--vert)}
.st.wip{background:#FBF1DC;border-color:var(--or);color:var(--or-f)}
.st.soon{color:var(--encre-2)}
.rpc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:46px}
.rpc-c{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.rpc-ph{position:relative;aspect-ratio:4/3;background:var(--creme-2);border-bottom:1px solid var(--filet);display:grid;place-items:center;text-align:center;padding:18px}
.rpc-ph span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2);max-width:24ch}
.rpc-ph .st{position:absolute;top:12px;left:12px}
/* Ajout de bascule : quand le produit a son picto de marque, il tient la place de la photo. */
.rpc-ph img{width:auto;max-width:56%;max-height:76%;display:block}
/* Photo pleine case (carte de produit à venir) : la photo remplit le 4/3, l'étiquette reste au-dessus. */
.rpc-ph.photo{padding:0;overflow:hidden}.rpc-ph.photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.rpc-ph.photo .st{z-index:1}
.rpc-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.rpc-b .sur{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f)}
.rpc-b h3{font-size:clamp(25px,2.6vw,32px);line-height:1.04;letter-spacing:-.026em;color:var(--navy);margin:8px 0 10px}
.rpc-b p{margin:0 0 18px;font-size:14.5px;color:var(--encre-2)}
.rpc-f{margin-top:auto;padding-top:14px;border-top:3px solid var(--or);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rpc-f .q{font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:-.024em;color:var(--navy)}
.rpc-f .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2)}
@media(max-width:940px){.rpc{grid-template-columns:1fr}}

/* ======================================================================
   MB-20 · Tableau comparatif à colonnes
   Design retenu : MB-20-A · Tableau à colonne tenue
   4 blocs du site : VIC-03 VLO-05 VSE-05 BLD-10
   ====================================================================== */
/* Vraie table : les relations ligne/colonne comptent pour un lecteur d'écran, et un
   picto seul ne dit rien : chaque case porte donc aussi son texte. */
.tca{margin-top:50px;width:100%;border-collapse:collapse;table-layout:fixed}
.tca th,.tca td{padding:16px clamp(12px,1.6vw,22px);text-align:left;vertical-align:middle;border-bottom:1px solid var(--filet);font-size:15px;font-weight:400;color:var(--encre-2)}
.tca col.nous{width:26%}
.tca col.eux{width:26%}
.tca thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);vertical-align:bottom;padding-top:0;border-top:1px solid var(--filet)}
.tca thead th.nous{border-top:3px solid var(--or);color:var(--or-f)}
.tca td.nous,.tca thead th.nous{background:var(--blanc);border-left:1px solid var(--filet);border-right:1px solid var(--filet)}
.tca th[scope="row"] .tca-c{font-family:var(--serif);font-size:19px;letter-spacing:-.018em;color:var(--navy);display:block}
.tca th[scope="row"] small{display:block;margin-top:3px;font-size:13px;color:var(--encre-2);line-height:1.45}
.tca td>span{display:inline-flex;align-items:center;gap:10px}
.tca-i{width:19px;height:19px;flex:none;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tca-oui{stroke:var(--vert)}
.tca-non{stroke:var(--encre-2)}
.tca-part{stroke:var(--or-f)}
.tca tfoot th,.tca tfoot td{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--navy);border-bottom:none}
@media(max-width:820px){.tca th[scope="row"] .tca-c{font-size:16px}}
@media(max-width:600px){.tca th,.tca td{padding:12px 8px;font-size:13.5px}.tca th[scope="row"] small{display:none}}
/* Téléphone (29 sept. 2026) : une case à picto + texte + renvois [n] ne passait pas à la ligne et la page glissait de côté à 390 px. */
.tca th,.tca td{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.tca td>span{flex-wrap:wrap;max-width:100%;min-width:0}
@media(max-width:600px){.tca td>span{display:inline;}.tca td>span .tca-i{vertical-align:-4px;margin-right:6px}}

/* ======================================================================
   MB-21 · Vis-à-vis en deux cartes
   Design retenu : MB-21-B · Bascule
   6 blocs du site : CPD-05 FIN-02 FIN-05 PRO-03 MIG-04 BLD-02
   ====================================================================== */
.vvb{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:stretch;margin-top:50px}
.vvb-c{border:1px solid var(--filet);border-radius:var(--r);padding:28px clamp(20px,2.4vw,32px) 30px}
.vvb-av{background:var(--encre);border-color:var(--encre);color:rgba(251,246,236,.82)}
.vvb-ap{background:var(--blanc);border-top:3px solid var(--or)}
.vvb-c .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;color:var(--encre-2)}
.vvb-av .k{color:var(--or)}
.vvb-ap .k{color:var(--or-f)}
.vvb-c h3{font-size:27px;letter-spacing:-.024em;margin:0 0 14px}
.vvb-av h3{color:var(--blanc)}
.vvb-ap h3{color:var(--navy)}
.vvb-c p{margin:0 0 12px}
.vvb-c p:last-child{margin-bottom:0}
.vvb-ap p{color:var(--encre-2)}
.vvb-fl{display:grid;place-items:center}
.vvb-fl svg{width:26px;height:26px;stroke:var(--or-f);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vvb-m{margin-top:26px;padding-top:18px;border-top:1px solid var(--filet);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.vvb-av .vvb-m{border-top-color:rgba(251,246,236,.24);color:rgba(251,246,236,.82)}
.vvb-ap .vvb-m{color:var(--or-f)}
@media(max-width:820px){.vvb{grid-template-columns:1fr;gap:0}.vvb-fl{padding:14px 0}.vvb-fl svg{transform:rotate(90deg)}}

/* ======================================================================
   MB-22 · Situations comparées à encart chiffré
   Design retenu : MB-22-B · Situation en bandeau chiffré
   1 bloc du site : VIC-04
   ====================================================================== */
.stb{margin-top:44px}
.stb-s{margin-bottom:18px;border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:var(--blanc)}
.stb-s:last-child{margin-bottom:0}
.stb-t{padding:22px clamp(18px,2.4vw,30px) 24px}
.stb .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.stb h3{font-size:26px;letter-spacing:-.024em;color:var(--navy);margin:9px 0 11px}
.stb p{margin:0;color:var(--encre-2);max-width:76ch}
.stb-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--navy);color:var(--creme)}
.stb-b>div{padding:16px clamp(14px,1.8vw,24px) 18px;border-right:1px solid rgba(251,246,236,.24)}
.stb-b>div:last-child{border-right:none}
.stb-b .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,236,.84);margin-bottom:7px}
.stb-b .v{font-family:var(--serif);font-size:27px;line-height:1;letter-spacing:-.026em;color:var(--blanc)}
.stb-b .nous .v{color:var(--or)}
@media(max-width:700px){.stb-b{grid-template-columns:1fr}.stb-b>div{border-right:none;border-bottom:1px solid rgba(251,246,236,.24)}}

/* ======================================================================
   MB-23 · Arborescence comparée
   Design retenu : MB-23-C · Arborescence descendante
   1 bloc du site : VSE-02
   ====================================================================== */
.arc{margin-top:46px;display:flex;flex-direction:column;align-items:center}
.arc-t{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;width:100%}
.arc-n{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:18px 24px 20px;min-width:0;flex:0 1 344px;text-align:center}
.arc-n .fl{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-2);border-bottom:1px solid var(--filet);padding-bottom:9px;margin-bottom:11px}
.arc-n .nm{font-family:var(--serif);font-size:30px;line-height:1.02;letter-spacing:-.028em;color:var(--navy)}
.arc-n .dt{margin:8px 0 0;font-size:14px;color:var(--encre-2)}
.arc-n.etr{border-top:3px solid var(--or)}
.arc-n.etr .fl{color:var(--or-f)}
.arc-n.mq{flex:0 1 264px}
.arc-n.mq .nm{font-size:24px}
.arc-fl{width:1px;height:38px;background:var(--filet);position:relative;margin:0 auto}
.arc-fl::after{content:"";position:absolute;left:-4px;bottom:0;width:9px;height:9px;border-right:1px solid var(--encre-2);border-bottom:1px solid var(--encre-2);transform:rotate(45deg)}
.arc-vs{margin-top:44px;width:100%;--sol:var(--navy);background:var(--navy);border-radius:var(--r);color:var(--creme);display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(18px,2.6vw,38px);align-items:center;padding:26px clamp(20px,2.6vw,34px) 28px}
.arc-vs .ic{width:96px;height:96px;border:1px solid var(--or);border-radius:var(--r);display:grid;place-items:center;font-family:var(--mono);font-size:22px;letter-spacing:.06em;color:var(--or)}
.arc-vs h3{font-size:clamp(24px,3vw,36px);line-height:1.04;letter-spacing:-.028em;color:var(--blanc);margin-bottom:10px}
.arc-vs p{margin:0;color:rgba(251,246,236,.86);max-width:70ch}
.arc-vs strong{font-weight:600;color:var(--or)}
@media(max-width:860px){.arc-n,.arc-n.mq{flex:1 1 100%}.arc-vs{grid-template-columns:1fr;gap:16px}}

/* ======================================================================
   MB-24 · Addition de coûts remplacée
   Design retenu : MB-24-D · Empilement contre prix unique
   1 bloc du site : LOC-02
   ====================================================================== */
.add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(20px,3vw,44px);align-items:stretch;margin-top:46px}
.add-l{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:22px clamp(18px,2.2vw,28px) 24px}
.add-l .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-2);margin-bottom:16px}
.add-i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--filet);font-size:15px;color:var(--encre-2)}
.add-i b{font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--navy);white-space:nowrap}
.add-i small{display:block;font-size:12.5px;margin-top:2px}
.add-s{margin-top:18px;padding-top:16px;border-top:3px solid var(--navy);display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.add-s .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2)}
.add-s .v{font-family:var(--serif);font-size:clamp(32px,3.8vw,48px);line-height:1;letter-spacing:-.03em;color:var(--navy)}
.add-s .v em{font-style:normal;font-size:.44em;letter-spacing:.02em;color:var(--encre-2)}
.add-r{--sol:var(--navy);background:var(--navy);border-radius:var(--r);color:var(--creme);padding:26px clamp(20px,2.4vw,32px) 28px;display:flex;flex-direction:column}
.add-r .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.add-r h3{font-size:26px;letter-spacing:-.024em;color:var(--blanc);margin-bottom:18px}
.add-r .px{font-family:var(--serif);font-size:clamp(50px,7vw,96px);line-height:.88;letter-spacing:-.04em;color:var(--or)}
.add-r .px sup{font-size:.28em;letter-spacing:0;vertical-align:super;color:rgba(251,246,236,.9)}
.add-r .pxl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,246,236,.86);margin-top:12px;padding-bottom:18px;border-bottom:1px solid rgba(251,246,236,.26)}
.add-r ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.add-r li{position:relative;padding-left:18px;font-size:14.5px;color:rgba(251,246,236,.88)}
.add-r li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--or)}
.add-r .ec{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
@media(max-width:900px){.add{grid-template-columns:1fr}}

/* ======================================================================
   MB-25 · Bandeau de chiffres clés
   Design retenu : MB-25-B · Bandeau navy
   4 blocs du site : MAI-06 PRO-02 LOC-08 IA5-01
   ====================================================================== */
.ckb{--sol:var(--navy);color:var(--creme);padding:clamp(48px,6vw,84px) 0}
/* Rien en face du titre : toute la mesure de la colonne. */
.ckb h2{font-size:clamp(26px,3.4vw,42px);line-height:1.05;letter-spacing:-.028em;color:var(--blanc);max-width:none}
.ckb h2 i{font-style:italic;color:inherit}
.ckb-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border-top:1px solid rgba(251,246,236,.24)}
.ckb-g>div{padding:28px clamp(16px,2vw,30px) 4px;border-right:1px solid rgba(251,246,236,.24)}
.ckb-g>div:last-child{border-right:none}
.ckb-g>div:first-child{padding-left:0}
.ckb-g .v{font-family:var(--serif);font-size:clamp(40px,5vw,64px);line-height:.9;letter-spacing:-.034em;color:var(--or)}
.ckb-g .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc);margin-top:16px}
.ckb-g p{margin:10px 0 0;font-size:14.5px;color:rgba(251,246,236,.86)}
.ckb-src{margin-top:34px;padding-top:18px;border-top:1px solid rgba(251,246,236,.24);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,246,236,.84)}
@media(max-width:760px){.ckb-g{grid-template-columns:1fr}.ckb-g>div{border-right:none;border-bottom:1px solid rgba(251,246,236,.24);padding-left:0;padding-bottom:26px}}

/* ======================================================================
   MB-26 · Cartes agents sur ponctuation
   Design retenu : MB-26-A · Liste tabulaire
   2 blocs du site : ACC-04 VID-03
   ====================================================================== */
.aga{--sol:var(--navy);color:var(--creme)}
.aga h2{font-size:clamp(28px,3.8vw,46px);line-height:1.04;letter-spacing:-.028em;color:var(--blanc);max-width:none}
.aga .dit{color:rgba(251,246,236,.86);margin-top:16px;max-width:64ch}
.aga-l{margin-top:48px;border-top:1px solid rgba(239,191,110,.44)}
.aga-r{display:grid;grid-template-columns:136px minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(14px,2.6vw,44px);padding:22px 0 24px;border-bottom:1px solid rgba(251,246,236,.18);align-items:baseline}
.aga-r .an{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.aga-r h3{font-size:26px;letter-spacing:-.024em;color:var(--blanc)}
.aga-r p{margin:0;font-size:15.5px;color:rgba(251,246,236,.86)}
.aga-f{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
@media(max-width:860px){.aga-r{grid-template-columns:1fr;gap:6px}}

/* ======================================================================
   MB-27 · Processus en étapes fléchées
   Design retenu : MB-27-B · Escalier vertical
   6 blocs du site : IA5-02 IA5-08 LOC-05 TRA-03 TRA-06 OGC-03
   ====================================================================== */
.pfb{margin-top:48px}
.pfb-s{display:grid;grid-template-columns:184px minmax(0,1fr);gap:clamp(20px,3.4vw,54px);align-items:start;padding:28px 0 30px;border-top:1px solid var(--filet)}
.pfb-s:last-child{border-bottom:1px solid var(--filet)}
.pfb-a .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f)}
.pfb-a .d{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.024em;color:var(--navy);margin-top:10px}
.pfb-a .u{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);margin-top:8px}
.pfb-b h3{font-size:26px;letter-spacing:-.024em;margin:0 0 12px;color:var(--navy)}
.pfb-b p{margin:0 0 10px;color:var(--encre-2)}
.pfb-b p:last-child{margin-bottom:0}
.pfb-b strong{font-weight:600;color:var(--encre)}
.pfb-f{margin-top:34px;padding-top:20px;border-top:3px solid var(--or);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
@media(max-width:760px){.pfb-s{grid-template-columns:1fr;gap:14px}}

/* ======================================================================
   MB-28 · Chronologie verticale à jalons
   Design retenu : MB-28-B · Jalons en vis-à-vis
   3 blocs du site : TRA-02 VLO-04 APR-03
   ====================================================================== */
.chb{margin-top:40px;border-top:1px solid var(--filet)}
.chb-j{display:grid;grid-template-columns:148px 1px minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start;padding:24px 0 26px;border-bottom:1px solid var(--filet)}
.chb-a .d{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.026em;color:var(--navy)}
.chb-a .m{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-top:8px}
.chb-t{background:var(--filet);align-self:stretch;position:relative}
.chb-t::before{content:"";position:absolute;left:-4px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--or)}
.chb-b h3{font-size:24px;letter-spacing:-.022em;color:var(--navy);margin-bottom:8px}
.chb-b p{margin:0;color:var(--encre-2);max-width:70ch}
.chb-b .et{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-2);border:1px solid var(--filet);border-radius:var(--r);padding:4px 8px;background:var(--blanc)}
@media(max-width:760px){.chb-j{grid-template-columns:1fr;gap:10px}.chb-t{display:none}}

/* ======================================================================
   MB-29 · Étapes détaillées en vis-à-vis
   Design retenu : MB-29-D · Escalier numéroté
   1 bloc du site : MIG-03
   ====================================================================== */
.edd{margin-top:46px;display:grid;gap:0}
.edd-e{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.8vw,44px);align-items:start;padding:26px 0 28px;border-bottom:1px solid var(--filet)}
.edd-e:first-child{border-top:1px solid var(--filet)}
.edd-n{font-family:var(--serif);font-size:clamp(56px,7.4vw,108px);line-height:.82;letter-spacing:-.042em;color:var(--or);width:clamp(84px,9vw,148px)}
.edd-e:nth-child(even) .edd-n{color:var(--navy)}
.edd-b h3{font-size:clamp(25px,3.1vw,38px);line-height:1.03;letter-spacing:-.028em;color:var(--navy);max-width:none}
.edd-m{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.edd-m span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--filet);border-radius:var(--r);padding:4px 9px;color:var(--encre-2);background:var(--blanc)}
.edd-m span.or{background:var(--or);border-color:var(--or);color:var(--encre)}
.edd-b p{margin:0;color:var(--encre-2);max-width:72ch}
.edd-b p+p{margin-top:11px}
.edd-b strong{font-weight:600;color:var(--encre)}
@media(max-width:700px){.edd-e{grid-template-columns:1fr;gap:6px}.edd-n{width:auto}}

/* ======================================================================
   MB-30 · Fiche détaillée à colonne d’appui
   Design retenu : MB-30-A · Appui collant
   5 blocs du site : IA5-03 IA5-04 IA5-05 IA5-06 IA5-07
   ====================================================================== */
.fca{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,4vw,72px);align-items:start;border-top:1px solid var(--filet);padding-top:34px}
.fca-a{position:sticky;top:calc(var(--nav-h) + 24px)}
.fca-gl{width:52px;height:52px;border:1px solid var(--filet);border-radius:var(--r);display:grid;place-items:center;background:var(--blanc);margin-bottom:18px}
.fca-gl svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fca-a .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:10px}
.fca-a h2{font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.028em;color:var(--navy);max-width:none}
.fca-a .mis{margin:14px 0 0;color:var(--encre-2);max-width:40ch}
.fca-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.fca-tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);border:1px solid var(--filet);border-radius:var(--r);padding:4px 8px;background:var(--blanc)}
.fca-s{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--filet)}
.fca-s:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.fca-s .sk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px}
.fca-s h3{font-size:23px;letter-spacing:-.02em;color:var(--navy);margin-bottom:9px}
.fca-s p{margin:0;color:var(--encre-2)}
.fca-liens{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.fca-liens a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;display:inline-flex;gap:9px}
@media(max-width:900px){.fca{grid-template-columns:1fr;gap:22px}.fca-a{position:static}}

/* ======================================================================
   MB-32 · Compte à rebours
   Design retenu : MB-32-C · Rebours centré
   1 bloc du site : TRA-07
   ====================================================================== */
.crc{padding:clamp(44px,5.6vw,84px) 0}
.crc-c{max-width:920px;margin:0 auto;text-align:center;background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px) clamp(30px,3.8vw,54px)}
.crc .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-f)}
.crc-d{font-family:var(--serif);font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.034em;color:var(--navy);margin-top:14px}
.crc-d sup{font-size:.42em;letter-spacing:0;vertical-align:super}
.crc-r{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,1.4vw,20px);margin-top:28px;padding-top:26px;border-top:1px solid var(--filet)}
.crc-u{min-width:clamp(62px,9vw,124px)}
.crc-u .n{font-family:var(--serif);font-size:clamp(42px,7.4vw,96px);line-height:.9;letter-spacing:-.038em;color:var(--or-f);font-variant-numeric:tabular-nums;display:block}
.crc-u .u{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);display:block;margin-top:12px}
.crc-s{font-family:var(--serif);font-size:clamp(30px,5vw,64px);line-height:1;color:var(--filet);padding-top:2px}
.crc-f{margin:26px auto 0;max-width:68ch;font-size:15px;color:var(--encre-2)}
.crc-f strong{font-weight:600;color:var(--navy)}
.crc-a{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.crc-s{display:none}.crc-r{flex-wrap:wrap;gap:16px}.crc-u{min-width:calc(50% - 8px)}}

/* ======================================================================
   MB-33 · Barre d’onglets et panneaux
   Design retenu : MB-33-B · Onglets en colonne
   4 blocs du site : TAR-02 TAR-03 TAR-04 TAR-05
   ====================================================================== */
.ogb{display:grid;grid-template-columns:262px minmax(0,1fr);gap:0;margin-top:44px;border-top:1px solid var(--filet)}
.ogb-t{display:flex;flex-direction:column;border-right:1px solid var(--filet)}
.ogb-t button{text-align:left;background:none;border:none;border-bottom:1px solid var(--filet);padding:16px 22px 18px 0;min-height:48px;cursor:pointer;display:grid;gap:4px;font-family:var(--sans)}
.ogb-t button:last-child{border-bottom:none}
.ogb-t .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2)}
.ogb-t .t{font-family:var(--serif);font-size:23px;line-height:1.1;letter-spacing:-.02em;color:var(--navy)}
.ogb-t button:hover .t{color:var(--violet)}
.ogb-t button[aria-selected="true"] .n{color:var(--or-f)}
.ogb-t button[aria-selected="true"] .t{color:var(--navy)}
.ogb-t button[aria-selected="true"]{background:var(--blanc);box-shadow:inset 3px 0 0 var(--or)}
.ogb-p{padding:26px 0 30px clamp(20px,2.8vw,42px)}
.ogb-p[hidden]{display:none}
.ogb-p h3{font-size:clamp(24px,2.9vw,36px);line-height:1.05;letter-spacing:-.026em;color:var(--navy);max-width:none;margin-bottom:14px}
.ogb-p p{margin:0 0 14px;color:var(--encre-2);max-width:72ch}
.ogb-p p:last-child{margin-bottom:0}
.ogb-px{display:flex;align-items:baseline;gap:8px;margin:22px 0 0;padding-top:18px;border-top:3px solid var(--or)}
.ogb-px b{font-family:var(--serif);font-weight:400;font-size:40px;line-height:.92;letter-spacing:-.03em;color:var(--navy)}
.ogb-px span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
@media(max-width:820px){.ogb{grid-template-columns:1fr}.ogb-t{border-right:none;border-bottom:1px solid var(--filet)}.ogb-t button{padding-right:0}.ogb-p{padding-left:0}}

/* ======================================================================
   MB-34 · Simulateur interactif
   Design retenu : MB-34-B · Résultat en bandeau
   2 blocs du site : FIN-04 TAR-06
   ====================================================================== */
/* commandes communes aux deux designs */
.sim-f{display:grid;gap:7px;margin-bottom:22px}
.sim-f label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-2)}
.sim-f input[type=range]{width:100%;height:44px;accent-color:var(--violet);background:none}
.sim-f .val{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.024em;color:var(--navy)}
.sim-seg{display:flex;border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:var(--blanc)}
.sim-seg button{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;background:none;border:none;border-right:1px solid var(--filet);color:var(--encre-2);min-height:44px;cursor:pointer;padding:0 10px}
.sim-seg button:last-child{border-right:none}
.sim-seg button:hover{color:var(--violet)}
.sim-seg button[aria-pressed=true]{background:var(--navy);color:var(--creme)}
.smb-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,38px);margin-top:44px;padding-bottom:28px;border-bottom:1px solid var(--filet)}
.smb-r{--sol:var(--navy);color:var(--creme);padding:clamp(30px,3.6vw,52px) 0}
.smb-r .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(22px,3.6vw,60px);align-items:center}
.smb-r .v{font-family:var(--serif);font-size:clamp(42px,5.4vw,74px);line-height:.92;letter-spacing:-.034em;color:var(--or)}
.smb-r .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blanc);margin-top:12px}
.smb-d{display:grid;gap:0}
.smb-d div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:11px 0;border-bottom:1px solid rgba(251,246,236,.2);font-size:14.5px;color:rgba(251,246,236,.86)}
.smb-d div:last-child{border-bottom:none}
.smb-d b{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--blanc);white-space:nowrap}
@media(max-width:860px){.smb-c{grid-template-columns:1fr}.smb-r .wrap{grid-template-columns:1fr;gap:22px}}

/* ======================================================================
   MB-35 · FAQ en accordéons
   Design retenu : MB-35-B · Deux colonnes par thème
   3 blocs du site : TAR-10 GRD-09 FIN-08
   ====================================================================== */
.fqb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--filet)}
.fqb-c{padding:28px clamp(20px,2.6vw,38px) 30px;border-right:1px solid var(--filet)}
.fqb-c:last-child{border-right:none;background:var(--blanc)}
.fqb-c>.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:20px}
.fqb details{border-top:1px solid var(--filet);padding:4px 0}
.fqb details:first-of-type{border-top:none}
.fqb summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:baseline;padding:13px 0;min-height:44px;font-size:16px;font-weight:600;color:var(--navy)}
.fqb summary::-webkit-details-marker{display:none}
.fqb summary::before{content:"+";font-family:var(--mono);font-size:14px;font-weight:400;color:var(--or-f);flex:none;width:12px}
.fqb details[open] summary::before{content:"\2013 "}
.fqb summary:hover{color:var(--violet)}
.fqb .fqb-b{padding:0 0 16px 24px;max-width:56ch}
.fqb .fqb-b p{margin:0 0 10px;font-size:15px;color:var(--encre-2)}
.fqb .fqb-b p:last-child{margin-bottom:0}
@media(max-width:820px){.fqb{grid-template-columns:1fr}.fqb-c{border-right:none;border-bottom:1px solid var(--filet)}}

/* ======================================================================
   MB-36 · Grille de tarifs
   Design retenu : MB-36-B · Régime mis en avant
   4 blocs du site : TAR-03 TAR-04 LOC-07 ACC-07
   ====================================================================== */
.tgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px;align-items:stretch}
.tgb-c{border:1px solid var(--filet);border-radius:var(--r);padding:26px clamp(18px,2.2vw,30px) 30px;background:var(--blanc);display:flex;flex-direction:column}
.tgb-c.hi{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.tgb .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:12px}
.tgb-c.hi .k{color:var(--or)}
.tgb h3{font-size:26px;letter-spacing:-.024em;color:var(--navy);margin-bottom:8px}
.tgb-c.hi h3{color:var(--blanc)}
.tgb .ac{margin:0 0 20px;font-size:14.5px;color:var(--encre-2)}
.tgb-c.hi .ac{color:rgba(251,246,236,.84)}
.tgb .px{display:flex;align-items:baseline;gap:7px;padding-top:18px;border-top:1px solid var(--filet)}
.tgb-c.hi .px{border-top-color:rgba(251,246,236,.26)}
.tgb .px b{font-family:var(--serif);font-weight:400;font-size:46px;line-height:.92;letter-spacing:-.03em;color:var(--navy)}
.tgb-c.hi .px b{color:var(--or)}
.tgb .px span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.tgb-c.hi .px span{color:rgba(251,246,236,.84)}
.tgb ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.tgb li{position:relative;padding-left:18px;font-size:15px;color:var(--encre-2)}
.tgb-c.hi li{color:rgba(251,246,236,.88)}
.tgb li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--or)}
.tgb .btn{margin-top:24px;justify-content:center}
.tgb-note{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
@media(max-width:940px){.tgb{grid-template-columns:1fr}}

/* ======================================================================
   MB-37 · Formulaire
   Design retenu : MB-37-A · Formulaire encadré
   2 blocs du site : APR-05 BLG-04
   ====================================================================== */
/* champs communs aux deux designs */
.fmf{display:grid;gap:7px}
.fmf label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-2)}
.fmf label i{font-style:normal;color:var(--or-f)}
.fmf input,.fmf select,.fmf textarea{font-family:var(--sans);font-size:15.5px;color:var(--encre);background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);padding:0 14px;min-height:48px;width:100%}
.fmf textarea{padding:13px 14px;min-height:112px;resize:vertical;line-height:1.6}
.fmf input:focus,.fmf select:focus,.fmf textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.fm-men{font-size:13px;color:var(--encre-2)}
.fm-men a{border-bottom:1px solid var(--or)}
.fma{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:28px clamp(20px,2.8vw,36px) 30px;max-width:760px;margin-top:44px}
.fma .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f);margin-bottom:20px}
.fma-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.fma-r.un{grid-template-columns:1fr}
.fma-p{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--filet)}
@media(max-width:640px){.fma-r{grid-template-columns:1fr}}

/* Ajout de bascule : signalement d'erreur des formulaires en service (page Contact).
   Le design retenu ne portait qu'un formulaire inerte. */
.fma [aria-invalid="true"]{border-color:#A3251B}
.fm-er{margin:0 0 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#A3251B}
.fma-ok{border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);background:var(--blanc);padding:clamp(26px,3.4vw,44px)}
.fma-ok h3{font-size:28px;letter-spacing:-.024em;color:var(--navy);margin-bottom:10px}
.fma-ok p{margin:0;color:var(--encre-2);max-width:62ch}

/* ======================================================================
   MB-38 · Bandeau de coordonnées
   Design retenu : MB-38-C · Trois grands pictos
   1 bloc du site : APR-04
   ====================================================================== */
.coc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:42px}
.coc-c{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:26px 24px 28px;text-align:center}
.coc-i{width:84px;height:84px;margin:0 auto 18px;border-radius:var(--r);background:var(--navy);display:grid;place-items:center}
.coc-i svg{width:44px;height:44px;stroke:var(--or);fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.coc-c .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px}
.coc-c .v{font-family:var(--serif);font-size:clamp(23px,2.4vw,30px);line-height:1.08;letter-spacing:-.024em;color:var(--navy);display:inline-block;min-height:44px}
.coc-c a.v:hover{color:var(--violet)}
.coc-c p{margin:12px 0 0;font-size:14px;color:var(--encre-2)}
@media(max-width:860px){.coc{grid-template-columns:1fr}}

/* ======================================================================
   MB-39 · Maquette d’écran téléphone
   Design retenu : MB-39-D · Trois écrans, trois mots
   1 bloc du site : LSY-03
   ====================================================================== */
/* téléphone dessiné, commun aux quatre designs */
.tel{width:248px;flex:none;background:var(--encre);border:1px solid var(--encre);border-radius:14px;padding:9px}
.tel-sc{background:var(--creme);border-radius:9px;overflow:hidden}
.tel-st{display:flex;align-items:center;justify-content:space-between;padding:7px 12px 5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--encre-2)}
.tel-hd{padding:8px 12px 10px;border-bottom:1px solid var(--filet)}
.tel-hd .t{font-family:var(--serif);font-size:17px;letter-spacing:-.018em;color:var(--navy)}
.tel-hd .s{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-f);margin-bottom:3px}
.tel-l{padding:9px 12px;border-bottom:1px solid var(--filet);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.tel-l:last-child{border-bottom:none}
.tel-l .n{font-size:11.5px;font-weight:600;color:var(--navy)}
.tel-l .d{font-size:10.5px;color:var(--encre-2);margin-top:1px}
.tel-l .m{font-family:var(--mono);font-size:10.5px;color:var(--navy);white-space:nowrap}
.tel-l .b{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:2px 5px;border-radius:2px;border:1px solid var(--filet);color:var(--encre-2);white-space:nowrap}
.tel-l .b.or{background:var(--or);border-color:var(--or);color:var(--encre)}
.tel-nav{display:flex;border-top:1px solid var(--filet);background:var(--blanc)}
.tel-nav span{flex:1;text-align:center;padding:8px 0 10px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.tel-nav span.on{color:var(--or-f);box-shadow:inset 0 2px 0 var(--or)}
.tld{--sol:var(--navy);color:var(--creme)}
.tld h2{font-size:clamp(28px,3.8vw,48px);line-height:1.02;letter-spacing:-.032em;color:var(--blanc);max-width:none}
.tld-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.8vw,42px);margin-top:40px;justify-items:center}
.tld-c{display:flex;flex-direction:column;align-items:center;text-align:center}
.tld-c .tel{width:100%;max-width:262px}
.tld-c .lg{margin-top:20px;padding-top:14px;border-top:3px solid var(--or);width:100%;max-width:262px}
.tld-c .lg .t{font-family:var(--serif);font-size:25px;line-height:1.08;letter-spacing:-.024em;color:var(--or)}
.tld-c .lg .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,236,.84);margin-top:8px}
@media(max-width:940px){.tld-g{grid-template-columns:1fr}}

/* ======================================================================
   MB-40 · Maquette de logiciel
   Design retenu : MB-40-B · Capture en porte
   2 blocs du site : PRO-05 MAI-04
   ====================================================================== */
.mqb{--sol:var(--navy)}
.mqb-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(24px,4vw,68px);align-items:center}
.mqb-a .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.mqb-a h2{font-size:clamp(26px,3.4vw,44px);line-height:1.03;letter-spacing:-.03em;color:var(--blanc);max-width:none}
.mqb-a p{margin:16px 0 0;color:rgba(251,246,236,.86);max-width:44ch}
.mqb-a .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mqb-p{background:var(--creme);border:1px solid var(--or);border-radius:var(--r);padding:10px}
.mqb-pt{display:flex;align-items:center;gap:10px;padding:0 4px 10px}
.mqb-pt span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-f)}
.mqb-sc{background:var(--blanc);border:1px solid var(--filet);border-radius:2px;padding:14px 16px}
.mqb-sc .l{display:grid;grid-template-columns:minmax(0,1fr) 92px 74px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--filet);font-size:13.5px;color:var(--encre-2)}
.mqb-sc .l:last-child{border-bottom:none}
.mqb-sc .l b{font-weight:600;color:var(--navy)}
.mqb-sc .l .m{font-family:var(--mono);font-size:12.5px;color:var(--navy);text-align:right}
.mqb-sc .l .s{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-f);text-align:right}
@media(max-width:900px){.mqb-g{grid-template-columns:1fr;gap:26px}}

/* ======================================================================
   MB-42 · Dialogue transcrit
   Design retenu : MB-42-D · Écran d’appel sur encre
   1 bloc du site : LOC-04
   ====================================================================== */
.dld{--sol:var(--encre);color:var(--creme)}
.dld h2{font-size:clamp(27px,3.6vw,44px);line-height:1.03;letter-spacing:-.03em;color:var(--blanc);max-width:none}
.dld h2 em{font-style:italic;color:var(--or)}
.dld .dit{color:rgba(251,246,236,.86);margin-top:15px;max-width:64ch}
.dld-c{margin-top:38px;max-width:760px}
.dld-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;padding-top:26px;border-top:1px solid rgba(251,246,236,.26)}
.dld-g>div{padding:0 clamp(14px,2vw,28px);border-right:1px solid rgba(251,246,236,.26)}
.dld-g>div:last-child{border-right:none}
.dld-g>div:first-child{padding-left:0}
.dld-g h3{font-size:22px;letter-spacing:-.02em;color:var(--or);margin-bottom:8px}
.dld-g p{margin:0;font-size:14.5px;color:rgba(251,246,236,.86)}
@media(max-width:820px){.dld-g{grid-template-columns:1fr}.dld-g>div{border-right:none;border-bottom:1px solid rgba(251,246,236,.26);padding-left:0;padding-bottom:18px;margin-bottom:18px}.dld-g>div:last-child{border-bottom:none;margin-bottom:0}}

/* ======================================================================
   MB-43 · Catalogue de fonctionnalités
   Design retenu : MB-43-A · Sections dépliables
   4 blocs du site : FLO-02 FSY-02 FSD-03 FSD-05
   ====================================================================== */
.cla{margin-top:44px;border-top:1px solid var(--filet)}
.cla details{border-bottom:1px solid var(--filet)}
.cla summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr) auto 34px;gap:16px;align-items:center;padding:19px 0;min-height:48px}
.cla summary::-webkit-details-marker{display:none}
.cla .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--or-f)}
.cla summary h3{font-size:25px;letter-spacing:-.022em;color:var(--navy)}
.cla summary:hover h3{color:var(--violet)}
.cla .ct{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-2)}
.cla .sig{justify-self:end;width:28px;height:28px;border:1px solid var(--filet);border-radius:var(--r);display:grid;place-items:center;font-family:var(--mono);font-size:15px;line-height:1;color:var(--or-f)}
.cla details[open] .sig{background:var(--or);border-color:var(--or);color:var(--encre)}
.cla-b{padding:0 0 22px 68px}
.cla-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(22px,3.4vw,56px)}
.cla-l>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--filet)}
.cla-l .sc{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.cla-l p{margin:0;font-size:15px;color:var(--encre-2)}
.cla-l p b{font-weight:600;color:var(--navy)}
.cla-l p small{display:block;font-size:13px;margin-top:2px}
@media(max-width:900px){.cla-b{padding-left:0}.cla-l{grid-template-columns:1fr}.cla-l>div{grid-template-columns:1fr;gap:2px}}
@media(max-width:700px){.cla summary{grid-template-columns:44px minmax(0,1fr) 28px}.cla .ct{display:none}}
/* Catalogue rendu par script (features-da06.js, pages Fonctionnalités) : la barre de
   recherche n'existe pas dans le design retenu. Elle reprend la barre de filtres de
   MB-45 (.ar-f) pour l'allure, et rien d'autre n'est ajouté au design. */
.cla-q{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:40px;padding-bottom:16px;border-bottom:1px solid var(--filet)}
.cla-q input{flex:1;min-width:220px;min-height:44px;padding:0 15px;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);font-family:var(--sans);font-size:15px;color:var(--encre)}
.cla-q input::placeholder{color:var(--encre-2)}
.cla-q input:focus-visible{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.cla-q .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.cla-q+.cla{margin-top:0;border-top:none}
.cla-vide{margin-top:40px;color:var(--encre-2)}

/* ======================================================================
   MB-45 · Grille d’articles avec filtres
   Design retenu : MB-45-B · Sommaire de revue
   2 blocs du site : BLG-02 BLG-03
   ====================================================================== */
.ar-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:40px;padding-bottom:16px;border-bottom:1px solid var(--filet)}
.ar-f button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r);color:var(--encre-2);min-height:44px;padding:0 16px;cursor:pointer}
.ar-f button:hover{border-color:var(--violet);color:var(--violet)}
.ar-f button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.ar-f .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.ar-m{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-2)}
.ar-m i{font-style:normal;color:var(--filet)}
.arb{margin-top:26px;border-top:1px solid var(--filet)}
.arb a{display:grid;grid-template-columns:128px minmax(0,1fr) 148px;gap:clamp(18px,3vw,44px);align-items:start;padding:24px 0 26px;border-bottom:1px solid var(--filet);color:inherit}
.arb a:hover{background:var(--blanc)}
.arb .im{aspect-ratio:4/3;background:var(--creme-2);border:1px solid var(--filet);border-radius:2px;overflow:hidden}
.arb .im img{width:100%;height:100%;object-fit:cover;display:block}
.arb .tg{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-f);margin-bottom:9px}
.arb h3{font-size:27px;letter-spacing:-.024em;color:var(--navy);margin-bottom:9px}
.arb a:hover h3{color:var(--violet)}
.arb p{margin:0;color:var(--encre-2);max-width:66ch}
.arb .ar-m{flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
@media(max-width:820px){.arb a{grid-template-columns:96px minmax(0,1fr)}.arb .ar-m{grid-column:2;flex-direction:row;align-items:center;text-align:left}}

/* ======================================================================
   MB-46 · Schéma illustré pleine largeur
   Design retenu : MB-46-B · Emplacement de schéma
   1 bloc du site : CEN-02
   ====================================================================== */
.scb{margin-top:44px}
.scb-p{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:12px}
.scb-t{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 6px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-f)}
.scb-t .sp{flex:1}
.scb-t .d{color:var(--encre-2)}
.scb-z{aspect-ratio:16/7;background:var(--creme-2);border:1px solid var(--filet);border-radius:2px;display:grid;place-items:center;text-align:center;padding:24px}
.scb-z p{margin:0;max-width:52ch;font-size:14.5px;color:var(--encre-2)}
.scb-z p b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px}
/* Ajout de bascule : quand l'illustration existe déjà sous forme de page (carnet-illustration.html),
   elle prend la place de l'emplacement en attente, dans le même cadre. */
.scb-if{width:100%;height:760px;display:block;border:1px solid var(--filet);border-radius:2px;background:var(--creme-2)}
@media(max-width:900px){.scb-if{height:1180px}}
.scb-lg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--filet)}
.scb-lg>div{padding:16px clamp(12px,1.6vw,22px) 0;border-right:1px solid var(--filet)}
.scb-lg>div:last-child{border-right:none}
.scb-lg>div:first-child{padding-left:0}
.scb-lg .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-f);margin-bottom:7px}
.scb-lg .t{font-size:15px;font-weight:600;color:var(--navy)}
.scb-lg p{margin:5px 0 0;font-size:13.5px;color:var(--encre-2)}
@media(max-width:820px){.scb-lg{grid-template-columns:repeat(2,minmax(0,1fr))}.scb-lg>div:nth-child(2n){border-right:none}.scb-lg>div:nth-child(3){padding-left:0}.scb-z{aspect-ratio:4/3}}
@media(max-width:560px){.scb-lg{grid-template-columns:1fr}.scb-lg>div{border-right:none;padding-left:0}}

/* ======================================================================
   MB-47 · Grande annonce chiffrée
   Design retenu : MB-47-A · Chiffre et avantages en vis-à-vis
   1 bloc du site : BLD-08
   ====================================================================== */
.gaa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4.4vw,76px);align-items:center;margin-top:12px;padding-top:34px;border-top:1px solid var(--filet)}
.gaa-n .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-f)}
.gaa-n .v{font-family:var(--serif);font-size:clamp(64px,10vw,140px);line-height:.84;letter-spacing:-.04em;color:var(--navy);margin-top:14px}
.gaa-n .v sup{font-size:.34em;letter-spacing:0;vertical-align:super;color:var(--or-f)}
.gaa-n .s{margin:16px 0 0;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.14;letter-spacing:-.022em;color:var(--navy)}
.gaa-n .h{margin:14px 0 0;font-size:14.5px;color:var(--encre-2);max-width:42ch}
.gaa-l{display:grid;gap:0;border-top:1px solid var(--filet)}
.gaa-l>div{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0 20px;border-bottom:1px solid var(--filet)}
.gaa-l svg{width:22px;height:22px;stroke:var(--or-f);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.gaa-l h3{font-size:21px;letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
.gaa-l p{margin:0;font-size:14.5px;color:var(--encre-2)}
@media(max-width:900px){.gaa{grid-template-columns:1fr;gap:28px}}

/* ======================================================================
   MB-48 · CTA finale
   Design retenu : MB-48-A · Vis-à-vis clair
   22 blocs du site : CEN-06 CON-05 CPD-07 ECO-05 FIN-10 FLO-03 FSY-03 IA5-09 LOC-09 LSY-06 MAI-07 MAN-09 MIG-06 OGC-05 PRO-06 TAR-11 TRA-08 VIC-06 VLO-07 VSE-06 ACC-09 VID-04
   ====================================================================== */
.cta-a{--sol:var(--blanc)}
.cta-a .wrap{border-top:3px solid var(--or);padding-top:clamp(34px,4vw,52px)}
.cta-a-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4.4vw,72px);align-items:start}
.cta-a-grid h2{font-size:clamp(28px,3.9vw,50px);line-height:1.04;letter-spacing:-.028em;color:var(--navy);max-width:none}
.cta-a-grid h2 i{font-style:italic;color:inherit}
.cta-a-grid p{margin:0;color:var(--encre-2)}
.cta-a-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cta-a-note{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
@media(max-width:900px){.cta-a-grid{grid-template-columns:1fr;gap:22px}}

/* ======================================================================
   MB-50 · Séparateur d’option
   Design retenu : MB-50-C · Barre à numéro et question
   7 blocs du site : FSD-02 FSD-04 BLD-01 BLD-03 BLD-05 BLD-07 BLD-09
   ====================================================================== */
.spc{padding:clamp(24px,3vw,40px) 0}
.spc-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.4vw,34px);align-items:center;padding:18px 0 20px;border-top:3px solid var(--or);border-bottom:1px solid var(--filet)}
.spc-n{font-family:var(--serif);font-size:clamp(38px,4.6vw,60px);line-height:.88;letter-spacing:-.036em;color:var(--or-f)}
.spc-b .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-2);margin-bottom:6px}
.spc-b h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,34px);line-height:1.06;letter-spacing:-.026em;color:var(--navy);max-width:none}
.spc-q{margin:9px 0 0;font-size:15px;color:var(--encre-2);max-width:74ch}
.spc-q b{font-weight:600;color:var(--navy)}
@media(max-width:760px){.spc-r{grid-template-columns:auto minmax(0,1fr);row-gap:10px}.spc-r .st{grid-column:2}}