/* Joy B2B · Parlons de votre prospection (préfixe ct- pour ce que la page crée ; ses classes validées restent, scopées
   sous [data-page="contact"]) · l'artefact v023 validé par Joy le 26/09/2026, porté sur le socle v013.
   Le socle (assets/site.css) porte les jetons, le cadre, les titres à son échelle (--t-h1, --t-h2, --t-h3), le souffle
   du seuil et des blocs (.seuil, .bloc, --air), les fonds (.bloc.ombre), le surtitre, le bouton (.btn.btn-plein), le
   focus, le rail (son dessin), le pied, l'impression générale. Cette feuille garde ce qui n'appartient qu'à la page :
   le seuil du rendez-vous et sa carte (les matins, les heures, l'invitation, un autre moment), la confirmation (le mot,
   le timbre, le billet, la photo), les cinq questions et leur figure. Les règles sont celles
   de la v023, dans son ordre, chacune préfixée, moins les mortes (les variantes v017 à v021 que la page ne montre plus)
   et moins ce que le socle porte ; ce que la page ajoute au socle est marqué ct-. */

/* 0 · les règles globales de la v023 dont la page dépend, scopées à force nulle */
:where([data-page="contact"] main) p{margin:0 0 1em;max-width:var(--mesure)}
:where([data-page="contact"] main) :is(strong,b){font-weight:600}

/* 1 · ce que le socle donne et que la page règle par-dessus (chaque règle dite dans le rapport, § 1).
   Les liens : la page dessine les siens (les pastilles d'agenda, le lien flèche, le bouton de visio, les recours du mail,
   le lien du mot) ; la classe ct-lien les sort de la règle générale des liens du socle. « Vos données. » reste au socle.
   Le bouton : celui du socle, sans flèche sur cette page (la v023 n'en montre aucune), son texte centré. */
[data-page="contact"] .btn{justify-content:center}

