@import url("fonts.css"); /* généré par outils/generer-fontes.py — ne pas modifier à la main */
/* urbace.ch — mise en page. Aucune valeur en dur : tout vient de urbace-tokens.css */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--co-navigation-barre-hauteur) + var(--espace-cellule))}
body{background:var(--couleur-fond-app);color:var(--couleur-texte-principal);font-family:var(--fonte-texte);font-size:var(--typographie-texte-fontSize);line-height:var(--typographie-texte-lineHeight);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
/* La règle ci-dessus prend le pas sur la feuille du navigateur, y compris sur
   [hidden] : sans cette ligne, le bloc de symboles SVG s'affiche en 300×150 et
   pousse tout le site vers le bas. */
[hidden]{display:none}
a{color:var(--couleur-texte-marque);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--couleur-action-fondSurvol)}
:focus-visible{outline:var(--co-bouton-focus-epaisseur) solid var(--couleur-action-focus);outline-offset:var(--co-bouton-focus-decalage)}
[id]{scroll-margin-top:calc(var(--co-navigation-barre-hauteur) + var(--espace-cellule))}
.aller-contenu{position:fixed;z-index:20;top:var(--espace-interne);left:var(--espace-interne);padding:var(--espace-interne) var(--espace-cellule);background:var(--couleur-fond-contenu);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-forte);transform:translateY(-200%)}
.aller-contenu:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zone{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--espace-carte)}
.sec{padding-block:var(--espace-blocSite)}
.ligne-icone{display:flex;align-items:center;gap:var(--co-etat-ecartIcone)}
.ligne-icone-haut{display:flex;align-items:flex-start;gap:var(--co-etat-ecartIcone)}
.ligne-icone-haut svg{flex:none;margin-top:var(--espace-enLigne)}
.liste .icone-secondaire{color:var(--couleur-texte-secondaire)}
.montant-inline{font-variant-numeric:tabular-nums;font-weight:var(--typographie-montant-fontWeight)}
.mono{font-family:var(--fonte-mono);font-size:var(--typographie-label-fontSize);font-weight:var(--typographie-label-fontWeight);letter-spacing:var(--typographie-label-letterSpacing);text-transform:uppercase}
.eyebrow{color:var(--couleur-texte-marque);margin-bottom:var(--espace-cellule)}
h1,h2,h3{font-family:var(--fonte-display);letter-spacing:var(--typographie-titrePage-letterSpacing);text-wrap:balance}
h1{font-size:var(--typographie-accroche-fontSize);line-height:var(--typographie-accroche-lineHeight);font-weight:var(--typographie-accroche-fontWeight);letter-spacing:var(--typographie-accroche-letterSpacing)}
h2{font-size:var(--typographie-titrePage-fontSize);line-height:var(--typographie-titrePage-lineHeight);font-weight:var(--typographie-titrePage-fontWeight)}
h3{font-size:var(--typographie-titreSection-fontSize);line-height:var(--typographie-titreSection-lineHeight);font-weight:var(--typographie-titreSection-fontWeight)}
p{text-wrap:pretty}
.lead{font-size:var(--typographie-texte-fontSize);color:var(--couleur-texte-secondaire);max-width:62ch;margin-top:var(--espace-cellule)}
/* — bandeau — */
.bandeau{position:sticky;top:0;z-index:9;background:var(--co-navigation-barre-fond);border-bottom:var(--co-etat-epaisseurBordure) solid var(--co-navigation-barre-bordureBas)}
.bandeau .zone{display:flex;align-items:center;gap:var(--espace-carte);min-height:var(--co-navigation-barre-hauteur)}
.marque{display:flex;align-items:center;gap:var(--espace-interne);color:var(--co-logo-texte);text-decoration:none}
.marque img{width:calc(var(--espace-blocSite) * 3);min-width:var(--co-logo-largeurMinLockup);height:auto}
.menu,.nav-large{margin-left:auto}
.nav-large{display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--espace-interne);min-height:var(--co-champ-hauteurMin);padding-inline:var(--espace-cellule);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-champ);border-radius:var(--rayon-controle);color:var(--couleur-texte-principal)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] nav{display:grid}
.menu nav{display:none;position:absolute;left:0;right:0;background:var(--couleur-fond-contenu);border-bottom:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-filet);padding:var(--espace-carte);gap:var(--espace-enLigne)}
.menu nav a,.nav-large a{display:block;padding:var(--espace-interne) var(--espace-cellule);color:var(--couleur-texte-principal);text-decoration:none;border-radius:var(--rayon-controle);font-size:var(--typographie-texte-fontSize)}
.menu nav a:hover,.nav-large a:hover{background:var(--couleur-fond-survol)}
.menu nav a[aria-current],.nav-large a[aria-current]{background:var(--couleur-fond-selection);color:var(--co-navigation-onglet-texteActif);font-weight:var(--typographie-montant-fontWeight)}
/* — boutons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-interne);min-height:var(--co-bouton-principal-hauteurMin);padding-inline:var(--co-bouton-principal-paddingX);background:var(--co-bouton-principal-fond);color:var(--co-bouton-principal-texte);border:0;border-radius:var(--co-bouton-principal-rayon);font-family:inherit;font-size:var(--typographie-texte-fontSize);font-weight:var(--typographie-montant-fontWeight);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--co-bouton-principal-fondSurvol);color:var(--co-bouton-principal-texte)}
.btn-2{background:var(--co-bouton-secondaire-fond);color:var(--co-bouton-secondaire-texte);border:var(--co-etat-epaisseurBordure) solid var(--co-bouton-secondaire-bordure)}
.btn-2:hover{background:var(--couleur-fond-survol);color:var(--couleur-texte-principal)}
.btns{display:flex;flex-wrap:wrap;gap:var(--espace-cellule);margin-top:var(--espace-panneau)}
/* — hero — */
.hero{background:var(--couleur-fond-pleine);color:var(--couleur-texte-surPlein);padding-block:var(--espace-blocSite)}
.hero h1{color:var(--couleur-texte-surPlein)}
.hero p{color:var(--couleur-fond-selection);max-width:46ch;margin-top:var(--espace-carte);font-size:var(--typographie-lead-fontSize);line-height:var(--typographie-lead-lineHeight)}
.hero .mono{color:var(--couleur-sombre-texte-marque);margin-bottom:var(--espace-carte)}
.hero .btn-2{background:transparent;color:var(--couleur-texte-surPlein);border-color:var(--couleur-sombre-texte-marque)}
.hero .btn-2:hover{background:var(--couleur-action-fond);color:var(--couleur-texte-surPlein)}
.hero .socle{margin-top:var(--espace-panneau);padding-top:var(--espace-carte);border-top:var(--co-etat-epaisseurBordure) solid var(--couleur-sombre-texte-marque);color:var(--couleur-fond-selection);font-size:var(--typographie-interface-fontSize)}
/* — grilles et cartes — */
.grille{display:grid;gap:var(--espace-carte);margin-top:var(--espace-panneau)}
.carte{background:var(--co-carte-fond);border:var(--co-etat-epaisseurBordure) solid var(--co-carte-bordure);border-radius:var(--co-carte-rayon);padding:var(--co-carte-padding);box-shadow:var(--co-carte-ombre)}
.carte h2,.carte h3{margin-bottom:var(--espace-interne);font-size:var(--typographie-titreSection-fontSize);line-height:var(--typographie-titreSection-lineHeight)}
.carte p{color:var(--couleur-texte-secondaire);font-size:var(--typographie-interface-fontSize);line-height:var(--typographie-interface-lineHeight)}
.liste{display:grid;gap:var(--espace-cellule);margin-top:var(--espace-carte);padding:0;list-style:none}
.liste li{display:grid;grid-template-columns:auto 1fr;gap:var(--espace-cellule);align-items:start;font-size:var(--typographie-interface-fontSize)}
.liste svg{margin-top:var(--espace-enLigne);color:var(--couleur-texte-marque)}
/* — exemple de possibilité : jamais confondable avec une réalisation — */
.exemple{border:var(--co-etat-epaisseurBordure) dashed var(--couleur-bordure-champ);border-radius:var(--co-carte-rayon);padding:var(--co-carte-padding);background:repeating-linear-gradient(135deg,var(--couleur-fond-app) 0 6px,var(--couleur-fond-enTete) 6px 12px);color:var(--couleur-texte-principal)}
.exemple h2,.exemple h3{color:var(--couleur-etat-neutre-texte);font-size:var(--typographie-titreSection-fontSize);line-height:var(--typographie-titreSection-lineHeight)}
.exemple h2 a,.exemple h3 a{color:inherit;text-decoration-color:var(--couleur-bordure-filet)}
.exemple p{color:var(--couleur-etat-neutre-texte);font-size:var(--typographie-interface-fontSize)}
.etiq-exemple{display:inline-flex;align-items:center;gap:var(--espace-enLigne);border:var(--co-etat-epaisseurBordure) dashed var(--couleur-etat-neutre-texte);color:var(--couleur-etat-neutre-texte);background:var(--couleur-fond-contenu);border-radius:var(--co-etat-rayon);padding:var(--co-etat-paddingY) var(--co-etat-paddingX);margin-bottom:var(--espace-cellule)}
.exemple .liste li{color:var(--couleur-etat-neutre-texte)}
.exemple .liste svg{color:var(--couleur-etat-neutre-texte)}
.avert-exemple{margin-top:var(--espace-carte);padding-top:var(--espace-cellule);border-top:var(--co-etat-epaisseurBordure) dashed var(--couleur-bordure-champ);color:var(--couleur-etat-neutre-texte);font-size:var(--typographie-interface-fontSize)}
/* — réalisation réelle — */
.reel{background:var(--co-carte-fond);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-forte);border-radius:var(--co-carte-rayon);overflow:hidden}
.reel .chapeau{display:flex;align-items:center;gap:var(--espace-interne);background:var(--couleur-fond-pleine);color:var(--couleur-texte-surPlein);padding:var(--espace-interne) var(--espace-carte)}
.reel .chapeau svg{color:var(--couleur-sombre-texte-marque);height:var(--espace-carte);width:auto}
.reel .corps{padding:var(--co-carte-padding)}
.reel h2,.reel h3{margin-bottom:var(--espace-enLigne);font-size:var(--typographie-titreSection-fontSize);line-height:var(--typographie-titreSection-lineHeight)}
.reel .secteur{color:var(--couleur-texte-secondaire);font-size:var(--typographie-interface-fontSize)}
.realisation-note{margin-top:var(--espace-carte);color:var(--couleur-texte-secondaire);font-size:var(--typographie-interface-fontSize)}
.reel .liste{margin-top:var(--espace-cellule)}
.captures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--espace-carte);margin-top:var(--espace-panneau)}
.captures img{width:100%;height:auto;border-radius:var(--rayon-controle);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-filet)}
.liste-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--espace-cellule);padding:0;list-style:none}
.liste-liens a{display:block;padding:var(--espace-interne) var(--espace-cellule);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-filet);border-radius:var(--rayon-controle);text-decoration:none;color:var(--couleur-texte-principal);background:var(--couleur-fond-contenu)}
.liste-liens a:hover{background:var(--couleur-fond-survol)}
.captures-note{margin-top:var(--espace-cellule);font-size:var(--typographie-interface-fontSize);color:var(--couleur-texte-secondaire)}
.etat{display:inline-flex;align-items:center;gap:var(--co-etat-ecartIcone);border-radius:var(--co-etat-rayon);padding:var(--co-etat-paddingY) var(--co-etat-paddingX);font-size:var(--co-etat-typographie-fontSize);font-weight:var(--typographie-montant-fontWeight);border:var(--co-etat-epaisseurBordure) solid}
.etat-service{color:var(--co-etat-paye-texte);background:var(--co-etat-paye-fond);border-color:var(--co-etat-paye-bordure)}
/* — notes — */
.note{margin-top:var(--espace-carte);padding:var(--espace-cellule) var(--espace-carte);border-left:var(--co-bouton-focus-epaisseur) solid var(--couleur-texte-marque);background:var(--couleur-fond-contenu);color:var(--couleur-texte-secondaire);font-size:var(--typographie-interface-fontSize)}
.note-neutre{border-left-color:var(--couleur-etat-neutre-texte)}
/* — étapes — */
.etapes{counter-reset:e;display:grid;gap:var(--espace-carte);margin-top:var(--espace-panneau);padding:0;list-style:none}
.etapes li{counter-increment:e;background:var(--couleur-fond-contenu);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-filet);padding:var(--espace-carte)}
.etapes li::before{content:counter(e,decimal-leading-zero);display:block;font-family:var(--fonte-mono);font-size:var(--typographie-label-fontSize);letter-spacing:var(--typographie-label-letterSpacing);color:var(--couleur-texte-marque);margin-bottom:var(--espace-interne)}
.etapes h3{font-size:var(--typographie-lead-fontSize)}
.etapes p{color:var(--couleur-texte-secondaire);font-size:var(--typographie-interface-fontSize);margin-top:var(--espace-enLigne)}
/* — formulaire — */
.form{margin-top:var(--espace-panneau);display:grid;gap:var(--espace-champ)}
.champ{display:grid;gap:var(--espace-interne);border:0;padding:0;min-inline-size:0}
.champ label,.champ legend{font-weight:var(--typographie-montant-fontWeight);font-size:var(--typographie-interface-fontSize)}
.champ .aide{color:var(--couleur-texte-secondaire);font-size:var(--typographie-reference-fontSize)}
input,select,textarea{font-family:inherit;font-size:var(--typographie-texte-fontSize);color:var(--co-champ-texte);background:var(--co-champ-fond);border:var(--co-etat-epaisseurBordure) solid var(--co-champ-bordure);border-radius:var(--co-champ-rayon);padding:var(--co-champ-paddingY) var(--co-champ-paddingX);min-height:var(--co-champ-hauteurMin);width:100%}
textarea{min-height:calc(var(--co-champ-hauteurMin) * 3);resize:vertical}
input[type=file]{padding:var(--espace-interne);background:var(--couleur-fond-app)}
.champ.err input,.champ.err textarea,.champ.err select{border-color:var(--couleur-etat-retard-texte);border-width:var(--co-bouton-focus-epaisseur)}
.champ.err .choix{outline:var(--co-bouton-focus-epaisseur) solid var(--couleur-etat-retard-texte);outline-offset:var(--co-bouton-focus-decalage)}
.msg-err{display:none;align-items:center;gap:var(--co-etat-ecartIcone);color:var(--couleur-etat-retard-texte);font-size:var(--typographie-interface-fontSize)}
.champ.err .msg-err{display:flex}
.choix{display:flex;flex-wrap:wrap;gap:var(--espace-interne)}
.choix label{display:inline-flex;align-items:center;gap:var(--espace-interne);border:var(--co-etat-epaisseurBordure) solid var(--couleur-bordure-champ);border-radius:var(--co-champ-rayon);padding:var(--espace-interne) var(--espace-cellule);min-height:var(--co-champ-hauteurMin);background:var(--couleur-fond-contenu);font-weight:var(--typographie-texte-fontWeight)}
.choix input{width:auto;min-height:0}
.consent{display:grid;grid-template-columns:auto 1fr;gap:var(--espace-cellule);align-items:start;font-size:var(--typographie-interface-fontSize);color:var(--couleur-texte-secondaire)}
.consent input{width:auto;min-height:0;margin-top:var(--espace-enLigne)}
.consent label{font-weight:var(--typographie-texte-fontWeight)}
.aide-envoi{margin-top:var(--espace-interne)}
.bilan{display:none;gap:var(--espace-cellule);padding:var(--espace-carte);border:var(--co-etat-epaisseurBordure) solid var(--couleur-etat-retard-bordure);background:var(--couleur-etat-retard-fond);color:var(--couleur-etat-retard-texte)}
.bilan ul{margin:var(--espace-interne) 0 0;padding-left:var(--espace-champ);font-size:var(--typographie-interface-fontSize)}
.bilan a{color:var(--couleur-etat-retard-texte)}
.bilan-titre{font-weight:var(--typographie-montant-fontWeight)}
.confirme{display:none;gap:var(--espace-cellule);padding:var(--espace-panneau);border:var(--co-etat-epaisseurBordure) solid var(--couleur-etat-paye-bordure);background:var(--couleur-etat-paye-fond);color:var(--couleur-etat-paye-texte)}
.confirme h3{color:var(--couleur-etat-paye-texte)}
.confirme p,.confirme li{color:var(--couleur-etat-paye-texte);font-size:var(--typographie-interface-fontSize)}
[data-etat=erreur] .bilan{display:grid}
[data-etat=envoye] .confirme{display:grid}
[data-etat=envoye] .form{display:none}
html:not([data-js]) .form{display:none}
html[data-js] .sans-js{display:none}
/* — pied — */
.pied{background:var(--couleur-fond-pleine);color:var(--couleur-fond-selection);padding-block:var(--espace-blocSite);margin-top:var(--espace-blocSite)}
.pied a{color:var(--couleur-texte-surPlein)}
.pied .cols{display:grid;gap:var(--espace-panneau)}
.pied nav{display:grid;gap:var(--espace-interne)}
.pied .mono{color:var(--couleur-sombre-texte-marque);margin-bottom:var(--espace-cellule)}
.pied small{display:block;color:var(--couleur-fond-selection);font-size:var(--typographie-reference-fontSize);line-height:var(--typographie-interface-lineHeight)}
.marque-pied,.marque-pied span{color:var(--couleur-texte-surPlein)}
.marque-pied svg{color:var(--couleur-sombre-texte-marque)}
.pied-presentation{margin-top:var(--espace-cellule);color:var(--couleur-fond-selection);max-width:38ch}
.pied-identite,.pied-coordonnees{margin-top:var(--espace-carte)}
.liste-contraste span{color:var(--couleur-texte-surPlein)}
.liste-contraste svg{color:var(--couleur-sombre-texte-marque)}
/* Variantes de composition placées après les composants qu'elles ajustent. */
.fond-contenu{background:var(--couleur-fond-contenu)}
.titre-page{font-size:var(--typographie-titreEcran-fontSize)}
.zone-etroite{max-width:76ch}
.espace-haut-bloc{margin-top:var(--espace-blocSite)}
.espace-haut-panneau{margin-top:var(--espace-panneau)}
.espace-haut-carte{margin-top:var(--espace-carte)}
.espace-haut-cellule{margin-top:var(--espace-cellule)}
.sans-espace-haut{margin-top:0}
/* — grand écran — */
@media (min-width:760px){
 .grille.deux{grid-template-columns:1fr 1fr}
 .grille.trois{grid-template-columns:repeat(2,1fr)}
 .etapes{grid-template-columns:repeat(2,1fr)}
 .pied .cols{grid-template-columns:2fr 1fr 1fr}
 .champ.moitie{grid-column:span 1}
 .form.duo{grid-template-columns:1fr 1fr}
 .form.duo>.pleine{grid-column:1 / -1}
}
@media (min-width:1000px){
 .sec{padding-block:var(--espace-sectionSite)}
 h1{font-size:var(--typographie-accrocheSite-fontSize);letter-spacing:var(--typographie-accrocheSite-letterSpacing)}
 h2{font-size:var(--typographie-titreEcran-fontSize)}
 .grille.trois{grid-template-columns:repeat(3,1fr)}
 .etapes{grid-template-columns:repeat(4,1fr)}
 .menu{display:none}
 .nav-large{display:flex;align-items:center;gap:var(--espace-enLigne)}
 .hero .zone{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--espace-blocSite);align-items:end}
 .duo-large{display:grid;grid-template-columns:1fr 1fr;gap:var(--espace-panneau);align-items:start}
}
@media print{.bandeau,.menu{display:none}body{background:var(--couleur-fond-contenu)}}

/* Champ piège anti-robot : hors écran plutôt que display:none, que les robots
   savent détecter. Invisible pour un humain, y compris au lecteur d'écran via
   aria-hidden et tabindex="-1" posés sur le balisage. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}