/* /Contact/contact.css — PAGE CONTACT [19/09/2026 : theme sombre / clair] /////////////////////////////////////////////////// Le SOMBRE est ecrit ici : la carte est le meme verre fume que les fenetres d'authentification (modal_login.css : #3d3d3da3, filet blanc a 9 %, champs noirs a 24 %, texte blanc). Le CLAIR vit dans /Theme/theme-contact.css, chargee apres cette feuille : il redefinit les variables --ct-* sous [data-theme="light"] et retrouve la carte blanche d'origine. Les variables portent le prefixe --ct- : theme.css pose deja --bg et --text sur :root, et cette feuille les ecrasait (--bg) ou les laissait passer (--text, jamais defini ici) — d'ou un texte blanc sur une carte blanche en sombre. Le papier peint vient de /Theme/ (wall-min.webp sombre, wall-min-clair.webp clair), comme sur l'accueil. //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* LE PAPIER PEINT MONTE JUSQU'EN HAUT [19/09]. #body commence sous la barre (shared.css : top 6 %) : l'image posee sur .classic partait donc sous le header, alors que sur l'accueil #wallp la fait passer derriere (home.css). Ici elle est portee par , fixe a l'ecran (background-attachment), avec le cadrage de l'accueil ; .classic devient transparent. Sur telephone, ou la barre est masquee et #body cale en haut, les blocs mobiles remettent l'image sur .classic. */ body{ background-image: url("/Theme/wall-min.webp"); background-position: 100% 57%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} #body.classic{ background: transparent;} /* #body.classic, pas .classic : shared.css pose #333333 sur #body, plus fort qu'une classe */ :root{ --ct-bg: #181818; --ct-card: #3d3d3da3; --ct-card-border: rgba(255, 255, 255, 0.09); --ct-text: #ffffff; --ct-muted: rgba(255,255,255,.62); --ct-placeholder: #878787; --ct-field-bg: rgb(0 0 0 / 24%); --ct-field-bg-hover: rgb(0 0 0 / 34%); --ct-field-border: rgba(255,255,255,0.10); --ct-field-border-focus: rgba(255,255,255,0.30); --ct-field-ring: rgba(255,255,255,0.05); --ct-wave: 255,255,255; /* teinte de la vague decorative de la carte (rgb sans parentheses) */ --ct-wave-a: 0.05; /* et son opacite de base */ --ct-close-bg: rgba(255,255,255,0.10); --ct-close-bg-hover: rgba(255,255,255,0.18); --ct-close-text: #dddddd; --ct-status: rgba(255,255,255,.75); --ct-ok: #7fd39a; --ct-err: #ff8a8a; --ct-err-ring: rgba(255, 138, 138, 0.14); --ct-scroll: rgba(255,255,255,0.25); --ct-scroll-hover: rgba(255,255,255,0.40); --ct-progress-bg: rgba(255,255,255,0.14); --ct-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 1px 0 rgba(0,0,0,0.30), 0 40px 80px rgba(0,0,0,0.55), 0 12px 28px rgba(0,0,0,0.35); --ct-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.30); --radius: 34px; --radius-field: 10px; --btn: #4b6e79; --btn-hover: #3f5f69; --btn-text: #ffffff;} /* *{ box-sizing: border-box;} */ body{ box-sizing: border-box; margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--ct-text); background-color: var(--ct-bg); padding: 20px;} /* conteneur */ .wrap{ width: 100%; display: flex; justify-content: center;} /* carte modal */ .card{ width: 100%; max-width: 500px; /* ⭐ taille de la modale */ height: 620px; /* ⭐ hauteur fixe : la modale ne bouge plus */ margin-top: 60px; border-radius: 12px; padding: 18px 18px 8px 18px; background: var(--ct-card); border: 1px solid var(--ct-card-border); box-shadow: var(--ct-shadow); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column;} /* Effet vague décorative */ .card::after{ content:""; position:absolute; inset:auto -10% -30% -10%; height: 55%; background: radial-gradient(60% 70% at 25% 30%, rgba(var(--ct-wave), calc(var(--ct-wave-a) * 2)), transparent 60%), radial-gradient(55% 70% at 70% 50%, rgba(var(--ct-wave), calc(var(--ct-wave-a) * 1.6)), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(var(--ct-wave), var(--ct-wave-a)) 70%, rgba(var(--ct-wave), calc(var(--ct-wave-a) * 1.8)) 100%); transform: skewY(-2deg); pointer-events:none;} .card{ position: relative;} /* bouton fermer */ .close-btn{ font-size: 18px; position: absolute; top: 14px; right: 12px; width: 50px; height: 35px; border: none; border-radius: 8px; background: var(--ct-close-bg); color: var(--ct-close-text); font-weight: bold; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-family: Arial, Helvetica, sans-serif;} .close-btn:hover{ background: var(--ct-close-bg-hover);/* transform: rotate(90deg);*/} h2{ margin-top: 0px; margin-bottom: 2px;} .sub{ margin: 0 0 12px; color: var(--ct-muted); font-size: 17px;} #contactForm{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; flex: 1; /* prend toute la hauteur dispo de la card */ min-height: 0; /* indispensable pour que flex: 1 sur les enfants fonctionne */ margin-bottom: 4;} /* La field du message s'étire pour absorber l'espace restant */ #contactForm .field-message{ flex: 1; min-height: 0; display: flex; flex-direction: column;} #contactForm .field-message #messageLinkError{ flex-shrink: 0;} /* Tous les autres éléments gardent leur taille naturelle */ #contactForm .field:not(.field-message), #contactForm .actions, #contactForm .upload-progress, #contactForm #formStatus{ flex-shrink: 0;} #formStatus{ margin:0;} .field{ display: grid; gap: 8px;} label{ font-size: 14px; color: var(--ct-muted);} input, #message{ width: 100%; box-sizing: border-box; /* [19/09] width: 100% + padding 10 px + bordure debordaient du remplissage droit de la carte */ border-radius: var(--radius-field); border: 1px solid var(--ct-field-border); background: var(--ct-field-bg); padding: 10px 10px; font-size: 16px; color: var(--ct-text); outline: none; transition: border-color .2s ease, box-shadow .2s ease;} input::placeholder, #message::placeholder{ color: var(--ct-placeholder);} input:focus, #message:focus{ border-color: var(--ct-field-border-focus); box-shadow: 0 0 0 4px var(--ct-field-ring);} #message{ height: 100%; min-height: 110px; /* hauteur min même avec 3 images */ flex: 1; overflow-y: auto; overflow-x: hidden; resize: none;} .actions{ display: flex; justify-content: flex-end; padding-top: 10px;} button{ width: 100%; box-sizing: border-box; border: none; cursor: pointer; border-radius: 10px; padding: 12px 28px; font-size: 18px; font-weight: 700; color: var(--btn-text); background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%), var(--btn); box-shadow: var(--ct-shadow-soft); transition: transform .12s ease, background-color .2s ease;} button:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%), var(--btn-hover);} button:active{ transform: translateY(1px);} .form-status{ margin: 8px 0 0; font-size: 14px; color: var(--ct-status); } .form-status.ok{ color: var(--ct-ok); } .form-status.err{ color: var(--ct-err); } /* ----- Erreur de champ (ex: lien dans le message) ----- */ .field-error{ margin: 4px 2px 0; font-size: 13px; color: var(--ct-err); font-weight: 500;} #message.has-error{ border-color: var(--ct-err); box-shadow: 0 0 0 4px var(--ct-err-ring);} /* ----- Pièces jointes ----- */ .attach-field{ gap: 6px;} .btn-attach{ display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--ct-text); background: var(--ct-field-bg); border: 1px dashed var(--ct-field-border); border-radius: var(--radius-field); cursor: pointer; box-shadow: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease;} .btn-attach:hover{ border-color: var(--ct-field-border-focus); background: var(--ct-field-bg-hover); color: var(--ct-text);} .btn-attach svg{ flex-shrink: 0;} .attach-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 132px; /* ~3 items visibles, le reste scrolle */ overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; /* petit espace pour la scrollbar */} .attach-list:empty{ display: none;} /* Scrollbar discrète (WebKit) */ .attach-list::-webkit-scrollbar{ width: 6px;} .attach-list::-webkit-scrollbar-track{ background: transparent;} .attach-list::-webkit-scrollbar-thumb{ background: var(--ct-scroll); border-radius: 3px;} .attach-list::-webkit-scrollbar-thumb:hover{ background: var(--ct-scroll-hover);} /* Scrollbar discrète (Firefox) */ .attach-list{ scrollbar-width: thin; scrollbar-color: var(--ct-scroll) transparent;} .attach-item{ display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--ct-field-bg); border: 1px solid var(--ct-field-border); border-radius: 8px; font-size: 13px; color: var(--ct-text); flex-shrink: 0;} .attach-item .attach-thumb{ width: 32px; height: 32px; object-fit: cover; border-radius: 4px; background: #333; flex: 0 0 auto;} .attach-item .attach-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .attach-item .attach-size{ color: var(--ct-muted); font-size: 12px; flex-shrink: 0;} .attach-item .attach-remove{ width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: var(--ct-close-bg); color: var(--ct-muted); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: none;} .attach-item .attach-remove:hover{ background: var(--ct-err-ring); color: var(--ct-err);} /* MOBILES en mode portrait */ @media (max-width: 600px) and (orientation: portrait) { header, footer{ display: none;} #body{ top: 0; min-height: 100%; overflow-x: auto; overflow-y: hidden;} body{ background-image: none;} .classic{ background-image: url("/Theme/wall-min.webp"); background-position: 630% 0%; background-size: 200% 120%; background-repeat: repeat;} .grid-menu{ grid-template-columns: 100%; text-align: center;} /* carte modal */ .card{ width: 100%; max-width: 340px; /* ⭐ taille de la modale */ /*height: 580px; /* ⭐ hauteur fixe (un peu plus courte sur mobile) */ margin-top: 40px; border-radius: 12px; padding: 10px; background: var(--ct-card); border: 1px solid var(--ct-card-border); box-shadow: var(--ct-shadow); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column;} } /* MOBILES en mode paysage */ @media (max-width: 1000px) and (orientation: landscape) { header, footer{ display: none;} #body{ top: 0; min-height: 800px; overflow-x: auto; overflow-y: hidden;} body{ background-image: none;} .classic{ background-image: url("/Theme/wall-min.webp"); background-position: 630% 0%; background-size: 200% 120%; background-repeat: repeat;} .grid-menu{ grid-template-columns: 100%; text-align: center;} /* carte modal */ .card{ width: 100%; max-width: 480px; /* ⭐ taille de la modale */ /*height: 620px; /* ⭐ hauteur fixe */ margin-top: 40px; border-radius: 12px; padding: 24px; background: var(--ct-card); border: 1px solid var(--ct-card-border); box-shadow: var(--ct-shadow); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column;} } /* ----- Barre de progression d'envoi ----- */ .upload-progress{ width: 100%; height: 6px; background: var(--ct-progress-bg); border-radius: 3px; overflow: hidden; margin: 4px 0 0 0; flex-shrink: 0;} .upload-progress-bar{ width: 0%; height: 100%; background: var(--btn); border-radius: 3px; transition: width 0.18s ease-out;} /* ----- Spinner dans le bouton "Envoyer" ----- */ #sendBtn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px;} .btn-spinner{ display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff; border-radius: 50%; animation: btn-spin 0.7s linear infinite;} #sendBtn.is-sending .btn-spinner{ display: inline-block;} #sendBtn.is-sending{ opacity: 0.85; cursor: progress;} @keyframes btn-spin{ to{ transform: rotate(360deg); }}