/* Portail domaines & DNS — feuille de style unique, sobre et responsive. */

:root {
  --fond: #f7f8fa;
  --carte: #ffffff;
  --trait: #dfe3e8;
  --texte: #1c2530;
  --doux: #667080;
  --accent: #1f4e79;
  --accent-clair: #eaf1f8;
  --warn: #8a5a00;
  --warn-fond: #fff6e0;
  --bad: #9b1c1c;
  --bad-fond: #fdeaea;
  --info-fond: #eef4fb;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

a { color: var(--accent); }
code, .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }

/* --- Barre du haut --- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem;
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
}
.topbar .brand { font-weight: 600; text-decoration: none; color: var(--texte); }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
/* --- Menu principal ---------------------------------------------------
   Icone + texte. L'icone accompagne le libelle, elle ne le remplace pas :
   une icone seule se devine, et se devine mal. L'entree active se marque
   par un trait sous elle en plus de la couleur — un fond colore seul
   disparait pour un daltonien, et le portail parle a des clients.
   --------------------------------------------------------------------- */
.topbar nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem .35rem; border-radius: var(--radius);
  text-decoration: none; color: var(--doux);
  border-bottom: 2px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.topbar nav a .ic { width: 1.05em; height: 1.05em; flex: 0 0 auto;
                    opacity: .75; }
.topbar nav a:hover { background: var(--fond); color: var(--texte); }
.topbar nav a:hover .ic { opacity: 1; }
.topbar nav a.on {
  background: var(--accent-clair); color: var(--accent); font-weight: 500;
  border-bottom-color: var(--accent);
}
.topbar nav a.on .ic { opacity: 1; }
.topbar nav a:focus-visible { outline: 2px solid var(--accent);
                              outline-offset: 1px; }

/* Sous 640 px, c'est le TEXTE qui s'efface, pas l'icone : le texte prend la
   place, l'icone reste reconnaissable. Le libelle survit dans le title pour
   qui survole, et dans le nom accessible pour les lecteurs d'ecran. */
@media (max-width: 640px) {
  .topbar nav a { padding: .45rem .55rem; }
  .topbar nav a span:not(.pastille) { position: absolute; width: 1px;
    height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar nav a .ic { width: 1.3em; height: 1.3em; }
}
.topbar .logout { display: flex; align-items: center; gap: .6rem; margin: 0; }
.topbar .who { color: var(--doux); font-size: .9em; }
.topbar button {
  padding: .3rem .7rem; border: 1px solid var(--trait); background: var(--carte);
  border-radius: var(--radius); cursor: pointer; color: var(--texte);
}
.topbar button:hover { background: var(--fond); }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }

h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .7rem; }
.crumb { color: var(--doux); font-size: .9em; margin: 0 0 .3rem; }
.muted { color: var(--doux); }
.lede { color: var(--doux); margin-top: -.5rem; }

/* --- Avertissements --- */
.alert {
  padding: .7rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--trait); margin: 0 0 1rem;
}
.alert.warn  { background: var(--warn-fond); border-color: #f0d9a0; color: var(--warn); }
.alert.error { background: var(--bad-fond);  border-color: #f0bcbc; color: var(--bad); }
.alert.info  { background: var(--info-fond); border-color: #cddff0; color: var(--accent); }

/* --- Tuiles --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.tile {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius); padding: 1rem;
  text-decoration: none; color: inherit;
}
a.tile:hover { border-color: var(--accent); }
.tile .num { font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.tile .lbl { color: var(--doux); font-size: .88em; }
.tile.warn .num { color: var(--warn); }
.tile.bad .num  { color: var(--bad); }

/* --- Tableaux --- */
.tablewrap {
  overflow-x: auto;                 /* le tableau defile, jamais la page */
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--radius);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: .82em; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--fond); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ns { font-size: .9em; color: var(--doux); white-space: nowrap; }
td.val { max-width: 34rem; overflow-wrap: anywhere; }
td.warn, .warn { color: var(--warn); }
td.bad, .bad { color: var(--bad); font-weight: 500; }

.chip {
  display: inline-block; padding: .05rem .45rem; margin: 0 .2rem .2rem 0;
  background: var(--accent-clair); color: var(--accent);
  border-radius: 999px; font-size: .8em; white-space: nowrap;
}

/* --- Fiche --- */
.facts {
  display: grid; grid-template-columns: minmax(11rem, auto) 1fr; gap: .1rem 1.2rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius); padding: 1rem; margin: 0;
}
.facts dt { color: var(--doux); font-size: .9em; padding: .35rem 0; }
.facts dd { margin: 0; padding: .35rem 0; }

/* --- Filtres --- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.filters input, .filters select {
  padding: .4rem .6rem; border: 1px solid var(--trait);
  border-radius: var(--radius); background: var(--carte); color: var(--texte);
}
.filters input[type=search] { min-width: 15rem; flex: 1; }
.filters button {
  padding: .4rem .9rem; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; border-radius: var(--radius); cursor: pointer;
}
.filters .clear { align-self: center; font-size: .9em; }

.typefilter { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0; }
.typefilter a {
  padding: .2rem .6rem; border: 1px solid var(--trait); border-radius: 999px;
  text-decoration: none; color: var(--doux); background: var(--carte); font-size: .88em;
}
.typefilter a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; color: var(--doux); }

/* --- Connexion --- */
.login-wrap {
  max-width: 25rem; margin: 3rem auto; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--radius); padding: 1.8rem;
}
.login-wrap h1 { font-size: 1.25rem; }
.login-wrap .lede { margin-top: 0; }
.login-wrap label { display: block; margin: .9rem 0 .25rem; font-size: .9em; color: var(--doux); }
.login-wrap input {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--trait);
  border-radius: var(--radius); background: var(--fond); color: var(--texte); font-size: 1rem;
}
/* Le bouton de connexion, et LUI SEUL. Sans le :not(), les trois boutons de
   langue heritaient de « width: 100% » et de la couleur d'accent : ils
   pesaient visuellement autant que l'action principale, alors qu'ils ne sont
   qu'une commodite. */
