/* pages métier et diagnostic gratuit (T-005) */
.metier-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.metier-pains .pain { text-align: left; }
.metier-help .benefit h3 { margin-bottom: 8px; }
.metier-help .benefit .module-cta { margin-top: 16px; }
.metier-here { max-width: 760px; margin: 0 auto; text-align: left; padding: 28px 32px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.metier-here h2 { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 30px); text-align: left; }
.metier-here p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-secondary); }

/* diagnostic gratuit */
.diag-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; max-width: 1100px; margin: 0 auto; text-align: left; }
.diag-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: diag; }
.diag-steps li { position: relative; padding: 20px 22px 20px 72px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); counter-increment: diag; }
.diag-steps li::before { content: counter(diag); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: #222222; display: grid; place-items: center; font: 800 17px var(--display); }
.diag-steps h3 { margin: 0 0 6px; font-size: 18px; }
.diag-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.diag-rgpd { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.diag-rgpd a, .diag-form a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.diag-form { padding: 32px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-float); }
.diag-form h2 { margin: 0 0 20px; font-size: 24px; text-align: left; }
.diag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.diag-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.diag-field label, .diag-field .diag-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.diag-field .req { color: var(--text-secondary); font-weight: 500; }
.diag-field input[type="text"], .diag-field input[type="tel"], .diag-field input[type="email"], .diag-field select { width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 16px; }
.diag-field input[type="file"] { width: 100%; padding: 12px; border: 1.5px dashed var(--text-muted); border-radius: var(--r-sm); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 15px; }
.diag-field input:focus-visible, .diag-field select:focus-visible { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--text-primary); }
.diag-field input:user-invalid, .diag-field select:user-invalid { border-color: #C9542F; }
.diag-hint { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.diag-files-list { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-secondary); }
.diag-consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.diag-consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: #222222; }
.diag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.diag-submit { width: 100%; justify-content: center; }
.diag-notice { margin-top: 20px; padding: 20px 22px; border-radius: var(--r-md); background: var(--lime-wash); color: var(--text-primary); border: 1px solid var(--border-accent, rgba(187,255,51,.55)); font-size: 15.5px; line-height: 1.6; }
.diag-notice[hidden] { display: none; }
.diag-notice strong { display: block; margin-bottom: 6px; font-size: 17px; }
.diag-notice-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.diag-notice a.btn-primary { background: var(--lime); color: #222222; border-color: var(--lime); }
.diag-notice a.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.diag-error { background: #FBE9E3; border-color: #C9542F; }
html[data-theme="dark"] .diag-error { background: #3A1E15; color: #FBE9E3; }
@media (max-width: 899px) { .diag-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 599px) { .diag-row { grid-template-columns: 1fr; gap: 0; } .diag-form { padding: 22px; border-radius: var(--r-md); } .metier-here { padding: 22px; border-radius: var(--r-md); } }
.metier-help .benefit-grid { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
@media (max-width: 767px) { .metier-help .benefit-grid { grid-template-columns: 1fr; } }
.metier-pains .pain-grid { grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (max-width: 899px) { .metier-pains .pain-grid { grid-template-columns: 1fr; } }

/* ── T-006 : emplacement média animé, encart WhatsApp, liens entre métiers, hub ── */
.metier-limits { margin-top: 14px !important; font-size: 15.5px !important; color: var(--text-muted) !important; }

/* emplacement média : image ou vidéo muette en boucle, zoom lent en transform (désactivé si mouvement réduit) */
.media-slot { position: relative; overflow: hidden; width: 100%; max-width: 980px; margin: 36px auto 0; aspect-ratio: 16 / 7; border-radius: var(--r-lg); background: var(--bg-warm, var(--bg-secondary)); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.media-slot img, .media-slot video { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: mediaSlow 22s ease-in-out infinite alternate; will-change: transform; }
.media-slot-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); animation: mediaSlow 22s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.media-slot-ph svg { opacity: .55; }
@keyframes mediaSlow { from { transform: scale(1); } to { transform: scale(1.06) translate3d(-1.2%, -.8%, 0); } }
/* rien à afficher tant qu'aucun média n'est fourni : pas de cadre vide ni de contenu annoncé aux lecteurs d'écran */
.media-slot:not(:has(img, video)) { display: none; }
.media-slot:has(img, video) .media-slot-ph { display: none; }
@media (max-width: 599px) { .media-slot { aspect-ratio: 4 / 3; border-radius: var(--r-md); margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .media-slot img, .media-slot video, .media-slot-ph { animation: none; } }

/* encart WhatsApp */
.metier-wa { padding-top: 0; }
.metier-wa-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 920px; margin: 0 auto; text-align: left; }
.metier-wa-text h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); text-align: left; }
.metier-wa-text p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.metier-wa-card .btn { flex: none; }
@media (max-width: 767px) { .metier-wa-card { flex-direction: column; align-items: flex-start; } .metier-wa-card .btn { width: 100%; justify-content: center; } }

/* liens vers les autres métiers */
.metier-others { background: var(--bg-warm, var(--bg-secondary)); }
.metier-others h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 28px; }
.metier-links { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; }
.metier-links a { display: inline-block; padding: 10px 18px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border); font-weight: 600; font-size: 15px; color: var(--text-primary); transition: background .2s, border-color .2s; }
.metier-links a:hover { background: var(--lime-wash); border-color: var(--lime-dark); }
.metier-links-all a { background: #222222; color: #FFFFFF; border-color: #222222; }
.metier-links-all a:hover { background: var(--lime); color: #222222; border-color: var(--lime); }

/* hub */
.metier-hub .benefit-grid { grid-template-columns: repeat(2, 1fr); max-width: 1060px; }
.metier-hub .benefit { text-align: left; }
@media (max-width: 767px) { .metier-hub .benefit-grid { grid-template-columns: 1fr; } }

/* photo de l'emplacement média : image dans <picture>, légende discrète (la légende ne bouge pas avec le zoom) */
.media-slot picture { display: block; width: 100%; height: 100%; }
.media-credit { position: absolute; right: 10px; bottom: 10px; z-index: 2; margin: 0; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(34, 34, 34, .74); color: #FFFFFF; font-size: 12px; line-height: 1.4; }
.media-credit a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.media-credit a:hover { text-decoration-color: var(--lime); }

/* =========================================================
   T-008 : « Le marché coloré » : pages métier en couleur
   Chaque métier a 3 variables : --m-tint (bande pastel), --m-accent (aplat vif, texte dessus toujours #222),
   --m-deep (bande sombre, texte blanc). Aplats uniquement : aucun dégradé, aucun halo.
   ========================================================= */
.metier { --m-tint: #F7F7F5; --m-accent: #BBFF33; --m-deep: #222222; --m-dot: #222222; }
.metier--pizzeria { --m-tint: #FFE6DF; --m-accent: #FF8C78; --m-deep: #8A2A1B; }
.metier--restauration-rapide { --m-tint: #FFEBD2; --m-accent: #FFA64D; --m-deep: #7A3B05; }
.metier--creperie { --m-tint: #FFF1C9; --m-accent: #F5C84C; --m-deep: #5F3F06; }
.metier--restaurant-traditionnel { --m-tint: #EEF2D6; --m-accent: #B9CB6A; --m-deep: #3B4D12; }
.metier--bistrot { --m-tint: #DDF0E5; --m-accent: #6FC49A; --m-deep: #14472F; }
.metier--food-truck { --m-tint: #D8F5F1; --m-accent: #4FD1C1; --m-deep: #0B4F48; }
.metier--brasserie { --m-tint: #E1E9F7; --m-accent: #8FB0EA; --m-deep: #1D3157; }
.metier--traiteur { --m-tint: #ECE4F8; --m-accent: #B79BEA; --m-deep: #3B2068; }
.metier--bar-a-vins { --m-tint: #F6E1E8; --m-accent: #E08AA6; --m-deep: #5A1230; }
.metier--restaurant-gastronomique { --m-tint: #F4EEE0; --m-accent: #D6BC82; --m-deep: #222222; }
html[data-theme="dark"] .metier, html[data-theme="dark"] [class*="metier--"] { --m-tint: color-mix(in srgb, var(--m-accent) 12%, #121218); }

/* tous les survols de boutons des pages métier : lime #BBFF33, texte #222 */
.metier main .btn:hover, .metier main .btn-outline:hover, .metier main .btn-primary:hover { background: #BBFF33; border-color: #BBFF33; color: #222222; transform: translateY(-2px); }

/* badge métier */
.badge-metier { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--m-accent); color: #222222; font-size: 13px; font-weight: 700; line-height: 1.2; }
.badge-metier::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #222222; }

/* 1. hero 2 colonnes sur bande teintée */
.mh { background: var(--m-tint); padding: calc(var(--nav-h) + var(--nav-top) + 56px) 32px 96px; }
.mh-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; max-width: var(--maxw); margin: 0 auto; }
.mh-text { text-align: left; min-width: 0; }
.mh .back-home { margin-bottom: 22px; }
.mh h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; margin: 20px 0 22px; text-wrap: balance; }
.mh .lead { font-size: 19px; max-width: 58ch; margin: 0 0 30px; color: var(--text-secondary); }
.mh .metier-cta { justify-content: flex-start; margin-top: 0; }
.mh-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mh-facts .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); }
.mh-facts .chip-check { width: 20px; height: 20px; flex: none; }
.mh-media { position: relative; }
.mh-media::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; background: var(--m-accent); border-radius: var(--r-lg); z-index: 0; }
.mh-media .media-slot { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 3; border: 0; box-shadow: none; border-radius: var(--r-lg); }
.mh-media .media-slot img { object-position: var(--m-pos, 50% 50%); }
.mh-sticker { position: absolute; left: -18px; bottom: 34px; z-index: 3; }

/* 2. douleurs : cartes numérotées avec icône */
.mp { background: var(--bg-primary); }
.mp .pain-grid { counter-reset: pn; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 40px auto 0; }
.mp .pain { counter-increment: pn; padding: 28px; text-align: left; border-radius: var(--r-lg); }
.mp .pain-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mp .pain-num { width: 56px; height: 56px; border-radius: 50%; background: var(--m-accent); color: #222222; display: grid; place-items: center; font: 800 22px var(--display); }
.mp .pain-num::before { content: counter(pn, decimal-leading-zero); }
.mp .pain-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--m-tint); display: grid; place-items: center; color: var(--m-deep); }
html[data-theme="dark"] .mp .pain-ic { color: var(--text-primary); }
.mp .pain-ic svg { width: 28px; height: 28px; }
.mp .pain h3 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; }
.mp .pain p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* 3. solution : bande sombre */
.ms { background: var(--bg-primary); padding: 56px 12px; }
.ms-inner { background: var(--m-deep); color: #FFFFFF; border-radius: var(--r-xl); padding: 88px 24px; }
html[data-theme="dark"] .ms-inner { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.ms h2 { color: #FFFFFF; max-width: 780px; margin: 0 auto 52px; font-size: clamp(30px, 3.8vw, 46px); }
.ms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto; text-align: left; }
.ms-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; }
.ms-label { align-self: flex-start; background: var(--m-accent); color: #222222; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 16px; }
.ms-card h3 { color: #FFFFFF; font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.ms-card p { color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.65; margin: 0; }
.ms-link { align-self: flex-start; margin-top: 18px; color: #BBFF33; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ms-link:hover { color: #FFFFFF; }

/* 4. chez vous : bande teintée et pastilles de faits */
.mhere { background: var(--m-tint); padding: 96px 32px; }
.mhere-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: var(--maxw); margin: 0 auto; }
.mhere h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 18px; text-align: left; }
.mhere p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.mhere .metier-limits { margin-top: 16px !important; color: var(--text-secondary) !important; }
.mf-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mf-facts li { display: flex; align-items: center; gap: 20px; padding: 16px 28px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.mf-big { font: 800 40px/1 var(--display); letter-spacing: -.02em; color: var(--m-deep); min-width: 4.4ch; }
html[data-theme="dark"] .mf-big { color: var(--text-primary); }
.mf-lbl { font-size: 15px; line-height: 1.35; color: var(--text-secondary); }
.mf-reach { margin-top: 16px !important; font-size: 15px !important; font-weight: 600; color: var(--text-primary) !important; }

/* 5. FAQ en cartes */
.mq { background: var(--bg-primary); }
.mq h2 { margin-bottom: 40px; }
.metier .faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.metier .faq-item { border-radius: var(--r-md); }
.metier .faq-icon, .metier .faq-q:hover .faq-icon, .metier .faq-item.open .faq-icon { background: var(--m-accent); }
.metier .faq-icon::before, .metier .faq-icon::after, html[data-theme="dark"] .metier .faq-item.open .faq-icon::before, html[data-theme="dark"] .metier .faq-item.open .faq-icon::after { background: #222222; }
.metier .faq-item.open { background: var(--m-tint); }

/* 6. WhatsApp avec le portrait de Lucas */
.mwa { background: var(--bg-primary); padding-top: 0; }
.mwa-card { display: flex; align-items: center; gap: 28px; max-width: 940px; margin: 0 auto; padding: 28px 32px; background: var(--lime-wash); border: 1.5px solid var(--lime); border-radius: var(--r-lg); text-align: left; }
.mwa-photo { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid var(--lime); display: block; background: #E5E5E5; }
.mwa-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mwa-text { flex: 1; min-width: 0; }
.mwa-text h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); text-align: left; }
.mwa-text p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.mwa-card .btn { flex: none; }

/* 7. autres métiers : pilules colorées */
.mo { background: var(--bg-warm, var(--bg-secondary)); }
.mo .metier-links a::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: var(--dot, #222222); vertical-align: 0; }
.mo .metier-links a:hover, .mo .metier-links-all a:hover { background: #BBFF33; border-color: #BBFF33; color: #222222; }
.mo .metier-links-all a::before { content: none; }

/* 8. CTA final sur aplat accent */
.mfin { background: var(--m-accent); color: #222222; padding: 96px 24px; text-align: center; }
.mfin h2 { color: #222222; max-width: 820px; margin: 0 auto 18px; font-size: clamp(30px, 4vw, 48px); }
.mfin .ul { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .14em; }
.mfin .lead { color: #222222; max-width: 640px; margin: 0 auto 32px; font-size: 18px; }
.mfin .final-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.mfin .btn-primary { background: #222222; border-color: #222222; color: #FFFFFF; }
.mfin .btn-outline { background: transparent; border-color: #222222; color: #222222; }

/* hub : cartes aux couleurs des métiers */
.metier-hub .benefit { background: var(--m-tint); border: 1px solid transparent; }
.metier-hub .benefit h3::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; background: var(--m-accent); vertical-align: -1px; }

/* responsive */
@media (max-width: 899px) {
  .mh { padding: calc(var(--nav-h) + var(--nav-top) + 32px) 22px 64px; }
  .mh-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .mh-text { display: contents; }
  .mh .back-home { order: 0; }
  .mh .badge-metier { order: 1; align-self: flex-start; }
  .mh h1 { order: 2; }
  .mh-media { order: 3; margin: 6px 8px 34px 0; }
  .mh-media::before { inset: 8px -8px -8px 8px; }
  .mh-media .media-slot { aspect-ratio: 5 / 4; border-radius: var(--r-md); }
  .mh .lead { order: 4; }
  .mh .metier-cta { order: 5; }
  .mh-facts { order: 6; }
  .mh-sticker { left: -6px; bottom: 22px; }
  .mp .pain-grid { grid-template-columns: 1fr; }
  .ms-grid { grid-template-columns: 1fr; }
  .ms-inner { padding: 64px 18px; }
  .mhere { padding: 64px 22px; }
  .mhere-grid { grid-template-columns: 1fr; gap: 32px; }
  .mwa-card { flex-direction: column; align-items: flex-start; padding: 24px; }
  .mwa-card .btn { width: 100%; justify-content: center; }
  .mfin { padding: 72px 22px; }
}
@media (max-width: 599px) {
  .mf-big { font-size: 32px; min-width: 4ch; }
  .mf-facts li { padding: 14px 22px; gap: 14px; }
  .mh .metier-cta .btn, .mfin .final-cta .btn { width: 100%; justify-content: center; min-height: 52px; }
}