/* (06/10/2026) Les six pages métier du référencement : son « Oui, code-les » du 05/10 sur le canevas
   « Pages métier · référencement » (Claude Design). La peau est celle de l'accueil (signature.css, chargée avant
   cette feuille : Satoshi, encre, papier, fluo, boutons, « Être prévenu », pied de page A). La mise en page suit
   le canevas : la page modèle du garage à 1440, la version téléphone de chaque métier à 390.
   Fonds : le décor d'ASTRA sous le haut de page et sous « Être prévenu » (ses fonds A), blanc et papier en
   alternance entre les deux, comme sur le canevas. */
.page-metier{--accent:#4a6272;--wash:#edeff1}
.pm-dedans{max-width:1280px;margin:0 auto}

/* Haut de page : fil d'Ariane, titre, date d'ouverture en grand (sa règle de l'accueil), boutons, l'agenda du métier. */
.pm-bande-tete{position:relative;isolation:isolate;overflow:clip}
.pm-bande-tete::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/vitrine/signature/assets/signature-backdrop.webp') center top/cover no-repeat;opacity:.7;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.pm-ariane{max-width:1360px;margin:0 auto;padding:26px 40px 0;font-size:14px;color:#4b4b47}
.pm-ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pm-ariane li+li::before{content:'·';margin-right:8px;color:#8e8e88}
.pm-ariane a{border-bottom:1px solid #b5b5ae;padding-bottom:2px}
.pm-ariane a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pm-ariane [aria-current]{color:var(--ink);font-weight:700}
.pm-tete{max-width:1360px;margin:0 auto;padding:36px 40px 104px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.pm-tete h1{font-size:clamp(40px,4.3vw,62px);font-weight:900;line-height:1;letter-spacing:-.06em;text-wrap:balance}
.pm-chapo{margin-top:24px!important;font-size:19px;line-height:1.6;color:#3a3a37;max-width:540px}
.pm-garanties{margin-top:26px!important}
.pm-garanties span{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.4;color:#3a3a37;max-width:30em}
.pm-boutons{justify-content:flex-start;margin-top:26px}
.pm-ecran{margin:0}
.pm-ecran img{width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:0 30px 60px -32px rgba(16,16,16,.45),0 0 0 1px #dcdcd7}
.pm-ecran-tete img{border-radius:16px;box-shadow:0 40px 80px -36px rgba(16,16,16,.55),0 0 0 1px #cfcfc9}

/* Une fonction par section : l'écran du logiciel et son texte, en alternance ; sans écran, le titre à gauche et le texte à droite, comme l'identité de l'accueil. */
.pm-fonction{padding:104px 40px}
.pm-fond-blanc{background:#fff}
.pm-fond-papier{background:var(--paper)}
.pm-fonction .pm-dedans{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.pm-image-avant .pm-dedans{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pm-image-avant .pm-ecran{grid-column:1;grid-row:1}
.pm-image-avant .pm-texte{grid-column:2}
.page-metier h2{font-size:clamp(30px,3vw,44px);font-weight:850;letter-spacing:-.05em;line-height:1.06;text-wrap:balance}
.pm-texte p,.pm-texte-seul p{font-size:18px;line-height:1.65;color:#4b4b47;max-width:520px}
.pm-texte p{margin-top:22px!important}
.pm-texte-seul .pm-dedans{align-items:start}
.pm-texte-seul p{border-left:1px solid #cfcfc9;padding:6px 0 6px 35px}

/* L'application client, la borne et la mascotte : trois colonnes, comme la page modèle du garage. */
.pm-trio{padding:104px 40px;background:#fff}
.pm-trio .pm-dedans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;row-gap:0;align-items:start}
/* Les trois colonnes partagent leurs lignes (titre, texte, image) : tout commence à la même hauteur. */
.pm-carte{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;align-items:start}
.pm-carte h2{font-size:clamp(26px,2.2vw,32px)}
.pm-carte p{margin-top:16px!important;font-size:17px;line-height:1.6;color:#4b4b47}
.pm-telephones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.pm-telephones img{width:100%;height:auto;border-radius:18px;box-shadow:0 22px 40px -28px rgba(16,16,16,.45),0 0 0 1px #dcdcd7}
.pm-borne{display:block;width:100%;margin-top:26px;padding:0;background:none;text-align:left;cursor:zoom-in}
.pm-borne>img{width:100%;height:auto;border-radius:14px;box-shadow:0 22px 40px -28px rgba(16,16,16,.45),0 0 0 1px #dcdcd7}
.pm-borne span{display:inline-flex;align-items:center;gap:14px;margin-top:18px;font-size:15px;font-weight:750;border-bottom:1px solid #a7a79d;padding-bottom:6px}
.pm-borne span img{width:20px;height:20px}
.pm-borne:hover span{border-bottom-color:var(--ink)}
.pm-assistant-titre{display:flex;align-items:flex-start;gap:14px}
.pm-assistant-titre img{width:56px;height:56px;flex:none;margin-top:-6px}
.pm-mascotte{display:block;width:auto;height:300px;max-width:100%;object-fit:contain;object-position:left bottom;margin-top:26px;filter:drop-shadow(0 18px 12px #0002)}

/* Les questions du métier : visibles, jamais repliées (elles répondent d'abord). */
.pm-questions{padding:104px 40px;background:var(--paper)}
.pm-questions .pm-dedans{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.pm-questions-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:0}
/* Chaque question occupe deux lignes partagées avec sa voisine : les réponses commencent à la même hauteur. */
.pm-questions-liste>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px;align-content:start;border-top:1px solid #d2d2cc;padding-top:20px;margin-bottom:34px}
.pm-questions-liste h3{font-size:19px;font-weight:750;letter-spacing:-.02em;line-height:1.3}
.pm-questions-liste p{font-size:16px;line-height:1.65;color:#4b4b47}

/* Ses règles de mise en page du texte (06/10/2026 : « ajusté, aligné et justifié », et le 26/09 « tout aligné proprement,
   sans trous »). Les titres sont équilibrés, les paragraphes JUSTIFIÉS : bords droits des deux côtés, césures françaises
   posées dans le texte par le générateur (pareilles dans Chrome et dans Safari). `text-wrap: pretty` est écarté : mesuré le
   06/10, il ouvre des trous dans Chrome (41 lignes trouées sur 118 contre 25). */
.page-metier h1,.page-metier h2,.page-metier h3,.pm-garanties span{text-wrap:balance}
.pm-chapo,.pm-texte p,.pm-texte-seul p,.pm-carte p,.pm-questions-liste p,.page-metier .prevenir>div>p,.page-metier .formulaire-accord{text-align:justify;text-align-last:left;-webkit-hyphens:manual;hyphens:manual;text-wrap:wrap}

/* « Être prévenu » : le bloc de l'accueil, sur son fond A. */
.page-metier .bande-finale{padding:70px 0 70px}
.page-metier .prevenir{margin-bottom:0}

/* Les autres métiers : des liens sur leur vraie recherche, jamais « cliquez ici ». */
.pm-autres{max-width:1360px;margin:0 auto;padding:64px 40px 96px}
.pm-autres h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.pm-autres ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;padding:0}
.pm-autres a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px #cfcfc9;font-size:15px;font-weight:700;background:#fff}
.pm-autres a:hover{background:var(--ink);color:var(--paper);box-shadow:none}

@media(max-width:1050px){
 .pm-ariane,.pm-tete,.pm-autres{padding-left:28px;padding-right:28px}
 .pm-tete{grid-template-columns:1fr;gap:48px;padding-bottom:80px}
 .pm-tete h1{font-size:clamp(40px,6.6vw,58px)}
 .pm-chapo{max-width:640px}
 .pm-fonction,.pm-trio,.pm-questions{padding:80px 28px}
 /* Tablette : le texte passe au-dessus de son écran, en pleine largeur ; à 300 px de colonne, une ligne justifiée
    n'avait pas assez de mots pour tomber juste sans trous (mesuré le 06/10). */
 .pm-fonction .pm-dedans,.pm-image-avant .pm-dedans,.pm-texte-seul .pm-dedans{grid-template-columns:1fr;gap:32px}
 .pm-image-avant .pm-ecran,.pm-image-avant .pm-texte{grid-column:auto;grid-row:auto}
 .pm-image-avant .pm-ecran{order:2}
 .pm-texte p,.pm-texte-seul p{max-width:640px}
 .pm-texte-seul p{border-left:0;padding:0}
 .pm-texte p,.pm-texte-seul p{font-size:17px}
 .pm-trio .pm-dedans{grid-template-columns:1fr 1fr;gap:44px 36px}
 .pm-assistant{grid-column:1/-1}
 .pm-questions .pm-dedans{grid-template-columns:1fr;gap:34px}
}
@media(max-width:760px){
 .pm-ariane{padding:8px 20px 0;font-size:13px}
 .pm-ariane ol{align-items:center}
 .pm-ariane a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-color:#b5b5ae;text-underline-offset:4px}
 .pm-tete{padding:22px 20px 60px;gap:34px}
 .pm-tete h1{font-size:clamp(34px,9.4vw,44px);line-height:1.04}
 .pm-chapo{font-size:16px;margin-top:18px!important}
 .pm-garanties{margin-top:26px!important}
 .pm-garanties span{font-size:16px}
 .pm-boutons{flex-direction:column;gap:10px;margin-top:22px}
 .pm-boutons a{width:100%;text-align:center}
 .pm-fonction,.pm-trio,.pm-questions{padding:56px 20px}
 .pm-fonction .pm-dedans,.pm-image-avant .pm-dedans,.pm-texte-seul .pm-dedans{grid-template-columns:1fr;gap:24px}
 .pm-image-avant .pm-ecran,.pm-image-avant .pm-texte{grid-column:auto;grid-row:auto}
 .pm-image-avant .pm-ecran{order:2}
 .page-metier h2{font-size:28px;line-height:1.1}
 .pm-texte p,.pm-texte-seul p{font-size:16px}
 .pm-texte p{margin-top:14px!important}
 .pm-texte-seul p{border-left:0;padding:0}
 .pm-trio .pm-dedans{grid-template-columns:1fr;gap:56px}
 .pm-carte h2{font-size:26px}
 .pm-carte p{font-size:16px}
 .pm-assistant-titre img{width:48px;height:48px;margin-top:-4px}
 .pm-mascotte{height:220px}
 .pm-questions-liste{grid-template-columns:1fr}
 .pm-questions-liste>div{margin-bottom:22px}
 .pm-questions-liste h3{font-size:17px}
 .pm-questions-liste p{font-size:15px}
 .page-metier .bande-finale{padding:44px 0}
 .pm-autres{padding:44px 20px 64px}
 .pm-autres ul{flex-direction:column;gap:10px}
 .pm-autres a{width:100%;border-radius:12px}
}
/* Rien ne bouge ici, sauf les couleurs au survol ; l'appareil qui demande moins de mouvement les garde fixes aussi. */
@media (prefers-reduced-motion:reduce){.pm-autres a,.pm-ariane a,.pm-borne span{transition:none}}
/* 21/10/2026 : logo Step’in au-dessus du titre de chaque page métier, « by ANNAROZ SOLUTIONS » sous le nom, aligné sur le S. */
.pm-stepin{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 28px!important}.pm-stepin img{display:block;width:200px;height:auto}.pm-stepin span{padding-left:3px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#4b4b47;white-space:nowrap}
@media(max-width:450px){.pm-stepin{margin-bottom:22px!important}.pm-stepin img{width:170px}.pm-stepin span{font-size:12px}}
/* 21/10/2026 : sur téléphone le chapeau de chaque page métier s’aligne à gauche (justifié, il creusait des trous entre les mots). */
@media(max-width:760px){.pm-chapo{text-align:left}}