.login-wrap button:not(.langue) {
  width: 100%; margin-top: 1.2rem; padding: .65rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); font-size: 1rem; font-weight: 500;
  letter-spacing: .01em; cursor: pointer;
}
.login-wrap button:not(.langue):hover { filter: brightness(1.1); }

/* En-tete : la marque et le nom sur une ligne, les langues repoussees a
   droite. Une seule ligne au lieu de trois blocs empiles — l'outil se
   presente, il ne se raconte pas. */
.login-tete {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem;
}
.login-tete h1 { font-size: 1.2rem; margin: 0; flex: 1 1 auto; }
.logo-connexion {
  height: 2.2rem; width: auto; margin: 0; display: block; flex: none;
}

footer {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.2rem 2rem;
  color: var(--doux); font-size: .85em; border-top: 1px solid var(--trait);
}
footer p { margin: 0; }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .topbar { gap: .5rem; }
}

/* --- Marque ---------------------------------------------------------- */
/* Le logo officiel de D&D, fourni par la session du site dand.ch le
   2026-09-14 et fige depuis la mise en ligne du 05.09. Il remplace la
   pastille typographique qui tenait lieu de marque jusqu'ici.

   ON NE FIXE QUE LA HAUTEUR, et « width: auto » avec elle. Le viewBox est
   133 x 40, cale sur une mesure reelle du nom au navigateur : il n'y a pas de
   vide a droite. Imposer aussi la largeur deformerait le verrou.

   Les attributs width/height du <img> restent dans le HTML pour reserver la
   place avant que le SVG soit charge — sans eux la barre du haut sursaute au
   chargement. Le CSS les surcharge ensuite.

   Le fichier est sur fond TRANSPARENT et porte ses propres couleurs : pas de
   pastille, pas de fond d'accent derriere. Poser l'encre bleu nuit sur notre
   --accent donnerait deux bleus qui se disputent. */
.topbar .brand { display: flex; align-items: center; gap: .6rem; }
.logo {
  height: 2rem; width: auto; display: block;
}
.brandname { font-weight: 600; }

/* Les pages hors session — connexion, second facteur, mot de passe oublie —
   montrent la marque en grand et centree. Meme fichier, autre taille. */
.logo-big {
  height: 2.8rem; width: auto;
  margin: 0 auto .8rem; display: block;
}

/* --- Icônes ---------------------------------------------------------- */
/* Décoratives : elles doublent toujours un texte ou portent un title.
   Jamais seules porteuses d'information. */
.ic {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex: none;
}
.ic-tile { width: 1.4rem; height: 1.4rem; color: var(--doux); margin-bottom: .1rem; }
.tile.warn .ic-tile { color: var(--warn); }
.tile.bad  .ic-tile { color: var(--bad); }

/* --- Pastille de fraîcheur ------------------------------------------- */
/* La couleur n'est pas seule à distinguer les états : le glyphe change
   (✓ / !), et le title porte la date. Reste lisible en noir et blanc. */
.dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .72rem; font-weight: 700; line-height: 1;
  border: 1px solid transparent; cursor: help;
}
.dot-ok   { background: #e6f4ea; color: #1e7b34; border-color: #bfe3c9; }
.dot-warn { background: var(--warn-fond); color: var(--warn); border-color: #f0d9a0; }
td.cc, th.cc { text-align: center; }

/* --- Bouton discret --------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border: 1px solid var(--trait);
  border-radius: var(--radius); background: var(--carte);
  text-decoration: none; color: var(--accent);
}
.bouton:hover { border-color: var(--accent); background: var(--accent-clair); }

/* --- Menu compte ------------------------------------------------------ */
.compte { display: flex; align-items: center; gap: .35rem; }
.compte form { margin: 0; }
.bouton-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--carte); color: var(--doux); cursor: pointer;
  text-decoration: none;
}
.bouton-ic:hover { background: var(--fond); color: var(--texte); border-color: var(--accent); }
.bouton-ic .ic { width: 1.05rem; height: 1.05rem; }

/* Texte reserve aux lecteurs d'ecran : une icone seule n'est jamais
   comprehensible sans son equivalent textuel. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.retour { margin-top: 1.2rem; font-size: .9em; text-align: center; }
.aide { font-size: .85em; margin: .5rem 0 0; }
.form-etroit { max-width: 25rem; background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius); padding: 1.2rem; }
.form-etroit label { display: block; margin: .8rem 0 .25rem; font-size: .9em; color: var(--doux); }
.form-etroit input {
  width: 100%; padding: .5rem .7rem; border: 1px solid var(--trait);
  border-radius: var(--radius); background: var(--fond); color: var(--texte); font-size: 1rem;
}
.form-etroit button {
  margin-top: 1.1rem; padding: .55rem 1.2rem; background: var(--accent);
  color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}

/* --- Filtres et tri --------------------------------------------------- */
.filtres {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: .8rem; padding: .8rem;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--radius);
}
.filtres input[type=search], .filtres select {
  padding: .4rem .6rem; border: 1px solid var(--trait);
  border-radius: var(--radius); background: var(--fond);
  color: var(--texte); font-size: .95em; max-width: 100%;
}
.filtres input[type=search] { min-width: 11rem; flex: 1 1 11rem; }
/* La recherche et son champ forment un seul objet visuel. */
.recherche { display: flex; gap: .3rem; flex: 1 1 20rem; min-width: 16rem; }
.recherche select {
  padding: .4rem .5rem; font-size: .9em; max-width: 11rem;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
.filtres button {
  padding: .4rem 1rem; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; border-radius: var(--radius); cursor: pointer;
}
.filtres .clear { font-size: .9em; }
.filtres .case { display: inline-flex; align-items: center; gap: .35rem; font-size: .92em; color: var(--doux); }

/* Menus de filtres a cases a cocher. Replies par defaut : sept groupes
   deplies occuperaient tout l'ecran avant le premier domaine. */
.grpf { position: relative; }
.grpf > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .4rem .7rem; font-size: .95em; white-space: nowrap;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
.grpf > summary::-webkit-details-marker { display: none; }
.grpf > summary::after { content: " ▾"; color: var(--doux); }
.grpf[open] > summary { border-color: var(--accent); color: var(--accent); }
.grpf > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grpf .pastille {
  display: inline-block; min-width: 1.1em; padding: 0 .3em; margin-left: .2em;
  text-align: center; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .85em;
}
.grpf-panneau {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0;
  min-width: 13rem; max-height: 18rem; overflow-y: auto;
  padding: .5rem; display: flex; flex-direction: column; gap: .15rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.grpf-panneau .case {
  padding: .2rem .3rem; border-radius: var(--radius);
  color: var(--texte); white-space: nowrap;
}
/* « .case » pose display:inline-flex, dont la specificite l'emporte sur le
   display:none que le navigateur applique a [hidden]. Sans cette regle, le
   champ de recherche du menu masquait les etiquettes... sans que rien ne
   disparaisse. Constate le 2026-09-10. */
.grpf-panneau label[hidden] { display: none !important; }
.grpf-panneau .case:hover { background: var(--fond); }

/* Chercher et tout/rien : reveles par JavaScript, absents sans lui. */
.grpf-chercher {
  width: 100%; margin-bottom: .35rem; padding: .3rem .45rem;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte); font-size: .9em;
}
.grpf-actions {
  display: flex; gap: .4rem; margin: 0 0 .35rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--trait);
}
.grpf-actions button {
  padding: .15rem .5rem; font-size: .82em; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--doux);
}
.grpf-actions button:hover { color: var(--accent); border-color: var(--accent); }