/* 2 · la page, dans l'ordre de la v023 */
[data-page="contact"] .bande-joy{display:grid;grid-template-columns:4.6rem 1fr;gap:1.1rem;align-items:center;margin-top:1.7rem;max-width:34rem}
[data-page="contact"] .rond{width:4.6rem;height:4.6rem;border-radius:50%;background:var(--voile);overflow:hidden}
[data-page="contact"] .rond img{width:100%;height:100%;object-fit:cover;display:block}
[data-page="contact"] .bande-joy p{margin:0;max-width:none;font-size:.97rem}
[data-page="contact"] .champ{margin-bottom:1.5rem}
[data-page="contact"] .champ label,[data-page="contact"] .groupe>legend{display:block;font-weight:600;font-size:.93rem;color:var(--encre);margin:0 0 .45rem;padding:0}
[data-page="contact"] .champ input,[data-page="contact"] .champ textarea{font:inherit;font-size:1.02rem;padding:.72rem .9rem;border:1.5px solid var(--voile-fonce);border-radius:.6rem;background:var(--blanc);color:var(--encre);width:100%;display:block}
[data-page="contact"] .champ textarea{min-height:5.2rem;resize:vertical;line-height:1.5}
/* la case où l'on écrit : l'anneau d'éclat de la planche L3 (Joy, 1/10 au soir), un filet porteur au bord, un souffle de blanc, l'anneau autour */
[data-page="contact"] .champ input:focus,[data-page="contact"] .champ textarea:focus{outline:3px solid var(--eclat);outline-offset:3px;border-color:var(--porteur)}
[data-page="contact"] .aide{margin:.45rem 0 0;font-size:.86rem;color:var(--gris)}
[data-page="contact"] .fac{font-weight:400;font-size:.82rem;color:var(--gris);margin-left:.4rem;letter-spacing:0;text-transform:none}
[data-page="contact"] .scene{background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);margin-top:1.8rem;max-width:46rem;overflow:hidden}
[data-page="contact"] .haut{padding:1.5rem 1.5rem 1.4rem;min-height:14rem;display:flex;flex-direction:column;justify-content:center}
[data-page="contact"] .avance{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
[data-page="contact"] .recul{background:none;border:0;padding:.1rem .2rem;margin:0;font:600 .68rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;border-radius:.3rem}
[data-page="contact"] .recul:hover{color:var(--porteur)}
[data-page="contact"] .recul:focus-visible{outline:2px solid var(--eclat);outline-offset:2px}
[data-page="contact"] .noms b.ouvert{cursor:pointer;border-radius:.3rem;text-decoration:underline dotted;text-decoration-color:var(--voile-fonce);text-underline-offset:4px}
[data-page="contact"] .col-barre.ouvert{cursor:pointer}
[data-page="contact"] .col-barre.ouvert .tige{transition:transform .2s var(--douce)}
[data-page="contact"] .col-barre.ouvert:hover .tige{transform:scaleX(1.35)}
[data-page="contact"] .col-barre.ouvert:focus-visible{outline:2px solid var(--eclat);outline-offset:4px;border-radius:.3rem}
[data-page="contact"] .noms b.ouvert:hover{color:var(--eclat)}
[data-page="contact"] .noms b.ouvert:focus-visible{outline:2px solid var(--eclat);outline-offset:3px}
[data-page="contact"] .q{display:none}
[data-page="contact"] .q.on{display:block;animation:ct-entre .32s var(--douce)}
@keyframes ct-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-page="contact"] .q h3{font-family:var(--sans);font-size:1.08rem;font-weight:500;line-height:1.35;margin:0 0 1rem;max-width:32ch}
[data-page="contact"] .opts{display:grid;gap:.5rem}
[data-page="contact"] .opt{font:inherit;font-size:.94rem;padding:.7rem .95rem;border-radius:.6rem;border:1.5px solid var(--voile);background:var(--ombre);color:var(--encre);cursor:pointer;transition:border-color .18s,background .18s;text-align:left}
[data-page="contact"] .opt:hover{border-color:var(--voile-fonce);background:var(--blanc)}
[data-page="contact"] .opt[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
[data-page="contact"] .opt.ensemble{border-style:dashed;border-color:var(--voile-fonce);background:transparent;color:var(--gris);margin-top:.15rem}
[data-page="contact"] .opt.ensemble:hover{background:var(--blanc);border-color:var(--porteur);color:var(--encre)}
[data-page="contact"] .opt.ensemble[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);border-style:solid;color:var(--papier)}
[data-page="contact"] .fini .q,[data-page="contact"] .fini .avance{display:none}
[data-page="contact"] .bilan{display:none}
[data-page="contact"] .fini .bilan{display:block;animation:ct-entre .4s var(--douce)}
[data-page="contact"] .bilan h3{margin-bottom:.45rem}
[data-page="contact"] .bilan p{font-size:.98rem;color:var(--gris);margin:0 0 .9rem;max-width:52ch}
[data-page="contact"] .rejouer{background:none;border:0;padding:0;font:500 .86rem var(--sans);color:var(--gris);cursor:pointer;text-decoration:underline;text-decoration-color:var(--voile-fonce);text-underline-offset:3px}
[data-page="contact"] .rejouer:hover{color:var(--porteur);text-decoration-color:var(--eclat)}
[data-page="contact"] .figure{border-top:1px solid var(--voile);background:var(--blanc);padding:0 clamp(1rem,3vw,1.5rem) 1.2rem}
[data-page="contact"] .noms{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;padding-block:.8rem;border-bottom:1px solid var(--voile)}
[data-page="contact"] .noms b{font:600 .8rem var(--sans);color:var(--porteur);display:inline-flex;align-items:center;justify-content:center;gap:.35rem;transition:color .3s}
[data-page="contact"] .noms svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
[data-page="contact"] .noms b.flou{color:var(--gris)}
[data-page="contact"] .champ-fig{position:relative;height:190px;margin-top:1.1rem}
[data-page="contact"] .barres{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
[data-page="contact"] .col-barre{display:flex;justify-content:center;align-items:flex-end;height:100%}
[data-page="contact"] .tige{width:13px;height:100%;border-radius:7px 7px 0 0;background:var(--voile);position:relative}
[data-page="contact"] .tige i{position:absolute;left:0;right:0;bottom:0;border-radius:7px 7px 0 0;background:var(--porteur);height:0;transition:height .75s var(--douce),background .4s}
[data-page="contact"] .tige.flou i{background:repeating-linear-gradient(135deg,var(--voile-fonce) 0 4px,var(--blanc) 4px 9px);opacity:.75}
[data-page="contact"] .axe{border-top:1px solid var(--voile-fonce)}
[data-page="contact"] .note-fig{margin:.9rem 0 0;font-size:.8rem;color:var(--gris);max-width:60ch}
@media (max-width:560px){
[data-page="contact"] .champ-fig{height:160px}
[data-page="contact"] .noms svg{display:none}
[data-page="contact"] .noms b{font-size:.54rem;letter-spacing:-.01em}
[data-page="contact"] .noms{padding-block:.7rem}
}
[data-page="contact"] .grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,29rem);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:980px){
[data-page="contact"] .grille{grid-template-columns:1fr}
}
[data-page="contact"] .rdv h1{max-width:none}
[data-page="contact"] .rdv .sous{max-width:46ch}
[data-page="contact"] .lien-fleche{display:none;align-items:center;gap:.6rem;margin-top:.4rem;font-size:1rem;color:var(--encre);text-decoration:none;border-bottom:1.5px solid var(--porteur);padding-bottom:.15rem}
[data-page="contact"] .lien-fleche::after{content:"↓";color:var(--porteur)}
@media (max-width:980px){
[data-page="contact"] .lien-fleche{display:inline-flex}
}
[data-page="contact"] .bande-joy .qui{margin:0;font-size:1rem;font-weight:500}
[data-page="contact"] .bande-joy .qui span{display:block;color:var(--gris);font-size:.92rem;font-weight:400}
[data-page="contact"] .carte{scroll-margin-top:12px;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:1.1rem;padding:clamp(1.4rem,3vw,2rem)}
[data-page="contact"] .h-carte{font-size:var(--t-h3);line-height:1.2;margin:0 0 .45rem}
[data-page="contact"] .meta{color:var(--gris);font-size:.93rem;margin:0 0 1.4rem}
[data-page="contact"] .etiquette{font-size:.95rem;margin:0 0 .6rem;color:var(--encre);transition:color .2s}
[data-page="contact"] .etiquette.attente{color:var(--voile-fonce)}
[data-page="contact"] .etiquette.apres{margin-top:1.3rem}
[data-page="contact"] .jours,[data-page="contact"] .heures{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
[data-page="contact"] .jour{font:inherit;display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.75rem .3rem .7rem;border:1px solid var(--voile-fonce);border-radius:.7rem;background:var(--papier);color:var(--encre);cursor:pointer;transition:border-color .18s,background .18s}
[data-page="contact"] .jour:hover{border-color:var(--porteur)}
[data-page="contact"] .jour .j{font-size:.8rem}
[data-page="contact"] .jour .n{font:500 1.65rem/1.15 var(--sans)}
[data-page="contact"] .jour .m{font-size:.8rem;color:var(--gris)}
[data-page="contact"] .jour[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
[data-page="contact"] .jour[aria-pressed="true"] .m{color:rgba(253,252,249,.82)}
[data-page="contact"] .heure{font:500 .98rem var(--sans);padding:.75rem .3rem;border:1px solid var(--voile-fonce);border-radius:.6rem;background:var(--blanc);color:var(--encre);cursor:pointer;animation:ct-entre .3s var(--douce)}
[data-page="contact"] .heure:hover{border-color:var(--porteur)}
[data-page="contact"] .heure[aria-pressed="true"]{background:var(--porteur);border-color:var(--porteur);color:var(--papier)}
[data-page="contact"] .btn-large{width:100%;justify-content:center;margin-top:1.5rem;padding:1.05rem 1.4rem}
[data-page="contact"] .btn[disabled]{background:#AABDB0;border-color:#AABDB0;cursor:default}
[data-page="contact"] .lien-bas{display:block;margin:1.1rem auto 0;background:none;border:0;padding:0;font:inherit;font-size:.93rem;color:var(--encre);text-decoration:underline;text-decoration-color:var(--gris);text-underline-offset:4px;cursor:pointer}
[data-page="contact"] .retour-lien{background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--gris);cursor:pointer;margin-bottom:1rem;text-decoration:underline;text-decoration-color:var(--voile-fonce);text-underline-offset:4px}
[data-page="contact"] .retour-lien:hover{color:var(--porteur)}
[data-page="contact"] .puce-rdv{display:flex;align-items:center;gap:.6rem;background:var(--ombre);border-radius:.55rem;padding:.75rem .95rem;margin:.4rem 0 1.4rem;font-size:.97rem;max-width:none}
[data-page="contact"] .puce-rdv svg{width:18px;height:18px;flex:none;stroke:var(--porteur);fill:none;stroke-width:1.6}
[data-page="contact"] .carte .champ{margin-bottom:1.25rem}
[data-page="contact"] .mois-tete{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .2rem;font-size:.9rem;color:var(--porteur);max-width:none}
[data-page="contact"] .mois-tete button{background:none;border:0;padding:0;font:inherit;font-size:.85rem;color:var(--gris);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
[data-page="contact"] .rgpd{margin:1rem 0 0;font-size:.85rem;color:var(--gris)}
[data-page="contact"] .merci-autre p{font:400 clamp(1.2rem,2.2vw,1.45rem)/1.35 var(--serif);color:var(--encre);margin:0}
[data-page="contact"] .etape[hidden]{display:none!important}
[data-page="contact"] .prep{background:var(--ombre);border-radius:1.1rem;padding:clamp(1.3rem,3.5vw,2.2rem);margin-top:2.4rem;max-width:60rem}
[data-page="contact"] .prep h2{font-size:var(--t-h3);margin:0 0 .4rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
[data-page="contact"] .prep .intro{color:var(--gris);font-size:.98rem;margin:0}
[data-page="contact"] .prep .scene{margin-top:1.4rem;max-width:none}
[data-page="contact"] .bilan-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}
[data-page="contact"] .bilan-actions .btn{padding:.85rem 1.2rem;font-size:.92rem}
[data-page="contact"] .merci-prep p{margin:.2rem 0 0;color:var(--encre);font-size:1rem}
[data-page="contact"] .erreur-champ{margin:.45rem 0 0;font-size:.88rem;font-weight:500;color:var(--encre);max-width:none}
[data-page="contact"] .erreur-champ::before{content:"";display:inline-block;width:.42rem;height:.42rem;border-radius:50%;background:var(--encre);margin-right:.45rem;vertical-align:.1em}
[data-page="contact"] .champ input[aria-invalid="true"]{border-color:var(--encre);box-shadow:0 0 0 1px var(--encre)}
[data-page="contact"] .erreur-envoi{margin:.9rem 0 0}
[data-page="contact"] .scene .trait-niveau{display:none}
[data-page="contact"] h1[tabindex="-1"]:focus,[data-page="contact"] h2[tabindex="-1"]:focus{outline:none}
[data-page="contact"] .carte .h-carte.premier{margin-top:0}
[data-page="contact"] .champ input::placeholder,[data-page="contact"] .champ textarea::placeholder{color:var(--gris);opacity:.72}
[data-page="contact"] .rail a.fait::before{background:var(--porteur);border-color:var(--porteur)}
[data-page="contact"] .rail a[aria-disabled="true"]{cursor:default}
[data-page="contact"] .carte .meta{margin:0 0 .3rem}
[data-page="contact"] .auj{display:flex;align-items:center;gap:.5rem;margin:0 0 1.15rem;font-size:.85rem;color:var(--gris);max-width:none}
[data-page="contact"] .auj i{width:.42rem;height:.42rem;border-radius:50%;background:var(--eclat);flex:none}
[data-page="contact"] .jour.squelette{min-height:5.35rem;border-color:var(--voile);background:linear-gradient(90deg,var(--ombre) 0%,var(--voile) 50%,var(--ombre) 100%);background-size:200% 100%;animation:ct-lueur 1.3s linear infinite;cursor:default}
@keyframes ct-lueur{from{background-position:200% 0}to{background-position:-200% 0}}
[data-page="contact"] .heure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;min-height:3.1rem}
[data-page="contact"] .heure .loc{font:400 .7rem var(--sans);color:var(--gris);white-space:nowrap}
@media (max-width:400px){
[data-page="contact"] .heure .loc{font-size:.62rem}
}
[data-page="contact"] .heure[aria-pressed="true"] .loc{color:rgba(253,252,249,.82)}
[data-page="contact"] .alerte.info{background:var(--ombre);color:var(--encre)}
[data-page="contact"] .alerte button{background:none;border:0;padding:0;margin-left:.35rem;font:inherit;font-weight:600;color:var(--porteur);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
[data-page="contact"] .zone{position:relative}
[data-page="contact"] .exemple{position:absolute;left:calc(.9rem + 1.5px);right:.9rem;top:calc(.72rem + 1.5px);font-size:1.02rem;line-height:1.5;color:var(--gris);opacity:.72;pointer-events:none;transition:opacity .38s var(--douce)}
[data-page="contact"] .exemple.cache{opacity:0}
[data-page="contact"] .suggestion{margin:.5rem 0 0;font-size:.88rem;color:var(--encre);max-width:none}
[data-page="contact"] .suggestion button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--porteur);text-decoration:underline;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;text-align:left}
[data-page="contact"] .sous-carte{margin:0 0 1.3rem;color:var(--gris);font-size:.97rem;max-width:none}
[data-page="contact"] .amorces{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .55rem}
[data-page="contact"] .amorces button{font:500 .84rem var(--sans);padding:.42rem .8rem;border-radius:2rem;border:1px solid var(--voile-fonce);background:var(--blanc);color:var(--encre);cursor:pointer;transition:border-color .18s,background .18s}
[data-page="contact"] .amorces button:hover{border-color:var(--porteur)}
[data-page="contact"] .amorces button[aria-pressed="true"]{border-color:var(--porteur);background:var(--voile)}
[data-page="contact"] .merci-autre .echo{margin:.85rem 0 0;font:400 .92rem/1.5 var(--sans);color:var(--gris)}
[data-page="contact"] .merci-autre .echo button{background:none;border:0;padding:0;margin-left:.4rem;font:inherit;color:var(--encre);text-decoration:underline;text-decoration-color:var(--gris);text-underline-offset:3px;cursor:pointer}
/* la confirmation : le portrait a sa place (Joy, 1/10 : « laisse de l'espace au corps de Joy, on dirait qu'elle est en train de se
   faire ratatiner »). Une colonne plus large, le billet tenu à 34 rem, un vrai écart entre eux ; le panneau des cinq questions
   s'élargit d'autant, pour que le portrait se tienne tout entier sur lui. */
[data-page="contact"] .confirme-grille{display:grid;grid-template-columns:minmax(0,1fr) clamp(15rem,31vw,21rem);grid-template-areas:"mot photo" "texte photo" "billet photo";column-gap:clamp(2.2rem,5.5vw,4.5rem);max-width:60rem;align-items:start}
[data-page="contact"] .mot{grid-area:mot}
[data-page="contact"] .mot h1{margin-bottom:0}
[data-page="contact"] .texte{grid-area:texte;margin-top:1.35rem}
[data-page="contact"] .texte p{font-size:1.05rem;max-width:none;margin:0 0 .75rem;text-wrap:pretty}
[data-page="contact"] .texte p:last-child{margin-bottom:0}
[data-page="contact"] .portrait-joy{grid-area:photo;align-self:end;display:block;width:100%;max-width:none;margin-left:0;height:auto;margin-bottom:-2px}
[data-page="contact"] .billet{grid-area:billet;max-width:34rem;margin-top:1.6rem;margin-bottom:2.6rem;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:1rem;padding:1.35rem 1.45rem 0}
[data-page="contact"] .b-date{margin:0;font:500 clamp(1.35rem,2.4vw,1.65rem)/1.2 var(--serif);color:var(--encre);max-width:none}
[data-page="contact"] .b-dans{margin-left:.6rem;font:400 .84rem var(--sans);color:var(--gris);white-space:nowrap}
[data-page="contact"] .b-meta{margin:.35rem 0 0;font-size:.93rem;color:var(--gris);max-width:none}
[data-page="contact"] .b-agenda{margin:1.25rem 0 .5rem;font-size:.85rem;color:var(--gris);max-width:none}
[data-page="contact"] .b-pied,[data-page="contact"] .b-question{display:flex;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap;margin-top:1.3rem;padding:.95rem 0 1.05rem;border-top:1px solid var(--voile)}
[data-page="contact"] .b-pied button,[data-page="contact"] .b-question button{background:none;border:0;padding:0;font:inherit;font-size:.92rem;color:var(--encre);text-decoration:underline;text-decoration-color:var(--gris);text-underline-offset:4px;cursor:pointer}
[data-page="contact"] .b-question p{margin:0;font-size:.93rem;color:var(--encre);max-width:none;flex-basis:100%}
[data-page="contact"] .b-question .b-oui{font-weight:600;color:var(--porteur);text-decoration-color:var(--porteur)}
[data-page="contact"] .b-erreur{margin:0 0 1.1rem;font-size:.9rem;color:var(--porteur);max-width:none}
[data-page="contact"] .b-annule{padding:0 0 1.35rem}
[data-page="contact"] .b-annule p{margin:0 0 1rem;font-size:1.02rem;color:var(--encre);max-width:none}
[data-page="contact"] .b-annule .btn{margin:0}
[data-page="contact"] #mot,[data-page="contact"] #billet,[data-page="contact"] #prep{scroll-margin-top:24px}
@media (max-width:640px){
[data-page="contact"] .confirme-grille{grid-template-columns:minmax(0,1fr) 46%;grid-template-areas:"mot mot" "texte texte" "photo photo" "billet billet";column-gap:1rem}
[data-page="contact"] .portrait-joy{margin-top:.8rem;width:107%;margin-left:-7%}
[data-page="contact"] .billet{margin-top:0;margin-bottom:1.8rem;position:relative;z-index:1;max-width:none}
[data-page="contact"] .texte p{max-width:none}
}
[data-page="contact"] .timbre{display:block;height:46px;width:auto}
[data-page="contact"] .timbre .sig{transform-box:fill-box;transform-origin:center}
[data-page="contact"] .timbre.un.joue .sig{animation:ct-un-tour 3.5s cubic-bezier(.45,0,.2,1) .3s 1 both}
@keyframes ct-un-tour{from{transform:rotate(0)}to{transform:rotate(360deg)}}
[data-page="contact"] .timbre.petit{height:38px}
@media (prefers-reduced-motion:reduce){
[data-page="contact"] .timbre.joue .sig{animation:none}
}
[data-page="contact"] .pastilles{display:flex;gap:.45rem;flex-wrap:wrap}
[data-page="contact"] .pastilles a{display:inline-flex;align-items:center;gap:.45rem;font:500 .86rem var(--sans);color:var(--encre);text-decoration:none;border:1px solid var(--voile-fonce);border-radius:2rem;padding:.45rem .85rem;background:var(--blanc)}
[data-page="contact"] .pastilles a:hover{border-color:var(--porteur)}
[data-page="contact"] .pastilles svg{width:15px;height:15px;stroke:var(--porteur);fill:none;stroke-width:1.7}
[data-page="contact"] .prep{margin-top:0;position:relative;z-index:1}
[data-page="contact"] .prep .surtitre{margin:0 0 .55rem}
[data-page="contact"] .prep h2{font-size:var(--t-h3);margin:0 0 .4rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
[data-page="contact"] .prep .intro{max-width:none}
[data-page="contact"] .prep .scene{margin-top:1.3rem;max-width:none}
[data-page="contact"] .scene .figure{border-top:1px solid var(--voile);border-bottom:0;padding:0 clamp(1rem,3vw,1.6rem) .15rem}
[data-page="contact"] .scene .champ-fig{height:96px;margin-top:.9rem}
[data-page="contact"] .noms b{padding-bottom:.3rem;border-bottom:2px solid transparent}
[data-page="contact"] .noms b.courant{color:var(--encre);border-bottom-color:var(--eclat)}
[data-page="contact"] .haut{min-height:0;padding:1.35rem clamp(1rem,3vw,1.6rem) 1.3rem;display:block}
[data-page="contact"] .avance{font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .55rem;gap:.4rem;color:var(--gris)}
[data-page="contact"] .avance #metier-c{color:var(--porteur)}
[data-page="contact"] .q h3{max-width:none;font-size:1.12rem;margin-bottom:.95rem}
[data-page="contact"] .pied-q{margin:.85rem 0 0;min-height:1.1rem}
[data-page="contact"] .fini .pied-q{display:none}
[data-page="contact"] .scene .note-fig{margin:0;padding:.75rem clamp(1rem,3vw,1.6rem) .9rem;border-top:1px solid var(--voile);font-size:.78rem;max-width:none}
[data-page="contact"] .bilan-actions{margin-top:.2rem}
[data-page="contact"] .merci-prep{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
[data-page="contact"] .merci-prep p{margin:0}
@media (max-width:560px){
[data-page="contact"] .noms b span{display:none}
[data-page="contact"] .noms svg{display:block;width:19px;height:19px}
[data-page="contact"] .noms b{font-size:.8rem}
[data-page="contact"] .scene .champ-fig{height:80px}
}
[data-page="contact"] sup{font-size:.62em;line-height:0;vertical-align:.5em}

/* 3 · ce que le montage ajoute (chaque règle dite dans le rapport, § 1 et § 2).
   Les marges d'ancre : le socle pose déjà scroll-padding-top (l'en-tête + 8 px) sur html ; les marges de la v023
   (84 px sur la carte, 96 px sur le mot, le billet, les questions) sont ramenées à ce qui dépasse l'en-tête (12 et
   24 px), pour arriver au même endroit à l'écran. */
/* les cibles de 44 px au téléphone (règle du chantier) : le lien flèche et le lien du bas gagnent leur hauteur par un
   rembourrage compensé, sans bouger d'un pixel à l'écran */
[data-page="contact"] .lien-fleche{padding-top:1rem;margin-top:-.6rem}
[data-page="contact"] .lien-bas{padding:.65rem 0;margin-top:.45rem;margin-bottom:-.65rem}
/* l'adresse relue, tenue d'un bloc (la v023 y écrivait un trait d'union insécable, que les polices du site n'ont pas) */
[data-page="contact"] .adresse{white-space:nowrap}
/* le rail de la page : ses libellés se lisent au survol comme ceux du socle ; l'étape faite se rejoint d'un clic */
[data-page="contact"] .rail a[aria-disabled="true"]{cursor:default}
/* v014 · « Vos réponses sont prêtes. » se lit seul (Joy, 30/09) : le bouton garde l'air que lui laissait la phrase retirée */
[data-page="contact"] .bilan p[hidden] + p[hidden] + .bilan-actions{margin-top:1.1rem}

/* le halo déjà vu [idée à voir, Joy, 1/10] : le point d'éclat de l'accueil, posé à gauche du libellé sans le déplacer ; il
   paraît quand le formulaire est prêt et respire trois fois, au rythme de l'accueil */
[data-page="contact"] #confirmer .ct-lib{position:relative;display:inline-block}
[data-page="contact"] #confirmer .ct-appel{position:absolute;right:calc(100% + .7rem);top:50%;width:.44rem;height:.44rem;margin-top:-.22rem;border-radius:50%;background:var(--eclat);opacity:0;transform:scale(.4);transition:opacity .45s var(--douce),transform .45s var(--douce);pointer-events:none}
[data-page="contact"] #confirmer.pret .ct-appel{opacity:1;transform:scale(1);animation:ct-appel 1.8s ease-out .35s 3}
@keyframes ct-appel{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,184,63,.55)}45%{transform:scale(1.4);box-shadow:0 0 0 .5rem rgba(30,184,63,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,184,63,0)}}
@media (prefers-reduced-motion:reduce){[data-page="contact"] #confirmer.pret .ct-appel{animation:none;transition:none}}
/* le halo déjà vu, une troisième fois (Joy, 1/10 au soir) : après la confirmation, le point d'éclat d'« Avant mardi »
   respire cinq fois, pour guider vers les cinq questions. Il attend que le fil soit achevé, que la signature ait fini son
   tour (un seul depuis la v056, Joy, 7/10 ; l'un puis l'autre : deux mouvements à la fois se volent le regard) et que le point soit sous les yeux. Le même
   halo que sur « Ce qui change pour vous » et sur « Confirmer ». La première réponse l'éteint. */
[data-page="contact"] #prep.appelle #p-sur:not(:hover)::before{animation:ct-appel 1.8s ease-out .2s 5}
@media (prefers-reduced-motion:reduce){[data-page="contact"] #prep.appelle #p-sur::before{animation:none}}