/*
Theme Name: Manager de Talent
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
/* 14/09/2026 (CM-0503) : identité « mise en relation recrutement » — Fraunces/Inter et palette
   ivoire/encre/bleu-nuit remplacent Instrument Sans/Be Vietnam Pro et bleu/orange (ancien média
   RH). Structure du gabarit « tribune » inchangée : seuls les jetons ci-dessous changent, tout
   le reste du fichier hérite d'eux via var(--titre)/var(--courant)/var(--accent). */

/* ==========================================================================
   GABARIT « TRIBUNE DE STARTUP »
   Une tribune se reconnait a cinq choses, et ce sont les seules qui comptent ici :
   1. une TETE TITRE GEANT de 120 px — la marque sur deux lignes a gauche, le rail
      des formats en colonne a droite, un filet de 1 px dessous ; elle tombe a 60 px
      des que la page defile ;
   2. un PREMIER ECRAN 100 % TYPOGRAPHIQUE — titre 60 px, chapo, signature, et pas
      une seule image ; l impact vient de la TAILLE, jamais de la couleur ;
   3. l ETIQUETTE DE FORMAT en pastille rectangulaire pleine encre a texte inverse :
      c est la SEULE forme du site, et elle n est jamais arrondie ;
   4. un SEUL aplat de couleur dans toute la page — la bande « La tribune du moment » ;
   5. du noir franc, du blanc, des filets, et rien d autre.
   Aucune ombre, aucun degrade, aucun arrondi (--rayon:0), aucune carte a bordure.
   ========================================================================== */

/* ---------- 1. JETONS ----------------------------------------------------- */
:root{
  --fond:#F7F5F0;            /* ivoire cassé — fond du service de mise en relation */
  --encre:#1B2430;           /* encre — texte principal */
  --doux:#5B6472;            /* gris de service, dérivé de l encre : chapos, dates, signatures */
  --filet:#DDD8CC;           /* le seul trait de separation du gabarit, ton ivoire */
  --filet-fort:#1B2430;      /* le filet gras qui ouvre une bande de format */
  --surf:#EFEBE1;            /* la surface morte (plaque de repli jr_vignette) */
  --accent:#22324A;       /* bleu nuit — l aplat unique, boutons, liens */
  --accent2:#8A6A2F;     /* second accent (repères de lecture), sobre, jamais le sauge de succès */
  --succes:#6B7F6B;       /* vert sauge — RÉSERVÉ aux états de succès de formulaire, jamais décoratif */
  /* accent LISIBLE en texte : assombri, sinon un accent vif tombe sous 4,5:1 */
  --accent-txt:color-mix(in srgb, #22324A 78%, #0d0d0d);
  /* l aplat pleine largeur : assombri pour que le blanc dessus tienne 4,5:1
     quelle que soit la teinte tiree (verifie sur un jaune vif : 5,5:1) */
  --aplat:color-mix(in srgb, #22324A 82%, #06070b);
  --titre:'Fraunces', 'Georgia', 'Times New Roman', serif;
  --courant:'Inter', 'Segoe UI', system-ui, sans-serif;
  --rayon:0px;               /* rien n est arrondi, images et pastilles comprises */
  color-scheme:light;
}
/* CM-0417 (14/09/2026) : mode clair uniquement, sur consigne de Mathias — les deux blocs
   sombres (media prefers-color-scheme + [data-theme="dark"]) sont neutralisés. Le site garde
   les jetons clairs définis dans :root ci-dessus, quel que soit le réglage de l'appareil. */

/* ---------- 2. SOCLE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--courant);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border-radius:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:700;margin:0;line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.sb-oeil,.sb-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sb-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.55rem .9rem;
  background:var(--encre);color:var(--fond);z-index:99;font-weight:600}
.tb-enveloppe{width:min(1240px,100% - 2.8rem);margin-inline:auto}
.tb-sep{color:var(--filet);padding-inline:.45em}

/* LA SIGNATURE DE LA MAISON : la pastille de format.
   Une seule forme dans tout le site — rectangle plein, encre, texte inverse. */
.tb-pastille{display:inline-block;background:var(--encre);color:var(--fond);
  font-family:var(--courant);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;padding:.42rem .6rem .38rem;border-radius:0}

/* le point accent de 8 px : reserve aux « + lus », nulle part ailleurs */
.tb-point{display:inline-block;width:8px;height:8px;background:var(--accent);
  flex:0 0 auto;border-radius:0}

.tb-chapo{font-size:17px;line-height:1.7;color:var(--doux);margin-top:.9rem}
.tb-chapo--grand{font-size:20px;line-height:1.55;max-width:min(64ch,100%)}
.tb-signe{font-size:12px;letter-spacing:.05em;color:var(--doux);margin-top:1.1rem;
  display:flex;flex-wrap:wrap;align-items:center}
.tb-signe-nom{font-weight:600;color:var(--encre)}
.tb-module-titre{font-family:var(--courant);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre);
  padding-bottom:.6rem;border-bottom:2px solid var(--filet-fort);margin-bottom:1.2rem}

/* ---------- 3. EN-TETE DE SERVICE B2B (15/09/2026, retour Mathias « ça dans le header
   vraiment ? ») : une ligne, ~72 px, sticky, logo compact, nav centrale, loupe + CTA à droite.
   Remplace l'ancien titre géant 120->60px + rail "Guides recrutement" en grille. --------------- */
.mdt-entete{background:var(--fond);border-bottom:1px solid var(--filet);
  position:sticky;top:0;z-index:30}
.mdt-entete-in{position:relative;display:flex;align-items:center;gap:1.6rem;
  min-height:72px;padding-block:.6rem}

.mdt-marque{margin:0;flex:0 0 auto}
.mdt-marque a{display:flex;align-items:center;gap:.55rem}
.mdt-marque a:hover{text-decoration:none}
.mdt-marque-mono{display:inline-flex;width:26px;flex:0 0 auto;color:var(--accent-txt)}
.mdt-marque-mono svg{width:100%;height:auto;fill:currentColor}
.mdt-marque-mot{font-family:var(--titre);font-weight:700;font-size:19px;
  letter-spacing:-.02em;white-space:nowrap;color:var(--encre)}

/* nav centrale : liens simples + 2 sous-menus natifs <details>/<summary> (clavier + tactile
   sans JS — pas de piège au clavier, Echap/clic dehors fermés nativement par le navigateur). */
.mdt-entete-nav{display:flex;align-items:center;gap:1.5rem;flex:1 1 auto;justify-content:center}
.mdt-entete-lien{font-size:13.5px;font-weight:600;color:var(--encre);white-space:nowrap;
  cursor:pointer;list-style:none}
.mdt-entete-lien::-webkit-details-marker{display:none}
a.mdt-entete-lien:hover{color:var(--accent-txt);text-decoration:none}

.mdt-menu{position:relative}
.mdt-menu > summary{display:inline-flex;align-items:center;gap:.35rem}
.mdt-menu > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.mdt-menu[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.mdt-menu-panel{position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%);
  min-width:220px;background:var(--fond);border:1px solid var(--filet);
  box-shadow:0 10px 26px rgba(27,36,48,.14);padding:.5rem;display:flex;flex-direction:column;z-index:31}
.mdt-menu-panel li{list-style:none}
.mdt-menu-panel a{display:block;padding:.55rem .7rem;font-size:13px;font-weight:500;
  color:var(--encre);white-space:nowrap}
.mdt-menu-panel a:hover{background:var(--surf);text-decoration:none}

/* droite : loupe (disclosure native, plus de champ en clair) + CTA */
.mdt-entete-droite{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.mdt-recherche{position:relative}
.mdt-loupe-bouton{display:inline-flex;align-items:center;justify-content:center;width:36px;
  height:36px;border:1px solid var(--filet);cursor:pointer;color:var(--encre);list-style:none}
.mdt-loupe-bouton::-webkit-details-marker{display:none}
.mdt-loupe-bouton:hover{border-color:var(--accent)}
.mdt-loupe-bouton svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round}
.mdt-recherche-panel{position:absolute;top:calc(100% + .8rem);right:0;background:var(--fond);
  border:1px solid var(--filet);box-shadow:0 10px 26px rgba(27,36,48,.14);padding:.7rem;z-index:31}
.mdt-recherche-panel input{font:inherit;font-size:13.5px;padding:.5rem .65rem;width:220px;
  max-width:64vw;border:1px solid var(--filet);border-radius:0;background:var(--fond);color:var(--encre)}
.mdt-recherche-panel input::placeholder{color:var(--doux)}

.mdt-burger{display:none;background:none;border:1px solid var(--filet);padding:.55rem .6rem;
  cursor:pointer;border-radius:0;flex:0 0 auto}
.mdt-burger span{display:block;width:18px;height:2px;background:var(--encre);margin:3px 0}

/* ---------- 4. L OUVERTURE : pas une image dans le premier ecran ---------- */
.tb-ouverture{border-bottom:1px solid var(--filet);background:var(--fond)}
.tb-ouverture-in{padding-block:4.2rem 3.4rem;max-width:min(78ch,100%)}
.tb-ouverture .tb-pastille{margin-bottom:1.4rem}
.tb-geant{font-size:clamp(32px,5.6vw,60px);line-height:1.02;letter-spacing:-.035em;
  font-weight:700}
.tb-geant--moyen{font-size:clamp(26px,3.6vw,38px)}
.tb-ouverture--second .tb-ouverture-in{padding-block:2.6rem}
.tb-ouverture--format .tb-ouverture-in{padding-block:3.6rem 2.6rem}
.tb-vide{padding-block:3rem}

/* ---------- 5. LES CARTES : bord nul, image 16:9, pastille, signature ----- */
.tb-grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2rem}
.tb-carte{display:flex;flex-direction:column;align-items:flex-start;border:0;
  background:none;box-shadow:none;border-radius:0}
