/* ========================================================== HERO — titre large + sous-titre sécurisé + parchemin halo Cette feuille surcharge uniquement les finitions du Hero. ========================================================== */ .hero-stage-inner { flex-direction: column; justify-content: center; } /* Grand titre au-dessus du parchemin, pleine largeur. */ .hero-main-title-wide { width: 100%; max-width: none; margin: 0 0 1.35rem; padding: 0 1rem; box-sizing: border-box; text-align: center; position: relative; z-index: 2; } /* Blur uniquement du décor derrière le grand titre. */ .hero-main-title-blur { display: inline-block; position: relative; isolation: isolate; max-width: 100%; padding: .12em .42em .16em; box-sizing: border-box; } .hero-main-title-blur::before { content: ''; position: absolute; z-index: -1; inset: -.08em -.18em; border-radius: 22px; background: rgba(250, 243, 227, 0.0); -webkit-backdrop-filter: blur(2.2px); backdrop-filter: blur(2.2px); } /* La colonne reste le parent réel du parchemin. */ .hero-copy-column { flex: 0 0 auto; } /* PANNEAU PARCHEMIN Pas de masque, pas de bord flouté artificiellement. Le panneau a une vraie forme arrondie puis plusieurs ombres couleur parchemin de plus en plus diffuses autour de lui. */ .hero-copy-column::before { background: radial-gradient(circle at 17% 15%, rgba(255,255,255,.50), transparent 34%), radial-gradient(circle at 82% 78%, rgba(226,202,154,.16), transparent 38%), linear-gradient(135deg, rgba(253,247,233,.975), rgba(249,238,213,.965)) !important; border: 1px solid rgba(227, 207, 168, .44); border-radius: 42px !important; -webkit-mask-image: none !important; mask-image: none !important; /* Halo parchemin progressif sur les QUATRE côtés. */ box-shadow: 0 0 0 1px rgba(252, 244, 226, .55), 0 0 10px 3px rgba(251, 241, 218, .78), 0 0 24px 9px rgba(251, 241, 218, .52), 0 0 46px 18px rgba(250, 239, 214, .31), 0 0 76px 30px rgba(250, 239, 214, .16) !important; filter: none !important; } /* SOUS-TITRE TERRACOTTA - toujours centré - padding intérieur permanent - jamais plus large que son parent - aucun dépassement horizontal */ .hero-copy-shell .hero-main-subtitle { display: block; width: 100% !important; max-width: 100% !important; margin: 1rem auto 0 !important; padding: .08rem clamp(.75rem, 2vw, 1.6rem) !important; box-sizing: border-box !important; text-align: center !important; overflow-wrap: anywhere; word-break: normal; } /* Desktop : une ligne tant que nous sommes réellement en configuration desktop. La taille descend légèrement avec la largeur pour garantir que rien ne sorte. */ @media (min-width: 901px) { .hero-copy-shell .hero-main-subtitle { white-space: nowrap; font-size: clamp(.95rem, 1.42vw, 1.8rem) !important; line-height: 1.2; } .hero-copy-shell .hero-main-subtitle .hero-desktop-break, .hero-copy-shell .hero-main-subtitle br.hero-desktop-break { display: none !important; } } /* Tablette : on autorise naturellement le retour à la ligne plutôt que tout écraser. */ @media (max-width: 900px) { .hero-main-title-wide { margin-bottom: 1rem; } .hero-copy-shell .hero-main-subtitle { white-space: normal; font-size: clamp(1.15rem, 3.4vw, 1.65rem) !important; padding-inline: clamp(.8rem, 4vw, 1.5rem) !important; } .hero-copy-column::before { border-radius: 34px !important; box-shadow: 0 0 0 1px rgba(252, 244, 226, .55), 0 0 8px 2px rgba(251, 241, 218, .72), 0 0 18px 6px rgba(251, 241, 218, .48), 0 0 34px 12px rgba(250, 239, 214, .26), 0 0 52px 20px rgba(250, 239, 214, .13) !important; } } @media (max-width: 680px) { .hero-main-title-wide { padding: 0 .5rem; margin-bottom: .8rem; } .hero-main-title-blur { padding-left: .2em; padding-right: .2em; } .hero-copy-shell .hero-main-subtitle { font-size: clamp(1.05rem, 5.4vw, 1.42rem) !important; line-height: 1.25; padding-inline: .85rem !important; } .hero-copy-column::before { border-radius: 26px !important; box-shadow: 0 0 0 1px rgba(252, 244, 226, .5), 0 0 7px 2px rgba(251, 241, 218, .66), 0 0 15px 5px rgba(251, 241, 218, .40), 0 0 26px 9px rgba(250, 239, 214, .20), 0 0 38px 13px rgba(250, 239, 214, .10) !important; } } /* ========================================================== HERO — passe typographique 10/09/2026 Modifs ciblées : titre, sous-titre terracotta, phrase d'accueil. ========================================================== */ /* Le feuillage peut passer derrière le titre : halo crème discret, sans créer de plaque opaque autour du texte. */ .hero-main-title-wide, .hero-main-title-wide .hero-main-title-blur { text-shadow: 0 0 4px rgba(250, 243, 227, 0.95), 0 0 10px rgba(250, 243, 227, 0.78), 0 0 18px rgba(250, 243, 227, 0.55); } /* Desktop : +15 % par rapport à la passe précédente et toujours sur une ligne. */ @media (min-width: 901px) { .hero-copy-shell .hero-main-subtitle { font-size: clamp(1.0925rem, 1.633vw, 2.07rem) !important; line-height: 1.16 !important; white-space: nowrap !important; letter-spacing: -0.012em; } .hero-copy-shell .hero-main-subtitle br.hero-desktop-break { display: none !important; } /* Taille proche de l'ancien sous-titre, mais davantage intégrée au bas du bloc. */ .hero-copy-shell .hero-reassurance-note { font-size: clamp(.95rem, 1.42vw, 1.8rem) !important; line-height: 1.16 !important; margin-top: .45rem !important; } } /* Tablette : le sous-titre reste centré et contenu ; on évite tout débordement. */ @media (min-width: 681px) and (max-width: 900px) { .hero-copy-shell .hero-main-subtitle { font-size: clamp(1.16rem, 3.2vw, 1.68rem) !important; } .hero-copy-shell .hero-reassurance-note { font-size: clamp(1rem, 2.5vw, 1.28rem) !important; margin-top: .4rem !important; } } /* Mobile : hiérarchie conservée, texte d'accueil plus discret et plus haut. */ @media (max-width: 680px) { .hero-main-title-wide, .hero-main-title-wide .hero-main-title-blur { text-shadow: 0 1px 1px rgba(252, 246, 234, .90), 0 0 6px rgba(250, 243, 227, .72), 0 0 12px rgba(250, 243, 227, .36); } .hero-copy-shell .hero-reassurance-note { font-size: clamp(.92rem, 4.2vw, 1.08rem) !important; line-height: 1.2 !important; margin-top: .3rem !important; } }