*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:#f8fafc;color:#1a2e44;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Nunito',system-ui,sans-serif;font-weight:800}
nav{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:'Nunito',sans-serif;font-size:1.7rem;font-weight:900;text-decoration:none;display:inline-block;background:linear-gradient(90deg,#1a56db 0%,#0077b6 35%,#00968f 65%,#2ecc71 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{color:#6b7280;text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#0077b6}
.btn-post{background:#2ecc71;color:#fff!important;padding:.5rem 1.1rem;border-radius:8px;font-weight:700;font-size:.86rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.page-hero{background:linear-gradient(135deg,#023e8a 0%,#0077b6 55%,#2ecc71 100%);padding:3.5rem 2rem}
.page-hero-inner{max-width:1280px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.8rem;margin-bottom:.9rem}
.breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:#fff;line-height:1.2}
.page-hero p{color:rgba(255,255,255,.7);margin-top:.5rem;font-size:.95rem}
footer{background:linear-gradient(160deg,#011e3a 0%,#023070 50%,#0a3d2e 100%);padding:4rem 2rem 2rem}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:1.6rem;margin-bottom:2.5rem}
.footer-logo{font-family:'Nunito',sans-serif;font-size:1.55rem;font-weight:900;text-decoration:none;display:inline-block;background:linear-gradient(90deg,#74b0ff 0%,#5ce4d4 50%,#55efc4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.8rem}

.footer-desc{color:rgba(255,255,255,.4);font-size:.83rem;line-height:1.6}
footer h2{color:#fff;font-family:'Nunito',sans-serif;font-size:.93rem;margin-bottom:.9rem;font-weight:700}
footer ul{list-style:none}
footer ul li{margin-bottom:.55rem}
footer ul li a{color:rgba(255,255,255,.4);text-decoration:none;font-size:.83rem}
footer ul li a:hover{color:#fff}
.footer-social{display:flex;gap:.7rem}
.footer-social a{width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none}
.footer-social a:hover{background:#0077b6;color:#fff}
.footer-bottom{max-width:1280px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;text-align:center;color:rgba(255,255,255,.22);font-size:.76rem}
@media(max-width:1024px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.footer-inner{grid-template-columns:1fr}}

.contact-wrap{max-width:1100px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:1fr 1.5fr;gap:2.5rem;align-items:start}
.contact-info h2{font-size:1.5rem;margin-bottom:.8rem}
.contact-info p{color:#6b7280;font-size:.88rem;line-height:1.7;margin-bottom:1.5rem}
.info-item{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.2rem}
.info-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.info-icon.blue{background:#dbeafe;color:#0077b6}
.info-icon.green{background:#dcfce7;color:#27ae60}
.info-icon.amber{background:#fef3c7;color:#d97706}
.info-item h3{font-size:.88rem;font-weight:700;margin-bottom:.15rem}
.info-item p{color:#6b7280;font-size:.82rem;margin:0;line-height:1.5}
.contact-form{background:#fff;border-radius:16px;padding:2rem;border:1px solid #e5e7eb;box-shadow:0 4px 24px rgba(0,0,0,.05)}
.contact-form h3{font-size:1.1rem;margin-bottom:1.4rem}
.fg{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
/* Restreint au formulaire (#step-form) : un selecteur `label` nu atteignait aussi
   les labels du bandeau cookies injecte par jamrent.js, affiches alors en
   majuscules grisees. :where() a une specificite nulle : la regle reste a
   (0,0,1) comme avant. */
:where(#step-form) label,.urgency-legend{font-size:.72rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{border:1.5px solid #e5e7eb;border-radius:8px;padding:.68rem .9rem;font-family:inherit;font-size:.88rem;color:#1a2e44;outline:none;transition:border-color .2s;width:100%}
input:focus,select:focus,textarea:focus{border-color:#0077b6;box-shadow:0 0 0 3px rgba(0,119,182,.08)}
textarea{resize:vertical;min-height:120px}
.btn-envoyer{width:100%;padding:.88rem;background:#0077b6;color:#fff;border:none;border-radius:9px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;cursor:pointer;transition:background .2s;margin-top:.5rem}
.btn-envoyer:hover{background:#0096c7}
.notif{border-radius:10px;padding:.85rem 1rem;font-size:.87rem;font-weight:600;display:none;align-items:center;gap:.6rem;margin-top:1rem}
.notif.err{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;display:none}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr}}
.btn-compte{display:inline-flex;align-items:center;gap:.4rem;background:transparent;color:#0077b6;padding:.42rem 1rem;border-radius:8px;font-weight:700;font-size:.88rem;text-decoration:none;border:1.5px solid #0077b6;transition:all .2s}.btn-compte:hover{background:#0077b6;color:#fff}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
@media(max-width:600px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .6rem;background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:12px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:#374151;transition:all .2s;text-align:center}
.cat-btn i{font-size:1.3rem;color:#9ca3af;transition:color .2s}
.cat-btn:hover{border-color:#0077b6;background:#eff6ff;color:#0077b6}
.cat-btn:hover i{color:#0077b6}
.cat-btn.active{border-color:#0077b6;background:#eff6ff;color:#0077b6;box-shadow:0 0 0 3px rgba(0,119,182,.12)}
.cat-btn.active i{color:#0077b6}
.urgency-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
/* 2 × 2 sous 480px. Les quatre mots en capitales sur une ligne imposaient au
   formulaire 358px de large au minimum (une piste 1fr ne descend pas sous la
   largeur de son mot le plus long) : sous 422px le formulaire sortait de sa
   marge, et sous 390px la page restait large de 389px — dézoomée sur
   mobile (relevé du 2026-11-03, tests/e2e/02). 480 laisse de la marge si la
   police de secours, plus large, remplace Inter. */
@media(max-width:480px){.urgency-grid{grid-template-columns:repeat(2,1fr)}}
/* Positionné : contient le radio masqué (.jr-masque-visuel, css/finitions.css)
   et la pastille du choix. Le label a exactement la boîte de .urgency-opt. */
.urgency-grid label{position:relative}
.urgency-opt{text-align:center;padding:.55rem .3rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.78rem;font-weight:600;color:#374151;cursor:pointer;transition:all .2s;background:#f8fafc}
.urgency-opt:hover{border-color:#9ca3af}
/* Choix courant : posé par :checked, et non plus par js/contact.js, pour
   suivre l'état réel du radio (navigation au clavier, formulaire restauré
   par le navigateur au retour sur la page).
   Teintes assombries le 2026-11-03 : #22c55e, #f97316 et #ef4444 donnaient
   2,28, 2,80 et 3,76:1 avec le texte blanc et contre le fond blanc du
   formulaire. Rapports WCAG 2.x contre #fff (texte blanc et fond) :
   faible 5,02 · normale 4,87 · haute 5,18 · critique 4,83:1 — au-dessus de
   4,5:1 (texte) et de 3:1 (bordure, WCAG 1.4.11). */
.urgency-grid input[value=faible] + .urgency-opt{--urgence:#15803d}
.urgency-grid input[value=normale] + .urgency-opt{--urgence:#0077b6}
.urgency-grid input[value=haute] + .urgency-opt{--urgence:#c2410c}
.urgency-grid input[value=critique] + .urgency-opt{--urgence:#dc2626}
.urgency-grid input:checked + .urgency-opt{background:var(--urgence,#0077b6);border-color:var(--urgence,#0077b6);color:#fff}
/* Pastille cochée : le choix ne repose pas sur la seule couleur (WCAG 1.4.1).
   Hors du flux, en coin : à 375 px, les colonnes se règlent sur la largeur
   des mots et une icône en ligne les ferait bouger. Texte de remplacement
   vide (« / "" ») : le nom du radio reste « Faible », sans « coche ».
   \f00c = fa-check, déjà employé par #success-card : présent dans le
   sous-ensemble vendor/fontawesome. */
.urgency-grid input:checked + .urgency-opt::after{
  content:"\f00c";content:"\f00c" / "";
  position:absolute;top:-.3rem;right:-.3rem;
  box-sizing:border-box;width:1rem;height:1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Font Awesome 6 Free";font-weight:900;font-size:.5rem;line-height:1;
  background:#fff;color:var(--urgence,#0077b6);border:1.5px solid var(--urgence,#0077b6);
}
/* Le radio, rogné, ne montre plus son anneau : il passe sur l'étiquette
   (même anneau que css/finitions.css § A1 : marine + liseré ambre clair
   dans l'écart, l'étiquette n'ayant pas d'ombre propre). */
.urgency-grid input:focus-visible + .urgency-opt{outline:3px solid #011e3a;outline-offset:2px;box-shadow:0 0 0 2px #fbbf24}
/* Honeypot : retiré du rendu sans display:none (certains bots ignorent
   les champs display:none, mais remplissent ceux hors écran). */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.btn-envoyer:disabled{background:#93c5fd;cursor:not-allowed}