/* ========================================================================== Œuvra — Contact · feuille du gabarit templates/page-contact.php (chargée après main.css). 1. Base = handoff/design/css/pages/contact.css, sans ses !important (3 règles, 4 déclarations) : ils ne battaient que les styles inline du prototype (.ct-form padding/gap, bouton margin-top, .ct-links gap), devenus les classes du §2 — la règle Mobile, plus loin dans la feuille à spécificité égale, l'emporte sans !important. 2. Styles inline du prototype (prototype/contact.html) convertis en classes. Colonnes des deux splits (flex, largeur, écart, alignement) limitées à ≥ 1024 : sous 1024, l'empilement de .l-split de main.css (sans !important depuis le nettoyage partagé ; .l-split > * : flex none, width auto) s'applique comme dans le prototype, où site.css l'imposait par !important. « ≥ 1024 » s'écrit `@media not all and (max-width: 1023px)` : complément exact de l'empilement de .l-split (main.css, max-width: 1023px), convention du pied (main.css). Une largeur fractionnaire entre 1023 et 1024 px (zoom du navigateur ou mise à l'échelle Windows à 110 % : fenêtre de 1037 px → 1023,64 px) ne satisfait ni (max-width: 1023px) ni (min-width: 1024px) : avec cette dernière, les splits y passaient en ligne sans écart (texte 333 | formulaire 562,5 ; Support 265,6 | 560, titre collé au paragraphe). Au prototype, les colonnes sont des styles inline, sans requête : même rendu qu'à 1024 (418 | 418, écart 6,667 %). 3. Formulaire de production (composants.md §7) : composants du DS (.oe-field, .oe-input, .oe-textarea, .oe-check__box, .oe-notice — ds-oeuvra-bundle.css, non modifié) ramenés aux dimensions du prototype ; états du DS (survol, focus, erreur, coché, désactivé) conservés tels quels. Composants partagés utilisés (main.css) : .c-hero, .l-split (empilé < 1024, sans !important dans main.css), .l-section--surface, .c-arrow, .oe-kicker, .t-*, .u-block, retour de clic [data-ripple] (M07). Aucune animation propre à la page (motion-spec.md : M07, M08, M09 seulement, déjà dans main.css et le DS). ========================================================================== */ /* ---------- 1. contact.css du handoff (sans !important) ---------- */ /* flex: 1 1 auto du handoff limité à ≥ 1024 (bloc Hero du §2) : sous 1024, flex: none de .l-split > * (main.css). */ .ct-form { min-width: 0; } .ct-form__row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* ---------- 2. Styles inline du prototype convertis ---------- */ /* Hero : .l-split style="display: flex; align-items: flex-start; gap: 6.667%" (sous 1024 : .l-split de main.css). Colonne texte : style="flex: 0 0 auto; width: 46.667%; display: flex; flex-direction: column; gap: 20px; padding-top: 24px" */ @media not all and (max-width: 1023px) { .ct-hero__split { align-items: flex-start; gap: 6.667%; } .ct-hero__text { flex: 0 0 auto; width: 46.667%; } .ct-form { flex: 1 1 auto; } } .ct-hero__text { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; } /* Chapô : style="margin: 8px 0 0; max-width: 520px" (0,1,0 après .t-lead-hero de main.css). */ .ct-hero__lead { margin: 8px 0 0; max-width: 520px; } /* Liens-flèches : style="display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 8px" */ .ct-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 8px; } /* Formulaire : style="box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface)" */ .ct-form { box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: var(--radius-xl); border: 1px solid var(--border-100); background: var(--bg-surface); } /* Bouton :
*/ .ct-form__actions { margin-top: 4px; } /* du prototype →