.tb-carte-img{display:block;width:100%;margin-bottom:1rem}
.tb-carte-img img,.tb-carte-img .jr-plaque{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:0;filter:saturate(.92) contrast(1.04)}
.tb-carte .tb-pastille{margin-bottom:.7rem}
.tb-carte-titre{font-size:20px;line-height:1.2;font-weight:700}
.tb-carte-chapo{font-size:14.5px;line-height:1.6;color:var(--doux);margin-top:.55rem}
.tb-carte-signe{font-size:12px;color:var(--doux);margin-top:.7rem;letter-spacing:.03em}
.tb-triptyque{padding-block:3rem}

/* ---------- 6. L APLAT : le SEUL de la page. Un aplat, pas une image ------ */
.tb-aplat{background:var(--aplat);color:#ffffff;margin-block:1rem}
.tb-aplat-in{padding-block:3.4rem;max-width:min(72ch,100%)}
.tb-aplat-t{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#ffffff;opacity:.86;margin-bottom:1.1rem}
.tb-aplat-titre{font-size:clamp(26px,4vw,44px);line-height:1.06;color:#ffffff}
.tb-aplat-titre a{color:#ffffff}
.tb-aplat-chapo{font-size:17px;line-height:1.65;color:#ffffff;opacity:.92;margin-top:1rem}
.tb-aplat-signe{font-size:12px;letter-spacing:.05em;color:#ffffff;opacity:.86;margin-top:1.2rem}
.tb-aplat .tb-sep{color:#ffffff;opacity:.5}

/* ---------- 7. LES BANDES DE FORMAT --------------------------------------- */
.tb-ancres{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding-block:2.4rem 0;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tb-ancres a{color:var(--accent-txt);border-bottom:1px solid transparent;padding-bottom:2px}
.tb-ancres a:hover{text-decoration:none;border-bottom-color:var(--accent-txt)}
.tb-bande{padding-block:2.6rem;scroll-margin-top:130px}
.tb-bande-tete{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:.8rem;border-bottom:2px solid var(--filet-fort);margin-bottom:1.8rem}
.tb-bande-titre{font-size:26px;font-weight:700;letter-spacing:-.02em}
.tb-bande-chapo{font-size:14px;color:var(--doux);flex:1 1 260px}
.tb-bande-tout{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-txt);margin-left:auto;white-space:nowrap}
.tb-bande--suite{border-top:1px solid var(--filet);margin-top:2.4rem}

/* ---------- 8. LES + LUS ET L ECOSYSTEME ---------------------------------- */
.tb-fin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:0 3.2rem;padding-block:3rem 4rem;border-top:1px solid var(--filet);margin-top:2rem}
.tb-lus-liste li{display:flex;align-items:baseline;gap:.8rem;padding:.9rem 0;
  border-bottom:1px solid var(--filet)}
.tb-lus-liste li:first-child{border-top:1px solid var(--filet)}
.tb-lus-liste .tb-point{align-self:center}
.tb-rang{font-family:var(--titre);font-size:15px;font-weight:700;color:var(--doux);
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:1.2em}
.tb-lus-txt{display:block;min-width:0}
.tb-lus-txt a{font-family:var(--titre);font-size:17px;font-weight:600;line-height:1.25;
  display:block}
.tb-lus-format{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--doux);margin-top:.35rem}

.tb-eco-liste li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:baseline;gap:.4rem 1.2rem;padding:.9rem 0;border-bottom:1px solid var(--filet)}
.tb-eco-liste li:first-child{border-top:1px solid var(--filet)}
.tb-eco-nom{font-family:var(--titre);font-size:18px;font-weight:700;letter-spacing:-.02em}
.tb-eco-chapo{font-size:13.5px;color:var(--doux);line-height:1.5;min-width:0}
.tb-eco-compte{font-size:12px;font-weight:700;color:var(--doux);
  font-variant-numeric:tabular-nums}
.tb-autres{padding-block:2.6rem 3.4rem;border-top:1px solid var(--filet);margin-top:2rem}

/* ---------- 9. LE TEXTE (single) ----------------------------------------- */
.tb-art-tete{border-bottom:1px solid var(--filet)}
.tb-art-tete-in{padding-block:2.6rem 2.4rem;max-width:min(78ch,100%)}
.tb-ariane{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);margin-bottom:1.4rem}
.tb-art-tete .tb-pastille{margin-bottom:.7rem}
.tb-art-titre{font-size:clamp(26px,4vw,42px);line-height:1.08;letter-spacing:-.03em}
.tb-art-chapo{font-size:20px;line-height:1.5;color:var(--doux);margin-top:.7rem;
  max-width:min(62ch,100%)}
.tb-auteur{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--filet)}
.tb-auteur-nom{font-family:var(--titre);font-size:16px;font-weight:700}
.tb-auteur-fonction{font-size:13.5px;color:var(--doux);margin-top:.2rem;line-height:1.5}
.tb-auteur-date{font-size:12px;color:var(--doux);margin-top:.5rem;letter-spacing:.04em}

.tb-art-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:2rem;padding-block:.5rem 3rem;align-items:start}
.tb-art-lecture{min-width:0}
.tb-art-illu{margin:0 0 .7rem;max-width:min(820px,100%)}
.tb-art-illu img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;max-height:200px}
.tb-art-illu figcaption{font-size:12px;color:var(--doux);padding-top:.5rem;margin-top:.5rem;
  border-top:1px solid var(--filet)}

.tb-corps{font-size:17px;line-height:1.75;max-width:min(70ch,100%)}
.tb-corps p{margin:0 0 1.3rem}
.tb-corps h2{font-family:var(--titre);font-size:28px;line-height:1.15;letter-spacing:-.03em;
  margin:2.6rem 0 .9rem;padding-top:.9rem;border-top:2px solid var(--filet-fort);
  scroll-margin-top:140px}
