/** * com_policarpaorder — formulaire de commande (charte policarpa.ch) * Variables --pol-* avec fallback : les valeurs finales vivent dans le * template tpl_policarpa ; celles-ci n'interviennent qu'en secours. */ .pol-order { /* Colonne alignée sur la mesure de lecture des articles (--pol-mesure, 41rem — cf. editor.css §3 bis du template) : titre, intro et formulaire partagent EXACTEMENT la colonne des autres pages (demande Yann, 04 Août 2026 : cohérence de mise en page sur tout le site). */ max-width: var(--pol-mesure, 41rem); /* Marge basse : aère la fin de page (la bannière cookies fixe réserve en plus son propre espace via un padding dynamique sur , v1.0.1). */ margin: 0 auto 2.5rem; } /* === Titre de page + intro (params de l'item de menu, v1.2.3) === */ /* Même anatomie ET même position que le titre des pages d'article du template (colonne centrée à la mesure, respiration, filet signature 120×2) : le composant doit rendre lui-même son en-tête, la règle du template ne cible que .item-page. */ .pol-order__entete { max-width: var(--pol-mesure, 41rem); margin-inline: auto; margin-block: 1.5rem 2.5rem; } .pol-order__entete h1 { margin: 0; } .pol-order__entete::after { content: ""; display: block; width: var(--pol-separateur-l, 120px); height: 2px; margin-top: 1.1rem; background-color: var(--pol-accent, #F13B3A); } .pol-order__intro { margin: 0 0 2rem; } /* === Sélecteur de mode contact/commande (v1.2.0) === */ .pol-order__mode { border: 0; padding: 0; margin: 0 0 1.75rem; } .pol-order__mode-legend { font-family: var(--pol-font-body, "Hind", sans-serif); font-weight: 600; color: var(--pol-color-text, #1E1E1E); margin-bottom: 0.5rem; padding: 0; float: none; /* neutralise le float des legend Bootstrap */ } /* Contrôle segmenté : 2 pilules dans une capsule, pleine largeur en mobile */ .pol-order__mode-switch { display: flex; max-width: 460px; border: 1px solid var(--pol-color-field-border, #EEDFCC); background-color: var(--pol-color-field, #F8F8F8); border-radius: var(--pol-radius-button, 30px); padding: 4px; gap: 4px; } /* Radios masqués mais focusables (accessibilité clavier conservée) */ .pol-order__mode-switch input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .pol-order__mode-switch label { flex: 1; text-align: center; /* Neutralise le margin-bottom des label Bootstrap (5.25px) : les pilules siégeaient 5px trop haut dans la capsule (retour Yann, 06 Août 2026). */ margin: 0; /* Verticales asymétriques : calage optique Hind (l'encre de la fonte siège ~0.09em au-dessus du centre de ligne — token du template). */ padding: calc(0.55rem + var(--pol-cale-texte, 0.09em)) 1rem calc(0.55rem - var(--pol-cale-texte, 0.09em)); border-radius: var(--pol-radius-button, 30px); font-family: var(--pol-font-body, "Hind", sans-serif); font-weight: 600; color: var(--pol-color-secondary, #54595F); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pol-order__mode-switch input[type="radio"]:checked + label { background-color: var(--pol-color-accent-fonce, #D32F2E); color: #fff; } .pol-order__mode-switch input[type="radio"]:focus-visible + label { outline: 2px solid var(--pol-color-accent, #F13B3A); outline-offset: 2px; } /* === Bloc commande : masqué en mode contact (piloté par order.js) === */ .pol-order__form[data-mode="contact"] .pol-order__fieldset--commande { display: none; } /* « Ouvrage » n'est requis qu'en mode commande : astérisque ajouté ici (le champ n'a pas required dans le XML — requis conditionnel serveur). */ .pol-order__form[data-mode="commande"] label#jform_book-lbl::after { content: " *"; } /* === Légende de consentement (nLPD) === */ .pol-order__consent { font-size: 0.85rem; color: var(--pol-color-secondary, #54595F); margin-top: 1.25rem; } .pol-order__consent-link { color: var(--pol-color-accent-fonce, #D32F2E); text-decoration: underline; } .pol-order__fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; } .pol-order__legend { font-family: var(--pol-font-headings, "Lora", serif); font-weight: 600; color: var(--pol-color-text, #1E1E1E); padding-bottom: 0.5rem; margin-bottom: 1rem; /* Séparateur rouge signature de la charte */ border-bottom: 2px solid var(--pol-color-accent, #F13B3A); } .pol-order__required-note { font-size: 0.875rem; color: var(--pol-color-secondary, #54595F); margin-bottom: 1.25rem; } /* Espacement vertical des groupes de champs rendus par renderField() */ .pol-order .control-group { margin-bottom: 1rem; } /* .pol-order__etiquette-groupe : étiquette VISIBLE du groupe radio « Mode de livraison » — un span, pas un label (un label ne peut pas labelliser le fieldset rendu par le champ radio ; la legend cachée du fieldset porte le nom accessible). Même habillage que les labels. */ .pol-order .control-label label, .pol-order .control-label .pol-order__etiquette-groupe { font-family: var(--pol-font-body, "Hind", sans-serif); font-weight: 600; color: var(--pol-color-text, #1E1E1E); } .pol-order input[type="text"], .pol-order input[type="email"], .pol-order input[type="tel"], .pol-order input[type="number"], .pol-order select, .pol-order textarea { width: 100%; max-width: 100%; background-color: var(--pol-color-field, #F8F8F8); border: 1px solid var(--pol-color-field-border, #EEDFCC); border-radius: 4px; padding: 0.5rem 0.75rem; color: var(--pol-color-text, #1E1E1E); } .pol-order input:focus, .pol-order select:focus, .pol-order textarea:focus { outline: 2px solid var(--pol-color-accent, #F13B3A); outline-offset: 1px; } /* * Honeypot : champ hors écran, jamais display:none (certains bots ignorent * les champs masqués par display/visibility mais remplissent ceux-ci). */ .pol-order__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Captcha addition (1.3.0) : réponse à un chiffre ou deux — champ court, la pleine largeur des autres champs serait disproportionnée. */ .pol-order__captcha input[type="text"] { max-width: 9rem; } .pol-order__actions { margin-top: 1.5rem; } /* Bouton pilule de la charte */ .pol-order__submit, .pol-order .btn-primary { background-color: var(--pol-color-accent-fonce, #D32F2E); border: 1px solid var(--pol-color-accent-fonce, #D32F2E); color: #fff; font-family: var(--pol-font-body, "Hind", sans-serif); font-weight: 600; border-radius: var(--pol-radius-button, 30px); /* Verticales asymétriques : calage optique Hind (cf. mode-switch) */ padding: calc(0.6rem + var(--pol-cale-texte, 0.09em)) 2rem calc(0.6rem - var(--pol-cale-texte, 0.09em)); cursor: pointer; transition: background-color 0.2s ease; } .pol-order__submit:hover, .pol-order__submit:focus { background-color: var(--pol-color-text, #1E1E1E); border-color: var(--pol-color-text, #1E1E1E); color: #fff; } /* Champ en erreur (classes posées par le JS core form.validate) */ .pol-order input.invalid, .pol-order select.invalid, .pol-order textarea.invalid { border-color: var(--pol-color-accent, #F13B3A); } @media (max-width: 767px) { .pol-order { padding: 0 0.5rem; } }