/* ═══════════════════════════════════════════════════════════════════════════
   MON IMAGE — pages secondaires de mon-image.com (02/10/2026)
   Mentions légales, CGV, confidentialité, cookies, merci, 404.
   Aucun dessin nouveau : le chrome est celui de Mon espace (lot D, compte.html —
   barre noire, bloc noir avec l'œil et les onglets, en-tête de page noir fermé
   par le filet or, pied de page de Mon image), les couleurs celles de
   /assets/palette.css (chargée avant). Seul ajout : la typographie d'un texte
   long (titres d'articles, listes), aux tailles de la palette.
   ═══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-paper);color:var(--color-text);font-family:var(--font-sans-atelier);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--color-ink)}
button,input,select,textarea{font-family:inherit}
main{flex:1 0 auto}
#main:focus{outline:none}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--color-black);color:var(--color-text-light);
  border:1px solid var(--color-gold-2);padding:10px 16px;border-radius:13px;font-weight:600;text-decoration:none}
.skip-link:focus{top:10px;outline:var(--focus-dark);outline-offset:var(--focus-offset)}

/* ── le chrome de l'atelier (repris de compte.html) ── */
.mlh{background:var(--color-black)}
.mlh-in{max-width:1080px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.mlh-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;min-height:44px}
.mlh-logo img{height:44px;width:auto;display:block}
.mi-tete{background:var(--color-black);color:var(--color-text-light);padding:10px 18px 0;text-align:center}
.mi-oeil{margin:6px 0 8px;height:74px}
.mi-oeil img{height:74px;width:auto;display:block;margin:0 auto}
#siteTabs{display:flex;justify-content:center;align-items:stretch;gap:4px;margin:4px auto 0;padding:0;max-width:760px;
  border-bottom:1px solid #F4F1E81F}
#siteTabs .stab{display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--color-text-light);
  border-bottom:2px solid transparent;padding:0 16px;min-height:44px;white-space:nowrap;text-decoration:none;transition:border-color .15s}