.tb-corps h3{font-size:21px;margin:1.9rem 0 .6rem;letter-spacing:-.02em}
.tb-corps ul{margin:0 0 1.3rem}
.tb-corps ul li{position:relative;padding-left:1.3rem;margin-bottom:.55rem}
.tb-corps ul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  background:var(--accent)}
.tb-corps ol{list-style:decimal;margin:0 0 1.3rem;padding-left:1.5rem}
.tb-corps ol li{margin-bottom:.55rem;padding-left:.2rem}
.tb-corps ol li::marker{color:var(--accent2);font-weight:700}
.tb-corps a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px}
.tb-corps blockquote{margin:2rem 0;padding:0 0 0 1.6rem;border-left:4px solid var(--accent);
  font-family:var(--titre);font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.tb-corps blockquote p{margin:0 0 .6rem}
.tb-corps blockquote cite{display:block;font-family:var(--courant);font-size:13px;
  font-weight:500;font-style:normal;color:var(--doux);letter-spacing:.04em}
.tb-corps figure{margin:2rem 0}
.tb-corps figcaption{font-size:12px;color:var(--doux);padding-top:.5rem;margin-top:.5rem;
  border-top:1px solid var(--filet)}
.tb-corps img{margin:1.8rem 0}
.tb-corps code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  background:var(--surf);padding:.1rem .35rem;border-radius:0}
.tb-corps pre{background:var(--surf);padding:1rem 1.1rem;overflow-x:auto;margin:1.6rem 0;
  border-left:4px solid var(--filet-fort);border-radius:0}
.tb-corps pre code{background:none;padding:0}
/* tout tableau large tient dans son propre defilement : jamais la page */
.tb-corps table{width:100%;border-collapse:collapse;font-size:15px;margin:1.8rem 0;
  display:block;overflow-x:auto}
.tb-corps th,.tb-corps td{border-bottom:1px solid var(--filet);padding:.7rem .6rem;
  text-align:left;vertical-align:top}
.tb-corps th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-bottom:2px solid var(--filet-fort)}
.tb-art-pied{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--filet);
  max-width:min(70ch,100%)}

/* 15/09/2026 (retour Mathias) : liste "Sources" du mu-plugin sb-sources-*.php mise en numéroté,
   domaine réel affiché après le nom (ajouté par functions.php, jamais inventé). Sélecteurs par
   SUFFIXE de classe ([class*=]) : le préfixe est un hash propre à ce site, jamais le même pixel
   partout sur le réseau (cf. doctrine "socle partagé, zéro pixel"). */
.tb-corps [class*="__liste"]{list-style:none;counter-reset:mdt-src;padding-left:0;margin:1rem 0}
.tb-corps [class*="__item"]{counter-increment:mdt-src;position:relative;padding:.5rem 0 .5rem 1.8rem;
  border-bottom:1px solid var(--filet);font-size:14px}
.tb-corps [class*="__item"]::before{content:counter(mdt-src) ".";position:absolute;left:0;top:.5rem;
  font-weight:700;color:var(--doux)}
.tb-corps [class*="__lien"]{font-weight:600}
.mdt-source-domaine{color:var(--doux);font-weight:400;font-size:12.5px}

/* R-0539 (retour transversal, 15/09) : le bloc auteur (mu-plugin) et la colonne latérale ne
   doivent jamais être collés à la section suivante ("À lire aussi") — respiration forcée ici,
   au niveau du site, plutôt que dans le mu-plugin partagé par tout le réseau. */
.tb-art-lecture > .sb-auteur-fin{margin-bottom:2.4rem}
.tb-cote{margin-bottom:2rem}

/* le rail : sommaire collant, « A qui ca s adresse », transparence */
.tb-cote{position:sticky;top:130px;display:flex;flex-direction:column;gap:1.8rem}
.tb-bloc{border-top:2px solid var(--filet-fort);padding-top:.9rem}
.tb-bloc-t{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre);margin-bottom:.8rem}
.tb-sommaire ol{counter-reset:tb}
.tb-sommaire li{counter-increment:tb;border-bottom:1px solid var(--filet)}
.tb-sommaire a{display:block;padding:.55rem 0 .55rem 1.9rem;position:relative;
  font-size:14px;line-height:1.35;color:var(--doux)}
.tb-sommaire a::before{content:counter(tb);position:absolute;left:0;top:.55rem;
  font-size:11px;font-weight:700;color:var(--doux);font-variant-numeric:tabular-nums}
.tb-sommaire a:hover,.tb-sommaire a.is-actif{color:var(--encre);text-decoration:none}
.tb-sommaire a.is-actif::before{color:var(--accent-txt)}
.tb-adresse-txt{font-size:14px;line-height:1.6;color:var(--doux)}
.tb-bloc-lien{display:inline-block;margin-top:.8rem;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.tb-transparence{border-top-color:var(--accent2)}
.tb-transparence-txt{font-size:13.5px;line-height:1.6;color:var(--doux)}

/* ---------- 10. SIGNATURE D AUTEUR (produite par jr_signature) ------------ */
.sb-signature{display:flex;gap:1.2rem;align-items:flex-start}
.sb-signature img{width:64px;height:64px;border-radius:0;filter:grayscale(1) contrast(1.05)}
.sb-signature-nom{font-family:var(--titre);font-weight:700;font-size:16px}
.sb-signature-bio{font-size:14px;color:var(--doux);margin-top:.3rem;line-height:1.6}
.sb-date{font-size:11.5px;color:var(--doux);margin-top:.45rem;letter-spacing:.05em}
/* la plaque de repli de jr_vignette, remise au registre de la maison */
.jr-plaque{border-radius:0!important;background:var(--surf);color:var(--doux);
  font-family:var(--titre);letter-spacing:-.02em}

/* ---------- 11. PIED DE PAGE ---------------------------------------------- */
.tb-pied{margin-top:2rem;border-top:2px solid var(--filet-fort);background:var(--fond)}
.tb-pied-tete{padding-block:2.4rem 1.6rem;border-bottom:1px solid var(--filet)}
.tb-pied-marque{display:flex;align-items:center;gap:.7rem;font-family:var(--titre);
  font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.035em}
/* 15/09/2026 : .tb-mono (monogramme losange) vivait dans le bloc de l'ancien header, remplacé
   par .mdt-marque-mono — remis ici, base partagée par le pied de page qui l'utilise toujours. */
.tb-mono{display:inline-flex;width:34px;flex:0 0 auto;color:var(--accent-txt)}
.tb-mono svg{width:100%;height:auto;fill:currentColor}
.tb-mono--pied{width:26px}
.tb-pied-baseline{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--doux);margin-top:.6rem}
.tb-pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr;gap:0;
  padding-block:2.2rem}
.tb-pied-col{padding-inline:2rem}
.tb-pied-col:first-child{padding-left:0}
.tb-pied-col:last-child{padding-right:0}
.tb-pied-col + .tb-pied-col{border-left:1px solid var(--filet)}
.tb-pied-titre{font-family:var(--courant);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding-bottom:.6rem;border-bottom:1px solid var(--filet);
  margin-bottom:.9rem;color:var(--doux)}
.tb-pied-liste li{padding:.35rem 0;font-size:14px;display:flex;justify-content:space-between;
  gap:.8rem}
.tb-pied-liste--textes li{display:block;line-height:1.4;padding:.5rem 0;
  border-bottom:1px solid var(--filet)}
.tb-pied-compte{font-size:11px;color:var(--doux);font-variant-numeric:tabular-nums}
.tb-pied-note{font-size:12px;color:var(--doux);margin-top:.8rem;line-height:1.55}
.tb-pied input[type="search"],.tb-pied input[type="text"]{font:inherit;font-size:13px;
  width:100%;padding:.5rem .6rem;border:1px solid var(--filet);border-radius:0;
  background:var(--fond);color:var(--encre)}
