/* marco.css — identité de la marque marco.lu : papier et laiton.
   Ne sert QUE la page d'accueil de l'apex marco.lu (inc/views/apex/marco.php).
   Les vitrines clientes gardent leurs thèmes métier, communs aux marques.

   Polices auto-hébergées via /assets/css/fonts.css :
     Space Mono  -> le nom qui se tape, caractères de machine à écrire
     Fraunces    -> le suffixe et l'accroche, plume sur le papier */

:root {
  --m-papier:  #f4f0e6;   /* fond, papier vergé légèrement chaud */
  --m-encre:   #241f1b;   /* texte principal */
  --m-pale:    #6d6459;   /* texte secondaire */
  --m-laiton:  #8a6a2f;   /* accent de la marque */
  --m-luisant: #b08d57;   /* laiton éclairé : filet, curseur */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body.marco {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--m-papier);
  color: var(--m-encre);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Grain de papier : deux voiles très pâles, en dégradés purs — aucune image
     à télécharger, donc aucune requête et rien à mettre en cache. */
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(176,141,87,.10), transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(138,106,47,.08), transparent 55%);
  background-attachment: fixed;
}

.m-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 1.25rem 2rem;
  /* La page ne défile jamais horizontalement, même quand la boîte du nom est
     plus large que l'écran sur un très petit mobile. */
  overflow-x: hidden;
  width: 100%;
}

.m-eyebrow {
  margin: 0 0 clamp(18px, 4vw, 34px);
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--m-laiton);
}

/* ── La ligne animée ─────────────────────────────────────────────────────────
   Structure :  [ boîte de largeur figée ][ suffixe fixe ]
   La boîte tient sa largeur du gabarit invisible, donc elle ne bouge JAMAIS,
   quel que soit le nom en cours d'écriture — et rien de ce qui suit ne remonte. */
.m-ligne {
  margin: 0;
  font-weight: 600;
  /* La ligne mesure environ 9,5 em au total : la cale (le nom le plus long, en
     Space Mono ~0,6 em par caractère) plus le suffixe. Le coefficient vw est
     calé pour qu'elle tienne dans l'écran AVEC ses marges, sans jamais
     déborder — un débordement décale toute la ligne vers la droite au lieu de
     la centrer. Rallonger la liste avec un patronyme plus long qu'à présent
     (9 caractères) obligerait à rebaisser ce coefficient. */
  font-size: clamp(19px, 5.4vw, 72px);
  line-height: 1.15;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: baseline;
  max-width: 100%;
}

.m-boite {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  text-align: right;      /* le nom grandit vers la GAUCHE, collé au suffixe */
}

/* Le gabarit : présent dans le flux (il donne la largeur), jamais vu.
   visibility:hidden et non display:none — un élément retiré du flux ne mesure
   plus rien, et la cale s'effondrerait avec lui. */
.m-gabarit {
  visibility: hidden;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-weight: 700;
}

.m-nom {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  color: var(--m-encre);
}

.m-curseur {
  display: inline-block;
  width: .055em;
  height: .95em;
  margin-left: .04em;
  vertical-align: baseline;
  background: var(--m-luisant);
  animation: m-battement 888ms steps(2, start) infinite;
}
@keyframes m-battement { to { opacity: 0; } }

.m-suffixe {
  flex: 0 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--m-laiton);
}

.m-trait {
  width: clamp(80px, 22vw, 190px);
  height: 2px;
  margin: clamp(26px, 6vw, 48px) 0 clamp(20px, 4vw, 32px);
  background: linear-gradient(90deg, transparent, var(--m-luisant), transparent);
}

.m-accroche {
  margin: 0 0 clamp(28px, 6vw, 44px);
  max-width: 34rem;
  font-size: clamp(15px, 2.1vw, 19px);
  line-height: 1.65;
  color: var(--m-pale);
}

.m-cta a {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 3px;
  background: var(--m-laiton);
  color: var(--m-papier);
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: .04em;
  border: 1px solid rgba(36, 31, 27, .18);
  transition: background .18s ease, transform .18s ease;
}
.m-cta a:hover  { background: var(--m-luisant); }
.m-cta a:active { transform: translateY(1px); }
.m-cta a:focus-visible {
  outline: 2px solid var(--m-encre);
  outline-offset: 3px;
}

/* Apparition à l'ouverture. Comme sur l'apex générique, l'opacité 0 ne vient
   QUE de l'état `from` appliqué par animation-fill-mode:both : si les
   animations ne tournent pas, la page reste entièrement lisible. */
