/* Fenêtre de contact : une boîte de dialogue dans le tube, phosphore crème sur noir, comme le reste de l'écran. */
.contact{position:absolute;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:3cqmin;background:#000000bf}
.contact.est-ouvert{display:flex}
.contact--scene{position:fixed;padding:16px;background:#000000a6}
.contact__fenetre{width:min(88cqw,560px);background:#0b0d0c;color:#f4efe6;border:2px solid #f4efe6;box-shadow:clamp(4px,.8cqw,8px) clamp(4px,.8cqw,8px) 0 #f4efe62e;font-family:"IBM Plex Mono",ui-monospace,monospace;animation:contact-ouvre .2s cubic-bezier(.2,.8,.2,1)}
.contact--scene .contact__fenetre{width:min(92vw,560px)}
@keyframes contact-ouvre{from{transform:scaleY(.02);filter:brightness(2.4)}to{transform:none;filter:none}}
.contact__titre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(7px,1.3cqw,11px) clamp(12px,2.6cqw,20px);background:#f4efe6;color:#0b0d0c;font-size:clamp(11px,1.9cqw,14px);font-weight:600;letter-spacing:.16em;line-height:1}
.contact__fermer{-webkit-appearance:none;appearance:none;border:0;background:none;color:inherit;font:inherit;letter-spacing:.04em;cursor:pointer;padding:9px 11px;margin:-9px -11px}
.contact__fermer:hover{text-decoration:underline}
.contact__liste{list-style:none;margin:0;padding:0}
.contact__liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:clamp(10px,2.3cqw,18px) clamp(12px,2.6cqw,20px);border-top:1px solid #f4efe633;color:#f4efe6;text-decoration:none;font-size:clamp(12.5px,2.2cqw,17px);font-weight:500;line-height:1.2}
.contact__liste li:first-child a{border-top:0}
.contact__liste b{font-weight:400;font-size:clamp(10.5px,2.2cqw,17px);color:#b6b3aa;text-align:right;white-space:nowrap}
.contact__liste a:hover,.contact__liste a:focus-visible{background:#f4efe6;color:#0b0d0c}
.contact__liste a:hover b,.contact__liste a:focus-visible b{color:#0b0d0c}
.contact :focus-visible{outline:2px solid #ff5a2b;outline-offset:2px}
.contact__liste a:focus-visible{outline-offset:-2px}
.accueil.est-contact{visibility:hidden}
/* Écran très étroit (petit téléphone, téléphone couché) : le nom au-dessus de l'adresse. */
@container (max-width:300px){.contact__liste a{flex-direction:column;align-items:flex-start;gap:2px;min-height:0;padding:6px 12px}.contact__liste b{text-align:left}}
@media (prefers-reduced-motion:reduce){.contact__fenetre{animation:none}}

/* CV et contact toujours à portée, dans la barre des projets */
.barre a.barre__lien{display:inline-block;border:1px solid #d6d8dd;background:#fff;color:#17181b;padding:8px 10px;border-radius:3px;font:inherit;text-decoration:none;line-height:1}
.barre a.barre__lien:focus-visible{outline:2px solid #0064d2;outline-offset:1px}
@media (max-width:720px) and (orientation:portrait){.barre a.barre__lien{padding:6px 9px}}

/* Barre de chargement du CV : des blocs phosphore qui se remplissent. */
.cv-barre{margin:clamp(12px,2.6cqw,20px) clamp(12px,2.6cqw,20px) 0;height:clamp(16px,3cqw,24px);padding:3px;border:1px solid #f4efe680}
.cv-barre i{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#f4efe6 0 clamp(7px,1.3cqw,11px),#0000 clamp(7px,1.3cqw,11px) clamp(10px,1.8cqw,15px))}
.cv-texte{margin:0;padding:clamp(9px,1.8cqw,14px) clamp(12px,2.6cqw,20px);font-size:clamp(11.5px,1.9cqw,14px);color:#b6b3aa}