/* public/contact-une-vue.css — PRO-10 « Contact en une vue ». * * CE QUE CETTE FEUILLE EST. Elle joue pour le SITE PUBLIC le rôle que `public/cockpit/retouches.css` joue * pour le cockpit : elle appartient à Code, elle est ADDITIVE, et elle est chargée APRÈS `style.css`, qui * n'est pas touché d'une ligne. Les autres pages du site (accueil, agents-ia, applications-web, formations, * suivi, mentions légales, désinscription) ne la chargent pas et ne changent pas. * * D'OÙ VIENT CE QU'ELLE CONTIENT. De `design/maquettes/contact-une-vue.html`, la maquette de Chat versée au * §1 (sha256 d5a358ff…b13c). Mise en page, tailles et comportement en viennent. Les COULEURS, elles, sont * celles de la maison : la maquette porte sa propre palette (`--vert:#0f7b6c`), le site a la sienne * (`--acc:#0e7c7b` dans style.css:4). On garde celle du site — une page qui vit entre l'en-tête et le pied * du site doit être de la couleur du site. Le rouge, lui, est le MÊME des deux côtés : la maquette dit * `--rouge:#c0392b`, style.css:5 dit `--bad:#c0392b`. Aucun choix à faire. * * LA LOI DU LOT, en une phrase : le bouton « Envoyer mon message » est ENTIÈREMENT dans la vue, sans * défilement, sur téléphone comme sur PC. Tout ce qui suit sert cela. */ body[data-page="contact"] { /* la hauteur de la barre du site, mesurée dans style.css:19 (.nav{height:62px}) et non supposée. C'est la seule chose que la page doit savoir de l'en-tête ; le reste appartient à site.js. */ --haut-barre: 62px; --trait-c: var(--line); --rouge-c: var(--bad); } /* --------------------------------------------------------------------------- 1. LA VUE. `main` occupe ce qui reste sous la barre, et la carte s'y centre. Le pied de page du site reste EN DESSOUS, atteignable en défilant : le lot demande que le BOUTON soit dans la vue, pas que le pied disparaisse. --------------------------------------------------------------------------- */ body[data-page="contact"] main.contact-vue { min-height: calc(100svh - var(--haut-barre)); display: flex; flex-direction: column; align-items: center; padding: clamp(10px, 2vh, 28px) clamp(12px, 3vw, 32px); } /* `margin-block:auto` et non `justify-content:center` : le centrage par la marge automatique est le seul qui ne coupe JAMAIS le haut de la carte quand elle est plus grande que la place disponible. Avec `justify-content:center`, un écran très bas rend le début du formulaire inatteignable, vers le haut, là où aucune barre de défilement ne va. */ body[data-page="contact"] .carte { margin-block: auto; width: 100%; max-width: 760px; background: var(--card); border: 1px solid var(--trait-c); border-radius: 16px; padding: clamp(16px, 2.6vh, 28px) clamp(16px, 3vw, 32px); display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); /* sur PC la carte ne dépasse jamais la vue : c'est ce qui permet au message d'absorber la place libre sans jamais pousser le bouton dehors. Sur téléphone cette limite est retirée (§4). */ max-height: calc(100svh - var(--haut-barre) - 2 * clamp(10px, 2vh, 28px)); } body[data-page="contact"] .carte h1 { font-size: clamp(22px, 2.8vh, 30px); line-height: 1.15; letter-spacing: -.01em; font-weight: 800; } body[data-page="contact"] .carte p.sous { color: var(--mut); font-size: clamp(14px, 1.8vh, 16px); line-height: 1.4; } /* --------------------------------------------------------------------------- 2. LE FORMULAIRE. Deux colonnes AUX DEUX TAILLES (c'est ce qui fait tenir la page en une vue sur téléphone : quatre champs sur deux rangées, pas quatre). --------------------------------------------------------------------------- */ body[data-page="contact"] #f { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 12px); flex: 1 1 auto; min-height: 0; } /* `minmax(0, 1fr)` et non `1fr`, et `min-width:0` sur les champs. Un `` porte une largeur INTRINSÈQUE (son attribut `size`, 20 caractères par défaut) ; une piste `1fr` vaut `minmax(auto, 1fr)` et son minimum `auto` est le min-content, donc elle refuserait de descendre sous cette largeur. Ces deux règles sont JUSTES EN ELLES-MÊMES et elles restent. CE QU'ELLES NE FONT PAS, et le PRO-10 l'avait écrit ici à tort : elles ne sont pas la cause du « 451 px ». La mesure du PRO-10-B l'a réfutée par l'arithmétique — un minimum dû aux champs serait le MÊME à toute largeur d'écran, or le débordement valait 451 sur un écran de 390 et 436 sur un écran de 375, soit toujours « l'écran + 61 ». La vraie cause était la case à cocher habillée en champ de texte, nommée et corrigée plus bas au bloc des champs. Une cause écrite au jugé dans une feuille coûte cinq pistes essayées pour rien : celle-ci reste écrite, barrée, pour que personne ne la reprenne. */ body[data-page="contact"] .deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } body[data-page="contact"] .champ { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; } body[data-page="contact"] #f input, body[data-page="contact"] #f textarea { min-width: 0; } body[data-page="contact"] .champ.grand { flex: 1 1 auto; } body[data-page="contact"] .champ label { font-size: 14px; font-weight: 600; color: #374151; margin: 0; line-height: 1.3; } body[data-page="contact"] .champ label span { font-weight: 400; color: var(--mut); } /* 16 px est un PLANCHER, pas un goût : sous 16 px, iOS Safari grossit la page dès qu'un champ prend le focus, et ne la redescend pas. La page tiendrait en une vue jusqu'au premier clic, et plus après. * * PRO-10-B — POURQUOI `:not([type="checkbox"])` EST ICI, ET CE QU'IL RÉPARE. Ce bloc habille un CHAMP DE * TEXTE : bordure, coins arrondis, 12 px de gouttière, 44 px de haut, et `width:100%`. Écrit * `#f input`, il attrapait AUSSI la case à cocher du consentement — et il gagnait : la maquette * distingue les deux par `input` (0,0,1) contre `.accord input` (0,1,1), mais cette feuille avait * réécrit `input` en `#f input`, et un IDENTIFIANT (1,1,2) passe devant une classe (0,2,2). * Mesuré sur la preview le 13/09 au protocole DevTools : `#accord input` rendait * `width: 460.516px ; height: 44px` au lieu de 18 × 18. Avec `flex: 0 0 auto` elle ne se rétractait * pas : elle prenait TOUTE la rangée, le `` du texte tombait à 0 px de large, et son texte * débordait vers la droite de la largeur de son plus long mot — « informations », 78,16 px. * à 390 px : bord gauche du span 373 + 78,16 = 451,16 → scrollWidth 451 (mesuré) * à 375 px : bord gauche du span 358 + 78,16 = 436,16 → scrollWidth 436 (mesuré) * C'est le « 451 » resté ouvert au §5 bis du PRO-10, et ce n'est PAS la largeur intrinsèque des champs : * un minimum dû aux champs serait le MÊME à toute largeur d'écran ; celui-ci vaut toujours * « largeur de l'écran + 61 ». Aucun élément ne « dépassait » au sens des rectangles — c'est du TEXTE qui * déborde d'une boîte de 0 px, et un balayage de `getBoundingClientRect()` ne peut pas le voir. Voilà * pourquoi cinq pistes ont été essayées sans rien réparer. */ body[data-page="contact"] #f input:not([type="checkbox"]), body[data-page="contact"] #f textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--trait-c); border-radius: 10px; padding: 0 12px; height: 44px; width: 100%; outline: none; transition: border-color .12s, box-shadow .12s; } body[data-page="contact"] #f textarea { height: auto; flex: 1 1 auto; min-height: 72px; padding: 10px 12px; resize: none; line-height: 1.35; } body[data-page="contact"] #f input:not([type="checkbox"]):focus, body[data-page="contact"] #f textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none; } body[data-page="contact"] .champ.faux input, body[data-page="contact"] .champ.faux textarea { border-color: var(--rouge-c); } /* --------------------------------------------------------------------------- 3. LES ERREURS. 16 px, rouge de refus, NON italiques — le style d'un refus, jamais celui d'une donnée absente (leçon mesurée du PRO-06-G). Elles sont POSÉES PAR LA COUPE, vides au chargement : un élément créé à la volée au moment du refus n'est mesurable par personne. --------------------------------------------------------------------------- */ body[data-page="contact"] .erreur { display: none; font-size: 16px; color: var(--rouge-c); font-style: normal; line-height: 1.3; } body[data-page="contact"] .champ.faux > .erreur, body[data-page="contact"] .accord.faux .erreur { display: block; } /* --------------------------------------------------------------------------- 4. LE PIED DE LA CARTE : la case et le bouton. Sur PC ils partagent une rangée. Sur téléphone ils s'empilent (§5). --------------------------------------------------------------------------- */ body[data-page="contact"] .pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* `align-items: flex-start` est celui de la maquette, et il redevient tenable maintenant que le texte se replie : la case se pose en face de la PREMIÈRE LIGNE. Centrer une case sur un texte de trois lignes la met en face du milieu d'une phrase, ce que personne n'écrit à la main. */ body[data-page="contact"] .accord { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--mut); flex: 1 1 320px; cursor: pointer; line-height: 1.35; } /* `min-width:0` reste : sans lui, un élément de flex refuse de descendre sous son min-content. Il ne suffisait pas — il autorise le repli, il ne le PROVOQUE pas, et le texte n'avait ici aucune place à se replier puisque la case lui prenait toute la rangée. La cause était au-dessus. */ body[data-page="contact"] .accord { min-width: 0; } /* le texte prend la place qui reste, et il se replie : c'est ce que dit la maquette. */ body[data-page="contact"] .accord > span { flex: 1 1 auto; min-width: 0; white-space: normal; } /* `#f` dans le sélecteur n'est PAS un ornement : il porte la règle à (1,2,2), au-dessus du bloc des champs de texte à (1,1,2). Avec l'exclusion posée plus haut, deux verrous plutôt qu'un — parce que c'est exactement ce verrou-là qui a manqué, et qu'une case à cocher de 460 px doit devenir impossible, pas seulement improbable. `margin-top:1px` est celui de la maquette : il pose la case sur la ligne de base du texte plutôt que sur le haut de sa boîte. */ body[data-page="contact"] #f .accord input { width: 18px; height: 18px; min-width: 18px; flex: 0 0 auto; accent-color: var(--acc); margin: 1px 0 0; } body[data-page="contact"] button.envoyer { font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--acc); border: 0; border-radius: 10px; height: 46px; padding: 0 26px; cursor: pointer; flex: 0 0 auto; transition: filter .15s; } body[data-page="contact"] button.envoyer:hover { filter: brightness(1.07); } body[data-page="contact"] button.envoyer:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 2px; } body[data-page="contact"] button.envoyer[disabled] { opacity: .6; cursor: default; } body[data-page="contact"] .rien { font-size: 13px; color: var(--mut); margin: 0; line-height: 1.35; } /* le succès REMPLACE le formulaire dans la carte, sans rechargement */ body[data-page="contact"] .merci { display: none; text-align: center; padding: 24px 0; } body[data-page="contact"] .merci b { display: block; font-size: 22px; margin-bottom: 8px; } body[data-page="contact"] .carte.envoye #f, body[data-page="contact"] .carte.envoye p.sous { display: none; } body[data-page="contact"] .carte.envoye .merci { display: block; } /* --------------------------------------------------------------------------- LOT-PRO-20-O §2 — « RETOUR AU SITE », LE MÊME BOUTON QUE « FERMER » DU PORTIER. Valeurs recopiées de `#portier-panneau .pt-s` (public/portier.js l.320) : fond transparent, trait #c9c2b2, coins ronds, 44 px de haut minimum — la hauteur d'un doigt. Recopiées et non partagées : le style du Portier vit dans son propre JavaScript, qu'une page publique ne charge pas comme une feuille. `margin-top` de 18 px : la carte de réussite respire, le bouton ne colle pas à la phrase. Centré par le `text-align: center` de `.merci`, comme le reste. --------------------------------------------------------------------------- */ body[data-page="contact"] .merci .retour { /* SUR SA PROPRE LIGNE, ET C EST UNE MESURE, PAS UN GOUT. Premiere version : display:inline-block. Vu dans Chrome sur la preview 1efd8e89 le 17/09 a 20 h 53 - la phrase << On vous repond en direct, sur l adresse que vous avez donnee. >> n est pas dans un bloc (c est un noeud de texte nu, apres le de la maquette) : le bouton se collait donc A LA SUITE de la phrase, sur la meme ligne, comme s il en etait la fin. Un bouton pose au bout d une phrase ne se lit pas comme une sortie. display:block et des marges automatiques : il descend sous la phrase et se centre avec elle. */ display: block; margin: 18px auto 0; background: none; border: 1px solid #c9c2b2; border-radius: 999px; padding: 10px 18px; min-height: 44px; font: inherit; font-size: 16px; color: #3a372f; cursor: pointer; transition: background-color .15s; } body[data-page="contact"] .merci .retour:hover { background: #f4f1ea; } body[data-page="contact"] .merci .retour:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 2px; } /* le libellé court du téléphone n'existe qu'au téléphone (§5) */ body[data-page="contact"] .sur-telephone { display: none; } /* le pied de page du site n'a pas à s'écarter de la carte : il est déjà sous la vue */ body[data-page="contact"] footer.site { margin-top: 0; } /* --------------------------------------------------------------------------- 5. TÉLÉPHONE (≤ 640 px). DEUX LOIS, et elles sont l'inverse de celles du PC. a) LA CARTE A SA HAUTEUR NATURELLE, jamais étirée à l'écran : `max-height` retiré. Une carte étirée sur un téléphone étire aussi ses creux, et la page se met à ressembler à un formulaire vide. b) LA ZONE DE MESSAGE EST FIXÉE À 84 px : elle n'absorbe plus rien. C'est elle qui, en absorbant, poussait le bouton hors de la vue. --------------------------------------------------------------------------- */ @media (max-width: 640px) { body[data-page="contact"] { --haut-barre: 62px; } body[data-page="contact"] main.contact-vue { padding: 8px 10px; } body[data-page="contact"] .carte { max-height: none; /* (a) hauteur naturelle */ border-radius: 12px; padding: 14px 14px 12px; gap: 8px; } body[data-page="contact"] .carte h1 { font-size: 22px; } body[data-page="contact"] .carte p.sous { font-size: 14px; } body[data-page="contact"] .deux { gap: 8px; } body[data-page="contact"] .champ label { font-size: 13px; } body[data-page="contact"] #f input:not([type="checkbox"]) { height: 40px; } body[data-page="contact"] #f textarea { flex: 0 0 auto; /* (b) elle n'absorbe plus */ height: 84px; min-height: 84px; max-height: 84px; } /* les 10 px au-dessus de la case, posés ici et pas laissés au hasard d'un `clamp` : c'est un chiffre du brief, il se lit dans la feuille. */ body[data-page="contact"] #f { gap: 10px; } body[data-page="contact"] .pied { /* `flex-wrap: nowrap` est ici la regle qui compte : la regle de base porte `wrap` pour la rangee du PC, et un conteneur en COLONNE qui a le droit d enrouler range ses elements en DEUX COLONNES des que sa hauteur est contrainte. C est ce qui mettait la case a 373 px sur un ecran de 390. */ flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; margin: 0; } /* `flex: 0 0 auto` reste — dans un `.pied` en colonne, la case garde sa hauteur naturelle. Le `align-items: center` d'avant est retiré : il datait du temps où le `` faisait 0 px et où la case était donc seule sur sa rangée. Le texte se replie maintenant sur deux ou trois lignes, et la maquette veut la case en face de la première. */ body[data-page="contact"] .accord { flex: 0 0 auto; } body[data-page="contact"] button.envoyer { width: 100%; } body[data-page="contact"] .rien { text-align: center; } body[data-page="contact"] .sur-pc { display: none; } body[data-page="contact"] .sur-telephone { display: inline; } } /* --------------------------------------------------------------------------- 6. PC BAS DE PLAFOND (1366 × 768, le portable). La maquette le prévoit : au-delà de 640 px de large mais sous 760 px de haut, on serre — le sous-titre s'efface et les titres redescendent. C'est exactement l'écran où le bouton sortait de la vue de 217 px avant ce lot. --------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-height: 760px) { body[data-page="contact"] .carte h1 { font-size: 22px; } body[data-page="contact"] .carte p.sous { display: none; } body[data-page="contact"] .carte { gap: 8px; } body[data-page="contact"] #f textarea { min-height: 60px; } } @media (prefers-reduced-motion: reduce) { body[data-page="contact"] #f input, body[data-page="contact"] #f textarea, body[data-page="contact"] button.envoyer { transition: none; } } /* l'erreur d'envoi, sous le bouton : posée par la coupe, vide au chargement, et sans place tant que rien n'a échoué. Le script ajoute `montre` et retire tout le reste. */ body[data-page="contact"] .erreur.montre { display: block; } /* --------------------------------------------------------------------------- LOT-PRO-15-E §2 — LES DEUX COLONNES DE /contact, DÉSALIGNÉES À 320 px. LA CAUSE, MESURÉE. `mesure-mobile` du 15/09 : haut du champ Email 371 px, haut du champ Téléphone 388 px — 17 px d'écart, à 320 px et à 320 px seulement (à 360, 375, 390 : alignés). 17 px, c'est UNE LIGNE de libellé : 13 px × 1,3 de `line-height` = 16,9 px. À 320 px de vue, chaque colonne de `.deux` fait 132 px (320 − 20 de marge − 28 de creux de carte − 8 de gouttière, divisé par deux) ; « Téléphone (WhatsApp) » n'y tient pas sur une ligne et se replie sur deux, « Email (obligatoire) » y tient. Le `.champ` étant une colonne flex (libellé puis champ), le champ de la colonne au libellé le plus haut descend de cette ligne — et les deux ne sont plus sur la même ligne d'horizon. LE CORRECTIF, ET POURQUOI CELUI-LÀ. On réserve DEUX LIGNES au libellé, sur la seule plage où le repli a lieu. Les deux libellés font alors la même hauteur, quels que soient leurs mots, et les champs s'alignent. Trois autres pistes ont été écartées, et elles sont écrites pour qu'on ne les reprenne pas : empiler les deux champs (l'écran perdrait sa rangée, et la mesure exige qu'ils restent côte à côte) ; `align-items: end` (juste au repos, FAUX dès qu'un `.erreur` s'ouvre sous l'email et repousse son champ vers le haut) ; raccourcir le libellé (« WhatsApp » est ce que la page a à dire, ce n'est pas au style de le faire taire). --------------------------------------------------------------------------- */ @media (max-width: 360px) { body[data-page="contact"] .deux .champ label { min-height: 2.6em; } }