@keyframes m-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-eyebrow { animation: m-entree 420ms cubic-bezier(.22,.61,.36,1)   0ms both; }
.m-ligne   { animation: m-entree 420ms cubic-bezier(.22,.61,.36,1) 220ms both; }
.m-trait   { animation: m-entree 420ms cubic-bezier(.22,.61,.36,1) 440ms both; }
.m-accroche{ animation: m-entree 420ms cubic-bezier(.22,.61,.36,1) 660ms both; }
.m-cta,
body.marco > .site-foot { animation: m-entree 420ms cubic-bezier(.22,.61,.36,1) 880ms both; }

@media (prefers-reduced-motion: reduce) {
  .m-eyebrow, .m-ligne, .m-trait, .m-accroche, .m-cta,
  body.marco > .site-foot { animation: none; }
  .m-curseur { animation: none; opacity: 1; }
}

/* Écrans étroits : on resserre les marges latérales plutôt que de rapetisser
   encore le texte — la ligne est déjà dimensionnée pour tenir. */
@media (max-width: 420px) {
  .m-wrap { padding-left: .6rem; padding-right: .6rem; }
}


/* ── Éléments partagés, teintés aux couleurs de la marque ────────────────────
   footer.css et le badge « Beta » servent aussi la marque 428 : on ne les
   modifie pas, on les surcharge ICI, sous body.marco. Aucune autre page n'est
   affectée. */
body.marco .beta-badge { background: var(--m-laiton); color: var(--m-papier); }
body.marco .site-foot  { color: var(--m-pale); }
body.marco .site-foot a { color: var(--m-laiton); }
body.marco .site-foot a:hover { color: var(--m-luisant); }

/* ── Page de texte (mentions légales) ────────────────────────────────────────
   Même papier, même laiton que l'accueil, mais une colonne de LECTURE : le
   texte se lit de gauche à droite, il n'est pas centré comme une accroche.
   Le pied de page reste celui de la marque, sans mention d'éditeur — l'identité
   légale est justement le contenu de cette page. */
.m-doc {
  flex: 1 1 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem 2rem;
  overflow-x: hidden;
  /* Apparition sobre, 0,28 s : assez pour adoucir l'arrivée, trop court pour
     qu'on l'attende. Le contenu reste lisible si l'animation ne tourne pas
     (fill-mode both sur un `from` opaque à 0 seulement). */
  animation: m-entree .28s cubic-bezier(.22,.61,.36,1) both;
}

.m-doc .m-eyebrow { animation: none; }

.m-doc-titre {
  margin: 0;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(26px, 5vw, 42px);
  line-height: 1.15;
  color: var(--m-encre);
}

.m-doc .m-trait { margin: clamp(20px, 4vw, 30px) 0 clamp(22px, 5vw, 34px); animation: none; }

.m-doc-bloc { margin: 0 0 clamp(26px, 5vw, 38px); }

.m-doc-bloc h2 {
  margin: 0 0 .7rem;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: clamp(12px, 1.7vw, 14px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-laiton);
}

.m-doc-bloc p {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--m-pale);
}

/* Deux colonnes libellé/valeur sur écran confortable, empilées sur mobile.
   `dl` et non un tableau : ce sont bien des couples terme/définition, et un
   lecteur d'écran les annonce comme tels. */
.m-doc-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: .55rem 1.4rem;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.m-doc-dl dt { color: var(--m-pale); }
.m-doc-dl dd { margin: 0; color: var(--m-encre); }

@media (max-width: 560px) {
  .m-doc-dl { grid-template-columns: 1fr; gap: .15rem; }
  .m-doc-dl dd { margin-bottom: .7rem; }
}

.m-doc-retour {
  margin: clamp(28px, 6vw, 40px) 0 0;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 14px;
}

.m-doc a { color: var(--m-laiton); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.m-doc a:hover { color: var(--m-luisant); }
.m-doc a:focus-visible { outline: 2px solid var(--m-encre); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .m-doc { animation: none; } }

/* ── Formulaire de la page de texte (contact des mentions légales) ───────────
   Papier et laiton, comme le reste : champs sur fond crème, filet fin, focus
   au laiton. Rien de neuf côté couleurs, tout vient des variables du haut. */
.m-form { display: grid; gap: 16px; margin-top: 16px; }

.m-form label {
  display: grid;
  gap: 6px;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m-pale);
}

