/* ============================================================
   Netodex — habillage d'annuaire pour chambres et associations.

   WHITE LABEL : tout l'habillage découle de --marque.
   Une organisation change cette seule valeur et l'ensemble suit.

   Fontes alignées sur netodex.co (9 septembre 2026) : Plus Jakarta Sans
   pour les titres et les chiffres, Inter pour le texte.
   ============================================================ */

:root{
  /* ---- la seule variable à changer par organisation ---- */
  --marque: #1D4E73;

  /* ---- dérivées automatiquement ---- */
  --marque-fonce:  color-mix(in srgb, var(--marque) 76%, #0E1216);
  --marque-clair:  color-mix(in srgb, var(--marque) 62%, #ffffff);
  --marque-pale:   color-mix(in srgb, var(--marque)  9%, #ffffff);
  --marque-pale2:  color-mix(in srgb, var(--marque) 17%, #ffffff);
  --marque-bord:   color-mix(in srgb, var(--marque) 26%, #ffffff);
  --marque-lueur:  color-mix(in srgb, var(--marque) 22%, transparent);
  --marque-texte:  #ffffff;            /* recalculé côté serveur selon la luminance */

  /* ---- neutres chauds ---- */
  --fond:       #F6F5F1;
  --surface:    #FFFFFF;
  --surface-2:  #FBFAF7;
  --texte:      #23231F;
  --texte-doux: #63625A;
  --texte-pale: #8E8C83;
  --bord:       #E5E2DA;
  --bord-fort:  #CFCBC0;

  /* ---- sémantique, indépendante de la marque ---- */
  --ok:       #2E6B4F;
  --ok-pale:  #EAF3EE;
  --attente:  #8A661C;
  --attente-pale: #FAF2E1;
  --alerte:   #A33B2C;
  --alerte-pale: #FAECE9;

  --r:    8px;
  --r-sm: 6px;
  --r-lg: 14px;
  --ombre:    0 1px 2px rgba(35,35,31,.05), 0 4px 14px -8px rgba(35,35,31,.16);
  --ombre-ht: 0 2px 6px rgba(35,35,31,.07), 0 16px 36px -18px rgba(35,35,31,.28);

  --titre: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --large: 1180px;
  --marge: clamp(18px, 4vw, 44px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0;
  background-color: var(--fond);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--marque) 7%, var(--fond)) 0, var(--fond) 380px);
  background-repeat:no-repeat;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1,h2,h3,h4{ margin:0; font-family: var(--titre); font-weight:700; line-height:1.2; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color: inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--marque); outline-offset:2px; }
[hidden]{ display:none !important; }

.contenu{ width:100%; max-width: var(--large); margin-inline:auto; padding-inline: var(--marge); }
.pile{ display:flex; flex-direction:column; }

/* ---------------- icônes ---------------- */
.ic{ width:1em; height:1em; flex:none; vertical-align:-.16em; display:inline-block; }
.puce{
  width:34px; height:34px; flex:none; border-radius:10px;
  background: var(--marque-pale); color: var(--marque-fonce);
  display:grid; place-items:center;
}
.puce .ic{ width:17px; height:17px; }
.puce.ok{ background: var(--ok-pale); color: var(--ok); }
.puce.att{ background: var(--attente-pale); color: var(--attente); }
.puce.alerte{ background: var(--alerte-pale); color: var(--alerte); }
.puce.pale{ background: var(--surface-2); color: var(--texte-pale); border:1px solid var(--bord); }
.puce.pt{ width:28px; height:28px; border-radius:8px; } .puce.pt .ic{ width:14px; height:14px; }

/* ---------------- entête de l'organisation ---------------- */
.site{
  position:relative; z-index:20;  /* il défile avec la page : collant, il mangeait l'écran */
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--bord);
}
.site-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:14px; }
.intro.serre{ padding-top:18px; }
.orga{ display:flex; align-items:center; gap:13px; min-width:0; }
.orga-sigle{
  width:46px; height:46px; flex:none; border-radius:12px;
  background: linear-gradient(135deg, var(--marque), var(--marque-clair));
  color: var(--marque-texte);
  display:grid; place-items:center;
  font-family: var(--titre); font-weight:700; font-size:15px; letter-spacing:.01em;
  box-shadow: 0 6px 16px -8px var(--marque-lueur);
}
.orga-logo{ height:46px; max-width:180px; flex:none; object-fit:contain; border-radius:4px; }
.orga-nom{ font-family: var(--titre); font-weight:700; font-size:17px; line-height:1.25; letter-spacing:-.01em; }
.orga-sous{ font-size:12.5px; color: var(--texte-doux); }
.site-nav{ display:flex; gap:6px; font-size:14px; color: var(--texte-doux); flex-wrap:wrap; align-items:center; }
.site-nav a, .site-nav b{ display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; text-decoration:none; font-weight:500; }
.site-nav a:hover{ background: var(--surface-2); color: var(--texte); }
.site-nav b{ color: var(--marque-fonce); font-weight:600; background: var(--marque-pale); }
.site-nav .ic{ width:15px; height:15px; opacity:.85; }
.site-nav .langue{ margin-left:8px; border:1px solid var(--bord); font-size:13px; padding:5px 11px; }
.site-nav .langue:hover{ border-color: var(--bord-fort); }
.site-pied .langue{ color:inherit; }

.site-pied{
  margin-top:64px; padding-block:22px;
  border-top:1px solid var(--bord); background: var(--surface);
  font-size:13px; color: var(--texte-doux);
}
.site-pied .contenu{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.propulse{ display:flex; align-items:center; gap:8px; }
.propulse .pt{ width:16px; height:16px; border-radius:5px; background: linear-gradient(135deg, var(--marque), var(--marque-clair)); flex:none; }

/* ---------------- intro de page ---------------- */
.intro{ padding-top: 40px; }
.sur{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--marque-fonce); letter-spacing:.01em; margin-bottom:10px; }
.sur a{ display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
.sur a:hover{ text-decoration:underline; text-underline-offset:3px; }
.intro h1{ font-size: clamp(28px, 4vw, 40px); letter-spacing:-.025em; }
.intro .amorce{ margin-top:12px; max-width:62ch; font-size:16px; color: var(--texte-doux); }

/* ---------------- page d'erreur : au centre, le pied en bas de l'écran ---------------- */
body:has(.erreur){ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body:has(.erreur) > main{ flex:1 0 auto; display:flex; }
.erreur{
  flex:1; min-height: min(52vh, 460px); padding-block: 8px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  animation: apparaitre .35s ease both;
}
.erreur .puce{ width:60px; height:60px; border-radius:18px; margin-bottom:22px; box-shadow: 0 10px 24px -14px var(--marque-lueur); }
.erreur .puce .ic{ width:26px; height:26px; }
.erreur h1{ max-width:22ch; }
.erreur-hote{ margin-top:10px; font-size:14px; color: var(--texte-doux); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap:anywhere; }
.erreur .gestes{ justify-content:center; margin-top:26px; }

.stats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.stat{
  display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--bord); border-radius: var(--r);
  padding:10px 16px 10px 10px; box-shadow: var(--ombre);
}
.stat .v{ font-family: var(--titre); font-size:22px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.stat .v.ok{ color: var(--ok); }
.stat .l{ font-size:12.5px; color: var(--texte-doux); }

/* ---------------- onglets avant / après ---------------- */
.bascule{ display:inline-flex; background: var(--surface); border:1px solid var(--bord); border-radius:999px; padding:4px; margin-top:26px; box-shadow: var(--ombre); }
.bascule button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:14px; font-weight:500; color: var(--texte-doux);
  padding:8px 18px; border-radius:999px; transition: background .16s ease, color .16s ease;
}
.bascule button .ic{ width:15px; height:15px; }
.bascule button[aria-selected="true"]{ background: var(--marque); color: var(--marque-texte); font-weight:600; }
.bascule button:hover:not([aria-selected="true"]){ color: var(--texte); background: var(--surface-2); }

/* ---------------- recherche ---------------- */
.chercher{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.chercher .boite{
  flex:1 1 320px; display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--bord-fort); border-radius: 12px;
  padding:13px 16px; box-shadow: var(--ombre);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.chercher .boite:focus-within{ border-color: var(--marque); box-shadow: 0 0 0 4px var(--marque-pale2), var(--ombre); }
.chercher.simple .boite{ box-shadow:none; border-radius: var(--r); padding:11px 14px; }
.chercher input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:15.5px; color: var(--texte); }
.chercher input::placeholder{ color: var(--texte-pale); }
.loupe{ width:17px; height:17px; flex:none; color: var(--texte-pale); }
.chercher .boite:focus-within .loupe{ color: var(--marque); }
.chercher .btn{ border-radius:12px; padding-inline:22px; }

.btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius: var(--r);
  background: var(--marque); color: var(--marque-texte);
  font:inherit; font-size:14px; font-weight:600; padding:11px 20px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.btn .ic{ width:15px; height:15px; }
.btn:hover{ background: var(--marque-fonce); transform: translateY(-1px); box-shadow: 0 8px 18px -10px var(--marque-lueur); }
.btn:active{ transform:none; box-shadow:none; }
.btn:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.btn.sec{ background: var(--surface); color: var(--texte); border-color: var(--bord-fort); }
.btn.sec:hover{ background: var(--surface-2); border-color: var(--texte-pale); box-shadow: var(--ombre); }
.btn.pt{ padding:7px 13px; font-size:13px; }
.btn.lien{ background:transparent; border:0; color: var(--marque-fonce); padding:0; text-decoration:underline; text-underline-offset:3px; }
.btn.lien:hover{ background:transparent; color: var(--marque); transform:none; box-shadow:none; }
.btn.danger{ background: var(--surface); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, #fff); }
.btn.danger:hover{ background: var(--alerte-pale); border-color: var(--alerte); box-shadow:none; }

.avis{
  margin-top:18px; padding:13px 16px; border-radius: var(--r);
  background: var(--alerte-pale); color: var(--alerte); font-size:14px;
  border:1px solid color-mix(in srgb, var(--alerte) 18%, #fff);
  display:flex; gap:10px; align-items:flex-start;
}
.avis .ic{ flex:none; margin-top:3px; }
.avis.att{ background: var(--attente-pale); color: var(--attente); border-color: color-mix(in srgb, var(--attente) 22%, #fff); }
.avis.degrade{ align-items:center; }
.avis.degrade .btn.lien{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color: inherit; font-weight:600; text-decoration:none; }
.avis.degrade .btn.lien .ic{ margin-top:0; }

.compte{ margin-top:22px; font-size:14px; color: var(--texte-doux); }
.compte b{ color: var(--texte); font-weight:600; }

/* ---------------- liste « avant » ---------------- */
.tableau{ margin-top:16px; background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); overflow:hidden; }
.tableau .rang{ display:grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap:16px; padding:14px 18px; border-top:1px solid var(--bord); align-items:baseline; }
.tableau .rang:first-child{ border-top:0; background: var(--surface-2); font-size:12.5px; color: var(--texte-doux); font-weight:600; }
.tableau .nom{ font-weight:600; }
.tableau .vide{ color: var(--texte-pale); font-style:italic; }
@media (max-width: 680px){ .tableau .rang{ grid-template-columns:1fr; gap:4px; } .tableau .rang:first-child{ display:none; } }

/* ---------------- fiches membres ---------------- */
.cartes{ display:grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap:16px; margin-top:16px; }
.carte{
  background: var(--surface); border:1px solid var(--bord); border-radius: var(--r-lg);
  padding:20px; display:flex; flex-direction:column; gap:13px; box-shadow: var(--ombre);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  animation: apparaitre .42s ease both;
}
.carte:hover{ box-shadow: var(--ombre-ht); border-color: var(--marque-bord); transform: translateY(-2px); }
.cartes .carte:nth-child(2){ animation-delay:.04s } .cartes .carte:nth-child(3){ animation-delay:.08s } .cartes .carte:nth-child(4){ animation-delay:.12s }
.cartes .carte:nth-child(5){ animation-delay:.16s } .cartes .carte:nth-child(6){ animation-delay:.2s } .cartes .carte:nth-child(7){ animation-delay:.24s }
.cartes .carte:nth-child(8){ animation-delay:.28s } .cartes .carte:nth-child(9){ animation-delay:.32s } .cartes .carte:nth-child(n+10){ animation-delay:.36s }
@keyframes apparaitre{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.carte-tete{ display:flex; gap:13px; align-items:flex-start; }
.marque-membre{
  width:46px; height:46px; flex:none; border-radius:11px; overflow:hidden;
  background: linear-gradient(135deg, var(--marque-pale2), var(--marque-pale));
  border:1px solid var(--marque-bord); color: var(--marque-fonce);
  display:grid; place-items:center; font-family: var(--titre); font-weight:700; font-size:15px;
}
.marque-membre img{ width:100%; height:100%; object-fit:contain; background:#fff; padding:3px; }
.carte h3{ font-size:17px; letter-spacing:-.012em; }
.carte h3 a{ text-decoration:none; }
.carte h3 a:hover{ color: var(--marque-fonce); }
.carte .meta{ font-size:12.5px; color: var(--texte-doux); margin-top:2px; }
.carte .resume{ font-size:14px; color: var(--texte-doux); }
.etiquettes{ display:flex; flex-wrap:wrap; gap:6px; }
.etiquette{
  font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--marque) 6%, #fff); border:1px solid color-mix(in srgb, var(--marque) 16%, #fff); color: var(--marque-fonce);
}
.carte-pied{ margin-top:auto; padding-top:13px; border-top:1px solid var(--bord); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.carte-pied .btn.lien{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-weight:600; }
.carte-pied .btn.lien .ic{ transition: transform .16s ease; }
.carte:hover .carte-pied .btn.lien .ic{ transform: translateX(3px); }
.source{ font-size:12px; color: var(--texte-pale); }

.pastille{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pastille .ic{ width:13px; height:13px; }
.pastille.verifie{ background: var(--ok-pale); color: var(--ok); }
.pastille.attente{ background: var(--attente-pale); color: var(--attente); }
.pastille.marque{ background: var(--marque-pale); color: var(--marque-fonce); }
.pastille.alerte{ background: var(--alerte-pale); color: var(--alerte); }
.pastille.neutre{ background: var(--surface-2); color: var(--texte-doux); border:1px solid var(--bord); }

.carte.incomplete{ background: var(--surface-2); box-shadow:none; }
.carte.incomplete .resume{ font-style:italic; color: var(--texte-pale); }
.carte.incomplete .marque-membre{ background: var(--surface); border-color: var(--bord); color: var(--texte-pale); }
.trait{ display:block; height:9px; border-radius:999px; background: var(--bord); }

/* raisons de recommandation */
.raisons{ display:flex; flex-direction:column; gap:8px; }
.raisons li{ display:flex; gap:9px; font-size:13.5px; color: var(--texte-doux); line-height:1.5; }
.raisons .coche{
  flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background: var(--marque-pale2); color: var(--marque-fonce);
  display:grid; place-items:center;
}
.raisons .coche .ic{ width:11px; height:11px; stroke-width:3; }
.raisons b{ color: var(--texte); font-weight:600; }

.lecture{ margin-top:20px; padding:14px 16px; background: var(--marque-pale); border:1px solid var(--marque-bord); border-radius: var(--r); display:flex; gap:12px; align-items:flex-start; }
.lecture .t{ font-size:12.5px; font-weight:600; color: var(--marque-fonce); margin-bottom:8px; }
.lecture .mots{ display:flex; flex-wrap:wrap; gap:7px; }
.lecture .mots span{ font-size:13px; background: var(--surface); border:1px solid var(--marque-bord); border-radius:999px; padding:3px 11px; }

.ecarte{ margin-top:18px; padding:13px 16px; background: var(--surface-2); border:1px solid var(--bord); border-radius: var(--r); font-size:13.5px; color: var(--texte-doux); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; }
.ecarte > span{ display:flex; gap:9px; align-items:flex-start; }
.ecarte .ic{ flex:none; margin-top:3px; color: var(--texte-pale); }

/* réponse rédigée au-dessus des résultats */
.reponse{
  margin-top:22px; max-width:72ch; padding:4px 0 4px 18px; border-left:3px solid var(--marque);
  font-family: var(--titre); font-weight:500; font-size:19px; line-height:1.5; letter-spacing:-.01em; color: var(--texte); text-wrap:pretty;
}
.reponse + .avis, .reponse + .compte{ margin-top:16px; }

.chargement{ margin-top:20px; padding:14px 18px; background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); color: var(--texte-doux); font-size:14px; display:none; align-items:center; gap:12px; }
.chargement.actif{ display:flex; }
.chargement::before{ content:""; width:16px; height:16px; flex:none; border-radius:50%; border:2px solid var(--marque-pale2); border-top-color: var(--marque); animation: tourner .8s linear infinite; }
@keyframes tourner{ to{ transform: rotate(360deg); } }
.ex{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.ex a{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color: var(--marque-fonce); background: var(--surface); border:1px solid var(--bord); border-radius:999px; padding:6px 13px 6px 10px; text-decoration:none; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.ex a .ic{ width:14px; height:14px; color: var(--marque); }
.ex a:hover{ border-color: var(--marque-bord); background: var(--marque-pale); transform: translateY(-1px); }

/* ---------------- fiche d'un membre ---------------- */
.fiche-tete{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.fiche-tete .marque-membre{ width:72px; height:72px; font-size:22px; border-radius:16px; }
.fiche-tete h1{ font-size:clamp(26px,3.4vw,34px); }
.fiche-tete .amorce{ margin-top:6px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.fiche-gestes{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.colonnes{ display:grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap:16px; margin-top:26px; align-items:start; }
.colonnes > div{ display:flex; flex-direction:column; gap:16px; }
.colonnes .panneau{ margin:0; }
@media (max-width: 900px){ .colonnes{ grid-template-columns:1fr; } }

.citation{ position:relative; margin-top:14px; padding:14px 16px 12px 44px; background: var(--surface-2); border-left:3px solid var(--marque-bord); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14.5px; color: var(--texte-doux); font-style:italic; }
.citation .ic{ position:absolute; left:14px; top:13px; width:20px; height:20px; color: var(--marque-clair); }
.citation small{ display:block; margin-top:5px; font-style:normal; font-size:12px; color: var(--texte-pale); }
.note{ font-size:13px; color: var(--texte-doux); }
.note.small{ font-size:12px; color: var(--texte-pale); }

/* ---------------- panneaux (fiche et console) ---------------- */
.panneau{ background: var(--surface); border:1px solid var(--bord); border-radius: var(--r-lg); padding:20px 22px; margin-top:16px; box-shadow: var(--ombre); }
.panneau-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.panneau h2{ font-size:17px; display:flex; align-items:center; gap:10px; }
.panneau .d{ font-size:14px; color: var(--texte-doux); }
.gestes{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }

.jauge{ height:8px; border-radius:999px; background: var(--bord); margin:16px 0 8px; overflow:hidden; }
.jauge i{ display:block; height:100%; background: linear-gradient(90deg, var(--marque-clair), var(--marque)); border-radius:999px; transition: width .6s ease; }
.jauge.multi{ display:flex; gap:2px; }
.jauge.multi i{ border-radius:0; }
.jauge.multi i.ok{ background: var(--ok); } .jauge.multi i.att{ background: var(--attente); } .jauge.multi i.alerte{ background: var(--alerte); } .jauge.multi i.pale{ background: var(--bord-fort); }
.legende{ display:flex; gap:14px 18px; flex-wrap:wrap; font-size:12.5px; color: var(--texte-doux); }
.legende span{ display:inline-flex; align-items:center; gap:6px; }
.legende i{ width:9px; height:9px; border-radius:50%; background: var(--bord-fort); }
.legende i.ok{ background: var(--ok); } .legende i.att{ background: var(--attente); } .legende i.alerte{ background: var(--alerte); } .legende i.marque{ background: var(--marque); }

.paires{ margin-top:14px; border-top:1px solid var(--bord); }
.paires > div{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--bord); font-size:14px; flex-wrap:wrap; }
.paires .c{ color: var(--texte-doux); flex:none; display:inline-flex; align-items:center; gap:8px; }
.paires .c .ic{ width:15px; height:15px; color: var(--texte-pale); }
.paires .v{ text-align:right; font-weight:500; min-width:0; overflow-wrap:anywhere; }
.paires .v a{ color: var(--marque-fonce); text-decoration:none; }
.paires .v a:hover{ text-decoration:underline; text-underline-offset:3px; }

.echelle li{ display:flex; align-items:flex-start; gap:9px; padding:6px 0; font-size:13.5px; color: var(--texte-doux); }
.jeton{ display:inline-flex; align-items:center; gap:5px; flex:none; margin-top:2px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.jeton .ic{ width:12px; height:12px; }
.jeton.membre{ background: var(--ok-pale); color: var(--ok); }
.jeton.web{ background: var(--marque-pale); color: var(--marque-fonce); }
.jeton.orga{ background: var(--surface-2); color: var(--texte-doux); border:1px solid var(--bord); }
.jeton.ia{ background: var(--attente-pale); color: var(--attente); }

.deux{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:12px; margin-top:14px; }
.deux > div{ border:1px solid var(--bord); border-radius: var(--r-sm); padding:13px 15px; }
.deux .g{ font-family: var(--titre); font-size:19px; font-weight:700; margin-top:2px; }

.prov{ width:100%; border-collapse:collapse; font-size:14px; }
.prov th{ text-align:left; padding:0 12px 9px 0; border-bottom:1px solid var(--bord-fort); font-size:12.5px; font-weight:600; color: var(--texte-doux); }
.prov td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--bord); vertical-align:top; }
.prov tr:last-child td{ border-bottom:0; }

pre.code{
  background:#1B1A17; color:#D6D3CB; border-radius: var(--r);
  padding:16px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; line-height:1.75; overflow-x:auto; margin:0;
}

/* ---------------- pagination, accueil, formulaires ---------------- */
.pagination{ display:flex; gap:6px; flex-wrap:wrap; margin-top:26px; align-items:center; font-size:13.5px; }
.pagination a, .pagination span{ padding:6px 11px; border-radius: var(--r-sm); border:1px solid var(--bord); background: var(--surface); color: var(--texte-doux); text-decoration:none; }
.pagination a:hover{ border-color: var(--texte-pale); color: var(--texte); }
.pagination [aria-current="page"]{ background: var(--marque); color: var(--marque-texte); border-color: var(--marque); font-weight:600; }
.pagination .pts{ border:0; background:transparent; }

.accueil-liste{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:16px; margin-top:26px; }
.accueil-liste a{ background: var(--surface); border:1px solid var(--bord); border-radius: var(--r-lg); padding:22px; text-decoration:none; display:flex; flex-direction:column; gap:10px; box-shadow: var(--ombre); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; animation: apparaitre .42s ease both; }
.accueil-liste a:hover{ box-shadow: var(--ombre-ht); transform: translateY(-2px); border-color: var(--marque-bord); }
.accueil-liste .sig{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-family: var(--titre); font-weight:700; color:#fff; }
.accueil-liste .sig-logo{ width:auto; max-width:120px; object-fit:contain; background:transparent; }
.accueil-liste h2{ font-size:18px; }
.accueil-liste p{ font-size:13.5px; color: var(--texte-doux); }
.accueil-liste .fleche{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--marque-fonce); }
.lien-discret{ font-size:13px; color: var(--texte-pale); text-decoration:none; }
.lien-discret:hover{ color: var(--texte); text-decoration:underline; }

.formulaire label{ display:block; margin-top:16px; font-size:13px; font-weight:600; color: var(--texte-doux); }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="number"], .formulaire input[type="url"], .formulaire input[type="file"], .formulaire input[type="search"], .formulaire textarea, .formulaire select{
  display:block; width:100%; margin-top:6px; padding:10px 12px; font:inherit; font-size:15px; color: var(--texte);
  background: var(--surface); border:1px solid var(--bord-fort); border-radius: var(--r-sm);
}
.formulaire textarea{ resize:vertical; line-height:1.5; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus{ outline:2px solid var(--marque); outline-offset:1px; border-color: var(--marque); }
.formulaire .note{ margin-top:10px; }
.formulaire .panneau + .panneau{ margin-top:16px; }
.formulaire .gestes{ align-items:center; }
.formulaire .case{ display:flex; gap:8px; align-items:center; margin-top:10px; font-size:14px; font-weight:400; color: var(--texte); }
.bandeau-ok{ margin:12px 0 18px; padding:13px 16px; border-radius: var(--r); background: var(--ok-pale); color: var(--ok); font-size:14px; border:1px solid color-mix(in srgb, var(--ok) 20%, #fff); display:flex; gap:10px; align-items:flex-start; }
.bandeau-ok .ic{ flex:none; margin-top:3px; }
.bandeau-ok a{ color:inherit; font-weight:600; }

/* ---------------- console d'administration ---------------- */
.console{ display:grid; grid-template-columns: 250px 1fr; min-height:100vh; }
@media (max-width: 960px){ .console{ grid-template-columns:1fr; } }
.flanc{ background: var(--surface); border-right:1px solid var(--bord); padding:20px 0 28px; display:flex; flex-direction:column; }
.flanc .orga{ padding:0 18px 18px; }
.flanc .titre-sec{ padding:0 20px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--texte-pale); margin:14px 0 6px; }
.flanc nav{ display:flex; flex-direction:column; padding-inline:10px; gap:1px; }
.flanc nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; border-radius: var(--r-sm); font-size:14px;
  color: var(--texte-doux); text-decoration:none;
}
.flanc nav a .ic{ width:16px; height:16px; color: var(--texte-pale); flex:none; }
.flanc nav a:hover{ background: var(--surface-2); color: var(--texte); }
.flanc nav a[aria-current="page"]{ background: var(--marque-pale); color: var(--marque-fonce); font-weight:600; }
.flanc nav a[aria-current="page"] .ic{ color: var(--marque); }
.flanc nav .n{ margin-left:auto; font-size:12px; font-weight:600; background: var(--surface-2); color: var(--texte-doux); border:1px solid var(--bord); border-radius:999px; padding:1px 8px; }
.flanc nav .n.att{ background: var(--attente-pale); color: var(--attente); border-color:transparent; }
.flanc nav .n.alerte{ background: var(--alerte-pale); color: var(--alerte); border-color:transparent; }
.flanc .forfait{ margin:auto 20px 0; padding-top:16px; border-top:1px solid var(--bord); font-size:13px; }
.flanc .forfait b{ display:block; overflow-wrap:anywhere; }
.flanc .forfait span{ color: var(--texte-doux); font-size:12.5px; }
.flanc .forfait a{ font-size:12.5px; }
.flanc .orga-org{ margin:6px 10px 0; padding:10px 11px; border-radius: var(--r); background: var(--surface-2); border:1px solid var(--bord); display:flex; gap:10px; align-items:center; text-decoration:none; }
.flanc .orga-org .sig{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:#fff; font-family: var(--titre); font-weight:700; font-size:12px; flex:none; }
.flanc .orga-org img.sig{ background:#fff; object-fit:contain; padding:2px; }
.flanc .orga-org b{ display:block; font-size:13.5px; line-height:1.25; }
.flanc .orga-org small{ font-size:12px; color: var(--texte-doux); }

.admin{ padding: 30px var(--marge) 70px; min-width:0; }
.admin-tete{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.admin h1{ font-size: clamp(23px,3vw,30px); letter-spacing:-.02em; }
.admin .amorce{ margin-top:8px; max-width:70ch; font-size:15px; color: var(--texte-doux); }
.admin .panneau{ box-shadow:none; }

.chiffres{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-top:22px; }
.chiffres > div, .chiffres > a{ display:flex; align-items:center; gap:12px; background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); padding:14px 16px; text-decoration:none; color:inherit; transition: border-color .14s ease, box-shadow .14s ease; }
.chiffres > a:hover{ border-color: var(--marque-bord); box-shadow: var(--ombre); }
.chiffres .v{ display:block; font-family: var(--titre); font-size:24px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.chiffres .v.ok{ color: var(--ok); }
.chiffres .v.att{ color: var(--attente); }
.chiffres .v.alerte{ color: var(--alerte); }
.chiffres .v.pale{ color: var(--texte-pale); }
.chiffres .l{ display:block; margin-top:2px; font-size:12.5px; color: var(--texte-doux); }

.grille{ display:grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap:16px; margin-top:16px; align-items:start; }
.grille .panneau{ margin-top:0; }
.grille .panneau.large{ grid-column: 1 / -1; }
.revue{ display:grid; grid-template-columns: 286px 1fr; gap:16px; align-items:start; margin-top:20px; }
@media (max-width: 1150px){ .revue{ grid-template-columns:1fr; } }

.file{ background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); overflow:hidden; margin-top:14px; }
.file a, .file button{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; appearance:none; background:transparent; cursor:pointer; border:0; border-top:1px solid var(--bord); padding:11px 14px; font:inherit; text-decoration:none; color:inherit; }
.file > :first-child{ border-top:0; }
.file a:hover, .file button:hover{ background: var(--surface-2); }
.file .nm{ display:block; font-weight:600; font-size:14px; }
.file .mt{ display:block; font-size:12.5px; color: var(--texte-doux); margin-top:1px; }
.file .n{ margin-left:auto; font-family: var(--titre); font-weight:700; font-size:15px; color: var(--texte); }

.conseil{ display:flex; gap:11px; align-items:flex-start; margin-top:14px; padding:12px 14px; border-radius: var(--r); background: var(--attente-pale); color: var(--attente); font-size:13.5px; line-height:1.5; }
.conseil .ic{ flex:none; margin-top:3px; }
.conseil b{ display:block; color: inherit; }
.conseil code{ display:block; margin-top:4px; font-size:12px; color: color-mix(in srgb, var(--attente) 75%, #000); overflow-wrap:anywhere; }

.filtres{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.filtres a{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1px solid var(--bord); background: var(--surface); text-decoration:none; font-size:13px; color: var(--texte-doux); }
.filtres a:hover{ border-color: var(--bord-fort); color: var(--texte); }
.filtres a[aria-current="page"]{ background: var(--marque); color: var(--marque-texte); border-color: var(--marque); font-weight:600; }
.filtres a .n{ font-size:12px; font-weight:600; opacity:.8; }
.filtres form{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.filtres input[type="search"]{ padding:8px 12px; font:inherit; font-size:14px; border:1px solid var(--bord-fort); border-radius: var(--r-sm); background: var(--surface); min-width:220px; }

.tab-enveloppe{ margin-top:16px; background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); overflow-x:auto; }
.tab{ width:100%; border-collapse:collapse; font-size:14px; }
.tab th{ text-align:left; padding:10px 14px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--texte-pale); border-bottom:1px solid var(--bord-fort); background: var(--surface-2); white-space:nowrap; }
.tab td{ padding:11px 14px; border-bottom:1px solid var(--bord); vertical-align:middle; }
.tab tr:last-child td{ border-bottom:0; }
.tab tbody tr:hover td{ background: var(--surface-2); }
.tab .nm{ display:flex; align-items:center; gap:11px; min-width:0; }
.tab .nm a{ font-weight:600; text-decoration:none; }
.tab .nm a:hover{ color: var(--marque-fonce); text-decoration:underline; text-underline-offset:3px; }
.tab .nm small{ display:block; font-size:12px; color: var(--texte-pale); font-weight:400; overflow-wrap:anywhere; }
.tab .marque-membre{ width:36px; height:36px; font-size:12px; border-radius:9px; }
.tab .pb{ font-size:13px; color: var(--texte-doux); max-width:34ch; }
.tab .dt{ white-space:nowrap; color: var(--texte-doux); font-size:13px; }
.tab .ge{ white-space:nowrap; text-align:right; }
.tab .ge a, .tab .ge button{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius: var(--r-sm); border:1px solid var(--bord); background: var(--surface); font:inherit; font-size:12.5px; color: var(--texte-doux); text-decoration:none; cursor:pointer; }
.tab .ge a:hover, .tab .ge button:hover{ border-color: var(--bord-fort); color: var(--texte); }
.tab .ge form{ display:inline; }
.tab tr.inactif td{ opacity:.55; }

.liste{ background: var(--surface); border:1px solid var(--bord); border-radius: var(--r); overflow:hidden; }
.liste-ligne{ display:grid; grid-template-columns: 44px minmax(0,1.6fr) repeat(3, 90px) minmax(0,1fr); gap:14px; align-items:center; padding:13px 16px; border-top:1px solid var(--bord); text-decoration:none; }
.liste-ligne:first-child{ border-top:0; }
.liste-ligne:hover{ background: var(--surface-2); }
.liste-ligne .sig{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; color:#fff; font-family: var(--titre); font-weight:700; font-size:13px; }
.liste-ligne .nom{ min-width:0; } .liste-ligne .nom b{ display:block; font-weight:600; } .liste-ligne .nom small, .liste-ligne .chiffre small{ display:block; font-size:12px; color: var(--texte-doux); }
.liste-ligne .chiffre b{ display:block; font-family: var(--titre); font-size:18px; font-weight:700; }
.liste-ligne .etat{ justify-self:end; text-align:right; }
@media (max-width: 860px){ .liste-ligne{ grid-template-columns: 44px 1fr; } .liste-ligne .chiffre, .liste-ligne .etat{ display:none; } }
.admin .formulaire .panneau{ margin-top:16px; }
.admin .formulaire .panneau:first-child{ margin-top:0; }
.admin .gestes form{ display:inline; }
.admin details{ margin-top:14px; }
.admin details summary{ cursor:pointer; font-size:13.5px; font-weight:600; color: var(--texte-doux); }
.admin details summary:hover{ color: var(--texte); }
.admin .journal{ margin-top:12px; }
.pages-lues li{ display:flex; gap:8px; align-items:baseline; font-size:13px; color: var(--texte-doux); padding:4px 0; }
.pages-lues li a{ color: var(--marque-fonce); text-decoration:none; overflow-wrap:anywhere; }
.pages-lues li small{ color: var(--texte-pale); white-space:nowrap; }

/* ---------------- correctifs de rendu ---------------- */
.carte h3, .carte .resume, .carte .meta, .raisons li span, .panneau .d, .tableau .rang span, .lecture .mots span{ overflow-wrap:anywhere; min-width:0; }
.carte-tete > div{ min-width:0; }
.stats{ gap:12px; }
.site-nav{ row-gap:6px; }
@media (max-width: 560px){ .chercher .btn{ width:100%; } .bascule{ display:flex; } .bascule button{ flex:1; justify-content:center; } .site{ position:static; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .carte:hover, .btn:hover, .accueil-liste a:hover, .ex a:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---- cartographie des membres : la roue (app/cartographie.py) ---- */
.carto{ position:relative; margin:0; }
.carto .carto-svg{ filter: drop-shadow(0 10px 28px rgba(35,35,31,.10)); }
.carto svg{ width:100%; height:auto; display:block; max-width:100%; overflow:visible; }
.carto .ground{ fill: var(--surface); }
.carto .band{ fill: color-mix(in srgb, var(--texte) 6%, var(--surface)); }
.carto .pointe-fond{ stroke: var(--surface); stroke-width:5; stroke-linejoin:round; }
.carto .bandeau{ stroke: var(--surface); stroke-width:6; stroke-linejoin:round; }
.carto .arc-ext{ stroke-width:11; stroke-linecap:round; }
.carto .p{ cursor:pointer; transform-box: fill-box; transform-origin:center; transition: opacity .2s, transform .16s ease-out; }
.carto .p:hover, .carto .p:focus-visible{ transform: scale(2.1); outline:none; }
.carto .p .fond{ fill:#fff; stroke:#fff; stroke-width:3; }
.carto .p .fond.sombre{ fill:#23231F; stroke:#23231F; }
.carto .p .cerne{ fill:none; stroke:#fff; stroke-width:3; }
.carto .p:hover .fond, .carto .p:focus-visible .fond, .carto .p:hover .cerne, .carto .p:focus-visible .cerne{ stroke: var(--marque); stroke-width:5; }
.carto .p .ini{ fill: var(--texte); font-family: var(--titre); font-weight:700; text-anchor:middle; letter-spacing:.02em; pointer-events:none; }
.carto.dim .p{ opacity:.1; }
.carto.dim .p.hit{ opacity:1; transform: scale(1.5); }
.carto text.pointe{ font-family: var(--titre); font-weight:800; font-size:56px; letter-spacing:4px; }
.carto text.titre-carte{ font-family: var(--titre); font-weight:800; font-size:34px; letter-spacing:6px; fill: var(--texte); }
.carto text.titre-arc{ font-family: var(--titre); font-weight:600; font-size:50px; }
.carto .sigle-fond{ fill: var(--marque); }
.carto text.sigle{ fill: var(--marque-texte); font-family: var(--titre); font-weight:800; text-anchor:middle; letter-spacing:.04em; }
.carto-bulle{ position:absolute; z-index:3; pointer-events:none; translate:-50% calc(-100% - 18px); background: var(--texte); color:#fff; padding:7px 11px; border-radius:9px; font-size:13px; line-height:1.3; white-space:nowrap; box-shadow: var(--ombre-ht); }
.carto-bulle b{ display:block; font-weight:600; }
.carto-bulle span{ font-size:12px; opacity:.72; }
.carto-legende{ display:flex; gap:8px 16px; flex-wrap:wrap; margin-top:18px; font-size:13.5px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.carto-legende span{ display:inline-flex; align-items:center; gap:7px; }
.carto-legende i, .carto-liste h2 i{ width:12px; height:12px; border-radius:50%; border:1px solid rgba(35,35,31,.14); flex:none; display:inline-block; }
.carto-legende b{ color: var(--texte); font-weight:600; }
.carto-liste{ margin-top:18px; }
.carto-liste summary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; font-size:14.5px; color: var(--marque-fonce); }
.carto-liste section{ margin-top:18px; }
.carto-liste h2{ display:flex; align-items:center; gap:9px; font-size:16px; }
.carto-liste h2 span{ color: var(--texte-pale); font-weight:600; font-variant-numeric: tabular-nums; }
.carto-liste ul{ list-style:none; margin:10px 0 0; padding:0; columns: 4 210px; column-gap:22px; font-size:13.5px; }
.carto-liste li{ padding:3px 0; break-inside:avoid; }
.carto-liste a{ color: var(--texte); text-decoration:none; }
.carto-liste a:hover{ color: var(--marque-fonce); text-decoration:underline; text-underline-offset:3px; }
/* la carte tient dans un écran par défaut : le texte passe dans une colonne à côté ; « Agrandir » la met en pleine largeur */
.carto-page{ display:grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items:start; }
/* à l'arrivée, la roue tient sous l'en-tête : sa hauteur réelle est mesurée par app.js (--entete), 96 px à défaut */
.carto-page .carto{ justify-self:center; width: min(100%, max(380px, calc(100vh - var(--entete, 96px) - 40px))); }
.carto-cote{ position:sticky; top:18px; }
.carto-cote h1{ font-size: clamp(28px, 3vw, 40px); }
.carto-cote .chercher{ margin-top:18px; }
.carto-cote .carto-legende{ flex-direction:column; gap:7px; margin-top:16px; }
.carto-taille{ display:inline-flex; margin-top:18px; border:1px solid var(--bord-fort); border-radius:10px; overflow:hidden; background: var(--surface); }
.carto-taille button{ font:inherit; font-size:13px; font-weight:600; padding:8px 13px; border:0; background:transparent; color: var(--texte-doux); cursor:pointer; }
.carto-taille button + button{ border-left:1px solid var(--bord-fort); }
.carto-taille button[aria-pressed="true"]{ background: var(--marque-pale2); color: var(--marque-fonce); }
.carto-taille button:focus-visible{ outline:2px solid var(--marque); outline-offset:-2px; }
.carto-page[data-taille="ecran"] .p:hover, .carto-page[data-taille="ecran"] .p:focus-visible{ transform: scale(2.6); }
.carto-page[data-taille="large"]{ grid-template-columns: minmax(0, 1fr); }
.carto-page[data-taille="large"] .carto{ width:100%; }
.carto-page[data-taille="large"] .carto-cote{ position:static; }
.carto-page[data-taille="large"] .carto-cote .carto-legende{ flex-direction:row; gap:8px 16px; }
@media (max-width: 900px){
  .carto-page, .carto-page[data-taille="ecran"]{ grid-template-columns: minmax(0, 1fr); }
  .carto-page .carto{ width:100%; }
  .carto-cote{ position:static; }
  .carto-cote .carto-legende{ flex-direction:row; gap:8px 16px; }
  .carto-taille{ display:none; }
}
.marque-membre.sombre img{ background:#23231F; }
.marque-membre.rond{ border-radius:50%; } .marque-membre.rond img{ padding:0; border-radius:50%; object-fit:cover; }
/* entrée de la roue : un balayage dans le sens des flèches depuis la première pointe (masque dont le trait se déroule),
   les pastilles surgissent à son passage (--d, calculé côté serveur en inversant la même courbe de lissage), le pourtour arrive en fondu. `backwards` : une fois
   jouée, l'animation rend la main aux styles normaux, sinon elle bloquerait l'agrandissement au survol. */
/* le squelette : la roue en très pâle sous la vraie, pour que la couleur se dépose au lieu de surgir sur du blanc */
.carto .sq{ opacity:.17; stroke: var(--surface); stroke-width:5; stroke-linejoin:round; }
.carto .balai{ fill:none; stroke:#fff; stroke-width:1200; stroke-dasharray:3770 3770; stroke-dashoffset:0; animation: carto-balai var(--balayage, 1.3s) cubic-bezier(.42,0,.58,1) backwards; }
.carto .p{ animation: carto-surgit .5s ease-in-out var(--d, 0ms) backwards; }
.carto .pourtour{ animation: carto-fondu .5s ease-in-out .5s backwards; }
.carto .centre{ transform-box: fill-box; transform-origin:center; animation: carto-surgit .5s ease-in-out backwards; }
/* entrée jouée (app.js) : plus aucune animation, pour qu'une pastille réinsérée au survol ne rejoue pas la sienne */
.carto.joue .balai, .carto.joue .p, .carto.joue .pourtour, .carto.joue .centre{ animation:none; }
@keyframes carto-balai{ from{ stroke-dashoffset:3770; } to{ stroke-dashoffset:0; } }
@keyframes carto-surgit{ from{ opacity:0; transform: scale(.35); } to{ opacity:1; transform: scale(1); } }
@keyframes carto-fondu{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .carto .p{ transition:none; } .carto .p:hover, .carto .p:focus-visible{ transform:none; } .carto .balai, .carto .p, .carto .pourtour, .carto .centre{ animation:none; } }
@media print{ .carto .balai, .carto .p, .carto .pourtour, .carto .centre{ animation:none; } }
@media (hover: none){ .carto .p:hover{ transform:none; } }
@media print{
  .site, .site-pied, .chercher, .sur, .carto-bulle, .carto-taille{ display:none !important; }
  .carto-page{ display:block; } .carto-page .carto{ width:100%; }
  .carto{ page-break-inside:avoid; } .carto .carto-svg{ filter:none; }
}

/* ---------------- client domains: the DNS record to copy at the registrar ---------------- */
.dns{ margin-top:14px; border:1px solid var(--bord); border-radius: var(--r); overflow:hidden; background: var(--surface); }
.dns .row{ display:grid; grid-template-columns: 90px minmax(0,1fr) minmax(0,1.6fr); gap:14px; padding:12px 16px; border-top:1px solid var(--bord); align-items:center; }
.dns .row:first-child{ border-top:0; background: var(--surface-2); font-size:12.5px; color: var(--texte-doux); font-weight:600; }
.dns code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px; overflow-wrap:anywhere; }
.dns .value{ display:flex; gap:8px; align-items:center; justify-content:space-between; min-width:0; }
.copy{ flex:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--bord-fort); background: var(--surface); color: var(--texte-doux);
  border-radius: var(--r-sm); padding:4px 8px; font:inherit; font-size:12.5px; cursor:pointer; }
.copy:hover{ color: var(--texte); border-color: var(--texte-pale); }
/* copié (app.js) : l'anneau vert se referme autour de la coche, qui se dessine ; le tout en moins d'une demi-seconde */
.copy{ justify-content:center; }
.copy.copie, .copy.copie:hover, .btn.copie, .btn.copie:hover{ color: var(--ok); background: var(--ok-pale); border-color: color-mix(in srgb, var(--ok) 45%, #fff); box-shadow:none; }
.copie{ animation: copie-pop .3s ease-out; }
.succes .anneau, .succes .coche{ fill:none; stroke: currentColor; stroke-linecap:round; stroke-linejoin:round; }
.succes .anneau{ stroke-width:2; stroke-dasharray:63; stroke-dashoffset:63; transform: rotate(-90deg); transform-origin:12px 12px; animation: trace .3s ease-out forwards; }
.succes .coche{ stroke-width:2.6; stroke-dasharray:14; stroke-dashoffset:14; animation: trace .18s .22s ease-out forwards; }
@keyframes trace{ to{ stroke-dashoffset:0; } }
@keyframes copie-pop{ 0%{ transform: scale(.95); } 55%{ transform: scale(1.04); } 100%{ transform: none; } }
@media (prefers-reduced-motion: reduce){ .succes .anneau, .succes .coche{ stroke-dashoffset:0; } }
@media (max-width: 640px){
  .dns .row{ grid-template-columns: 1fr; gap:8px; } .dns .row:first-child{ display:none; }
  .dns [data-label]::before{ content: attr(data-label); display:block; min-width:52px; font-size:12px; color: var(--texte-pale); }
  .dns [data-label]{ display:flex; gap:10px; align-items:center; } .dns .value code{ flex:1; }
}

/* ---- domaines : trois étapes (DNS, certificat, en ligne), suivies en direct (app.js) ---- */
.etapes{ list-style:none; margin:14px 0 0; padding:0; border:1px solid var(--bord); border-radius: var(--r); background: var(--surface); overflow:hidden; }
.etape{ display:grid; grid-template-columns: 22px 104px minmax(0,1fr); gap:12px; align-items:center; padding:11px 16px; border-top:1px solid var(--bord); font-size:14px; }
.etape:first-child{ border-top:0; }
.etape b{ font-weight:600; }
.etape .d{ color: var(--texte-doux); overflow-wrap:anywhere; min-width:0; }
.etape .d code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; color: var(--texte); }
.etape .d a{ color: var(--marque-fonce); text-underline-offset:3px; }
.jalon{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; box-sizing:border-box; }
.jalon .ic{ width:13px; height:13px; stroke-width:3; }
.etape.fait .jalon{ background: var(--ok); color:#fff; }
.etape.echec .jalon{ background: var(--alerte); color:#fff; }
.etape.encours .jalon{ border:2px solid var(--marque-bord); border-top-color: var(--marque); animation: tourner .9s linear infinite; }
.etape.a-venir .jalon{ border:2px solid var(--bord-fort); }
.etape.a-venir b, .etape.a-venir .d{ color: var(--texte-pale); }
.domaine .gestes{ align-items:center; }
.verifie-le{ font-size:12.5px; color: var(--texte-pale); white-space:nowrap; }
.btn.en-cours{ pointer-events:none; }
.btn.en-cours .ic{ animation: tourner .8s linear infinite; }
.rafraichi .etapes{ animation: rafraichi 1.1s ease; }
@keyframes rafraichi{ from{ box-shadow: 0 0 0 3px var(--marque-lueur); } to{ box-shadow: 0 0 0 0 transparent; } }
.avis.alerte{ background: var(--alerte-pale); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 22%, #fff); }
@media (max-width: 560px){ .etape{ grid-template-columns: 22px minmax(0,1fr); row-gap:2px; } .etape .d{ grid-column:2; } }