/* Mireya — common.css
   Tokens + coquille + composants réellement partagés par au moins deux pages.
   Tout ce qui n'est utilisé que par une page vit dans le CSS de cette page.
   Découpage fait par audit de l'usage réel des classes, pas par nom de section. */

/* ---------- Polices ----------
   Déclarer UNIQUEMENT les graisses réellement utilisées : une graisse manquante
   force un faux gras synthétisé et le texte devient flou.
   Les .woff2 (sous-ensemble latin) doivent être déposés dans /fonts/. */
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2)format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(/fonts/lora-500-italic.woff2)format('woff2');font-weight:500;font-style:italic;font-display:swap}

:root{
  --am-crema:#FBF4EA; --am-arena:#F1E3D0; --am-marfil:#FFFCF6;
  --am-barro:#B1402C; --am-oro:#C89B3C;
  --am-tinta:#33221E; --am-humo:#6F5A4E; --am-verde:#4E7A55;
  --sh:0 1px 2px rgba(51,34,30,.05);
  --serif:Fraunces,Georgia,'Times New Roman',serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);font-size:17px;line-height:1.55;
  color:var(--am-tinta);
  background:radial-gradient(1100px 480px at 50% -12%,#FFF6E6 0%,transparent 62%),var(--am-crema);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--am-barro)}

/* ---------- Coquille ----------
   min-height:100dvh est un garde-fou : sans lui, un conteneur rempli par JS
   s'effondre à 0 avant l'arrivée du CSS et le footer remonte en haut de l'écran. */
.wrap{
  max-width:560px;margin:0 auto;
  padding:24px 28px 44px;
  /* Sans inset-top, le contenu passe sous la Dynamic Island / l'encoche des
     iPhone récents en mode paysage et sur certaines PWA plein écran.
     Sans inset-bottom, la barre gestuelle mange le dernier CTA. */
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(44px + env(safe-area-inset-bottom));
  min-height:100dvh;
}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.25;margin:0 0 12px}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:20px}
.sub{font-size:19px;color:var(--am-humo);margin:0 0 20px}
.cita{font-family:Lora,Georgia,serif;font-style:italic;font-weight:500}

/* Filet sous les titres de section — la seule ornementation du design */
.filete{display:block;width:44px;height:3px;border-radius:2px;background:var(--am-oro);margin:0 auto 18px}

/* ---------- CTA ---------- */
.cta{
  display:block;width:100%;
  font-family:var(--sans);font-size:18px;font-weight:600;
  color:#FFFCF6;background:var(--am-barro);
  border:0;border-radius:14px;padding:17px 28px;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:transform 80ms,filter .12s;
}
.cta:hover{filter:brightness(1.05)}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.5;cursor:default}
.cta-lite{
  display:block;width:100%;background:none;border:0;
  font-family:var(--sans);font-size:16px;color:var(--am-humo);
  text-decoration:underline;padding:14px;cursor:pointer;
}

/* ---------- Bouton d'option (quiz) ----------
   19.5px n'est pas un détail : cible tactile large = moins de mis-taps = moins d'abandons.
   Texte aligné à gauche, jamais centré : les options font souvent deux lignes. */
.opt{
  display:block;width:100%;text-align:left;
  font-family:var(--sans);font-size:19.5px;line-height:1.35;
  background:var(--am-marfil);color:var(--am-tinta);
  border:1.5px solid var(--am-arena);border-radius:13px;padding:16px;
  margin:0 0 10px;cursor:pointer;
  transition:border-color .12s,background .12s,transform 80ms;
}
.opt:hover{border-color:var(--am-barro)}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--am-barro);background:#FFF7EC}