.m-form input,
.m-form textarea {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;               /* 16px : en dessous, iOS zoome à la saisie */
  line-height: 1.5;
  color: var(--m-encre);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(36, 31, 27, .22);
  border-radius: 3px;
  padding: 10px 12px;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
}
.m-form textarea { resize: vertical; min-height: 8rem; }

.m-form input:focus-visible,
.m-form textarea:focus-visible {
  outline: 2px solid var(--m-laiton);
  outline-offset: 1px;
  border-color: var(--m-laiton);
}

.m-form-envoi { margin: 0; }

.m-form button {
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: .04em;
  padding: 12px 28px;
  border-radius: 3px;
  border: 1px solid rgba(36, 31, 27, .18);
  background: var(--m-laiton);
  color: var(--m-papier);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.m-form button:hover  { background: var(--m-luisant); }
.m-form button:active { transform: translateY(1px); }
.m-form button:focus-visible { outline: 2px solid var(--m-encre); outline-offset: 3px; }

/* Retours au visiteur. Le succès est vert-laiton, l'échec porte le rouge
   d'avertissement de la charte — jamais le rouge « depuis 2008 ». */
.m-doc-ok,
.m-doc-err {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 3px;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.m-doc-ok  { background: rgba(138, 106, 47, .10); border-left: 3px solid var(--m-laiton); color: var(--m-encre); }
.m-doc-err { background: rgba(123, 36, 28, .08);  border-left: 3px solid #7B241C;        color: #7B241C; }

/* ── Annonce Wero + notes de la page « mon abonnement » ──────────────────────
   Discrète par construction : pas de bouton, pas de couleur d'appel à
   l'action. Elle informe, elle n'invite pas à cliquer — il n'y a rien à
   cliquer. */
.m-doc-note { color: var(--m-pale); font-size: .9em; }

.wero-teaser {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px dashed rgba(138, 106, 47, .45);
  border-radius: 3px;
  background: rgba(138, 106, 47, .05);
  font-size: clamp(14px, 1.8vw, 15px);
  line-height: 1.6;
  color: var(--m-pale);
}
.wero-teaser strong { color: var(--m-encre); }

.wero-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--m-laiton);
  color: var(--m-papier);
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Case d'acceptation des conditions, habillage papier/laiton (page « Mon
   abonnement », qui n'utilise pas platform.css). */
.m-doc .cgv-case,
.m-form .cgv-case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(36, 31, 27, .22);
  border-radius: 3px;
  background: rgba(255, 255, 255, .45);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: var(--m-encre);
  cursor: pointer;
}
.m-form .cgv-case input { margin-top: 4px; width: 18px; height: 18px; cursor: pointer; }

/* ── Défi de la page mentions, habillage papier/laiton ───────────────────────
   marco.css sert les pages qui ne chargent pas platform.css : les règles y
   sont donc reprises, teintées aux couleurs de la marque. */
.m-doc .identite-defi {
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px dashed rgba(138, 106, 47, .45);
  border-radius: 3px;
  background: rgba(138, 106, 47, .05);
}
.m-doc .identite-intro { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--m-pale); }
.m-doc .identite-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
.m-doc .identite-q input {
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 16px;
  width: 5rem;
  padding: 8px 10px;
  color: var(--m-encre);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(36, 31, 27, .22);
  border-radius: 3px;
}
.m-doc .identite-q input:focus-visible { outline: 2px solid var(--m-laiton); outline-offset: 1px; }
.m-doc .identite-q button {
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 3px;
  border: 1px solid rgba(36, 31, 27, .18);
  background: var(--m-laiton);
  color: var(--m-papier);
  cursor: pointer;
}
.m-doc .identite-q button:hover { background: var(--m-luisant); }
.m-doc .identite-err { margin: 10px 0 0; font-size: 15px; color: #7B241C; }

.m-doc .identite-titre {
  margin: 18px 0 6px;
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
  font-size: clamp(12px, 1.7vw, 14px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-laiton);
}
.m-doc .identite-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: .55rem 1.4rem;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.m-doc .identite-dl dt { color: var(--m-pale); }
.m-doc .identite-dl dd { margin: 0; color: var(--m-encre); }
@media (max-width: 560px) {
  .m-doc .identite-dl { grid-template-columns: 1fr; gap: .15rem; }
  .m-doc .identite-dl dd { margin-bottom: .7rem; }
}