/* Pages d'offre (bilan de compétences, management de transition) — 18/09/2026.
   Même grammaire que le reste du site : aucun arrondi, filets ivoire, un accent bleu nuit. */
.mdt-offre-bref{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--filet)}
.mdt-offre-bref-t{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0 0 .9rem}
.mdt-offre-bref ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.mdt-offre-bref li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:baseline}
.mdt-offre-bref strong{font-family:var(--titre);font-size:26px;line-height:1.1;color:var(--accent)}
.mdt-offre-bref span{font-size:15px;line-height:1.5;color:var(--encre)}

.mdt-offre-texte,.mdt-offre-situations,.mdt-offre-finance,.mdt-offre-faq{padding-block:3rem;border-bottom:1px solid var(--filet)}
.mdt-offre-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem}
.mdt-offre-colonnes p{font-size:17px;line-height:1.7;margin:0;color:var(--encre)}

.mdt-offre-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--filet-fort)}
.mdt-offre-carte{display:block;padding:1.5rem 1.4rem 1.6rem;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);
  color:var(--encre);text-decoration:none;transition:background .2s}
.mdt-offre-carte:last-child{border-right:0}
.mdt-offre-carte:hover,.mdt-offre-carte:focus-visible{background:var(--surf)}
.mdt-offre-num{font-family:var(--titre);font-size:30px;color:var(--accent2);display:block;margin-bottom:.8rem}
.mdt-offre-carte h3{font-size:19px;margin:0 0 .5rem}
.mdt-offre-carte p{font-size:15px;line-height:1.55;color:var(--doux);margin:0}

.mdt-offre-note{max-width:62ch;margin:1.6rem 0 0;padding-left:1rem;border-left:3px solid var(--accent);font-size:16px;line-height:1.6}

.mdt-offre-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.mdt-offre-case{border:1px solid var(--filet);border-top:3px solid var(--accent);padding:1.4rem 1.4rem 1.5rem;background:var(--fond)}
.mdt-offre-case h3{font-size:19px;margin:0 0 .6rem}
.mdt-offre-case p{font-size:15.5px;line-height:1.6;margin:0}

.mdt-faq{border-top:2px solid var(--filet-fort);max-width:860px}
.mdt-faq-item{border-bottom:1px solid var(--filet)}
.mdt-faq-item summary{list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 0;position:relative;
  font-family:var(--titre);font-size:19px;line-height:1.35;color:var(--encre)}
.mdt-faq-item summary::-webkit-details-marker{display:none}
.mdt-faq-item summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  width:1.8rem;height:1.8rem;display:grid;place-items:center;border:1px solid var(--filet);
  font-family:var(--courant);font-size:18px;color:var(--accent)}
.mdt-faq-item[open] summary::after{content:"−";background:var(--accent);color:var(--fond);border-color:var(--accent)}
.mdt-faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdt-faq-item p{margin:0 0 1.3rem;max-width:68ch;font-size:16px;line-height:1.7;color:var(--doux)}

.mdt-offre-relance{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2.2rem}
.mdt-offre-relance p{margin:0;font-size:17px;flex:1 1 100%}
.mdt-offre-lien{color:var(--accent);font-weight:600}
.mdt-offre-sources{margin:2rem 0 0;font-size:12px;line-height:1.6;color:var(--doux);max-width:80ch}

@media (max-width:1000px){
  .mdt-offre-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mdt-offre-carte:nth-child(2n){border-right:0}
  .mdt-offre-carte:nth-child(2n+1){border-right:1px solid var(--filet)}
}
@media (max-width:700px){
  .mdt-offre-colonnes,.mdt-offre-trio{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .mdt-offre-grille{grid-template-columns:minmax(0,1fr)}
  .mdt-offre-carte{border-right:0!important}
  .mdt-offre-bref li{grid-template-columns:5.6rem minmax(0,1fr)}
  .mdt-offre-bref strong{font-size:21px}
  .mdt-offre-texte,.mdt-offre-situations,.mdt-offre-finance,.mdt-offre-faq{padding-block:2.2rem}
  .mdt-faq-item summary{font-size:17px}
}

/* Le bloc « en bref » est un enfant de la grille du hero : sous le texte à gauche en bureau,
   APRÈS le formulaire en mobile (le formulaire doit arriver tôt sur un écran de téléphone). */
.mdt-offre-hero .mdt-page-hero-in{grid-template-areas:"txt vform" "bref vform";grid-template-rows:auto 1fr}
.mdt-offre-hero .mdt-offre-bref{grid-area:bref;align-self:start}
@media (max-width:1000px){
  .mdt-offre-hero .mdt-page-hero-in{grid-template-areas:"txt" "vform" "bref";grid-template-rows:none}
  .mdt-offre-hero .mdt-offre-bref{margin-top:.4rem}
}
/* 26/09/2026 (A3, #13) : le texte au-dessus du formulaire (pastille+h1+chapo+preuves) est compacté
   à 480px pour que le formulaire démarre plus tôt — condition nécessaire, en plus de la compaction
   des cartes de l'étape 1 (style.css), pour que le bouton "Continuer →" reste visible sans défiler. */
@media (max-width:480px){
  .mdt-offre-hero.mdt-page-hero{padding-block:1.1rem .6rem}
  .mdt-offre-hero .mdt-strat-chapo{font-size:15px;line-height:1.45;margin-top:.5rem}
  .mdt-offre-hero .mdt-hero-preuves{margin-top:.7rem;gap:.35rem .7rem}
  .mdt-offre-hero h1{font-size:23px}
}
.mdt-faq{max-width:none}
.mdt-offre-bref li{grid-template-columns:9.5rem minmax(0,1fr)}
@media (max-width:700px){.mdt-offre-bref li{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* Maillage des pages « bilan de compétences + ville » (18/09/2026). */
.mdt-offre-villes{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.mdt-offre-villes a{display:inline-block;padding:.45rem .8rem;border:1px solid var(--filet);background:var(--fond);color:var(--encre);font-size:14px;text-decoration:none}
.mdt-offre-villes a:hover,.mdt-offre-villes a:focus-visible{border-color:var(--accent);color:var(--accent)}
/* Infographie « répartition de l'emploi » (pages bilan + ville) : barres, jamais une liste. */
.mdt-barres{margin:2rem 0 0;padding:1.5rem 1.6rem 1.4rem;border:1px solid var(--filet);border-top:3px solid var(--accent);background:var(--fond)}
.mdt-barres figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0 0 1.1rem}
.mdt-barre{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) 4.2rem;gap:1rem;align-items:center;padding:.55rem 0}
.mdt-barre+.mdt-barre{border-top:1px solid var(--filet)}
.mdt-barre-nom{font-size:15px;line-height:1.4}
.mdt-barre-piste{height:12px;background:var(--surf);position:relative;overflow:hidden}
.mdt-barre-val{position:absolute;inset:0 auto 0 0;background:var(--accent);transform-origin:left;animation:mdt-barre-pousse .9s ease-out both}
.mdt-barre-pct{font-family:var(--titre);font-size:20px;color:var(--accent);text-align:right}
@keyframes mdt-barre-pousse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.mdt-barre-val{animation:none}}
@media (max-width:700px){
  .mdt-barres{padding:1.2rem 1rem}
  .mdt-barre{grid-template-columns:minmax(0,1fr) auto;gap:.35rem .8rem}
  .mdt-barre-nom{grid-column:1/-1}
  .mdt-barre-pct{font-size:18px}
}