/* Pages métiers : PapaPro (logistique), Honoré BTP, Honoré Gestion (food business), Qui sommes-nous */
.m-titre{font-size:clamp(28px,3.2vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--encre)}
.m-titre span{color:#e8ad08}
.m-section{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.m-intro{margin-top:14px;max-width:700px;font:600 clamp(17px,1.4vw,20px)/1.45 var(--titre);letter-spacing:-.01em;color:var(--encre)}
.blog-tete .m-boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn-contour-clair{background:transparent;border:1px solid #45454d;color:#fff}
.btn-contour-clair:hover{border-color:var(--jaune)}

/* grande capture de l'outil, posée sous l'en-tête noir */
.m-ecran{background:linear-gradient(180deg,var(--encre) 0 38%,var(--creme) 38% 100%);padding-bottom:clamp(32px,4vw,56px)}
.m-ecran img{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto;border-radius:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}

/* fonctions de l'outil */
.m-cartes{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m-carte{background:#fff;border:1px solid var(--ligne);border-radius:22px;padding:22px;display:grid;gap:12px;align-content:start}
.m-carte .appli-icone{width:56px;height:56px}
.m-carte h3{font:800 19px var(--titre);letter-spacing:-.02em}
.m-carte p{color:var(--gris);font-size:15px;line-height:1.5}

/* le parcours, étape par étape */
.m-etapes{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:etape}
.m-etapes li{position:relative;background:var(--encre);color:#fff;border-radius:18px;padding:18px;counter-increment:etape;display:grid;gap:6px}
.m-etapes li::before{content:counter(etape,decimal-leading-zero);font:800 13px var(--titre);color:var(--jaune);letter-spacing:.06em}
.m-etapes b{font:800 17px var(--titre)}
.m-etapes span{color:#d4d4da;font-size:14px;line-height:1.45}

/* logos de références */
.m-logos{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-logos li{height:104px;border-radius:18px;background:#f6f6f7;border:1px solid #ececee;display:grid;place-items:center;padding:16px}
.m-logos img{height:44px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

/* appel final */
.m-appel{background:var(--jaune);border-radius:26px;padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.m-appel h2{font:800 clamp(24px,2.6vw,34px)/1.1 var(--titre);letter-spacing:-.03em;color:var(--encre)}
.m-appel p{margin-top:8px;color:#4a3d10}
.m-appel .btn{background:var(--encre);color:#fff}

/* Qui sommes-nous : les trois métiers */
.m-metiers{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m-metier{display:grid;grid-template-rows:auto 1fr auto;gap:14px;background:#fff;border:1px solid var(--ligne);border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.m-metier:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(0,0,0,.45)}
.m-metier img{width:100%;height:220px;object-fit:cover;object-position:top left;border-bottom:1px solid var(--ligne)}
.m-metier-texte{padding:0 22px;display:grid;gap:8px;align-content:start}
.m-metier-texte .surtitre{color:var(--gris)}
.m-metier h3{font:800 23px var(--titre);letter-spacing:-.02em}
.m-metier p{color:var(--gris);font-size:15px;line-height:1.5}
.m-metier .lien-fleche{margin:0 22px 22px}
.m-principes{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m-principes li{list-style:none;border-top:3px solid var(--jaune);padding-top:14px}
.m-principes{padding:0}
.m-principes b{display:block;font:800 19px var(--titre);margin-bottom:6px}
.m-principes span{color:var(--gris);font-size:15px;line-height:1.5}
.m-liens{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-liens a{border:1px solid var(--ligne);border-radius:18px;padding:18px 20px;background:#fff;display:grid;gap:4px;transition:border-color .2s}
.m-liens a:hover{border-color:var(--encre)}
.m-liens b{font:800 17px var(--titre)}
.m-liens span{color:var(--gris);font-size:14px}

@media (max-width:1000px){
  .m-cartes,.m-metiers,.m-principes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-liens,.m-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .m-cartes,.m-metiers,.m-principes,.m-etapes{grid-template-columns:1fr}
}

/* Honoré Gestion : visite guidée des écrans (hg-visite.js) */
.hg-visite{background:var(--encre);color:#fff;padding:clamp(56px,7vw,104px) 0}
.hg-visite .surtitre{color:var(--jaune)}
.hg-visite-titre{color:#fff;margin-bottom:clamp(28px,4vw,48px)}
.hg-visite-titre span{color:var(--jaune)}
.hg-tour{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(20px,3vw,44px);align-items:center}
.hg-etapes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hg-etape{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;width:100%;padding:14px 16px 16px;border-radius:14px;opacity:.5;transition:opacity .4s,background .4s;overflow:hidden}
.hg-etape:hover{opacity:.8}
.hg-etape:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.hg-etape.on{opacity:1;background:rgba(255,255,255,.06)}
.hg-num{font:800 13px/1.6 var(--titre);color:var(--jaune);letter-spacing:.04em}
.hg-txt{display:grid;gap:4px}
.hg-txt b{font:700 17px/1.25 var(--titre);color:#fff;letter-spacing:-.01em}
.hg-txt span{font-size:14px;line-height:1.5;color:#a1a1aa;max-height:0;overflow:hidden;transition:max-height .5s ease}
.hg-etape.on .hg-txt span{max-height:8em}
.hg-barre{position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.hg-barre::after{content:"";position:absolute;inset:0;background:var(--jaune);transform:scaleX(0);transform-origin:0 50%}
.hg-tour.vu .hg-etape.on .hg-barre::after{animation:hg-barre var(--duree,6000ms) linear forwards}
.hg-tour.pause .hg-etape.on .hg-barre::after,.hg-tour.calme .hg-barre::after{animation-play-state:paused}
@keyframes hg-barre{to{transform:scaleX(1)}}
.hg-cadre{border-radius:16px;overflow:hidden;background:#1f2024;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07)}
.hg-fenetre{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#24242a}
.hg-fenetre i{width:10px;height:10px;border-radius:50%;background:#45454d}
.hg-fenetre i:first-child{background:#ff5f57}.hg-fenetre i:nth-child(2){background:#febc2e}.hg-fenetre i:nth-child(3){background:#28c840}
.hg-fenetre span{margin-left:12px;padding:4px 14px;border-radius:999px;background:#16161a;color:#8b8b95;font-size:12px}
.hg-scene{position:relative;aspect-ratio:1440/709;overflow:hidden;background:#f1f1f3;touch-action:pan-y}
.hg-zoom{position:absolute;inset:0}
.hg-zoom.approche{animation:hg-approche var(--duree,6000ms) cubic-bezier(.33,0,.2,1) forwards}
.hg-tour.pause .hg-zoom,.hg-tour.calme .hg-zoom{animation-play-state:paused}
@keyframes hg-approche{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1.18)}}
.hg-diapo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hg-diapo.on{opacity:1}
.hg-loupe{position:absolute;border:2px solid var(--jaune);border-radius:10px;box-shadow:0 0 0 200vmax rgba(17,17,20,.42),0 0 30px rgba(252,194,32,.35);transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1);pointer-events:none}
.hg-loupe.vise{animation:hg-vise 1.4s ease .5s both}
@keyframes hg-vise{0%{box-shadow:0 0 0 200vmax rgba(17,17,20,0),0 0 0 rgba(252,194,32,0)}100%{box-shadow:0 0 0 200vmax rgba(17,17,20,.42),0 0 30px rgba(252,194,32,.35)}}
.hg-note{margin-top:16px;font-size:12px;color:#6b6b76;text-align:right}
@media(max-width:900px){
  .hg-tour{grid-template-columns:1fr}
  .hg-cadre{order:-1}
  .hg-etapes{gap:2px}
  .hg-etape{padding:10px 12px 14px}
  .hg-txt b{font-size:15px}
  .hg-fenetre span{display:none}
  @keyframes hg-approche{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1.28)}}
  .hg-note{text-align:left}
}