.tb-pied button[type="submit"],.tb-pied input[type="submit"]{font:inherit;font-size:10px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:.5rem;
  padding:.5rem .9rem;border:1px solid var(--encre);background:var(--encre);
  color:var(--fond);border-radius:0;cursor:pointer}
.tb-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding-block:1rem 1.2rem;border-top:1px solid var(--filet);
  font-size:11.5px;color:var(--doux)}
.tb-bascule{font:inherit;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.45rem .8rem;border:1px solid var(--filet);
  background:none;color:var(--encre);border-radius:0;cursor:pointer}

.tb-pagination{padding-block:2rem 0;margin-top:2.4rem;border-top:1px solid var(--filet);
  display:flex;gap:.4rem;font-size:13px;font-weight:600;flex-wrap:wrap}
.tb-pagination .page-numbers{padding:.45rem .8rem;border:1px solid var(--filet);border-radius:0}
.tb-pagination .current{background:var(--encre);color:var(--fond);border-color:var(--encre)}

/* ---------- 12. BARRE MOBILE BASSE (R-0022, structure du modele) ---------- */
.sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--fond);border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom)}
.sb-nav-mobile-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.45rem .2rem .5rem;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--doux);text-align:center}
.sb-nav-mobile-item:hover{text-decoration:none}
.sb-nav-mobile-item.is-actif{color:var(--accent-txt)}
.sb-nav-ico{display:block;width:20px;height:20px}
.sb-nav-ico svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---------- 13. REPLIS : jamais un debordement horizontal ------------------ */
@media (max-width: 1080px){
  .tb-grille3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-art-corps{grid-template-columns:minmax(0,1fr)}
  .tb-cote{position:static;flex-direction:row;flex-wrap:wrap;gap:2rem}
  .tb-cote .tb-bloc{flex:1 1 260px}
  .tb-fin{grid-template-columns:minmax(0,1fr);row-gap:2.6rem}
  .tb-pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.8rem}
  .tb-pied-col{padding-inline:1.4rem}
  .tb-pied-col:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width: 860px){
  .mdt-entete-in{min-height:auto;padding-block:.7rem;gap:.6rem}
  .mdt-entete-droite{gap:.5rem}
  .mdt-marque-mot{font-size:15px}
  .mdt-burger{display:block;padding:.5rem}
  .mdt-loupe-bouton{width:32px;height:32px}
  /* la nav se replie derriere le bouton, en panneau plein-largeur sous l'entete (meme
     mecanique is-ouvert que l'ancien rail : le JS de footer.php n'a pas change). */
  .mdt-entete-nav{display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--fond);border-top:1px solid var(--filet);
    flex-direction:column;align-items:stretch;gap:0;
    max-height:calc(100vh - 72px);overflow-y:auto;
    box-shadow:0 10px 26px rgba(27,36,48,.14)}
  .mdt-entete-nav.is-ouvert{display:flex}
  .mdt-entete-nav > a.mdt-entete-lien{padding:.9rem 1.4rem;border-bottom:1px solid var(--filet)}
  .mdt-menu{border-bottom:1px solid var(--filet)}
  .mdt-menu > summary{padding:.9rem 1.4rem;width:100%;justify-content:space-between}
  .mdt-menu-panel{position:static;transform:none;border:0;box-shadow:none;
    padding:0 1.4rem .6rem;background:var(--surf)}
}
@media (max-width: 400px){
  .mdt-marque-mot{display:none}
}
@media (max-width: 760px){
  body{font-size:16px;padding-bottom:64px}
  .tb-enveloppe{width:min(1240px,100% - 2rem)}
  .tb-grille3{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .tb-ouverture-in{padding-block:2.4rem 2rem}
  .tb-aplat-in{padding-block:2.4rem}
  .tb-art-chapo{font-size:19px;margin-top:.5rem}
  .tb-art-illu img{max-height:120px}
  .tb-art-illu{margin:0 0 .6rem}
  .tb-art-corps{padding-block:.5rem 2rem}
  .tb-auteur{margin-top:.8rem;padding-top:.6rem}
  .tb-corps h2{font-size:24px}
  .tb-eco-liste li{grid-template-columns:minmax(0,1fr) auto}
  .tb-eco-chapo{grid-column:1 / -1}
  .tb-pied-grille{grid-template-columns:minmax(0,1fr)}
  .tb-pied-col{padding-inline:0;border-left:0}
  .tb-pied-col + .tb-pied-col{border-left:0;border-top:1px solid var(--filet);
    padding-top:1.2rem;margin-top:.4rem}
  .sb-nav-mobile{display:flex}
  .tb-cote{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{
  .mdt-entete-nav,.mdt-burger,.sb-nav-mobile,.tb-cote,.tb-bascule,.tb-ancres{display:none!important}
  .mdt-entete{position:static}
  .tb-aplat{background:none;color:#000}
  .tb-aplat-titre,.tb-aplat-titre a,.tb-aplat-chapo,.tb-aplat-signe,.tb-aplat-t{color:#000}
}

/* garde-fou : un display:grid/flex de classe bat l attribut hidden (vu le 04/09) */
[hidden]{display:none!important}

/* P-470 — la 1re carte de l accueil porte grid-column:span 2 en style INLINE.
   Sur telephone la grille n a plus qu une colonne : le span fabrique une colonne
   implicite dimensionnee sur le contenu (526px dans un ecran de 390) et pousse la page.
   !important est indispensable : on annule un style inline. */
@media (max-width:760px){.sb-grille>*{grid-column:auto!important}}

/* P-470 — la plume cite ses sources en URL BRUTE entre parentheses. Une URL ne
   contient aucun point de coupure : le paragraphe fait 677px de large dans une colonne
   de 329 et la page deborde de 351px sur telephone. Le piege : AUCUN element ne depasse
   le viewport (getBoundingClientRect ne voit rien), c est le contenu qui deborde de son
   propre element — seul scrollWidth > clientWidth le montre. */
.sb-corps{overflow-wrap:anywhere}

/* P-491 — display:contents : le h1 de la marque n existe pas pour la mise en page. */
.sb-marque-h1{display:contents}

/* ==========================================================================
   14/09/2026 (CM-0503) — SERVICE DE MISE EN RELATION RECRUTEMENT
   Landing, formulaire de demande, villes/spécialités, repères de lecture (barre
   de progression + encart de capture), pop-up maison. Classes préfixées mdt- :
   aucune collision avec les classes tb-/sb- existantes du gabarit tribune.
   ========================================================================== */
:root{ --succes-txt:color-mix(in srgb, var(--succes) 70%, #0d0d0d); }

/* ---------- CTA de demande, dans l'en-tête (procédé signature #1) ----------- */
.mdt-cta-tete{display:inline-block;background:var(--accent);color:#fff;font-family:var(--courant);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.6rem 1rem;border:1px solid var(--accent);white-space:nowrap}
.mdt-cta-tete:hover{background:var(--accent-txt);text-decoration:none}
.mdt-cta-tete-court{display:none}
/* 15/09/2026 : sur mobile étroit, "Décrire mon besoin" + logo + loupe + burger ne tenaient pas
   sur une ligne (texte coupé au bord) — bouton compact "Besoin", nom accessible inchangé
   (aria-label sur le lien, les deux libellés visuels sont aria-hidden). */
@media (max-width:480px){
  .mdt-cta-tete{padding:.5rem .7rem;font-size:10.5px;letter-spacing:.04em}
  .mdt-cta-tete-long{display:none}
  .mdt-cta-tete-court{display:inline}
}
.mdt-cta-flottant{display:none}
@media (max-width:760px){
  .mdt-cta-flottant{display:block;position:fixed;left:1rem;right:1rem;bottom:calc(64px + env(safe-area-inset-bottom) + .6rem);
    z-index:39;background:var(--accent);color:#fff;text-align:center;font-family:var(--courant);
    font-size:13px;font-weight:700;letter-spacing:.04em;padding:.85rem 1rem;
    box-shadow:0 2px 10px rgba(27,36,48,.18)}
  .mdt-cta-flottant:hover{text-decoration:none}
  /* 15/09/2026 (retour Mathias) : la barre collante recouvrait les cartes du formulaire quand il
     est à l'écran — masquée par JS (IntersectionObserver, voir footer.php) pendant ce temps. */
  .mdt-cta-flottant.is-masque{display:none}
}

/* ---------- HERO landing ---------------------------------------------------- */
.mdt-hero{border-bottom:1px solid var(--filet);background:var(--fond)}
/* 15/09/2026 (retour Mathias, mobile 390) : grid-template-areas pour pouvoir réordonner sans
   dupliquer le markup — desktop = texte+bas à gauche / formulaire à droite ; mobile = texte,
   puis formulaire, puis puces+boutons (le formulaire ne doit plus arriver "trop bas"). */
.mdt-hero-in{padding-block:3.6rem 3rem;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  grid-template-areas:"texte form" "bas form";
  gap:1.4rem 2.6rem;align-items:start}
.mdt-hero-texte{grid-area:texte}
.mdt-hero-form{grid-area:form}
.mdt-hero-bas{grid-area:bas}
.mdt-hero-pastille{margin-bottom:1.2rem}
.mdt-hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.06;letter-spacing:-.03em}
.mdt-hero-chapo{font-size:19px;line-height:1.6;color:var(--doux);margin-top:1.1rem;max-width:56ch}
.mdt-hero-preuves{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.6rem}
.mdt-hero-preuve{font-size:12px;letter-spacing:.06em;color:var(--doux);display:flex;
  align-items:center;gap:.45rem}
.mdt-hero-preuve::before{content:"";width:7px;height:7px;background:var(--accent);flex:0 0 auto}
@media (max-width:1080px){
  .mdt-hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"texte" "form" "bas"}
}

/* ---------- Bandeau transparence : ce que nous faisons / ne faisons pas ---- */
.mdt-transparence{background:var(--surf);border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet)}
.mdt-transparence-in{padding-block:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.mdt-transparence h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.7rem;border-bottom:2px solid var(--filet-fort);margin-bottom:1rem}
.mdt-transparence ul li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;
  font-size:14.5px;line-height:1.55;color:var(--doux)}
.mdt-transparence ul li::before{position:absolute;left:0;top:0;font-weight:700}
.mdt-transparence-oui li::before{content:"✓";color:var(--accent-txt)}
.mdt-transparence-non li::before{content:"✕";color:var(--doux)}
@media (max-width:760px){.mdt-transparence-in{grid-template-columns:1fr}}

/* ---------- Formulaire de demande ------------------------------------------ */
.mdt-form-section{padding-block:3.2rem;border-bottom:1px solid var(--filet)}
.mdt-form-tete{margin-bottom:1.8rem;max-width:60ch}
.mdt-form-tete h2{font-size:26px;letter-spacing:-.02em}
.mdt-form-tete p{font-size:14.5px;color:var(--doux);margin-top:.6rem;line-height:1.6}
.mdt-form{max-width:640px}
.mdt-form-grille{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
.mdt-form p.mdt-champ{margin:0}
.mdt-form p.mdt-champ--large{grid-column:1 / -1}
.mdt-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);margin-bottom:.4rem}
.mdt-form input,.mdt-form select,.mdt-form textarea{font:inherit;font-size:15px;width:100%;
  padding:.65rem .75rem;border:1px solid var(--filet);background:var(--fond);color:var(--encre);
  border-radius:0}
.mdt-form input:focus,.mdt-form select:focus,.mdt-form textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px}
.mdt-form textarea{resize:vertical}
.mdt-form-actions{margin-top:1.4rem;grid-column:1 / -1}
.mdt-form button[type="submit"]{font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.85rem 1.5rem;background:var(--accent);color:#fff;
  border:1px solid var(--accent);cursor:pointer;border-radius:0}
.mdt-form button[type="submit"]:hover{background:var(--accent-txt)}
.mdt-form-note{font-size:12px;color:var(--doux);margin-top:.8rem;line-height:1.5}
.mdt-envoye{background:color-mix(in srgb, var(--succes) 16%, var(--fond));
  border:1px solid var(--succes);color:var(--succes-txt);padding:.9rem 1.1rem;
  font-size:14px;margin-bottom:1.2rem}
@media (max-width:640px){.mdt-form-grille{grid-template-columns:1fr}}

/* 15/09/2026 (reprise type mebelbazar, point B) : titre porté par le formulaire lui-même quand
   il est déposé sans en-tête de section (rubrique, colonne d'article, contact, page ville) — et
   variante compacte 1 colonne pour la colonne latérale d'un article, où 640px n'existent pas. */
.mdt-form-titre-inline{font-family:var(--titre);font-size:19px;letter-spacing:-.02em;margin-bottom:1rem}
.mdt-form--compact{max-width:none}
.mdt-form--compact .mdt-form-grille{grid-template-columns:1fr;gap:.8rem}
.mdt-form--compact .mdt-champ--large{display:none}
.mdt-form--compact .mdt-form-note{display:none}
.mdt-form--compact button[type="submit"]{width:100%}

/* 15/09/2026 (capture 1440 regardée : bloc jr_bloc_kiosque() de la bande "Nos décryptages" rendu
   en texte brut, "Rubrique" collé au nom de chaque catégorie — les classes .sb-kiosque/.sb-etiquette
   n'avaient jamais reçu de CSS, même défaut que les gabarits réseau non stylés corrigés le 14/09.
   Repris en rangée de puces qui réutilise la pastille signature du site (.tb-pastille). */
.sb-kiosque{display:flex;flex-wrap:wrap;gap:.6rem .7rem;padding-block:1.6rem 0}
.sb-kiosque a{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--filet);
  padding:.5rem .8rem;font-size:13px}
.sb-kiosque a:hover{border-color:var(--accent);text-decoration:none}
.sb-kiosque .sb-etiquette{display:inline-block;background:var(--encre);color:var(--fond);
  font-family:var(--courant);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;padding:.3rem .45rem}
.sb-kiosque strong{font-family:var(--courant);font-weight:600}

/* ---------- Formulaire multi-étapes (15/09/2026, retour Mathias) --------------------------
   Logique reprise de mebelbazar.net (mb_form_projet/site.js), pixels propres à ce site : cartes
   plates (--rayon:0), pastille RUBRIQUE réutilisée pour "is-active", même palette bleu-nuit. */
.mdt-form-progres{margin-bottom:1.4rem}
.mdt-form-progres-etapes{list-style:none;display:flex;gap:1.4rem;margin:0 0 .6rem;padding:0;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.mdt-form-progres-etapes li.is-active{color:var(--accent-txt)}
.mdt-form-progres-barre{height:2px;background:var(--filet)}
.mdt-form-progres-barre span{display:block;height:100%;background:var(--accent);transition:width .25s ease}
.mdt-form-etape-legende{font-family:var(--titre);font-size:17px;font-weight:700;letter-spacing:-.02em;
  padding:0;margin-bottom:1rem;width:100%}
/* Repli SANS JS : les 3 blocs restent tous affichés et utilisables (dégradation propre) —
   la barre de progression, elle, n'a de sens qu'avec le pas-à-pas JS. */
.mdt-form-progres{display:none}
.mdt-form-etapes--js .mdt-form-progres{display:block}
/* 15/09/2026 (retour Mathias, capture 1440) : <fieldset> porte un cadre navigateur par défaut que
   la <legend> venait casser en haut à droite ("fait brouillon") — bordure retirée, carte propre. */
.mdt-form-etape{display:block;margin-bottom:1.6rem;border:0;padding:0;min-width:0}
.mdt-form-etapes--js .mdt-form-etape{display:none}
.mdt-form-etapes--js .mdt-form-etape.is-active{display:block}

.mdt-choix-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
/* spécificité .mdt-choix-grille .mdt-choix (0,2,0) > .mdt-form label (0,1,1) : sinon le label
   de champ générique du formulaire écrase le display:flex des cartes (bug constaté 15/09,
   texte des cartes qui déborde de leur cadre sur mobile — diagnostiqué en direct par le bastion). */
.mdt-choix-grille .mdt-choix{position:relative;display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--filet);
  padding:1rem .9rem;cursor:pointer;background:var(--fond)}
.mdt-choix:hover{border-color:var(--accent)}
.mdt-choix input{position:absolute;opacity:0;width:1px;height:1px}
.mdt-choix input:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
/* 15/09/2026 (retour Mathias) : la carte ENTIÈRE est le choix — plus de case à cocher carrée
   visible ; l'état sélectionné se lit sur la bordure + le fond de la carte uniquement. */
.mdt-choix:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--fond))}
.mdt-choix-icone{width:26px;height:26px;color:var(--accent-txt)}
.mdt-choix-icone svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Libellés en casse normale (pas de capitales espacées héritées de .mdt-form label) et plus courts. */
.mdt-choix-txt{display:block;font-size:14px;font-weight:600;line-height:1.3;
  text-transform:none;letter-spacing:normal}
