/* Portreto — les composants standard des ecrans de resultat (14/09) : « aussi-par-poto » (les portes entre
   les episodes) et « garder-ma-carte » (la phrase, le champ email, le bouton). Tokens du site, rien d'invente.
   Une seule feuille, liee par l'accueil (index.html), la page du jeu (formeto.js) et /c/:token (cadeau.js). */

/* --- aussi-par-poto (Ganael, 14/09) : le surtitre au-dessus de l'encadre comme les titres intermediaires de
   l'accueil (.sous-titre) ; l'encadre au format de la carte exemple (.carte) : dessin a gauche, titre et texte a
   droite ; dessous, centre, le CTA du site (.bouton) --- */
.aussi-par-poto{width:100%;max-width:400px;margin:22px auto 0;}
.aussi-par-poto .porte-surtitre{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--sakura-fonce);text-align:center;}
.aussi-par-poto .porte{background:var(--carte);border-radius:26px;padding:20px 22px 24px;box-shadow:0 10px 30px rgba(226,138,161,.25);}   /* 24 en bas = 18 d'air + l'ombre de 6 px du bouton : le CTA est a egale distance du texte et du bord */
.aussi-par-poto .porte + .porte-surtitre{margin-top:22px;}
.aussi-par-poto .porte-corps{display:flex;align-items:center;gap:14px;}
.aussi-par-poto .porte-illustration{flex:none;width:96px;height:96px;border:1.5px solid var(--sakura);border-radius:18px;overflow:hidden;background:var(--fond);}
.aussi-par-poto .porte-illustration svg{display:block;width:96px;height:96px;}
.aussi-par-poto .porte-texte{flex:1;min-width:0;}
.aussi-par-poto .porte-titre{margin:0 0 6px;font-size:20px;font-weight:800;line-height:1.2;color:var(--encre);}
.aussi-par-poto .porte-ligne{margin:0;font-size:15px;line-height:1.45;color:var(--encre);}
.aussi-par-poto .porte-actions{text-align:center;margin-top:18px;}
.aussi-par-poto .porte-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;border-radius:999px;background:var(--encre);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 6px 0 var(--sakura);transition:transform .12s,box-shadow .12s;}
.aussi-par-poto .porte-bouton:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sakura);}
.aussi-par-poto .porte-bouton:focus-visible{outline:3px solid var(--sakura-fonce);outline-offset:3px;}

/* --- garder-ma-carte (Formeto) : le meme dessin que le bloc email de l'accueil --- */
.garder-ma-carte{background:var(--carte);border-radius:22px;padding:16px;margin:16px auto 0;max-width:400px;}
.garder-ma-carte .bloc-email-haut{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.garder-ma-carte .bloc-email-haut svg{flex:none;width:72px;height:72px;overflow:visible;}
.garder-ma-carte .bloc-email-texte{margin:0;font-size:15px;line-height:1.45;color:var(--encre);}
.garder-ma-carte .form-email{display:flex;gap:8px;}
.garder-ma-carte .form-email input{flex:1;min-width:0;min-height:44px;border-radius:999px;border:1.5px solid var(--sakura);padding:0 14px;font:inherit;font-size:15px;background:var(--fond);color:var(--encre);}
.garder-ma-carte .bloc-email-consent,.consent-ligne{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--encre-douce);text-align:center;}   /* brief A Q57 (14/09) : le consentement, une phrase, pas de case ; .consent-ligne : la page Mes parties */
.garder-ma-carte .email-erreur{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--rose-soutenu);}
.garder-ma-carte .merci{margin:0;font-size:15px;font-weight:800;color:var(--sakura-fonce);text-align:center;}
/* Le bloc tip (15/09, tip.js) : la pose cadeau de Poto à gauche, la phrase à droite, le bouton pilule centré dessous — la
   même carte que garder-ma-carte, à la même place sous la carte de victoire (en alternance avec lui sans session). */
.bloc-tip{background:var(--carte);border-radius:22px;padding:16px;margin:16px auto 0;max-width:400px;}
.bloc-tip .bloc-tip-haut{display:flex;gap:12px;align-items:center;}
.bloc-tip .bloc-tip-haut svg{flex:none;width:72px;height:72px;overflow:visible;}
.bloc-tip .bloc-tip-texte{margin:0;font-size:15px;line-height:1.45;color:var(--encre);}
.bloc-tip .bloc-tip-action{margin:14px 0 0;text-align:center;}
.bloc-tip .cta-tip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--encre);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 6px 0 var(--sakura);}
.bloc-tip .cta-tip:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sakura);}
.bloc-tip .cta-tip:focus-visible{outline:3px solid var(--sakura-fonce);outline-offset:3px;}
.garder-ligne{text-align:center;margin:14px 0 0;font-size:13px;}
.garder-ligne a{color:var(--encre-douce);font-weight:700;text-decoration:underline;text-decoration-color:var(--sakura);text-underline-offset:3px;}