/* ========================================================================== SITE D'ENTREPRISE MAYNA — feuille de style unique MAYN-374 (lot 8) · maquettes validées docs/design/mayn-371 + mayn-372 ADR-043 · Mur section K Source : les maquettes VALIDÉES du lot 4 (a05bc87) et du lot 5 (866b00d), elles-mêmes issues de la bibliothèque visuelle Mayna (base v5). Dans les maquettes, deux rendus (ordinateur et téléphone) coexistent dans le même document, d'où le préfixe « .site » et la variante « .site.m ». Ici il n'y a qu'une page par écran : le préfixe disparaît et les règles « .m » deviennent des points de bascule. Aucune couleur, ombre, graisse ou échelle inventée. AUTONOMIE (ADR-043 §2.1) : aucune ressource externe, aucune police distante. Le site ne dépend d'aucun composant de l'application. ========================================================================== */ /* --- FONDATIONS : jetons de la bibliothèque, repris verbatim -------------- */ :root { --navy: #3D5A80; --navy-dk: #2C4260; --navy-deep: #1C2B3A; --navy-soft: #EEF4FB; --gold: #C9A96E; --gold-lt: #D8B87A; --terra: #C26A50; --terra-soft: #FBE9E0; --bg-warm: #FAF7F2; --bg-soft: #F5F1EA; --ink: #2D2D2D; --muted: #6B6B6B; --border-warm: #E0D7C7; --success: #4A9B6F; --shadow-card: 0 18px 48px rgba(61,90,128,0.10), 0 2px 6px rgba(45,45,45,0.04); --shadow-card-hover: 0 28px 70px rgba(61,90,128,0.18), 0 4px 10px rgba(45,45,45,0.06); --shadow-float: 0 36px 80px rgba(28,43,58,0.28); --grad-hero: radial-gradient(1200px 600px at 78% -10%, rgba(201,169,110,0.20), transparent 60%), radial-gradient(900px 500px at 2% 8%, rgba(61,90,128,0.10), transparent 55%), linear-gradient(180deg, #FBF8F3 0%, #F5F1EA 100%); --grad-navy: linear-gradient(145deg, #46658E 0%, #2C4260 55%, #1C2B3A 100%); --grad-gold: linear-gradient(135deg, #D8B87A 0%, #C9A96E 100%); --grad-line: linear-gradient(90deg, var(--gold), var(--terra)); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-warm); color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, svg { max-width: 100%; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } section { padding: 72px 0; } /* Accès clavier — anneau de focus visible partout */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } /* Lien d'évitement (accessibilité) */ .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: #fff; color: var(--navy-deep); font-weight: 700; padding: 12px 18px; border-radius: 0 0 12px 0; box-shadow: var(--shadow-card); } .skip:focus { left: 0; } /* --- Typographie ---------------------------------------------------------- */ h1 { font-size: clamp(34px,5vw,52px); line-height: 1.06; font-weight: 800; letter-spacing: -1.5px; color: var(--navy-deep); } h2 { font-size: clamp(28px,3.6vw,38px); font-weight: 800; letter-spacing: -1px; line-height: 1.14; color: var(--navy-deep); } h3 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: var(--navy-deep); } p { margin: 0; } .lede { font-size: 17px; color: var(--muted); line-height: 1.65; } .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--terra); margin-bottom: 12px; } .shead { max-width: 720px; margin: 0 auto 40px; text-align: center; } .shead.left { margin-left: 0; text-align: left; } /* --- Navigation ------------------------------------------------------------ ⚠️ Mur K1(1 bis) — OPPOSABLE : le porteur de l'accès (`.nav-actions`) ne rétrécit JAMAIS (flex: 0 0 auto) ; c'est la MARQUE qui cède (`.logo` en flex: 0 1 auto + min-width: 0) ; sous 360 px la marque s'efface ENTIÈREMENT (le mot ET le carré — ceinture en bas de fichier). Aucun calcul de largeur. ------------------------------------------------------------------------- */ .nav { background: rgba(250,247,242,0.92); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-warm); position: sticky; top: 0; z-index: 50; } .nav-in { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; color: var(--navy-dk); letter-spacing: -.6px; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .logo .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-navy); display: grid; place-items: center; color: #fff; font-size: 18px; box-shadow: 0 6px 16px rgba(61,90,128,.35); flex: 0 0 auto; } .nav-links { display: flex; gap: 26px; align-items: center; } .nav-links a { color: var(--muted); font-size: 14px; font-weight: 600; } .nav-links a:hover { color: var(--navy); } .nav-links a.on { color: var(--navy); font-weight: 700; } .nav-actions { display: flex; gap: 12px; align-items: flex-start; flex: 0 0 auto; } .burger { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border-warm); background: #fff; display: none; place-items: center; cursor: pointer; } .burger span { display: block; width: 18px; height: 2px; background: var(--navy-dk); border-radius: 2px; margin: 2px 0; } .nav-cta-sm { display: none; } /* Menu téléphone déplié — composant du lot 4, page courante en état actif ⚠️ MAYN-917 — OPPOSABLE : ce panneau est un FRÈRE de `.nav`, jamais un descendant. `.nav` porte `backdrop-filter` ; un ancêtre filtré devient le bloc conteneur de ses descendants `position: fixed`, et le panneau se retrouve alors taillé à la hauteur de la barre (64 px) — état ouvert, mais entrées invisibles. Aucun ancêtre du panneau ne doit porter filter, backdrop-filter, transform, perspective, contain ou will-change. */ .menu-panel { position: fixed; inset: 0; z-index: 100; background: var(--bg-warm); overflow-y: auto; overscroll-behavior: contain; } .menu-panel[hidden] { display: none; } /* Le fond de page ne défile plus tant que le panneau est ouvert. */ html.menu-ouvert, html.menu-ouvert body { overflow: hidden; } .menu-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .close { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border-warm); background: #fff; display: grid; place-items: center; font-size: 20px; color: var(--navy-dk); font-weight: 700; cursor: pointer; } .menu-list { padding: 18px 0 8px; } .menu-list a { display: block; padding: 15px 4px; font-size: 19px; font-weight: 700; color: var(--navy-deep); border-bottom: 1px solid var(--border-warm); } .menu-list a.on { color: var(--navy); } .menu-ctas { padding-top: 22px; display: flex; flex-direction: column; gap: 12px; } .menu-ctas .btn { width: 100%; } /* --- Boutons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; font-family: inherit; border-radius: 12px; padding: 11px 20px; cursor: pointer; border: none; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; } .btn-lg { padding: 15px 26px; font-size: 15px; border-radius: 13px; } .btn-primary { background: var(--grad-navy); color: #fff; box-shadow: 0 12px 26px rgba(44,66,96,.30); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(44,66,96,.40); } .btn-ghost { background: #fff; color: var(--navy-dk); border: 1.5px solid var(--border-warm); } .btn-ghost:hover { border-color: var(--navy); color: var(--navy); } .btn:disabled { cursor: default; transform: none; opacity: .75; } /* La sortie annoncée : l'adresse en petit sous le bouton */ .cta-col { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; } .addr { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .2px; } /* --- Bandeau de page -------------------------------------------------------- */ .hero { background: var(--grad-hero); position: relative; overflow: hidden; padding: 64px 0 68px; } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(61,90,128,0.06) 1px, transparent 0); background-size: 26px 26px; opacity: .5; } .hero .wrap { position: relative; z-index: 2; } .hero-center { max-width: 840px; margin: 0 auto; text-align: center; } .hero h1 { margin-bottom: 18px; } .hero .lede { font-size: 18px; } .hero .doors-cta { margin-top: 30px; } .doors-cta { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .doors-cta .btn { min-width: 250px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--navy-dk); background: #fff; border: 1px solid var(--border-warm); padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-card); margin-bottom: 18px; } .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); } /* --- Accueil : les deux portes développées, cartes à parité ---------------- */ .portes { background: #fff; } .porte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .porte { background: var(--bg-warm); border: 1px solid var(--border-warm); border-radius: 18px; padding: 32px 30px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; } .porte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-line); opacity: 0; transition: opacity .25s; } .porte:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .porte:hover::before { opacity: 1; } .porte .sur { font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--terra); margin-bottom: 8px; } .porte h3 { font-size: 24px; margin-bottom: 12px; } .porte p { font-size: 15px; color: var(--ink); line-height: 1.7; flex: 1; } .porte .cta-col { margin-top: 22px; align-self: flex-start; align-items: flex-start; } /* --- Accueil : bandeau bleu L'entreprise — le seul bandeau bleu du corps --- */ .ent { background: var(--grad-navy); color: #fff; } .ent .kicker { color: var(--gold-lt); } .ent h2 { color: #fff; margin-bottom: 10px; } .ent .chapeau { font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.65; max-width: 720px; } .ent-pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; } .ent-pt { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 20px 22px; } .ent-pt b { display: block; font-size: 15.5px; margin-bottom: 6px; color: #fff; } .ent-pt p { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.65; } /* La vitrine des outils — texte INERTE : aucun lien, aucun survol, aucun curseur d'action */ .vitrine { margin-top: 40px; } .vitrine .vit-title { font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 6px; } .vitrine .vit-lede { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 18px; } .vit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .vit-card { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 22px 24px; cursor: default; } .vit-card h4 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.3px; } .vit-card p { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.6; } .ent-link { display: inline-block; margin-top: 30px; color: var(--gold-lt); font-weight: 700; font-size: 15px; } .ent-link:hover { color: #fff; } /* --- Bande finale — sur fond clair : le bandeau bleu reste unique ---------- */ .final { background: var(--bg-soft); text-align: center; } .final h2 { margin-bottom: 12px; } .final .lede { max-width: 640px; margin: 0 auto 28px; } .final-ctas { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; } /* --- Le sur-mesure — sections ---------------------------------------------- */ .prob { background: #fff; } .prob p, .prose p { font-size: 16px; line-height: 1.75; color: var(--ink); max-width: 720px; } .prob p + p, .prose p + p { margin-top: 16px; } .compo { background: var(--bg-soft); } .compo .ouverture { font-size: 16px; font-weight: 700; color: var(--navy-deep); margin: 6px 0 22px; } .compo ol { list-style: none; display: grid; gap: 12px; max-width: 780px; } .compo li { background: #fff; border-left: 4px solid var(--navy); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-card); display: flex; gap: 16px; align-items: flex-start; } .compo .num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--grad-navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 2px; } .compo li p { font-size: 15px; line-height: 1.65; } .compo li b { color: var(--navy-deep); } .compo .cloture { margin-top: 26px; font-size: 17px; font-weight: 800; color: var(--navy-deep); letter-spacing: -.2px; max-width: 780px; } .preuve { background: #fff; } .preuve p { max-width: 720px; font-size: 16px; line-height: 1.75; } .lien-discret { display: inline-block; margin-top: 18px; color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; } .lien-discret:hover { color: var(--navy-deep); } .preuve .addr { display: block; margin-top: 6px; } .deroule { background: var(--bg-soft); padding-bottom: 0; } .deroule-card { background: var(--navy-soft); border-left: 4px solid var(--navy); border-radius: 16px; padding: 30px 34px; max-width: 780px; } .deroule-card p { font-size: 16px; line-height: 1.75; } .deroule-card p + p { margin-top: 14px; } .deroule-card .fort, .prose .fort { font-weight: 800; color: var(--navy-deep); } .deroule .btn { margin-top: 24px; } /* --- Nos solutions : blocs Pilot / Stock — même gabarit, opposable (T-1) --- */ .outils-list { display: grid; gap: 28px; } .outil { background: #fff; border: 1px solid var(--border-warm); border-radius: 18px; padding: 34px 32px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .outil::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-line); } .outil h3 { font-size: 26px; margin-bottom: 20px; letter-spacing: -.5px; } .pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 24px; } .pr-col .kicker { margin-bottom: 8px; } .pr-col p { font-size: 15px; line-height: 1.7; } .outil-ctas { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .outil .form-card, .outil .confirm-card { margin-top: 26px; box-shadow: none; border: 1.5px solid var(--border-warm); background: var(--bg-warm); } .outil .confirm-card { background: var(--navy-soft); border: none; border-left: 4px solid var(--navy); } /* --- Tarifs ----------------------------------------------------------------- */ .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 820px; margin: 0 auto 26px; } .price-card { background: #fff; border: 1px solid var(--border-warm); border-radius: 20px; padding: 30px 32px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .price-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-line); } .price-name { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; } .price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } /* MAYN-919 — LE MONTANT NE PEUT PLUS DÉBORDER DE SA CARTE. Le montant seul « 14,90 € », en gros caractères, est long pour une carte étroite. À 320 px avec un zoom de 200 %, il mesurait 143 px dans une carte qui en offre 66, et la carte coupe ce qui dépasse — le symbole euro disparaissait entièrement et le dernier chiffre était amputé. On lisait « 14,90 » sans monnaie. La taille suit donc la largeur disponible au lieu d'être figée. Le plancher est calculé pour que le plus long des deux montants tienne dans la carte la plus étroite prise en charge. NE PAS refiger cette taille. */ .price-line .amount { font-size: clamp(22px, 9vw, 42px); font-weight: 800; letter-spacing: -1.5px; color: var(--navy-deep); } .price-line .per { font-size: 15px; color: var(--muted); font-weight: 600; } .price-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink); } /* MAYN-918 — la différence de capacité se lit AVANT la souscription, pas au refus : chaque carte porte sa ligne photo. MAYN-1015 — elles sont TROIS et non plus une : chantiers en cours, photos et lecture des tickets. La plus importante — trois chantiers à la fois — n'était nulle part, et c'est celle qu'on découvrait après avoir payé. Le cadre est posé une fois autour des trois lignes, jamais trois fois. */ .price-pts { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border-warm); font-weight: 600; color: var(--navy-deep); list-style: none; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.65; } .price-cta { text-align: center; } .surmesure { background: var(--bg-soft); } .surmesure .prose { max-width: 760px; } .surmesure .btn { margin-top: 24px; } .objections { background: #fff; } .obj-list { display: grid; gap: 14px; max-width: 780px; } .obj { background: var(--bg-warm); border: 1px solid var(--border-warm); border-radius: 14px; padding: 20px 24px; } .obj b { display: block; font-size: 16px; color: var(--navy-deep); margin-bottom: 6px; } .obj p { font-size: 14.5px; line-height: 1.65; } .lien-fleche { display: inline-block; margin-top: 24px; color: var(--navy); font-weight: 700; font-size: 15px; } .lien-fleche:hover { color: var(--navy-deep); } /* --- Questions fréquentes --------------------------------------------------- */ .faq-group { max-width: 820px; margin: 0 auto 50px; } .faq-group:last-child { margin-bottom: 0; } .faq-group h2 { font-size: 24px; margin-bottom: 20px; } .faq-list { display: grid; gap: 14px; margin-bottom: 24px; } .faq-item { background: #fff; border: 1px solid var(--border-warm); border-radius: 14px; padding: 20px 24px; box-shadow: var(--shadow-card); } .faq-item b { display: block; font-size: 16px; color: var(--navy-deep); margin-bottom: 6px; } .faq-item p { font-size: 14.5px; line-height: 1.7; } /* --- L'entreprise ------------------------------------------------------------ */ .eng { background: #fff; } .eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fact { background: var(--bg-warm); border: 1px solid var(--border-warm); border-radius: 14px; padding: 22px 24px; } .fact b { display: block; font-size: 15.5px; color: var(--navy-deep); margin-bottom: 6px; } .fact p { font-size: 14px; color: var(--muted); line-height: 1.65; } .facon { background: var(--bg-soft); } .facon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; } /* --- Nous écrire ------------------------------------------------------------- */ .ecrire { background: var(--bg-soft); } .ecrire-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; } .ecrire-main { display: grid; gap: 28px; } .apart { background: #fff; border: 1px solid var(--border-warm); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-card); } .apart .kicker { margin-bottom: 8px; } .apart .mail { display: block; font-weight: 800; font-size: 17px; color: var(--navy); margin-bottom: 10px; text-decoration: underline; text-underline-offset: 4px; } .apart p { font-size: 14px; color: var(--muted); line-height: 1.65; } /* --- Formulaires des portes -------------------------------------------------- */ .formzone { background: var(--bg-soft); } .form-card { background: #fff; border: 1px solid var(--border-warm); border-radius: 18px; padding: 34px; box-shadow: var(--shadow-card); max-width: 720px; } .form-card h3 { font-size: 23px; margin-bottom: 24px; } .form-card .fintro { font-size: 15px; line-height: 1.7; color: var(--ink); margin: -10px 0 22px; } .fld { margin-bottom: 20px; } .fld label { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy-deep); margin-bottom: 7px; } .fld .fac { font-weight: 600; color: var(--muted); font-size: 12.5px; margin-left: 6px; } .fld input, .fld textarea { width: 100%; border: 1.5px solid var(--border-warm); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; } .fld textarea { min-height: 84px; resize: vertical; } .fld ::placeholder { color: #A8A29A; } .fld input:focus, .fld textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(61,90,128,.12); } .fld.err input, .fld.err textarea { border-color: var(--terra); background: #FFFDFC; box-shadow: 0 0 0 3px rgba(194,106,80,.10); } .err-msg { color: #9C4A34; font-size: 13px; font-weight: 600; margin-top: 7px; line-height: 1.5; } .send-fail { background: var(--terra-soft); border: 1.5px solid var(--terra); color: #9C4A34; border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 600; line-height: 1.55; margin-bottom: 14px; } .form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; } .form-note a { text-decoration: underline; text-underline-offset: 3px; } /* Champ leurre — jamais présenté au visiteur (anti-abus MAYN-355) */ .hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* Confirmation — remplace le bloc formulaire en place */ .confirm-card { background: var(--navy-soft); border-left: 4px solid var(--navy); border-radius: 16px; padding: 34px; max-width: 720px; } .confirm-card h3 { font-size: 24px; margin-bottom: 14px; } .confirm-card p { font-size: 16px; line-height: 1.75; } .confirm-card p + p { margin-top: 14px; } .confirm-card .retour { display: inline-block; margin-top: 22px; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } /* Les blocs qui s'ouvrent en place (démonstration, stock — spec lot 5 §4.1). Fermés SEULEMENT quand le script tient l'ouverture (classe js posée par site.js) : sans script, les formulaires restent visibles — aucun bouton ne mène dans le vide. */ .js [data-bloc-porte]:not(.ouvert) { display: none; } /* --- Page introuvable --------------------------------------------------------- */ .nf { background: var(--grad-hero); text-align: center; padding: 110px 0; } .nf h1 { margin-bottom: 16px; } .nf .lede { max-width: 560px; margin: 0 auto 30px; } .nf-ctas { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; } .nf .lien { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } /* --- Pied de page -------------------------------------------------------------- */ .foot { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 54px 0 30px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } .foot .fmark { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 12px; } .foot .fmark .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-gold); display: grid; place-items: center; color: #3a2c12; font-size: 16px; } .foot .fpos { font-size: 14px; line-height: 1.7; max-width: 300px; } .foot h5 { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 14px; } .foot li { margin-bottom: 9px; } .foot li a { font-size: 14px; color: rgba(255,255,255,.78); } .foot li a:hover { color: #fff; } .foot .faddr { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 2px; } .foot-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 38px; padding-top: 20px; font-size: 13px; color: rgba(255,255,255,.55); } /* ========================================================================== VARIANTE TÉLÉPHONE — points de bascule (maquettes : .site.m, 390 px) Mot pour mot les mêmes textes ; blocs empilés ; boutons pleine largeur ; zones tactiles ≥ 48 px (S-8). ========================================================================== */ @media (max-width: 860px) { body { font-size: 15px; } .wrap { padding: 0 18px; } section { padding: 44px 0; } h1 { font-size: 29px; letter-spacing: -1px; } h2 { font-size: 23px; } .lede { font-size: 15.5px; } .nav-in { padding: 10px 0; } .nav-links { display: none; } .burger { display: grid; } .logo { font-size: 18px; } .logo .mark { width: 30px; height: 30px; font-size: 15px; } .nav-actions { align-items: center; gap: 10px; } .nav-actions > .btn-ghost, .nav-actions > .cta-col { display: none; } .nav-cta-sm { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .nav-cta-sm .btn { padding: 10px 16px; font-size: 13.5px; min-height: 44px; } .nav-cta-sm .addr { font-size: 9px; } .btn { min-height: 48px; } .hero { padding: 42px 0 46px; } .hero-center, .shead { text-align: left; } .shead { margin-bottom: 26px; } .doors-cta { flex-direction: column; align-items: stretch; gap: 14px; } .doors-cta .btn, .final .btn, .deroule .btn, .form-card .btn, .nf .btn, .surmesure .btn, .faq-group .btn, .outil-ctas .btn { width: 100%; min-width: 0; } .cta-col { width: 100%; align-items: center; } .porte-grid, .ent-pts, .vit-grid, .pr-grid, .price-grid, .eng-grid, .facon-grid, .ecrire-grid { grid-template-columns: 1fr; } .porte { padding: 26px 22px; } .porte h3 { font-size: 21px; } .porte .cta-col { align-self: stretch; align-items: center; } .final { text-align: left; } .final .lede { margin: 0 0 22px; } .final-ctas, .nf-ctas { flex-direction: column; align-items: stretch; } .nf { text-align: left; padding: 64px 0; } .nf .lede { margin: 0 0 24px; } .nf-ctas { align-items: stretch; } .compo li { padding: 15px 16px; } .deroule-card { padding: 24px 20px; } .form-card { padding: 24px 20px; } .form-card h3 { font-size: 20px; } .confirm-card { padding: 26px 20px; } .outil { padding: 26px 22px; } .outil h3 { font-size: 22px; } .outil-ctas { flex-direction: column; align-items: stretch; } .faq-group h2 { font-size: 20px; } .fld input, .fld textarea { font-size: 16px; min-height: 48px; } .foot-grid { grid-template-columns: 1fr; gap: 26px; } .foot { padding: 40px 0 24px; } } /* ========================================================================== CEINTURE — TRÈS PETITES LARGEURS (< 360 px) — Mur K1(1 bis) Sous 360 px, la marque de la barre du haut s'efface ENTIÈREMENT — le mot « Mayna » ET le carré « M ». Le lien reste dans la page, nommé par son libellé accessible ; « Accueil » reste dans le pied de page. La marque cède TOUTE sa place, jamais l'accès. La garantie ne dépend d'aucun libellé. ========================================================================== */ @media (max-width: 359px) { /* MAYN-919 — la carte des tarifs rend sa marge intérieure au montant. */ .price-card { padding: 22px 18px; } .nav .logo .word, .nav .logo .mark { display: none; } .nav-cta-sm .btn { padding: 10px 10px; } .nav-in { gap: 8px; } .wrap { padding: 0 14px; } } /* --- Respect du réglage système « moins d'animations » --------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ==========================================================================\n REFONTE ARCHITECTURE DE MARQUE — août 2026\n Composants additionnels, construits exclusivement avec les jetons Mayna\n existants. Les fondations ci-dessus restent la source de vérité visuelle.\n ========================================================================== */ .solutions-showcase, .feature-section, .story { background: #fff; } .solution-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .solution-card { background:var(--bg-warm); border:1px solid var(--border-warm); border-radius:18px; padding:30px; box-shadow:var(--shadow-card); position:relative; overflow:hidden; } .solution-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-line); } .solution-card h3 { font-size:26px; margin:14px 0 8px; } .solution-card h4 { font-size:18px; line-height:1.4; color:var(--navy-deep); margin-bottom:12px; } .solution-card p { font-size:15px; line-height:1.7; color:var(--ink); } .status { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; font-size:11.5px; font-weight:800; letter-spacing:.3px; } .status.available { background:rgba(74,155,111,.12); color:#387b57; } .status.roadmap { background:var(--terra-soft); color:#9C4A34; } .story { background:var(--bg-soft); } .story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:start; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .solution-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:18px; } .solution-head h3 { margin:10px 0 0; } .solution-tagline { max-width:430px; font-size:17px; line-height:1.5; font-weight:700; color:var(--navy-deep); } .future-box { margin-top:28px; background:var(--navy-soft); border-left:4px solid var(--navy); border-radius:14px; padding:22px 24px; max-width:820px; } .future-box strong { display:block; color:var(--navy-deep); margin-bottom:6px; } .future-box p { font-size:14.5px; line-height:1.7; } .stock-price { background:#fff; } .contact-choices { margin-top:24px; display:grid; gap:14px; } .contact-choices p { border-top:1px solid var(--border-warm); padding-top:14px; color:var(--ink); } .contact-choices b { color:var(--navy-deep); } @media (max-width:860px) { .solution-grid, .story-grid, .feature-grid { grid-template-columns:1fr; } .solution-card { padding:24px 22px; } .solution-head { display:block; } .solution-tagline { margin-top:12px; } } /* MAYN-1069 — pages légales du site institutionnel. */ .legal-page .hero { padding: 52px 0 36px; } .legal-date { margin-top: 16px; color: var(--muted); font-size: 14px; } .legal-section { padding: 40px 0 64px; } .legal-content { max-width: 760px; margin: 0 auto; overflow-wrap: anywhere; } .legal-content h2 { margin: 36px 0 14px; font-size: 24px; line-height: 1.3; } .legal-content h2:first-child { margin-top: 0; } .legal-content p { margin-bottom: 16px; } .legal-content ul { list-style: disc; padding-left: 24px; margin: 16px 0 24px; } .legal-content li { margin-bottom: 10px; } .legal-content a { color: var(--navy-dk); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { .legal-page .hero { padding: 36px 0 28px; } .legal-section { padding: 28px 0 44px; } .legal-content h2 { font-size: 22px; } } /* ======================================================================== MAYNA DESIGN SYSTEM V3 — direction « Horizon Tech » Adaptation visuelle uniquement : les gabarits, contenus et comportements existants restent inchangés. ======================================================================== */ @font-face { font-family: "Manrope"; src: url("manrope-variable.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("ibm-plex-mono-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("ibm-plex-mono-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; } :root { --tech-deep: #071923; --tech-deep-2: #102738; --tech-paper: #f6f8fa; --tech-ink: #10212c; --tech-muted: #60717e; --tech-aqua: #6de2d7; --tech-violet: #7657ff; --tech-warm: #ffbd55; --tech-line: rgba(15,40,55,.12); --navy: #7657ff; --navy-dk: #10212c; --navy-deep: #071923; --navy-soft: #eef1f5; --gold: #ffbd55; --gold-lt: #ffd27e; --terra: #c26a50; --terra-soft: #fbe9e0; --bg-warm: #f6f8fa; --bg-soft: #f6f8fa; --ink: #10212c; --muted: #60717e; --border-warm: rgba(15,40,55,.12); --shadow-card: 0 18px 46px rgba(9,30,44,.08); --shadow-card-hover: 0 28px 70px rgba(9,30,44,.14); --shadow-float: 0 36px 100px rgba(0,0,0,.28); --grad-hero: radial-gradient(circle at 82% 24%, rgba(118,87,255,.78), transparent 28%), radial-gradient(circle at 12% 35%, rgba(109,226,215,.34), transparent 34%), linear-gradient(145deg,#071923,#102738); --grad-navy: linear-gradient(135deg,#6de2d7,#7657ff); --grad-gold: linear-gradient(135deg,#ffd27e,#ffbd55); --grad-line: linear-gradient(90deg,#6de2d7,#7657ff); } html { background: var(--tech-paper); } body { max-width: 1280px; margin-inline: auto; background: var(--tech-paper); color: var(--tech-ink); font-family: "Manrope", Inter, system-ui, sans-serif; font-weight: 400; } .wrap { max-width: 1280px; padding-inline: 54px; } section { padding: 88px 0; } h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: -.045em; } h1 { font-size: clamp(48px,7vw,88px); line-height: .98; } h2 { font-size: clamp(42px,5vw,67px); line-height: 1.02; } h3 { font-size: 26px; } .lede { color: var(--muted); } .kicker, .eyebrow { color: var(--tech-violet); font-size: 11px; font-weight: 500; letter-spacing: .15em; } .eyebrow { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .eyebrow .dot { background: var(--tech-aqua); } .nav { margin: 18px 28px 0; background: rgba(8,24,34,.72); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; backdrop-filter: blur(18px) saturate(145%); overflow: hidden; } .nav-in { max-width: none; min-height: 72px; display: grid; grid-template-columns: 250px minmax(0,1fr) auto; gap: 0; padding: 0; } .nav .logo { height: 72px; padding: 15px 24px; border-right: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 18px; font-weight: 500; } .nav-links { justify-content: center; gap: 28px; padding-inline: 24px; } .nav-links a { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 400; white-space: nowrap; } .nav-links a:hover, .nav-links a.on { color: #fff; } .nav-actions { align-items: center; gap: 0; } .nav-actions > .btn-ghost { height: 72px; padding-inline: 22px; color: rgba(255,255,255,.78); background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.16); border-radius: 0; font-size: 13px; } .nav-actions > .cta-col { margin: 10px; } .nav-actions .btn-primary { min-height: 50px; padding-inline: 22px; border-radius: 999px; color: #071923; background: var(--gold); box-shadow: none; font-size: 13px; } .burger { align-content: center; gap: 4px; border-color: rgba(255,255,255,.16); background: transparent; border-radius: 0; } .burger span { margin: 0; background: #fff; } .hero { margin-top: -90px; padding: 200px 0 130px; color: #fff; background: var(--grad-hero); } .hero::after { display: none; } .hero .wrap { max-width: 980px; text-align: center; } .hero .eyebrow { color: var(--tech-aqua); margin-bottom: 0; } .hero h1 { max-width: 920px; margin: 30px auto 0; color: #fff; font-size: clamp(58px,7.3vw,92px); line-height: .98; letter-spacing: -.055em; } .hero .lede { color: rgba(255,255,255,.74); max-width: 760px; margin: 28px auto 0; font-size: 16px; line-height: 1.68; } .hero .doors-cta { margin-top: 32px; } .doors-cta { gap: 14px; } .hero .doors-cta .btn { min-height: 52px; min-width: 0; padding-inline: 23px; } .hero:has(+ .portes) { min-height: 850px; padding-bottom: 0; } .hero:has(+ .portes)::before { content: ""; position: absolute; width: 420px; height: 420px; top: 115px; right: -235px; border: 34px solid rgba(109,226,215,.24); border-radius: 50%; box-shadow: inset 0 0 0 28px rgba(118,87,255,.18), 0 0 80px rgba(118,87,255,.22); transform: rotate(-18deg) scaleX(.7); pointer-events: none; } .hero:has(+ .portes)::after { content: ""; display: block; position: relative; inset: auto; width: min(calc(100% - 116px),980px); aspect-ratio: 1.72; margin: 10px auto -130px; border: 10px solid rgba(255,255,255,.12); border-radius: 28px; background: url("pilot-maquette.jpg") center top / cover no-repeat; box-shadow: 0 38px 100px rgba(0,0,0,.36); opacity: 1; pointer-events: none; } .btn { border-radius: 999px; font-weight: 500; transition: transform .18s ease, box-shadow .18s ease; } .btn-primary { color: #071923; background: var(--gold); box-shadow: none; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,189,85,.28); } .btn-ghost { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--border-warm); } .hero .btn-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,.28); } .porte, .outil, .price-card, .faq-item, .apart, .form-card, .solution-card, .fact, .obj, .deroule-card { border: 1px solid var(--border-warm); border-radius: 24px; box-shadow: var(--shadow-card); } .porte:hover { transform: none; box-shadow: var(--shadow-card); } .porte::before, .outil::before, .price-card::before, .solution-card::before { display: none; } .porte, .outil, .price-card, .solution-card, .fact { background: #fff; } .porte .sur, .price-name, .status { color: var(--navy); } .portes { padding: 138px 0 88px; background: var(--tech-paper); } .portes .shead, .solutions-showcase .shead { max-width: 890px; margin: 0 auto 54px; text-align: center; } .portes .shead h2, .solutions-showcase .shead h2 { max-width: 880px; margin: 20px auto 0; font-size: clamp(43px,5vw,67px); line-height: 1.02; } .portes .shead .lede, .solutions-showcase .shead .lede { max-width: 720px; margin: 22px auto 0; font-size: 15px; line-height: 1.7; } .porte-grid, .solution-grid { gap: 22px; } .porte { min-height: 350px; padding: 34px; overflow: hidden; } .porte:first-child { color: #fff; background: radial-gradient(circle at 90% 10%,rgba(109,226,215,.32),transparent 32%),linear-gradient(145deg,var(--tech-deep-2),var(--tech-violet)); border-color: transparent; } .porte:first-child .sur { color: var(--tech-warm); } .porte:first-child h3 { color: #fff; } .porte:first-child p { color: rgba(255,255,255,.74); } .porte h3 { max-width: 480px; margin: 50px 0 0; font-size: 40px; line-height: 1.05; letter-spacing: -.035em; } .porte p { margin-top: 20px; color: var(--tech-muted); font-size: 14px; line-height: 1.68; } .porte .btn { min-height: 0; align-self: flex-start; margin-top: 24px; padding: 0; border: 0; border-radius: 0; color: var(--tech-violet); background: transparent; box-shadow: none; font-size: 13px; } .porte:first-child .btn { color: var(--tech-warm); } .solutions-showcase { padding: 88px 0; background: #fff; } .solution-card { min-height: 335px; display: flex; flex-direction: column; align-items: flex-start; padding: 34px; background: var(--tech-paper); box-shadow: none; } .solution-card:first-child { background: radial-gradient(circle at 90% 85%,rgba(109,226,215,.22),transparent 36%),var(--tech-paper); } .solution-card .status, .status.available, .status.roadmap { padding: 7px 11px; color: var(--tech-violet); background: rgba(118,87,255,.1); border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .solution-card h3 { margin: 38px 0 0; font-size: 43px; line-height: 1; letter-spacing: -.04em; } .solution-card h4 { margin: 20px 0 13px; color: var(--tech-ink); font-size: 15px; font-weight: 500; } .solution-card p { color: var(--tech-muted); font-size: 13px; line-height: 1.66; } .solution-card .lien-fleche { margin-top: auto; padding-top: 26px; color: var(--tech-violet); font-size: 12px; font-weight: 500; text-decoration: none; } .ent { background: radial-gradient(circle at 100% 0%, rgba(118,87,255,.78), transparent 38%), radial-gradient(circle at 0% 100%, rgba(109,226,215,.24), transparent 40%), var(--navy-deep); } .ent { padding: 100px 0; } .ent h2, .ent .chapeau { color: #fff; } .ent h2 { max-width: 880px; margin-top: 28px; font-size: clamp(50px,7vw,83px); line-height: .98; letter-spacing: -.055em; } .ent .chapeau { max-width: 790px; margin-top: 34px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.72; } .ent .kicker, .vitrine .vit-title { color: var(--tech-aqua); } .ent-pts { gap: 16px; margin-top: 54px; } .ent-pt, .vit-card { min-height: 190px; padding: 26px; border-radius: 18px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); backdrop-filter: blur(12px); } .ent-pt b { margin-bottom: 16px; font-size: 14px; font-weight: 500; } .ent-pt p, .vit-card p { color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.68; } .ent-link { color: var(--tech-aqua); font-weight: 500; } .story { padding: 0; background: var(--tech-paper); } .story > .wrap { padding: 0; } .story-grid { grid-template-columns: .75fr 1.25fr; gap: 0; align-items: stretch; } .story-grid > div:first-child { min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; padding: 62px 48px; background: radial-gradient(circle at 95% 12%,rgba(255,255,255,.56),transparent 34%),linear-gradient(145deg,var(--tech-aqua),#b9efe8); } .story-grid > div:first-child .kicker { color: #163d43; } .story-grid > div:first-child h2 { color: #071923; font-size: clamp(48px,5.5vw,70px); line-height: 1; } .story-grid > .prose { display: flex; flex-direction: column; justify-content: center; padding: 68px 58px; background: #fff; } .story-grid > .prose p { color: var(--tech-ink); font-size: 27px; font-weight: 500; line-height: 1.32; letter-spacing: -.025em; } .story-grid > .prose .lien-fleche { margin-top: 34px; padding: 0; color: var(--tech-violet); font-size: 13px; font-weight: 500; text-decoration: none; } .final { padding: 78px 0; text-align: left; color: #fff; background: radial-gradient(circle at 75% 35%,rgba(109,226,215,.25),transparent 30%),linear-gradient(125deg,#7657ff,#102738); } .final > .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 50px; align-items: end; } .final h2 { color: #fff; } .final h2 { grid-column: 1; max-width: 820px; margin: 0; font-size: clamp(47px,5.8vw,74px); line-height: 1; } .final .lede { grid-column: 1; max-width: 620px; margin: 20px 0 0; font-size: 14px; line-height: 1.7; } .final .final-ctas { grid-column: 2; grid-row: 1 / span 2; min-width: 220px; display: flex; flex-direction: column; gap: 0; } .final .final-ctas .btn { width: 100%; min-height: 52px; border: 1px solid rgba(255,255,255,.32); } .final > .wrap > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; } .final .lede { color: rgba(255,255,255,.72); } .final .btn-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,.32); } .prob, .preuve, .eng, .objections, .solutions-showcase, .feature-section, .foot { background: #fff; } .compo, .surmesure, .ecrire, .formzone, .facon, .story { background: var(--bg-soft); } .compo li { border-left-color: var(--navy); border-radius: 18px; } .compo .num { border-radius: 999px; background: var(--grad-navy); color: #061820; } .form-card { padding: 34px; } .fld input, .fld textarea { border-color: var(--border-warm); border-radius: 14px; background: #fff; } .fld input:focus, .fld textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(118,87,255,.12); } .foot { color: rgba(255,255,255,.72); background: #06141c; } .foot { padding: 52px 0 32px; } .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .foot .fmark { font-size: 18px; font-weight: 500; } .foot h5 { margin-bottom: 16px; color: var(--gold); font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .1em; } .foot .fpos, .foot .faddr, .foot-bottom { color: rgba(255,255,255,.58); } .foot .fpos { font-size: 12px; line-height: 1.75; } .foot li a { color: rgba(255,255,255,.72); font-size: 12px; } .foot-bottom { margin-top: 30px; padding-top: 22px; font-family: "IBM Plex Mono", monospace; font-size: 9px; } .outils-list { gap: 22px; } .outil { padding: 34px; background: var(--tech-paper); box-shadow: none; } .outil:first-child { background: radial-gradient(circle at 90% 85%,rgba(109,226,215,.22),transparent 36%),var(--tech-paper); } .outil h3 { font-size: 43px; font-weight: 500; } .solution-tagline { color: var(--tech-ink); font-weight: 500; } .pr-col p, .outil p, .faq-item p, .obj p, .fact p { color: var(--tech-muted); } .price-card, .faq-item, .apart, .form-card, .obj, .fact { box-shadow: 0 18px 46px rgba(9,30,44,.08); } .price-card::before { display: none; } .price-line .amount { color: var(--tech-ink); font-weight: 500; } .price-name, .lien-discret, .lien-fleche, .apart .mail { color: var(--tech-violet); font-weight: 500; } .faq-group h2 { font-size: 38px; } .faq-item b, .obj b, .fact b, .form-card h3, .apart b { color: var(--tech-ink); font-weight: 500; } .form-card h3 { font-size: 27px; } .fld label { color: var(--tech-ink); font-weight: 500; } .fld input, .fld textarea { border-width: 1px; } .menu-panel { background: var(--tech-paper); } .menu-head .logo { color: var(--tech-ink); font-weight: 500; } .menu-list a { color: var(--tech-ink); font-weight: 500; } .menu-list a.on { color: var(--tech-violet); } .close { color: var(--tech-ink); border-color: var(--tech-line); background: #fff; } .legal-content a { color: var(--tech-violet); } .legal-page .hero { padding-top: 160px; } .nf { margin-top: -90px; padding-top: 200px; background: var(--grad-hero); } .nf h1 { color: #fff; } .nf .lede { color: rgba(255,255,255,.74); } .nf .btn-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,.28); } .nf .lien { color: var(--tech-aqua); } /* Les cinq libellés et les accès restent entiers : à largeur intermédiaire, on emploie le menu existant plutôt que de rogner la navigation. */ @media (max-width: 1100px) { .nav-in { grid-template-columns: minmax(0,1fr) auto; } .nav-links { display: none; } .burger { display: grid; } } @media (max-width: 900px) { .nav-in { grid-template-columns: minmax(0,1fr) auto; } .nav-links { display: none; } .burger { display: grid; } .hero:has(+ .portes) { min-height: 800px; } .solution-grid { grid-template-columns: 1fr; } .solution-card { min-height: 300px; } .story-grid { grid-template-columns: 1fr; } .story-grid > div:first-child { min-height: 300px; } .final > .wrap { grid-template-columns: 1fr; align-items: start; } .final .final-ctas, .final > .wrap > .btn { grid-column: 1; grid-row: auto; margin-top: 34px; } .final .final-ctas { flex-direction: row; flex-wrap: wrap; } .final .final-ctas .btn { width: auto; } .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .wrap { padding-inline: 22px; } section { padding: 54px 0; } .nav { margin: 10px 12px 0; } .nav-in { min-height: 72px; padding: 0; } .nav .logo { padding-inline: 14px; border: 0; } .nav .logo .word { display: none; } .nav-actions > .nav-cta-sm { display: none; } .burger { width: 58px; height: 72px; border: 0; border-left: 1px solid rgba(255,255,255,.16); } .hero { margin-top: -82px; padding: 174px 0 54px; } .nf { margin-top: -82px; padding-top: 174px; } .hero .wrap { text-align: center; } .hero h1 { margin-top: 30px; font-size: 49px; line-height: 1; } .hero .lede { margin: 28px auto 0; font-size: 14px; } .hero .doors-cta { gap: 10px; } .hero .doors-cta .btn { width: 100%; } .hero:has(+ .portes) { min-height: 760px; padding-bottom: 0; } .hero:has(+ .portes)::after { width: calc(100% - 40px); margin-bottom: -70px; border-width: 6px; border-radius: 18px; } .portes { padding-top: 80px; } .portes .shead, .solutions-showcase .shead { margin-bottom: 40px; text-align: center; } .portes .shead h2, .solutions-showcase .shead h2 { font-size: 41px; } .porte-grid, .solution-grid { gap: 14px; } .porte { min-height: 350px; padding: 28px; } .porte h3 { font-size: 40px; } .solution-card { padding: 28px; } .ent { padding: 54px 0; } .ent h2 { font-size: 50px; } .ent-pts { gap: 12px; } .story { padding: 0; } .story-grid > div:first-child, .story-grid > .prose { padding: 52px 22px; } .story-grid > .prose p { font-size: 27px; } .final { padding: 54px 0; } .final .final-ctas { flex-direction: column; } .final .final-ctas .btn { width: 100%; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } .foot-grid > div:last-child { grid-column: 1 / -1; } .outil, .price-card, .solution-card, .form-card { border-radius: 18px; } .foot { padding: 52px 0 30px; } } @media (max-width: 359px) { .wrap { padding-inline: 14px; } .legal-page .hero h1 { font-size: 47px; } } /* Identité visuelle validée — symbole mat aux petites tailles. Le M décoratif reste dans le HTML (aria-hidden) : aucun texte, lien ou comportement n'est modifié. La réserve sous 360 px reste applicable. */ .nav .logo .mark, .menu-head .logo .mark, .foot .fmark .mark { width: 36px; height: 26px; flex: 0 0 36px; background: transparent url("brand/mayna-symbole-mat.svg") center / contain no-repeat; border-radius: 0; box-shadow: none; color: transparent; font-size: 0; } /* ─── MAYN-1184 — pages propres, sorties de leur