@media (max-width:640px){.mdt-choix-grille{grid-template-columns:repeat(2,1fr)}}

.mdt-form-etape-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem}
.mdt-form-etape-nav--seul{justify-content:flex-end}
.mdt-form-lien-retour{background:none;border:0;padding:0;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--doux);cursor:pointer}
.mdt-form-lien-retour:hover{color:var(--accent-txt);text-decoration:underline}

/* Variante compacte (colonne sticky d'article) : cartes sur 1 colonne, légende resserrée. */
.mdt-form--compact .mdt-choix-grille{grid-template-columns:1fr;gap:.5rem}
.mdt-form--compact .mdt-choix{padding:.7rem .8rem;flex-direction:row;align-items:center}
.mdt-form--compact .mdt-choix-icone{width:20px;height:20px;flex:0 0 auto}
.mdt-form--compact .mdt-form-etape-legende{font-size:15px}
.mdt-form--compact .mdt-form-progres-etapes{gap:.8rem;font-size:9.5px}

/* ---------- Villes (procédé signature #2) ----------------------------------- */
.mdt-villes{padding-block:3.2rem;border-bottom:1px solid var(--filet)}
.mdt-villes-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:1.6rem}
.mdt-ville-tuile{display:block;border:1px solid var(--filet);background:var(--fond);overflow:hidden}
.mdt-ville-tuile:hover{text-decoration:none;border-color:var(--accent)}
.mdt-ville-photo{display:block}
.mdt-ville-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.94) contrast(1.03)}
.mdt-ville-corps{display:block;padding:1.3rem 1.4rem 1.5rem}
.mdt-ville-tuile h3{font-size:21px;letter-spacing:-.02em}
.mdt-ville-tuile p{font-size:13.5px;color:var(--doux);margin-top:.5rem;line-height:1.5}
.mdt-villes-plus{margin-top:1.6rem;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-txt)}
@media (max-width:860px){.mdt-villes-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mdt-villes-grille{grid-template-columns:1fr}}

