/* V122 — « sa page à son image » : la page du lien de l’artisan (m.html) et son aperçu dans l’Espace (espace.html), d’après la
   maquette A « le médaillon » (operations/page-artisan-image-2026-10-13/1-page-client.html, validée par HB le 13/10), règle pour
   règle. Tout est sous .pa (la racine de la page) : l’Espace, qui a ses propres .barre, .carte, .vide, ne lit rien d’ici.
   La carte de visite à deux colonnes (ordinateur) ne vaut que pour la vraie page (.pa-large, au-delà de 1000 px) : l’aperçu
   reste celui du téléphone. Style « A » : ni capitales au-dessus du nom, ni mot surligné, l’ombre dure seulement sur le bouton.
   Verrou : tout bloc en flex ou en grille reste caché par [hidden]. */
.pa{--foret:#12312A;--foret-doux:#41625A;--creme:#FFFCF4;--creme-2:#F9F3E7;--blanc:#fff;--lime:#CFE996;
  --art:#0C7489;--art-ombre:#07404B;--art-doux:#E3F1F4;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:var(--creme);color:var(--foret);
  font-family:"Gabarito",-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.5;font-weight:600;-webkit-font-smoothing:antialiased;text-align:left;letter-spacing:normal}
.pa *,.pa *::before,.pa *::after{box-sizing:border-box;margin:0;padding:0}
.pa [hidden]{display:none!important}
:where(.pa) button{font:inherit;color:inherit;cursor:pointer}   /* sans poids : le bouton garde ses couleurs (.pa-cta) */
.pa .ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:baseline}
.pa-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 20px 18px}

