/* ================================================================== PAGE CONTACT — « le pli »,v2 Système graphique identique à l'accueil;en-tête `.phead` commun. 🚨 v1 REFUSÉE:« pas très clair comme structure,on ne comprend pas bien de suite ». Diagnostic:j'avais retiré toute l'affordance des champs (filet bas seul,aucun fond,libellés en petites capitales espacées) et les pliures traversaient la page entière. Ça se lisait comme une mise en page éditoriale,pas comme un formulaire. Ici:le formulaire est UNE FEUILLE posée sur la page (panneau sable,ombre portée),les pliures ne traversent que cette feuille,les 3 temps sont NUMÉROTÉS et titrés,et les champs redeviennent des champs (fond clair + bordure complète + libellé en bas de casse juste au-dessus). ================================================================== */ .nav-links a[aria-current="page"]::after{transform:scaleX(1)}.nav-contact[aria-current="page"]{background:var(--accent-deep);border-color:var(--accent-deep)}.nav-panel a[aria-current="page"]{background:var(--ivoire-2)}:root{--accent-ink:#735B3A;--err:#9B3B2F}/* ---------- EN-TÊTE DE PAGE (gabarit commun,sans sommaire) -------------- */ .phead{padding-top:clamp(7.5rem,15vh,10.5rem);padding-bottom:0}.phead__in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,4vw,4rem);align-items:start;padding-bottom:clamp(2rem,5vh,3.4rem)}@media(max-width:900px){.phead__in{grid-template-columns:1fr;gap:2rem;align-items:start}}.phead__t{font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:1;margin-top:0}.phead__t .it{color:var(--accent-deep)}/* `.24em`:on aligne la 1re ligne du paragraphe sur la HAUTEUR D'X du titre,pas sur le haut de sa boîte,sinon l'œil voit le texte trop haut. */ .phead__s{color:var(--ink-2);font-size:1.16rem;max-width:46ch;margin-top:.24em}.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.crumb a{transition:color .25s}.crumb a:hover{color:var(--accent-deep)}.crumb i{font-style:normal;color:var(--accent)}/* ---------- LE PLI:le formulaire est une feuille posée sur la page ----- */ .pli{padding-block:clamp(1rem,3vh,2rem) clamp(5.5rem,12vh,9rem)}.pli__form{margin:0}.pli__panneau{max-width:64rem;margin-inline:auto;background:var(--ivoire-2);border:1px solid var(--line-strong);box-shadow:0 34px 64px -44px rgba(46,23,38,.5)}/* La pliure:elle ne traverse plus la page mais LA FEUILLE,ce qui la fait lire comme un pli et non comme une séparation de sections. */ .pli__fold{position:relative;height:1px;background:var(--line-strong)}.pli__fold::after{content:"";position:absolute;left:0;right:0;top:1px;height:12px;background:linear-gradient(rgba(46,23,38,.07),rgba(46,23,38,0))}.pli__etape{padding:clamp(1.9rem,4.2vh,2.8rem) clamp(1.3rem,3.4vw,3rem)}.pli__head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:clamp(1.3rem,2.8vh,1.9rem)}.pli__num{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1;color:var(--accent-deep);flex:0 0 auto}.pli__t{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}/* Les champs redeviennent des champs:fond clair,bordure complète,hauteur confortable. C'est l'affordance qui manquait en v1. */ .pli__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}@media(max-width:680px){.pli__row{grid-template-columns:1fr}}.pli__etape>.pli__row + .pli__row,.pli__etape>.pli__row + .pli__f,.pli__etape>.pli__f + .pli__f{margin-top:clamp(1.1rem,2.4vh,1.6rem)}fieldset.pli__f{border:0;margin:0;padding:0;min-width:0}legend.pli__l{padding:0;float:left;width:100%}legend.pli__l + *{clear:both}.pli__l{display:block;margin-bottom:.45rem;font-size:.98rem;font-weight:500;color:var(--aubergine);line-height:1.4}.pli__l .opt{font-weight:400;font-size:.9rem;color:var(--ink-2)}.pli__in{display:block;width:100%;background:var(--ivoire);color:var(--aubergine);border:1px solid var(--line-strong);border-radius:2px;font-family:var(--sans);font-size:1.04rem;line-height:1.5;padding:.82rem .95rem;transition:border-color .25s,box-shadow .25s}.pli__in::placeholder{color:rgba(90,66,82,.55)}.pli__in:hover{border-color:var(--accent-deep)}.pli__in:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(176,143,99,.25)}.pli__in:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}textarea.pli__in{min-height:8.5rem;resize:vertical}.pli__f.is-bad .pli__in{border-color:var(--err)}.pli__f.is-bad .pli__l{color:var(--err)}/* Pastilles et jalons:facultatifs,jamais `required`,jamais bloquants. */ .pli__chips{display:flex;flex-wrap:wrap;gap:.55rem}.pli__chip{position:relative;display:inline-block}.pli__chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}.pli__chip span{display:inline-block;padding:.5em 1em;cursor:pointer;background:var(--ivoire);border:1px solid var(--line-strong);border-radius:2px;font-size:.95rem;transition:background .22s,border-color .22s,color .22s}.pli__chip input:checked + span{background:var(--accent);border-color:var(--accent-deep);color:var(--aubergine)}.pli__chip input:focus-visible + span{outline:2px solid var(--accent-deep);outline-offset:3px}.pli__radios{display:flex;flex-wrap:wrap;gap:.55rem}.pli__radio{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.95rem;color:var(--aubergine);background:var(--ivoire);border:1px solid var(--line-strong);border-radius:2px;padding:.5em 1em;transition:border-color .22s}.pli__radio:hover{border-color:var(--accent-deep)}.pli__radio input{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;width:.95rem;height:.95rem;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-content:center;flex:0 0 auto}.pli__radio input::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--accent-deep);transform:scale(0);transition:transform .2s}.pli__radio input:checked::before{transform:scale(1)}.pli__radio input:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}/* Consentement RGPD:obligatoire (exigence du §3.7). */ .pli__rgpd{display:flex;align-items:flex-start;gap:.8rem;font-size:.95rem;line-height:1.5;color:var(--ink-2);cursor:pointer}.pli__rgpd input{appearance:none;-webkit-appearance:none;margin:.2rem 0 0;cursor:pointer;width:1.05rem;height:1.05rem;background:var(--ivoire);border:1px solid var(--line-strong);border-radius:2px;flex:0 0 auto;display:grid;place-content:center;transition:background .22s,border-color .22s}.pli__rgpd input::before{content:"\2713";font-size:.75rem;color:var(--aubergine);opacity:0;transition:opacity .2s}.pli__rgpd input:checked{background:var(--accent);border-color:var(--accent-deep)}.pli__rgpd input:checked::before{opacity:1}.pli__rgpd input:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}.pli__rgpd a{text-decoration:underline;text-underline-offset:3px;color:var(--aubergine)}.pli__rgpd a:hover{color:var(--accent-deep)}.pli__f.is-bad .pli__rgpd input{border-color:var(--err)}/* Le cachet:contour camel pivoté derrière le bouton,qui bascule au survol. */ /* 🚨 Aucun délai de réponse n'est affiché:Lucie ne veut pas s'engager sur un délai (18/07),alors que le brief et le §3.7 en demandaient un. « Ce qui se passe ensuite » est conservé,mais déplacé sur l'écran de confirmation,où il ne promet aucune échéance. */ .pli__send{display:flex;justify-content:flex-end;margin-top:clamp(1.4rem,3vh,2rem)}.pli__send .btn{position:relative;font-family:var(--sans);cursor:pointer}.pli__send .btn::after{content:"";position:absolute;inset:-7px;border:1px solid var(--accent-deep);transform:rotate(-1.8deg);transition:transform .35s;pointer-events:none}.pli__send .btn:hover::after{transform:rotate(1.4deg)}@media(prefers-reduced-motion:reduce){.pli__send .btn::after{transition:none}}/* Erreurs. */ .pli__err{display:none;margin-top:.4rem;font-size:.9rem;color:var(--err)}.pli__f.is-bad .pli__err{display:block}.pli__sum{display:none;margin-bottom:clamp(1.2rem,2.6vh,1.7rem);padding:.9rem 1.1rem;border-left:2px solid var(--err);background:rgba(155,59,47,.08);font-size:.98rem;color:var(--err)}.pli__sum.is-on{display:block}/* Honeypot:hors écran,PAS `display:none` (des robots ignorent les champs masqués ainsi),et invisible pour le clavier comme pour les lecteurs d'écran. */ .pli__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}/* Écran de confirmation:remplace le formulaire dans la feuille. */ .pli__ok{display:none}.pli__ok.is-on{display:block}.pli__ok__in{max-width:64rem;margin-inline:auto;background:var(--ivoire-2);border:1px solid var(--line-strong);box-shadow:0 34px 64px -44px rgba(46,23,38,.5);padding:clamp(2.4rem,6vh,4rem) clamp(1.3rem,3.4vw,3rem)}.pli__ok__t{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;margin-bottom:1rem}.pli__ok__t .it{color:var(--accent-deep)}.pli__ok__p{color:var(--ink-2);font-size:1.08rem;max-width:56ch}.pli__ok__p a{text-decoration:underline;text-underline-offset:3px}