/* ---------- Spécialités (aperçu accueil) ------------------------------------ */
.mdt-specialites{padding-block:3.2rem;border-bottom:1px solid var(--filet)}
.mdt-spe-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:1.6rem}
.mdt-spe-carte{display:block;border:1px solid var(--filet);padding:1.8rem}
.mdt-spe-carte:hover{text-decoration:none;border-color:var(--accent)}
.mdt-spe-carte h3{font-size:22px;letter-spacing:-.02em}
.mdt-spe-carte p{font-size:14px;color:var(--doux);margin-top:.6rem;line-height:1.55}
.mdt-spe-lien{display:inline-block;margin-top:.9rem;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-txt)}
@media (max-width:760px){.mdt-spe-grille{grid-template-columns:1fr}}

/* ---------- Bandeau transition éditoriale ----------------------------------- */
.mdt-transition{padding-block:3rem;border-bottom:1px solid var(--filet)}
.mdt-transition-tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.mdt-transition-tete h2{font-size:22px;letter-spacing:-.02em}
.mdt-transition-tete p{font-size:13.5px;color:var(--doux)}

/* ---------- Page ville / spécialité : hero simple + corps + CTA fin ------- */
.mdt-page-hero{border-bottom:1px solid var(--filet);padding-block:3.2rem 2.4rem}
.mdt-page-hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.03em}
.mdt-page-hero p{font-size:17px;color:var(--doux);margin-top:1rem;max-width:62ch}
.mdt-page-corps{padding-block:2.6rem;max-width:min(70ch,100%);margin-inline:auto}
.mdt-page-cta{margin:2.4rem auto 0;max-width:min(70ch,100%);border:1px solid var(--filet);
  padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap}
.mdt-page-cta p{font-size:15px;font-weight:600;margin:0}
.mdt-page-cta a.mdt-btn{white-space:nowrap}
.mdt-btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--courant);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.75rem 1.2rem;border:1px solid var(--accent)}
.mdt-btn:hover{background:var(--accent-txt);text-decoration:none}

/* ---------- Repères de lecture (article) : progression + minutes restantes - */
.mdt-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);
  z-index:50;transition:width .08s linear}
@media (prefers-reduced-motion: reduce){.mdt-progress{transition:none}}
.mdt-reste{font-size:11px;color:var(--doux);letter-spacing:.04em}

/* ---------- Encart de capture de leads, inséré dans le corps d article ----- */
.mdt-encart-lead{margin:2.6rem 0;padding:1.6rem 1.7rem;border:1px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--fond))}
.mdt-encart-lead p.mdt-encart-t{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt);margin-bottom:.6rem}
.mdt-encart-lead h4{font-family:var(--titre);font-size:19px;letter-spacing:-.02em;margin-bottom:.6rem}
.mdt-encart-lead p.mdt-encart-txt{font-size:14.5px;color:var(--doux);line-height:1.55;margin-bottom:1rem}

/* ---------- Pop-up maison (gabarit ids-nf : sortie + 20 s) ------------------ */
.mdt-popup-fond{position:fixed;inset:0;background:rgba(27,36,48,.55);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:1.2rem}
.mdt-popup{background:var(--fond);max-width:460px;width:100%;border:1px solid var(--filet);
  padding:2rem 2rem 1.8rem;position:relative}
.mdt-popup-fermer{position:absolute;top:.7rem;right:.7rem;background:none;border:1px solid var(--filet);
  width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1;color:var(--doux)}
.mdt-popup p.mdt-encart-t{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt);margin-bottom:.7rem}
.mdt-popup h3{font-family:var(--titre);font-size:23px;letter-spacing:-.02em;margin-bottom:.7rem}
.mdt-popup p.mdt-popup-txt{font-size:14.5px;color:var(--doux);line-height:1.55;margin-bottom:1.3rem}


/* ==========================================================================
   AUDIT-FINAL 14/09 (soir, CM-0503) — habillage des gabarits reseau "sb-"
   (archive.php/search.php/page.php/page-contact.php/searchform.php/
   page-les-dossiers.php) : ils n'heritaient d'aucune regle dediee (seul le
   socle body/h1..h4/a s'appliquait), d'ou un rendu plat sans gouttiere, une
   grille de rubrique empilee sans grille reelle, une pagination et un
   formulaire de contact sans design. Additif uniquement, aucune regle
   .tb-*/.mdt-* existante n'est modifiee au-dela des ajustements ci-dessus.
   ========================================================================== */
