/* ============================================================ TREGUSTO CENTRAL — Choix de profil & Connexion Mobile-first : mobile < 768px | tablette 768–1179px | desktop ≥ 1180px ============================================================ */ :root { --bordeaux: #6C0A0E; --bordeaux-dark: #5C070A; --bordeaux-hover: #7E1116; --ink: #2B2A29; --gray: #6B6660; --gray-light: #9A948C; --cream: #F3F0EA; --card-radius: 14px; --shadow-card: 0 4px 14px rgba(60, 20, 15, 0.10), 0 1px 3px rgba(60, 20, 15, 0.06); --shadow-card-active: 0 8px 22px rgba(92, 7, 10, 0.30); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* Empêche la propagation du fond de au canvas : le fond doit se dimensionner sur la hauteur réelle du , pas sur celle de . */ html { background-color: var(--cream); } /* App mobile : pas de zoom au double-tap, pas de défilement horizontal */ html { touch-action: manipulation; } html, body { overflow-x: clip; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); background-color: var(--cream); background-image: url('../assets/fond-mobile.png'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ---------- Header desktop (masqué mobile/tablette) ---------- */ .app-header { display: none; } /* ---------- Footer desktop (masqué mobile/tablette) ---------- */ .app-footer { display: none; } /* ---------- Main ---------- */ .app-main { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; } .content { width: 100%; max-width: 420px; padding: 28px 24px 0; display: flex; flex-direction: column; align-items: center; } /* ---------- Logo ---------- */ .brand-logo { width: 210px; max-width: 62%; height: auto; margin-top: 26px; } /* ---------- Titres (choix profil) ---------- */ .welcome-title { margin-top: 26px; font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink); } .welcome-sub { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.45; color: #4E4943; text-align: center; } /* ---------- Cartes profil ---------- */ .profils { width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .profil-card { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow-card); padding: 13px 46px 13px 16px; text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .profil-card__icon { display: inline-flex; width: 26px; height: 26px; color: var(--bordeaux); flex-shrink: 0; } .profil-card__icon svg { width: 100%; height: 100%; } .profil-card__label { font-size: 14.5px; font-weight: 700; } .profil-card__chev { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: inline-flex; width: 16px; height: 16px; color: var(--bordeaux); } .profil-card__chev svg { width: 100%; height: 100%; } .profil-card.is-active, .profil-card:hover, .profil-card:focus-visible { background: var(--bordeaux); color: #fff; box-shadow: var(--shadow-card-active); } .profil-card.is-active .profil-card__icon, .profil-card:hover .profil-card__icon, .profil-card:focus-visible .profil-card__icon, .profil-card.is-active .profil-card__chev, .profil-card:hover .profil-card__chev, .profil-card:focus-visible .profil-card__chev { color: #fff; } .profil-card:hover { transform: translateY(-1px); } .profil-card:focus-visible { outline: 2px solid var(--bordeaux-dark); outline-offset: 2px; } /* ============================================================ PAGE CONNEXION ============================================================ */ .back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; color: var(--bordeaux); text-decoration: none; font-size: 13.5px; font-weight: 700; } .back-link svg { width: 15px; height: 15px; } .back-link:hover { text-decoration: underline; } .brand-logo--login { width: 170px; margin-top: 16px; } .profil-badge { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--bordeaux); color: #fff; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px; box-shadow: 0 3px 10px rgba(92, 7, 10, 0.25); } .profil-badge__icon { display: inline-flex; width: 17px; height: 17px; } .profil-badge__icon svg { width: 100%; height: 100%; } .login-title { margin-top: 18px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-align: center; } .login-sub { margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--gray); text-align: center; } /* ---------- Formulaire ---------- */ .login-form { width: 100%; margin-top: 18px; display: flex; flex-direction: column; align-items: center; } .field { position: relative; width: 100%; display: flex; align-items: center; background: #fff; border: 1px solid #E4E0D8; border-radius: 12px; box-shadow: 0 2px 8px rgba(60, 20, 15, 0.06); margin-bottom: 13px; transition: border-color .15s ease, box-shadow .15s ease; } .field:focus-within { border-color: var(--bordeaux); box-shadow: 0 2px 10px rgba(92, 7, 10, 0.12); } .field__icon { display: inline-flex; width: 19px; height: 19px; margin-left: 16px; color: var(--ink); flex-shrink: 0; } .field__icon svg { width: 100%; height: 100%; } .field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; /* 16px minimum : en dessous, iOS zoome sur le champ au focus */ font-size: 16px; color: var(--ink); padding: 14px; } .field input::placeholder { color: var(--gray-light); } .field__eye { display: inline-flex; width: 20px; height: 20px; margin-right: 16px; border: none; background: none; cursor: pointer; color: var(--ink); flex-shrink: 0; padding: 0; } .field__eye svg { width: 100%; height: 100%; } .btn-primary { width: 100%; margin-top: 6px; background: var(--bordeaux); color: #fff; border: none; border-radius: 12px; padding: 16px; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(92, 7, 10, 0.28); transition: background-color .15s ease, transform .15s ease; } .btn-primary:hover { background: var(--bordeaux-hover); } .btn-primary:active { transform: scale(0.99); } .login-error { margin-top: 16px; color: var(--bordeaux); font-size: 13px; font-weight: 600; text-align: center; } /* Mobile : la maquette repose sur un canevas plus haut que les petits écrans — on laisse le décor (sandwich + tagline) dépasser sous le pli pour que le formulaire reste entièrement sur la zone crème. */ @media (max-width: 767px) { body.page-login, body.page-profils { min-height: 980px; } /* Sur mobile le bas de page est rouge : un liseré clair garde les éléments bordeaux lisibles même quand ils passent sur le fond rouge. */ .profil-card.is-active, .profil-card:hover, .profil-card:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), var(--shadow-card-active); } .btn-primary { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(92, 7, 10, 0.28); } } /* Tablette portrait : le canevas suit le ratio 3:4 du fond (h = 4/3 × largeur) */ @media (min-width: 768px) and (max-width: 1179px) and (orientation: portrait) { body.page-login { min-height: 133vw; } } /* ============================================================ TABLETTE (≥ 768px) ============================================================ */ @media (min-width: 768px) { body { background-image: url('../assets/fond-tablette.png'); } .content { max-width: 640px; padding: 40px 40px 0; } .brand-logo { width: 300px; margin-top: 40px; } .welcome-title { margin-top: 34px; font-size: 28px; } .welcome-sub { font-size: 15px; } /* Grille 2×2 */ .profils { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 560px; } .profil-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 48px 18px 20px; border-radius: 16px; } .profil-card__icon { width: 34px; height: 34px; } .profil-card__label { font-size: 15px; } .profil-card__chev { right: 18px; } /* Connexion */ .brand-logo--login { width: 230px; margin-top: 36px; } .login-title { font-size: 26px; } .login-form { max-width: 420px; } } /* ============================================================ DESKTOP (≥ 1180px) ============================================================ */ @media (min-width: 1180px) { body { background-image: none; background-color: var(--cream); } /* ---------- Header ---------- */ .app-header { display: flex; align-items: center; justify-content: space-between; background: var(--bordeaux-dark); padding: 0 36px; height: 68px; flex-shrink: 0; } .app-header__logo { height: 42px; width: auto; } .lang-switch { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; padding: 8px; border-radius: 8px; transition: background-color .15s ease; } .lang-switch:hover { background: rgba(255, 255, 255, 0.08); } .lang-switch__globe { width: 19px; height: 19px; } .lang-switch__chev { width: 13px; height: 13px; } /* ---------- Main : fond desktop ---------- */ .app-main { background-image: url('../assets/fond-desktop.png'); background-size: cover; background-position: center; background-repeat: no-repeat; align-items: flex-start; justify-content: center; overflow: hidden; } .content { max-width: 620px; margin-left: 5vw; padding: 34px 40px 40px; align-items: center; } .brand-logo { width: 330px; margin-top: 12px; } .welcome-title { margin-top: 30px; font-size: 30px; } .welcome-sub { font-size: 15px; } .profils { margin-top: 28px; gap: 20px; max-width: 540px; } /* Connexion desktop */ .back-link { font-size: 14px; } .brand-logo--login { width: 235px; margin-top: 26px; } .login-title { font-size: 27px; } .login-form { max-width: 400px; } /* ---------- Footer ---------- */ .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; padding: 22px 56px; flex-shrink: 0; } .feature { display: flex; align-items: center; gap: 13px; } .feature__icon { display: inline-flex; width: 34px; height: 34px; color: var(--bordeaux); flex-shrink: 0; } .feature__icon svg { width: 100%; height: 100%; } .feature__txt { display: flex; flex-direction: column; gap: 3px; } .feature__txt strong { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: var(--ink); } .feature__txt span { font-size: 11.5px; color: var(--gray); } } /* Écrans desktop très larges : centre le contenu un peu plus */ @media (min-width: 1600px) { .content { margin-left: 8vw; } } /* Accès direct de démonstration (temporaire, retiré à la mise en production) */ .demo-access { position: absolute; top: 20px; right: 20px; z-index: 10; background: #fff; border: 1px solid #DAD5CC; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--bordeaux); text-decoration: none; box-shadow: 0 2px 8px rgba(60, 20, 15, 0.08); } .demo-access:hover { background: #FBF1F1; } @media (min-width: 1180px) { .demo-access { top: 84px; right: 28px; } }