#siteTabs .stab:hover{border-bottom-color:#F4F1E866}
.mlh :focus-visible,.mi-tete :focus-visible{outline:var(--focus-dark);outline-offset:var(--focus-offset)}
#siteTabs .stab:focus-visible{outline-offset:-3px}
@media (max-width:560px){
  #siteTabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;max-width:none;margin:4px -8px 0;gap:2px}
  #siteTabs::-webkit-scrollbar{display:none}
  #siteTabs .stab{flex:0 0 auto;padding:0 10px;font-size:12.5px;scroll-snap-align:center}
  #siteTabs .stab:first-child{margin-left:auto}
  #siteTabs .stab:last-child{margin-right:auto}
}
@media (max-width:380px){ .mlh-logo img{height:36px} }
@media (max-width:374px){ #siteTabs{margin:4px -12px 0;gap:1px} #siteTabs .stab{padding:0 8px;font-size:12px} }
@media (max-width:340px){ .mlh-in{padding:10px 12px;gap:10px} .mlh-logo img{height:30px} }
#siteTabs.deborde-d{-webkit-mask-image:linear-gradient(90deg,#0F1311 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#0F1311 calc(100% - 40px),transparent)}
#siteTabs.deborde-g{-webkit-mask-image:linear-gradient(90deg,transparent,#0F1311 40px);mask-image:linear-gradient(90deg,transparent,#0F1311 40px)}
#siteTabs.deborde-g.deborde-d{-webkit-mask-image:linear-gradient(90deg,transparent,#0F1311 40px,#0F1311 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#0F1311 40px,#0F1311 calc(100% - 40px),transparent)}

/* ── l'en-tête de page : tableau noir, filet or (comme « Votre espace ») ── */
.page-wrap{max-width:760px;margin:0 auto;padding:0 24px 72px}
.page-head{position:relative;background:var(--color-black);color:var(--color-text-light);text-align:center;
  border-bottom:1px solid var(--color-gold-2);margin:0 0 40px;padding:20px 0 40px;
  box-shadow:0 calc(-100vmax - 1px) 0 100vmax var(--color-black),0 0 0 100vmax var(--color-gold-2);clip-path:inset(0 -100vmax)}
.page-head h1{font-size:40px;line-height:48px;color:var(--color-text-light);margin:0}
.page-head p{margin:12px auto 0;max-width:56ch;color:var(--color-text-light);font-size:16px;line-height:24px}
.page-head .maj{font-size:14px;line-height:20px;margin-top:8px}
@media (min-width:1024px){ .page-head h1{font-size:56px;line-height:64px} }

/* ── un texte long (mentions, CGV, confidentialité, cookies) ── */
.texte h2{font-size:32px;line-height:38px;margin:40px 0 12px}
.texte h3{font-size:24px;line-height:30px;margin:28px 0 8px}
.texte p,.texte li{font-size:16px;line-height:1.7;color:var(--color-text)}
.texte p{margin:0 0 14px}
.texte ul,.texte ol{margin:0 0 14px 22px}
.texte li{margin:0 0 6px}
.texte b,.texte strong{color:var(--color-ink);font-weight:600}
.texte a{color:var(--color-gold-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.texte a:hover{text-decoration-thickness:2px}
.texte a:focus-visible{outline:var(--focus-light);outline-offset:var(--focus-offset)}
.texte .sommaire{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-card-atelier);padding:20px 24px;margin:0 0 8px}
.texte .sommaire ol{margin:8px 0 0 22px}
.texte .encadre{background:var(--color-card);border:1px solid var(--color-line);border-left:3px solid var(--color-gold-1);
  border-radius:0 var(--radius-card-atelier) var(--radius-card-atelier) 0;padding:16px 20px;margin:0 0 16px}
.texte dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:6px 16px;margin:0 0 14px}
.texte dt{font-weight:600;color:var(--color-ink)}
.texte dd{margin:0}
@media (max-width:560px){ .texte dl{grid-template-columns:1fr} .texte dd{margin:0 0 8px} }
.texte table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.texte th,.texte td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--color-line)}
.texte th{color:var(--color-ink);font-weight:600}

/* ── page de remerciement / 404 : une carte, deux boutons ── */
.carte-page{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-card-atelier);
  box-shadow:var(--shadow-soft);padding:32px 28px;text-align:center}
.carte-page p{font-size:16px;line-height:1.7;margin:0 0 14px}
.coche{width:56px;height:56px;border-radius:50%;background:var(--color-success);color:var(--color-text-light);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.btn-or{display:inline-flex;align-items:center;justify-content:center;min-height:var(--height-button-atelier);
  padding:0 var(--padding-button-atelier-x);border-radius:var(--radius-button-atelier);background:var(--gradient-primary);
  color:var(--color-ink);font-weight:600;font-size:15px;text-decoration:none}
.btn-or:hover{background:var(--gradient-primary-hover)}
.btn-trait{display:inline-flex;align-items:center;justify-content:center;min-height:var(--height-button-atelier);
  padding:0 var(--padding-button-atelier-x);border-radius:var(--radius-button-atelier);border:1px solid var(--color-gold-text);
  color:var(--color-gold-text);font-weight:600;font-size:15px;text-decoration:none;background:transparent}
.btn-or:focus-visible,.btn-trait:focus-visible{outline:var(--focus-light);outline-offset:var(--focus-offset)}

/* ── le pied de page de Mon image ── */
.mi-pied{padding:0 18px 48px}
.mi-pied .foot{max-width:880px;margin:28px auto 0;text-align:center;color:var(--color-text);font-size:12px;line-height:1.7}
.mi-pied .foot a{color:var(--color-gold-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.mi-pied .foot a:hover{text-decoration-thickness:2px}
.mi-pied .foot a:focus-visible{outline:var(--focus-light);outline-offset:var(--focus-offset)}