.sb-article{width:min(760px,100% - 3rem);margin-inline:auto;padding-block:3.4rem 4rem}
.sb-article-tete{margin-bottom:2rem}
.sb-article-tete h1{font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.03em}
.sb-corps{font-size:17px;line-height:1.75;max-width:min(70ch,100%)}
.sb-corps h2{font-family:var(--titre);font-size:23px;line-height:1.15;letter-spacing:-.03em;
  margin:2.2rem 0 .9rem;padding-top:.9rem;border-top:2px solid var(--filet-fort)}
.sb-corps p{margin:0 0 1.2rem}
.sb-form{margin-top:.4rem}
.sb-form p{margin:0 0 1.1rem}
.sb-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);margin-bottom:.4rem}
.sb-form input,.sb-form textarea{font:inherit;font-size:15px;width:100%!important;max-width:32rem;
  padding:.7rem .8rem;border:1px solid var(--filet);background:#fff;color:var(--encre)}
.sb-form input:focus,.sb-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.sb-form textarea{resize:vertical}
.sb-form button[type="submit"]{font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--accent);color:#fff;border:0;padding:.85rem 1.6rem;
  cursor:pointer}
.sb-form button[type="submit"]:hover{background:var(--accent-txt)}

.sb-enveloppe{width:min(1240px,100% - 2.8rem);margin-inline:auto}
.sb-heros{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2.4rem;align-items:end;
  padding-block:2.6rem 2rem;border-bottom:1px solid var(--filet)}
.sb-compte{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--doux);margin-bottom:.7rem}
.sb-heros h1{font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.03em}
.sb-heros-chapo{font-size:17px;color:var(--doux);margin-top:.8rem;max-width:60ch}
.sb-heros-vignette{align-self:end}
.sb-heros-vignette img,.sb-heros-vignette .jr-plaque{width:100%;aspect-ratio:16/9;object-fit:cover}
.sb-depliant{display:none} /* CM-0494 : "Ce que couvre cette rubrique" retire du gabarit reseau */
.sb-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2rem;
  padding-block:2rem}
.sb-carte{display:flex;flex-direction:column;align-items:flex-start}
.sb-carte>a{display:block;width:100%;margin-bottom:1rem}
.sb-carte img,.sb-carte .jr-plaque{width:100%;aspect-ratio:16/9;object-fit:cover}
.sb-carte h3{font-size:20px;line-height:1.2;font-weight:700;margin-top:0}
.sb-carte .sb-chapo{font-size:14.5px;line-height:1.6;color:var(--doux);margin-top:.55rem}
.sb-carte .sb-date{font-size:12px;color:var(--doux);margin-top:.7rem;letter-spacing:.03em}
.sb-pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin:2.6rem 0 3rem;padding-top:1.6rem;
  border-top:1px solid var(--filet)}
.sb-pagination ul{display:flex;gap:.5rem;flex-wrap:wrap}
.sb-pagination a,.sb-pagination span{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4rem;height:2.4rem;padding-inline:.6rem;border:1px solid var(--filet);
  font-size:13px;font-weight:600}
.sb-pagination a:hover{border-color:var(--accent);text-decoration:none}
.sb-pagination span.current{background:var(--accent);color:#fff;border-color:var(--accent)}

@media (max-width:860px){
  .sb-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-heros{grid-template-columns:minmax(0,1fr)}
  .sb-heros-vignette{display:none}
}
@media (max-width:760px){
  .sb-grille{grid-template-columns:minmax(0,1fr)}
  .sb-article{width:min(760px,100% - 2rem);padding-block:2.2rem 3rem}
  .sb-enveloppe{width:min(1240px,100% - 2rem)}
}

.sb-dossiers-rubrique{margin-block:2.6rem;padding-block:0 1.6rem;border-bottom:1px solid var(--filet)}
.sb-dossiers-rubrique h2{font-family:var(--titre);font-size:22px;margin-bottom:1.1rem;
  padding-top:.8rem;border-top:2px solid var(--filet-fort)}
.sb-dossiers-liste{display:grid;gap:.8rem 2rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sb-dossiers-liste li{padding-block:.2rem;font-size:15.5px}
.sb-dossiers-date{opacity:.65;font-size:12.5px;display:block;margin-top:.25rem;color:var(--doux)}
@media (max-width:760px){.sb-dossiers-liste{grid-template-columns:1fr}}

/* ---------- AUDIT-FINAL 14/09 (2e passe) — photo d'en-tete pages ville/demande ------------ */
.mdt-page-hero--photo .mdt-page-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:2.4rem;align-items:center;padding-block:0}
.mdt-page-hero-photo{margin:0}
.mdt-page-hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.03)}
@media (max-width:860px){
  .mdt-page-hero--photo .mdt-page-hero-in{grid-template-columns:minmax(0,1fr)}
  .mdt-page-hero-photo{order:-1;margin-bottom:1.4rem}
}

/* ==========================================================================
   16/09/2026 — retours Mathias R-0593 à R-0596. Habillage propre à Manager de
   Talent des 4 shortcodes infographies du socle (le socle n'y pose aucun pixel :
   COMPOSANTS-INFOGRAPHIES.md) + carte de France + pages stratégiques. Toujours
   les 5 traits de la maison : aucun arrondi, un seul accent, bordures --filet,
   pastilles/carrés jamais des ronds, Fraunces pour ce qui doit peser visuellement.
   ========================================================================== */

/* ---------- R-0593 : pages stratégiques (spécialité) ----------------------- */
.mdt-strat-hero{padding-block:3.6rem 2.8rem}
.mdt-strat-hero h1{font-size:clamp(32px,4.8vw,52px)}
.mdt-strat-chapo{font-size:19px;line-height:1.6;color:var(--doux);margin-top:1rem;max-width:58ch}
.mdt-strat-hero .mdt-hero-preuves{margin-top:1.6rem}
.mdt-strat-hero-actions{margin-top:1.8rem}

.mdt-strat-jauges{background:var(--surf);border-block:1px solid var(--filet);padding-block:2.4rem}

.mdt-strat-photo{padding-block:2.8rem;border-bottom:1px solid var(--filet)}
.mdt-strat-photo figure{margin:0;max-width:min(920px,100%);margin-inline:auto}
.mdt-strat-photo img{width:100%;aspect-ratio:16/7;object-fit:cover;filter:saturate(.94) contrast(1.03)}
.mdt-strat-photo figcaption{font-size:12px;color:var(--doux);padding-top:.6rem;margin-top:.6rem;
  border-top:1px solid var(--filet)}

.mdt-strat-frise{padding-block:3rem;border-bottom:1px solid var(--filet)}

/* ---------- Chiffres-clés [sbs_jauges] : rangée séparée par des filets ------ */
.sbs_jauges{display:flex;flex-wrap:wrap;gap:0;margin-top:1.6rem;border-top:1px solid var(--filet)}
.sbs_jauges_titre{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre);width:100%;margin-bottom:0;
  padding-block:0 .8rem;order:-1}
.sbs_jauge{flex:1 1 160px;padding:1.4rem 1.6rem 0;border-right:1px solid var(--filet);
  border-bottom:1px solid var(--filet);display:flex;flex-direction:column;gap:.3rem}
.sbs_jauge:last-child{border-right:0}
.sbs_jauge_libelle{order:2;font-size:12px;color:var(--doux);letter-spacing:.02em;line-height:1.4}
.sbs_jauge_valeur{order:1;font-family:var(--titre);font-size:40px;font-weight:700;line-height:1;
  color:var(--accent-txt);letter-spacing:-.02em}