/* ---------- Champs ---------- */
.campo{
  display:block;width:100%;
  font-family:var(--sans);font-size:19.5px;
  background:var(--am-marfil);color:var(--am-tinta);
  border:1.5px solid var(--am-arena);border-radius:13px;padding:15px 16px;
  margin:0 0 12px;
}
.campo:focus{outline:2px solid var(--am-barro);outline-offset:1px;border-color:var(--am-barro)}
.label{display:block;font-size:15px;font-weight:600;margin:0 0 6px}
.ayuda{font-size:15px;color:var(--am-humo);margin:0 0 16px}
.err{color:var(--am-barro);font-size:15px;font-weight:600;margin:0 0 12px}

/* ---------- Conversations (témoignages) ----------
   Codes visuels réels de WhatsApp. On regarde l'écran de la cliente : ses
   messages sont sortants (vert, à droite, avec les coches de lecture), ceux de
   Mireya sont entrants (blanc, à gauche). Les coches ne vivent que sur les
   messages sortants — WhatsApp n'en affiche jamais sur un message reçu.
   Aucune image : avatar en initiales, icônes typographiques. */
/* La hauteur est réservée AVANT l'injection : sans min-height, le conteneur
   vaut 0 pendant le parse et tout ce qui suit remonte, puis redescend. C'est
   exactement le décalage qu'on cherche à supprimer. Les 5 conversations font
   ~1180 px : la valeur est mesurée, pas arrondie au hasard. */
.convs{content-visibility:auto;contain-intrinsic-size:1px 1180px;min-height:1180px}

.wa{
  border-radius:12px;overflow:hidden;margin:0 0 16px;
  box-shadow:0 2px 8px rgba(11,20,26,.10);
  font-family:var(--sans);
}

/* En-tête */
.wa__h{
  display:flex;align-items:center;gap:9px;
  background:#128C7E;color:#fff;padding:9px 12px;
}
.wa__back{font-size:22px;line-height:1;opacity:.9;margin-right:-3px}
/* Sert à la fois de pastille d'initiales (témoignages) et de vraie photo
   (écran d'attente du quiz) : object-fit couvre le second cas. */
.wa__av{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#C7D0D4;color:#3B4A54;font-weight:700;font-size:17px;flex:0 0 auto;
  object-fit:cover;
}
.wa__id{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.wa__n{font-size:16px;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa__s{font-size:12px;line-height:1.3;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa__ic{font-size:18px;line-height:1;opacity:.92;flex:0 0 auto;padding:0 2px}

/* Corps */
.wa__b{background:#ECE5DD;padding:12px 10px 14px}

/* Bulles */
.wa__m{
  position:relative;max-width:75%;width:fit-content;
  border-radius:7.5px;padding:6px 9px 5px;margin:0 0 8px;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  color:#111B21;
}
.wa__m:last-child{margin-bottom:0}
.wa__m p{margin:0;font-size:15.5px;line-height:1.42;word-wrap:break-word}

.wa__m--in{background:#FFFFFF;margin-right:auto;border-top-left-radius:0}
.wa__m--out{background:#DCF8C6;margin-left:auto;border-top-right-radius:0}

/* La pointe, en triangle CSS — pas d'image, pas de SVG. */
.wa__m::before{content:'';position:absolute;top:0;width:0;height:0;
  border-style:solid;border-width:0 8px 8px 0}
.wa__m--in::before{left:-8px;border-color:transparent #FFFFFF transparent transparent}
.wa__m--out::before{right:-8px;border-width:0 0 8px 8px;
  border-color:transparent transparent transparent #DCF8C6}

/* Horodatage DANS la bulle, en bas à droite */
.wa__t{
  display:block;text-align:right;
  font-size:11px;line-height:1;color:#667781;
  margin-top:3px;white-space:nowrap;
}
.wa__ck{font-style:normal;color:#53BDEB;margin-left:3px;letter-spacing:-1px}

/* ---------- Pied de page ---------- */
.pie{margin-top:36px;padding-top:20px;border-top:1px solid var(--am-arena);font-size:13px;color:var(--am-humo)}
.pie p{margin:0 0 8px}
.pie a{color:var(--am-humo)}
.pie nav a{margin-right:12px;white-space:nowrap}
.legal{font-size:13px;color:var(--am-humo);margin:16px 0 0}

.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}