/* Sur mobile, un panneau flottant sort de l'ecran : il se deplie en place. */
@media (max-width: 640px) {
  .grpf { width: 100%; }
  .grpf > summary { width: 100%; }
  .grpf-panneau { position: static; min-width: 0; box-shadow: none; }
}

th .tri { color: inherit; text-decoration: none; display: inline-block; white-space: nowrap; }
th .tri:hover { color: var(--accent); text-decoration: underline; }
th .tri-actif { color: var(--accent); }

/* --- Double authentification ----------------------------------------- */
.enrolement { max-width: 42rem; margin: 0 auto; }
.etapes section {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.etapes h2 { margin-top: 0; font-size: 1rem; }
.qr { display: flex; justify-content: center; padding: .8rem; }
.qr svg { width: 12rem; height: 12rem; background: #fff; }
.secret code {
  display: inline-block; padding: .4rem .7rem; background: var(--fond);
  border: 1px solid var(--trait); border-radius: var(--radius);
  letter-spacing: .12em; word-break: break-all;
}
.etapes input[type=text] {
  width: 100%; max-width: 14rem; padding: .55rem .7rem; font-size: 1.3rem;
  letter-spacing: .28em; text-align: center;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
.etapes label { display: block; margin: .6rem 0 .3rem; font-size: .9em; color: var(--doux); }
.etapes button {
  display: block; margin-top: .9rem; padding: .55rem 1.3rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}
.login-wrap input[name=code] { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.secours { margin-top: 1.5rem; border-top: 1px solid var(--trait); padding-top: .8rem; }
.secours summary { cursor: pointer; color: var(--doux); font-size: .92em; }
.codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem; margin: 1rem 0; max-width: 34rem;
}
.codes code {
  padding: .5rem; text-align: center; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--radius);
  letter-spacing: .06em; font-size: 1rem;
}

/* --- Sélecteur de langue --------------------------------------------- */
.langues { display: flex; gap: .1rem; margin: 0 .4rem 0 0; }

/* Variante discrete : de simples liens soulignes. Utilisee la ou le choix de
   langue ne doit pas concurrencer l'action principale de la page. */
.langues-compactes { gap: .5rem; margin: 0; flex: none; }
.langues-compactes .langue {
  padding: 0; background: none; border: none; border-radius: 0;
  font-size: .82rem; letter-spacing: .04em;
  color: var(--doux); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.langues-compactes .langue:hover { color: var(--accent); background: none; }
.langues-compactes .langue-active {
  color: var(--texte); font-weight: 600; text-decoration: none; cursor: default;
}
.langues-compactes .langue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langue {
  padding: .2rem .4rem; border: 1px solid transparent; background: none;
  color: var(--doux); font-size: .78em; font-weight: 600; letter-spacing: .03em;
  border-radius: var(--radius); cursor: pointer;
}
.langue:hover { background: var(--fond); color: var(--texte); }
.langue-active { color: var(--accent); background: var(--accent-clair); }


/* --- Refus de saisie -------------------------------------------------- */
/* Le resume se lit d'un coup d'oeil ; l'explication se deplie. Voir
   templates/_refus.html pour les trois regles. */
.refus {
  margin: .8rem 0; padding: .8rem 1rem;
  border: 1px solid var(--bad, #b4232c); border-left-width: 4px;
  border-radius: var(--radius); background: var(--carte);
}
.refus-titre {
  margin: 0 0 .5rem; font-weight: 600; color: var(--bad, #b4232c);
  display: flex; align-items: center; gap: .4rem;
}
.refus-liste { margin: 0; padding-left: 1.1rem; }
.refus-liste li { margin: .35rem 0; }
.refus-resume { font-weight: 500; }

/* Le « i » : petit, discret, mais cliquable au doigt (24 px de cible). */
.refus-plus { display: inline; }
.refus-plus > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; margin-left: .35rem; vertical-align: middle;
  list-style: none; cursor: pointer; user-select: none;
  border: 1px solid var(--trait); border-radius: 999px;
  font-size: .8em; font-style: italic; font-weight: 700;
  color: var(--doux); background: var(--fond);
}
.refus-plus > summary::-webkit-details-marker { display: none; }
.refus-plus > summary:hover { color: var(--accent); border-color: var(--accent); }
.refus-plus > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refus-plus[open] > summary { color: var(--accent); border-color: var(--accent); }
.refus-explication {
  margin: .5rem 0 .2rem; padding: .6rem .8rem;
  background: var(--fond); border-radius: var(--radius);
  font-size: .93em; color: var(--texte); line-height: 1.5;
}


/* --- Rattachement d'un domaine (personnel seulement) ------------------ */
.rattachement { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; align-items: center; }
.rattachement input[type=text] {
  padding: .3rem .5rem; font-size: .9em; min-width: 12rem;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
.rattachement select {
  padding: .3rem .5rem; font-size: .9em; max-width: 18rem;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
.rattachement button {
  padding: .3rem .8rem; font-size: .9em; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff;
}
.lien-zefix { font-size: .92em; }


/* --- Profil : des sections lisibles plutot qu'une page en vrac --------- */
.bloc-profil {
  margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--radius);
}
.bloc-profil h2 { margin: 0 0 .7rem; font-size: 1rem; }
.bloc-profil > p:last-child { margin-bottom: 0; }
.bloc-profil .facts { margin: 0; }


/* --- Fiche titulaire : une icone par ligne, alignee sur le texte ------- */
.titulaire p { margin: 0 0 .25rem; display: flex; align-items: flex-start; gap: .45rem; }
.titulaire p:last-child { margin-bottom: 0; }
.titulaire .ic { margin-top: .22em; opacity: .75; }

/* --- « Modifier » : la fonction existe, elle ne s'impose pas ----------- */
.modifier { margin-top: .5rem; }
.modifier > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  list-style: none; cursor: pointer; font-size: .9em; color: var(--doux);
  text-decoration: underline; text-underline-offset: 3px;
}
.modifier > summary::-webkit-details-marker { display: none; }
.modifier > summary:hover { color: var(--accent); }
.modifier[open] > summary { color: var(--accent); }


/* --- Edition DNS ------------------------------------------------------ */
/* 44rem et non 34 : une cle DKIM fait 400 caracteres, et on doit pouvoir la
   relire. Les champs d'une ligne ne souffrent pas d'etre plus larges ; une
   valeur qu'on ne peut pas relire, si. Denis, 2026-09-16. */
.form-dns { max-width: 44rem; }
.form-dns .champ { margin-bottom: .9rem; }
.form-dns label { display: block; margin-bottom: .25rem; font-size: .9em; color: var(--doux); }
/* « textarea » manquait ici : le navigateur lui donnait sa largeur par
   defaut — une vingtaine de colonnes — pendant que tous les autres champs
   occupaient la ligne entiere. */
.form-dns input, .form-dns select, .form-dns textarea {
  width: 100%; padding: .5rem .65rem; font-size: 1rem;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--texte);
}
/* Une valeur DNS se relit caractere par caractere : un O et un 0 ne doivent
   pas se ressembler. Et on la redimensionne en hauteur seulement — l'elargir
   deborderait du formulaire. */
.form-dns textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; line-height: 1.45; resize: vertical;
}
.form-dns .aide { margin: .25rem 0 0; font-size: .85em; color: var(--doux); }
.form-dns button {
  padding: .55rem 1.2rem; font-size: 1rem; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff;
}

/* Demandes en cours, au-dessus du contenu de la zone. */
.demandes {
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.demandes h2 { margin: 0 0 .5rem; font-size: 1rem; }
.demandes ul { margin: 0; padding-left: 1.1rem; }
.demandes li { margin: .35rem 0; }
.enligne { display: inline; }
.enligne button, .actions a {
  margin-left: .3rem; padding: .1rem .5rem; font-size: .85em; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--radius);
  background: var(--fond); color: var(--accent); text-decoration: none;
}
.enligne button.discret, .actions a { color: var(--doux); }
.enligne button:hover, .actions a:hover { color: var(--accent); border-color: var(--accent); }
td.actions { white-space: nowrap; }

/* Récapitulatif d'une suppression : on lit, on ne saisit pas. */
.recap { margin: 0 0 1rem; padding: .8rem 1rem;
         background: var(--fond); border: 1px solid var(--trait);
         border-radius: var(--radius); }

/* Onglets entre les deux listes de demandes. */
.onglets { display: flex; gap: .3rem; margin: 0 0 1rem;
           border-bottom: 1px solid var(--trait); }
.onglets a { padding: .45rem .9rem; text-decoration: none; color: var(--doux);
             border: 1px solid transparent; border-bottom: none;
             border-radius: var(--radius) var(--radius) 0 0; }
.onglets a:hover { color: var(--accent); }
.onglets a.on { color: var(--texte); background: var(--carte);
                border-color: var(--trait); margin-bottom: -1px; }
.aide.erreur { color: var(--bad, #b4232c); }
.lien-titulaire { font-size: .92em; }

/* Titre a gauche, action a droite : l'action principale d'une page se trouve
   la ou l'oeil finit sa lecture du titre. */
.titre-action { display: flex; align-items: center; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; }
.titre-action h1 { margin: 0; }
/* L'action principale de la page : elle doit se voir. Elle avait l'aspect
   d'un bouton discret, comme « Exporter » ou « Filtrer » — et se confondait
   avec eux alors que c'est la seule qui engage quelque chose.
   Signale par Denis le 2026-09-14. */
.bouton-ajout {
  white-space: nowrap;
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600;
}
.bouton-ajout:hover { background: #17395a; border-color: #17395a; }
.bouton-ajout .ic { width: 1.05rem; height: 1.05rem; }

/* Règles du mot de passe : lisibles d'un coup d'œil, sans puces criardes. */
.regles-mdp { margin: .4rem 0 .3rem; padding-left: 1.1rem; font-size: .9em;
              color: var(--doux); }
.regles-mdp li { margin: .12rem 0; }

/* Coordonnées du titulaire : un bloc à part, discret tant qu'il ne sert pas. */
.bloc-titulaire { border: 1px solid var(--trait); border-radius: 6px;
                  padding: .7rem .9rem 1rem; margin: 1rem 0; }
.bloc-titulaire legend { padding: 0 .4rem; font-weight: 600; font-size: .95em; }

/* Avertissement avant bascule : un « ! » orangé, distinct du « i » des refus. */
.refus-plus.avertissement > summary { color: var(--alerte, #9a5b00);
                                      border-color: currentColor; }
.avert-liste { white-space: pre-wrap; margin: .3rem 0 .6rem; font-size: .92em; }

/* Une case a cocher se lit « [x] libellé », pas l'inverse. */
.champ-case label { display: inline-flex; align-items: baseline; gap: .45rem;
                    font-weight: 400; cursor: pointer; }
/* width: auto EST INDISPENSABLE, et son absence se voyait a l'ecran.
   Plus haut, « .form-dns input { width: 100% } » vise les champs de saisie —
   mais il attrape aussi les cases a cocher. Dans un label en inline-flex, une
   case qui reclame 100% de la largeur ne laisse rien au texte : le libelle se
   brisait A CHAQUE MOT, une ligne par mot. Signale par Denis le 2026-09-14,
   capture d'ecran a l'appui. « flex: 0 0 auto » ne suffit pas — la base est
   « auto », donc la largeur imposee l'emporte. */
.champ-case input[type=checkbox],
.champ-case input[type=radio] { margin: 0; flex: 0 0 auto; width: auto; }
.coordonnees-titulaire, .titulaire-handle {
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid var(--trait);
}

/* Un groupe de boutons radio : le libelle du GROUPE porte la question, les
   options ne sont que des reponses. Sans cette distinction on lit trois
   questions au lieu d'une. */
.champ-choix .libelle-groupe {
  display: block; margin-bottom: .35rem;
  font-size: .9em; color: var(--doux);
}
.champ-choix .champ-case { margin: .15rem 0; }
.champ-choix .champ-case label { color: var(--texte); font-size: 1rem; }

/* Périmètre d'une modification de contact : ce qu'elle touche vraiment. */
.perimetre .liste-perimetre { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.perimetre .liste-perimetre li { margin: .15rem 0; }

/* --- Proposer un mot de passe sûr -------------------------------------- */
/* Le bouton vient AVANT les champs : on veut qu'il soit vu avant que la
   personne ait commencé à en inventer un. */
.engendrer-mdp { margin: 0 0 .9rem; }
.engendrer-mdp .bouton { cursor: pointer; }
.mdp-propose {
  display: block; margin: .5rem 0 .2rem; padding: .5rem .65rem;
  background: var(--accent-clair); border: 1px solid var(--trait);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; letter-spacing: .04em;
  /* Vingt caractères doivent tenir, y compris sur un téléphone. */
  word-break: break-all;
}
/* L'icone de nouveau tirage n'apparait qu'une fois le premier mot de passe
   propose : avant, elle n'aurait aucun sens. */
.engendrer-mdp .bouton .ic { width: 1rem; height: 1rem; }

/* --- Le mot de passe imposé -------------------------------------------- */
/* Il s'affiche en clair, en grand, et doit pouvoir être sélectionné d'un
   geste : le cacher derrière des points obligerait à le retaper de mémoire,
   exactement ce qu'on veut éviter. */
.mdp-impose { margin: 1rem 0; }
.mdp-impose .mdp-propose {
  display: block; margin: .6rem 0; padding: .7rem .8rem;
  background: var(--accent-clair); border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; letter-spacing: .06em; word-break: break-all;
  user-select: all;   /* un clic suffit à tout sélectionner */
}
.mdp-impose .bouton .ic { width: 1rem; height: 1rem; }

/* --- La frise des étapes ------------------------------------------------ */
/* Elle dit trois choses : où on en est, combien il en reste, et ce qui est
   déjà réglé. Un formulaire d'un seul tenant n'en dit aucune. */
.frise { margin: 0 0 1.4rem; }
.frise ol {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0; padding: 0;
}
.frise li {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem; border: 1px solid var(--trait);
  border-radius: var(--radius);
  color: var(--doux); font-size: .9em; background: var(--carte);
}
.frise li a { display: flex; align-items: center; gap: .45rem;
              color: inherit; text-decoration: none; }
.frise li .rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; background: var(--fond);
  font-size: .8em; font-weight: 700;
}
.frise .faite { color: var(--accent); border-color: var(--accent-clair); }
.frise .faite .rang { background: var(--accent-clair); color: var(--accent); }
.frise .courante {
  color: var(--texte); border-color: var(--accent); font-weight: 600;
}
.frise .courante .rang { background: var(--accent); color: #fff; }
@media (max-width: 640px) {
  /* Sur petit écran, seul le numéro tient : le nom de l'étape en cours
     reste, les autres se réduisent à leur rang. */
  .frise li:not(.courante) .nom { display: none; }
}

/* Le verdict du registre, gardé visible jusqu'au bout : le prix et les
   conditions ne doivent pas disparaître après un clic sur « suivant ». */
.verdict {
  margin: 0 0 1.2rem; padding: .7rem .9rem;
  background: var(--accent-clair); border: 1px solid var(--trait);
  border-radius: var(--radius);
}
.verdict .verdict-nom { margin: 0 0 .3rem; }
.verdict .aide { margin: .2rem 0 0; }
/* « libre » et « déjà enregistré » ne sont ni une bonne ni une mauvaise
   nouvelle en soi : tout dépend de ce qu'on voulait en faire. Pas de vert
   ni de rouge, donc — ce qui suit dans l'encadré dit s'il y a un problème. */
.verdict .etat-libre, .verdict .etat-pris { font-weight: 600; }
/* Ce qui EMPÊCHE d'aller plus loin se distingue de ce qui informe : un
   domaine verrouillé contre le transfert n'est pas une remarque. */
.verdict .refus-resume { color: var(--bad); }

/* « Ce nom est-il libre ? », sur la page d'accueil. Le champ et son bouton
   sur une ligne, et qui se replient l'un sous l'autre sur téléphone — la
   feuille pose « input { width:100% } » dans les formulaires, d'où le flex
   plutôt qu'un simple enchaînement. */
.verifier-nom { margin: 0 0 1.4rem; max-width: 34rem; }
.verifier-nom label { display: block; font-size: .9em; color: var(--doux);
                      margin-bottom: .3rem; }
.verifier-nom .enligne { display: flex; gap: .6rem; flex-wrap: wrap;
                         align-items: center; }
.verifier-nom input { flex: 1 1 14rem; min-width: 0; }
.verifier-nom .aide { margin: .3rem 0 0; }

.recap { margin: 0 0 1rem; }
.recap dt { font-size: .85em; color: var(--doux); margin-top: .5rem; }
.recap dd { margin: 0; font-weight: 500; }

.navigation-etapes { display: flex; align-items: center; gap: .6rem;
                     flex-wrap: wrap; margin-top: 1.2rem; }

/* --- Ce qu'un registre demande en plus du titulaire ---------------------
   Un encadre, parce que ces questions ne sont pas du meme ordre que les
   coordonnees : elles ne valent que pour CE registre, et elles changent
   d'un domaine a l'autre. Les noyer dans la liste des champs ferait croire
   qu'on les redemandera toujours. */
.champs-registre {
  margin: 1rem 0 .4rem; padding: .8rem 1rem .4rem;
  border: 1px solid var(--bord, #d8dee6); border-radius: var(--radius);
  background: var(--carte);
}
.champs-registre > legend {
  padding: 0 .4rem; font-weight: 600; font-size: .92em;
  color: var(--accent);
}

/* Ce que le registre signale sans que ce soit bloquant : marque déposée
   revendiquée, tarif qui n'est pas l'ordinaire, registre muet. Assez visible
   pour arrêter l'œil, pas assez pour se lire comme un refus — ce n'en est
   pas un. */
.attention-prix {
  display: flex; align-items: flex-start; gap: .4rem;
  color: var(--warn, #9a5b00); font-weight: 500;
}
.attention-prix .ic { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }

/* L'étoile des champs qu'un registre exige. Discrète mais repérable : elle
   ne dit pas « erreur », elle dit « celui-là compte ». */
.requis {
  color: var(--bad, #b4232c); text-decoration: none; font-weight: 700;
  margin-left: .15rem; cursor: help;
}
.legende-requis { margin: 0 0 .6rem; }

/* Page de confirmation d'une bascule de délégation. Le nom du domaine en
   grand, et ce qui serait perdu en clair — pas replié derrière un signe. */
.grand { font-size: 1.35rem; font-weight: 600; margin: .2rem 0 .8rem; }
.pertes {
  margin: .6rem 0 1rem; padding: .7rem 1rem .7rem 2rem;
  border: 1px solid var(--bord, #d8dee6); border-left: 4px solid var(--bad, #b4232c);
  border-radius: var(--radius); background: var(--carte);
}
.pertes li { margin: .2rem 0; }

/* « Ne sera pas renouvelé » : la seule échéance qui mérite du rouge. Les
   autres sont des renouvellements, c'est-à-dire le fonctionnement normal. */
.chip-danger {
  background: var(--bad-fond, #fdeaea); color: var(--bad, #b4232c);
  border-color: #f0bcbc; font-weight: 600;
}

/* --- Supprimer un domaine --------------------------------------------- */
/* Refait le 2026-09-28. L'ecran precedent avait deux defauts : les boutons
   radio se placaient AU-DESSUS de leur libelle — « .form-dns label » est en
   display:block, et les libelles enveloppaient l'input — et il noyait la
   decision sous un paragraphe par option. Ici : une ligne par choix, le
   detail derriere un « i ». */
.form-supprimer { max-width: 34rem; }
.quand { border: 1px solid var(--trait); border-radius: var(--radius);
         padding: .9rem 1rem .4rem; margin: 0 0 1.1rem; }
.quand > legend { padding: 0 .4rem; font-size: .9em; color: var(--doux); }

.quand .choix { display: grid; grid-template-columns: auto 1fr;
                gap: 0 .6rem; margin-bottom: .9rem; }
.quand .choix:last-child { margin-bottom: .6rem; }
/* La case reprend sa taille propre : « .form-dns input { width:100% } »
   l'etirait sur toute la ligne, ce qui est la cause de la mise en page
   cassee. */
.quand .choix > input[type=radio] { width: auto; margin: .25rem 0 0; }
.quand .choix > label { grid-column: 2; display: block; margin: 0;
                        font-size: 1rem; color: var(--texte); cursor: pointer; }
.quand .detail { grid-column: 2; margin: .15rem 0 0;
                 font-size: .88em; color: var(--doux); }

/* Le « i » : rond, discret, et il ouvre sur place. */
.pourquoi { display: inline; }
.pourquoi > summary {
  display: inline-grid; place-items: center; width: 1.15em; height: 1.15em;
  margin-left: .2em; vertical-align: -.15em; cursor: pointer;
  font-size: .95em; font-style: italic; line-height: 1;
  color: var(--accent); background: var(--accent-clair);
  border-radius: 50%; list-style: none;
}
.pourquoi > summary::-webkit-details-marker { display: none; }
.pourquoi > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pourquoi[open] > summary { background: var(--accent); color: #fff; }
/* Le « details » reste en ligne ; c'est son paragraphe qui devient le bloc
   d'information, sous la ligne de resume. */
.pourquoi > p { margin: .45rem 0 0; padding: .55rem .7rem;
                background: var(--info-fond); border-radius: var(--radius);
                font-size: .95em; color: var(--texte); }

/* La confirmation n'apparait que si « tout de suite » est coche : demander de
   retaper un nom pour un geste reversible userait la confirmation la ou elle
   compte. */
.quand .confirmation { grid-column: 2; display: none; margin: .5rem 0 0; }
.quand .choix > input[type=radio]:checked ~ .confirmation { display: block; }
.quand .confirmation label { font-size: .85em; }
.quand .confirmation input { width: 100%; }

.form-supprimer .actions { display: flex; align-items: center; gap: 1rem;
                           margin: 1.2rem 0 .4rem; }
.form-supprimer .actions a.lien-annuler {
  padding: 0; border: 0; background: none;
  color: var(--doux); font-size: .92em; text-decoration: underline;
}
.form-supprimer .actions a.lien-annuler:hover { color: var(--accent); }