.sbs_jauge_unite{order:1;font-size:14px;color:var(--accent-txt);margin-left:.3rem;font-weight:600}
.sbs_source{display:block;width:100%;font-size:11px;color:var(--doux);margin-top:1rem}
@media (max-width:640px){.sbs_jauge{flex:1 1 45%}}

/* ---------- Déroulé [sbs_frise] : étapes en frise horizontale --------------- */
.sbs_frise{display:flex;flex-wrap:wrap;gap:0;margin-top:1.8rem;position:relative}
.sbs_frise_titre{display:none} /* le titre de section est déjà porté par le tb-module-titre autour */
.sbs_etape{flex:1 1 0;min-width:220px;padding:1.6rem 1.4rem 0;border-top:2px solid var(--filet-fort);
  position:relative}
.sbs_etape::before{content:"";position:absolute;top:-6px;left:1.4rem;width:10px;height:10px;
  background:var(--accent)}
.sbs_etape_date{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--doux);margin-bottom:.5rem}
.sbs_etape_titre{display:block;font-family:var(--titre);font-size:19px;font-weight:700;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:.5rem}
.sbs_etape_desc{display:block;font-size:13.5px;color:var(--doux);line-height:1.55}
@media (max-width:900px){
  .sbs_etape{flex:1 1 100%;border-left:2px solid var(--filet-fort);border-top:0;
    padding:0 0 1.8rem 1.4rem;margin-left:.2rem}
  .sbs_etape::before{top:0;left:-6px}
}

/* ---------- Grille de prix [sbs_tarifs] et fiche-lieu [sbs_lieu] : au cas où
   un futur contenu de ce site en ait besoin (non utilisés à ce jour, aucun
   tarif public sur un service de mise en relation) — habillage cohérent posé
   par cohérence avec la doctrine (jamais un shortcode nu). --------------------- */
.sbs_tarifs{margin:1.8rem 0;border-top:1px solid var(--filet)}
.sbs_tarifs_titre{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre);padding-block:.8rem 0}
.sbs_tarif{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1rem;
  align-items:center;padding-block:.7rem;border-bottom:1px solid var(--filet)}
.sbs_tarif_libelle{font-size:14px;color:var(--encre)}
.sbs_tarif_barre{width:100%;height:26px;accent-color:var(--accent)}
.sbs_tarifs_notes{display:block;font-size:12px;color:var(--doux);margin-top:.8rem}
.sbs_lieu{display:block;border:1px solid var(--filet);padding:1.2rem 1.4rem;margin:1.6rem 0}
.sbs_lieu_nom{display:block;font-family:var(--titre);font-size:18px;margin-bottom:.3rem}
.sbs_lieu_adresse{display:block;font-style:normal;font-size:13.5px;color:var(--doux)}
.sbs_lieu_acces{display:block;font-size:12.5px;color:var(--doux);margin-top:.3rem}
.sbs_lieu_carte{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent-txt)}
.sbs_lieu_carte svg{width:14px;height:14px;fill:currentColor}

/* ---------- R-0594 : carte de France interactive, /villes/ ------------------ */
.mdt-carte-france-section{padding-block:3.2rem;border-bottom:1px solid var(--filet)}
.mdt-carte-france-bloc{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.mdt-carte-france{width:100%;max-width:560px;height:auto;display:block}
.mdt-carte-contour{fill:var(--surf);stroke:var(--filet);stroke-width:1.5}
.mdt-carte-point{cursor:pointer}
.mdt-carte-point-zone{fill:transparent}
.mdt-carte-point-marque{fill:var(--accent);transition:transform .15s ease;transform-box:fill-box;
  transform-origin:center}
.mdt-carte-point-nom{font-family:var(--courant);font-size:15px;font-weight:700;fill:var(--encre);
  dominant-baseline:middle}
.mdt-carte-point:hover .mdt-carte-point-marque,
.mdt-carte-point:focus-visible .mdt-carte-point-marque{transform:scale(1.6)}
.mdt-carte-point:hover .mdt-carte-point-nom,
.mdt-carte-point:focus-visible .mdt-carte-point-nom{fill:var(--accent-txt)}
.mdt-carte-point:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
.mdt-carte-france-liste{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center}
.mdt-carte-france-liste a{font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--accent-txt);border-bottom:1px solid transparent}
.mdt-carte-france-liste a:hover{text-decoration:none;border-bottom-color:var(--accent-txt)}

/* ---------- R-0596 : articles — bloc Sources et bloc « ce qu'on ne sait pas »
   (single.php les enveloppe désormais dans ces classes au lieu d'un paragraphe
   à puce manuelle « ⛔ » ou d'un texte brut coupé par des <br>). ------------- */
.tb-corps .tb-encadre-limite{margin:2.2rem 0;padding:1.3rem 1.5rem;border:1px solid var(--filet-fort);
  background:var(--surf)}
.tb-corps .tb-encadre-limite-t{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre);margin-bottom:.6rem}
.tb-corps .tb-encadre-limite p{font-size:14.5px;line-height:1.6;color:var(--doux);margin:0}
.tb-corps .tb-sources{margin:2.4rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--filet)}
.tb-corps .tb-sources-t{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--doux);margin-bottom:.7rem}
.tb-corps .tb-sources-liste{counter-reset:tb-src;margin:0;padding:0}
.tb-corps .tb-sources-liste li{counter-increment:tb-src;position:relative;padding:.4rem 0 .4rem 1.7rem;
  font-size:13px;color:var(--doux);line-height:1.5;border-bottom:1px solid var(--filet)}
.tb-corps .tb-sources-liste li:last-child{border-bottom:0}
.tb-corps .tb-sources-liste li::before{content:counter(tb-src)".";position:absolute;left:0;top:.4rem;
  font-weight:700;color:var(--accent-txt);font-size:12px}

/* ---------- Comparatif qualitatif [.mdt-comparatif] : remplace un <table> ----
   16/09/2026 (P-542, chk_zero_tableau) : les articles-comparatifs du réservoir portaient
   des <table> multi-colonnes (feature-par-feature, sans chiffre pilotable par sbs_jauges/
   sbs_tarifs). Ce composant restructure CHAQUE ligne du tableau d'origine en carte —
   même texte, même liens, rien ajouté ni retiré — avec un accent de couleur alterné
   (--accent / --accent2, déjà de la maison) et un survol qui la soulève : dynamique et
   colorée sans le moindre arrondi ni la moindre animation d'apparition fragile (piège
   .reveal{opacity:0} sans JS déjà payé sur le parc — jamais reconduit ici). */
.tb-corps .mdt-comparatif{display:grid;gap:1.1rem;margin:2.2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tb-corps .mdt-comparatif-carte{border:1px solid var(--filet);border-left:4px solid var(--accent);
  padding:1.2rem 1.3rem;background:var(--fond);
  transition:transform .18s ease,box-shadow .18s ease,border-left-color .18s ease}
.tb-corps .mdt-comparatif-carte:nth-child(even){border-left-color:var(--accent2)}
.tb-corps .mdt-comparatif-carte:hover,
.tb-corps .mdt-comparatif-carte:focus-within{transform:translateY(-3px);
  box-shadow:0 10px 24px -16px rgba(27,36,48,.35)}
.tb-corps .mdt-comparatif-nom{font-family:var(--titre);font-size:16.5px;margin:0 0 .8rem;color:var(--encre)}
.tb-corps .mdt-comparatif-carte dl{margin:0;display:grid;gap:.6rem}
.tb-corps .mdt-comparatif-carte dl>div{display:grid;gap:.15rem}
.tb-corps .mdt-comparatif-carte dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-txt)}
.tb-corps .mdt-comparatif-carte dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--doux)}
.tb-corps .mdt-comparatif-carte dd a{color:var(--accent-txt)}