/* ── qui c’est : son image, son nom, son métier et sa commune, « via Pallier » (décision n° 3 de HB, 6/10) ── */
.pa-ident{display:flex;flex-direction:column;align-items:center;text-align:center}
.pa-image{position:relative;display:flex;align-items:center;justify-content:center;width:120px;height:120px;flex:none;overflow:hidden;
  border-radius:50%;border:3px solid var(--foret);background:var(--art);color:#fff}
.pa-image img{position:absolute;inset:0;display:block;width:100%;height:100%}
.pa-image.visage{background:var(--creme-2)}
.pa-image.visage img{object-fit:cover}
.pa-image.logo{border-radius:28px;border-width:2.5px;background:#fff;padding:4px;color:var(--foret)}
.pa-image.logo img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
.pa-ini{font-size:2.55rem;font-weight:900;letter-spacing:.01em;line-height:1}
.pa-image.visage .pa-ini{color:var(--foret-doux)}
.pa-image.charge .pa-ini{visibility:hidden}
.pa .pa-nom{font-size:1.85rem;font-weight:900;letter-spacing:-.035em;line-height:1.08;margin-top:14px;text-wrap:balance;color:var(--foret)}
.pa-metier{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:7px;font-size:.95rem;font-weight:700;color:var(--foret-doux);line-height:1.3}
.pa .via-pallier{display:inline-flex;align-items:center;gap:4px;background:var(--lime);border:2px solid var(--foret);border-radius:999px;padding:1px 8px 1px 5px;
  font-size:.74rem;line-height:1.35;color:var(--foret);font-weight:800;text-decoration:none}
.pa .via-pallier svg{width:15px;height:15px;flex-shrink:0}
.pa .via-pallier b{display:inline;font-size:.78rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.pa .via-pallier b em{font-style:normal;color:#5E7A2E}
/* V122 (testeur, finition 8) : une zone de toucher de 44 px autour de la pastille, sans la grossir ; un contour visible au clavier */
.pa a.via-pallier{position:relative}
.pa a.via-pallier::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}
.pa a.via-pallier:focus-visible{outline:3px solid var(--foret);outline-offset:3px}
/* l'aperçu de l'Espace : une image pas encore relue le dit, sur le médaillon (V3 du testeur) */
.pa-attente{position:relative;z-index:1;margin-top:-13px;padding:1px 10px;border:2px solid var(--foret);border-radius:999px;background:var(--creme);font-size:.76rem;font-weight:900;color:var(--foret);line-height:1.4;white-space:nowrap}

/* ── son mot : une bulle qui part de son visage, signée de son prénom ── */
.pa-mot{position:relative;margin-top:22px;background:var(--blanc);border:2.5px solid var(--foret);border-radius:20px;padding:12px 17px 11px}
.pa-mot::before{content:"";position:absolute;top:-9.5px;left:50%;width:16px;height:16px;margin-left:-8px;background:var(--blanc);
  border-left:2.5px solid var(--foret);border-top:2.5px solid var(--foret);border-radius:4px 0 0 0;transform:rotate(45deg)}
.pa-mot blockquote{font-size:1.06rem;font-weight:700;line-height:1.45;text-wrap:pretty;overflow-wrap:anywhere}
.pa-mot figcaption{margin-top:4px;font-size:.9rem;font-weight:800;color:var(--foret-doux)}
/* sans mot : le texte d’aujourd’hui (V106), en sous-titre, sans bulle ni signature : il ne l’a pas écrit */
.pa-defaut{margin-top:16px;text-align:center;font-size:1.02rem;font-weight:700;color:var(--foret-doux);line-height:1.45;text-wrap:balance}
/* V107 — le lien d’un envoi périmé ou déjà servi */
.pa-message{margin-top:18px;text-align:center;font-size:1.02rem;font-weight:700;color:var(--foret-doux);line-height:1.45;text-wrap:balance}
.pa-message b{display:block;font-size:1.3rem;font-weight:900;letter-spacing:-.02em;color:var(--foret);margin-bottom:4px}

/* ── ses horaires et sa zone : une carte d’information, à plat ── */
.pa-infos{list-style:none;margin-top:14px;background:var(--blanc);border:2px solid var(--foret);border-radius:18px;padding:1px 15px}
.pa-infos li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.98rem;font-weight:700;line-height:1.35}
.pa-infos li + li{border-top:1.5px solid var(--creme-2)}
.pa-infos .ico{margin-top:1px;width:1.2em;height:1.2em}
.pa-infos small{display:block;margin-top:2px;font-size:.86rem;font-weight:600;color:var(--foret-doux);line-height:1.35}
.pa-ouvert,.pa-ferme{font-weight:900}
/* sans horaires : la zone seule, sans cadre */
.pa-infos.seule{margin-top:12px;background:none;border:0;padding:0}
.pa-infos.seule li{justify-content:center;padding:0;color:var(--foret-doux)}

/* ── l’action, en bas, à portée de pouce (la barre forêt de la V106) ── */
/* V122 (testeur V4, décision du CEO) : la barre reste collée en bas de l'écran ; sur un petit iPhone (375 × 548), le bouton se voit
   sans faire défiler, la page passe dessous */
.pa-barre{position:sticky;bottom:0;z-index:2;flex:none;background:var(--foret);border-radius:26px 26px 0 0;padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
.pa-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;font-size:1.1rem;font-weight:900;padding:13px 16px;
  border:2.5px solid var(--foret);border-radius:999px;background:var(--art);color:#fff;box-shadow:0 5px 0 var(--art-ombre);text-decoration:none;line-height:1.5}
.pa-cta:active{transform:translateY(4px);box-shadow:none}
.pa-cta:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pa-cta .ico{width:23px;height:23px}
.pa-pied{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:11px;text-align:center;font-size:.8rem;font-weight:700;color:rgba(255,252,244,.8);line-height:1.3}
.pa-pied .ico{width:14px;height:14px}

/* ── ordinateur (le client qui ouvre le lien reçu par email) : la même page en carte de visite à deux colonnes ── */
@media (min-width:1000px){
  .pa.pa-large{width:100%;max-width:1040px;min-height:0;display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:1fr auto;
    background:var(--blanc);border:2.5px solid var(--foret);border-radius:32px;overflow:hidden}
  .pa-large .pa-main{display:contents}
  .pa-large .pa-ident{grid-row:1 / span 2;justify-content:center;padding:48px 36px;background:var(--creme-2);border-right:2.5px solid var(--foret)}
  .pa-large .pa-image{width:200px;height:200px}
  .pa-large .pa-image.logo{border-radius:40px;padding:8px}
  .pa-large .pa-image.logo img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
  .pa-large .pa-ini{font-size:4.2rem}
  .pa-large .pa-nom{font-size:2.3rem;margin-top:20px}
  .pa-large .pa-metier{font-size:1rem;margin-top:9px}
  .pa-large .pa-contenu{grid-column:2;align-self:end;padding:52px 52px 0}
  .pa-large .pa-mot{margin-top:0;padding:16px 22px 14px}
  .pa-large .pa-mot::before{top:30px;left:-9.5px;margin-left:0;border-top:0;border-bottom:2.5px solid var(--foret);border-radius:0 0 0 4px}
  .pa-large .pa-mot blockquote{font-size:1.22rem}
  .pa-large .pa-mot figcaption{font-size:.98rem}
  .pa-large .pa-defaut,.pa-large .pa-message{margin-top:0;text-align:left;font-size:1.15rem}
  .pa-large .pa-infos{margin-top:16px;padding:2px 18px}
  .pa-large .pa-infos li{font-size:1.02rem;padding:11px 0}
  .pa-large .pa-infos.seule{padding:0}
  .pa-large .pa-infos.seule li{justify-content:flex-start;padding:0}
  .pa-large .pa-barre{position:static;grid-column:2;background:none;border-radius:0;padding:24px 52px 48px}
  .pa-large .pa-cta{width:auto;min-width:340px;padding:13px 30px;font-size:1.12rem}
  .pa-large .pa-pied{justify-content:flex-start;color:var(--foret-doux);font-size:.86rem;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.pa *{transition:none!important;animation:none!important}}
/* V171 — l’écran sans page (introuvable, chargement, panne, en pause) : déplacé de m.html, pour que l’aperçu de « Votre page » montre la
   pause exactement comme la vraie page (PageArtisan.pause) */
.pa .vide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 10px;color:var(--foret-doux);font-weight:700}
.pa .vide .gros{font-size:56px;font-weight:900;letter-spacing:-.04em;line-height:1;color:#9DBC62;margin-bottom:6px}
.pa .vide h1{font-size:1.5rem;font-weight:900;letter-spacing:-.035em;line-height:1.08;color:var(--foret);margin-bottom:8px}
.pa .vide p{font-size:.95rem;line-height:1.5;margin-bottom:20px}
.pa .vide .lien{display:inline-block;background:var(--lime);border:2.5px solid var(--foret);border-radius:999px;box-shadow:0 4px 0 var(--foret);padding:12px 24px;font-weight:900;font-size:1rem;color:var(--foret);text-decoration:none}
.pa .vide .pa-appel{margin-bottom:0}   /* V173 : la ligne « Métier · ville » (.pa-metier, 7 px au-dessus) suit l’appel, comme sous le nom de la page vivante */