/* Lynqera — feuille de style de l'interface d'administration.
 *
 * La direction est celle du document de marque : registre éditorial, tons
 * naturels, contraste franc, beaucoup d'espace. Sont explicitement écartés les
 * dégradés violet-bleu, les halos, le verre translucide et le néon — les codes
 * devenus génériques dans les produits SaaS récents.
 *
 * Aucune dépendance : ni police distante, ni bibliothèque. */

:root {
  --forest:   #4A6256;
  --sand:     #D3C7B2;
  --charcoal: #1A1D20;
  --paper:    #F7F6F2;

  --fond:      var(--paper);
  --surface:   #FFFFFF;
  --texte:     var(--charcoal);
  --attenue:   #6B7076;
  --trait:     #E3E0D8;
  --accent:    var(--forest);
  --danger:    #A4443A;
  --succes:    #3F6B4E;

  --rayon: 4px;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }

/* ── Ossature ───────────────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.rail {
  width: 232px; flex: 0 0 232px;
  background: var(--surface);
  border-right: 1px solid var(--trait);
  padding: 1.8rem 1.1rem;
  display: flex; flex-direction: column; gap: 2rem;
}

.logo {
  display: flex; align-items: baseline; gap: .55rem;
  color: var(--charcoal); text-decoration: none;
  padding-left: .5rem;
}
/* Le mot est un seul élément flex : sans cela l'écart entre éléments
   s'insérerait entre les lettres et couperait le logotype. */
.logo .mot {
  position: relative;
  font-family: var(--serif);
  font-size: 1.32rem; letter-spacing: -.02em;
  white-space: nowrap;
}
/* Le « q » porte la signature visuelle décrite par le document de marque :
   point de départ d'une trajectoire, réutilisable seule comme favicon. La
   trajectoire passe sous le mot, elle ne le sépare pas. */
.logo .q { color: var(--forest); }
.logo .mot::after {
  content: ""; position: absolute;
  left: 1.72em; bottom: -.1em; width: .9em; height: 2px;
  background: var(--forest);
}
.logo small {
  font-family: var(--sans); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--attenue);
}

nav { display: flex; flex-direction: column; gap: 1px; }
nav a {
  display: block; padding: .5rem .7rem;
  color: var(--texte); text-decoration: none;
  border-radius: var(--rayon); font-size: .92rem;
}
nav a:hover { background: var(--paper); }
nav a.actif { background: var(--forest); color: #fff; }

.rail footer { margin-top: auto; font-size: .82rem; color: var(--attenue); overflow-wrap: anywhere; }
.rail footer form { margin-top: .5rem; }
.rail footer a { color: inherit; text-decoration: none; }
.rail footer a:hover, .rail footer a.actif-lien { color: var(--forest); text-decoration: underline; }

.orgs { display: flex; flex-direction: column; gap: 1px; }
.orgs a { font-size: .86rem; padding: .35rem .7rem; }

.contenu { flex: 1; min-width: 0; padding: 2.4rem 2.6rem 5rem; }
.contenu > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.2rem; flex-wrap: wrap;
}
.contenu > header p { margin: .35rem 0 0; color: var(--attenue); font-size: .92rem; }

/* ── Éléments ───────────────────────────────────────────────────────────── */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem;
}
.carte + .carte { margin-top: 1.2rem; }
/* En grille, l'espacement vient de gap : la marge de frère décalerait la
   seconde carte vers le bas, alors qu'elles doivent s'aligner. */
.grille > .carte + .carte { margin-top: 0; }
.carte > h2 { margin-bottom: 1rem; }

.grille { display: grid; gap: 1.2rem; }
.grille.trois { grid-template-columns: repeat(3, 1fr); }
/* align-items: start pour que chaque carte s'arrête à son contenu. Sans cela
   la plus courte s'étire à la hauteur de sa voisine et laisse un vide. */
.grille.deux  { grid-template-columns: 1.6fr 1fr; align-items: start; }
/* Colonnes égales quand la seconde doit montrer quelque chose à sa taille
   réelle, et non le résumer. */
.grille.egal  { grid-template-columns: 1fr 1fr; align-items: start; }

.chiffre { font-family: var(--serif); font-size: 2.3rem; line-height: 1; }
.etiquette {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--attenue); margin-bottom: .55rem;
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; font-weight: 500; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--attenue);
  padding: 0 .8rem .6rem 0; border-bottom: 1px solid var(--trait);
}
td { padding: .8rem .8rem .8rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

.lien-court { font-family: var(--mono); font-size: .88rem; }
.lien-court .hote { color: var(--attenue); }
.destination {
  color: var(--attenue); font-size: .84rem;
  display: block; margin-top: .2rem;
  overflow-wrap: anywhere;
}

.puce {
  display: inline-block; padding: .12rem .5rem; border-radius: 2px;
  font-size: .72rem; letter-spacing: .04em; white-space: nowrap;
}
.puce.actif   { background: color-mix(in srgb, var(--succes) 14%, transparent); color: var(--succes); }
.puce.inactif { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.puce.attente { background: var(--sand); color: #6A5A3E; }
.puce.partage { background: var(--paper); color: var(--attenue); border: 1px solid var(--trait); }

/* ── Formulaires ────────────────────────────────────────────────────────── */

label { display: block; font-size: .84rem; margin-bottom: .3rem; font-weight: 500; }
.aide { font-size: .8rem; color: var(--attenue); margin: .3rem 0 0; }

input[type=text], input[type=url], input[type=email], input[type=password],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); color: var(--texte);
  font: inherit; font-size: .92rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--forest) 45%, transparent);
  outline-offset: 1px; border-color: var(--forest);
}
textarea { min-height: 4.5rem; resize: vertical; }
.champ + .champ { margin-top: 1.1rem; }
.champs-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.case { display: flex; align-items: flex-start; gap: .55rem; }
.case input { width: auto; margin-top: .25rem; }
.case label { margin: 0; font-weight: 400; }

.bouton {
  display: inline-block; padding: .55rem 1.1rem;
  background: var(--forest); color: #fff;
  border: 1px solid var(--forest); border-radius: var(--rayon);
  font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: #3E5449; }
.bouton.secondaire { background: transparent; color: var(--texte); border-color: var(--trait); }
.bouton.secondaire:hover { background: var(--surface); border-color: var(--attenue); }
.bouton.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.bouton.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── Messages ───────────────────────────────────────────────────────────── */

.message { padding: .8rem 1rem; border-radius: var(--rayon); margin-bottom: 1.5rem; font-size: .92rem; }
.message.erreur { background: color-mix(in srgb, var(--danger) 9%, transparent); border-left: 2px solid var(--danger); }
.message.succes { background: color-mix(in srgb, var(--succes) 10%, transparent); border-left: 2px solid var(--succes); }

/* ── Graphique ──────────────────────────────────────────────────────────── */

.graphique {
  display: flex; align-items: flex-end; gap: 2px;
  height: 130px; margin: .5rem 0 .3rem;
}
.graphique div {
  flex: 1; min-width: 2px;
  background: color-mix(in srgb, var(--forest) 22%, transparent);
  border-radius: 1px 1px 0 0;
}
.graphique div[data-haut="1"] { background: var(--forest); }
.axe { display: flex; justify-content: space-between; font-size: .74rem; color: var(--attenue); }

.barres { display: flex; flex-direction: column; gap: .55rem; }
.barre { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; font-size: .86rem; }
.barre .piste { grid-column: 1 / -1; height: 3px; background: var(--trait); }
.barre .piste span { display: block; height: 100%; background: var(--forest); }

/* ── Aperçu de l'identité ───────────────────────────────────────────────── */
/*
 * Miniature des pages publiques, à l'échelle typographique réelle.
 *
 * C'est la condition pour qu'elle serve à quelque chose : on y règle la hauteur
 * du logo, et une hauteur ne se juge que par rapport au texte qui l'entoure.
 * Une miniature au texte réduit et au logo à taille réelle ferait paraître le
 * logo trois fois trop gros.
 *
 * Seuls les espacements verticaux sont resserrés, pour que les deux aperçus
 * tiennent dans la colonne. La typographie et la hauteur du logo, elles, sont
 * celles que verra la personne qui clique.
 */

.apercu {
  background: var(--a-fond);
  color: var(--a-texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.6rem 1.7rem;
  overflow: hidden;
  font: 400 17px/1.6 var(--sans);
}

.apercu-marque {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.8rem;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-couleur); opacity: .8;
  min-height: 1rem;
}
/* La hauteur vient du réglage, en pixels réels : c'est exactement ce que
   posera la page publique. */
.apercu-marque img { height: var(--a-logo, 26px); width: auto; flex: 0 0 auto; }

.apercu-titre {
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  margin-bottom: .9rem;
}
.apercu-code {
  font-size: .8rem; letter-spacing: .12em;
  color: var(--a-couleur); opacity: .6; margin-bottom: .6rem;
}
.apercu-destination {
  padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  background: color-mix(in srgb, var(--a-accent) 26%, transparent);
  border-left: 2px solid var(--a-couleur);
  font-size: .95rem; overflow-wrap: anywhere;
}
.apercu-jauge { height: 2px; background: color-mix(in srgb, var(--a-texte) 12%, transparent); }
.apercu-jauge span { display: block; height: 100%; width: 45%; background: var(--a-couleur); }
.apercu-trait { width: 3rem; height: 2px; background: var(--a-accent); margin: 1.6rem 0 1rem; }
.apercu-note { font-size: .85rem; opacity: .6; margin: 0 0 .3rem; }

/* Pastille de couleur accolée au champ texte : elle ouvre le sélecteur natif
   sans retirer la possibilité de coller une valeur hexadécimale. */
.champ-couleur { display: flex; gap: .5rem; align-items: center; }
.champ-couleur input[type=text] { flex: 1; min-width: 0; }

/* Curseur et valeur numérique côte à côte : le curseur pour trouver la taille
   d'un geste, le champ pour la poser exactement. */
.champ-taille { display: flex; gap: .7rem; align-items: center; }
.champ-taille input[type=range] { flex: 1; min-width: 0; accent-color: var(--forest); }
.champ-taille input[type=number] { width: 5rem; flex: 0 0 auto; }
.champ-taille .unite { font-size: .84rem; color: var(--attenue); }

.champ-couleur input[type=color] {
  width: 2.2rem; height: 2.2rem; flex: 0 0 auto; padding: 2px;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); cursor: pointer;
}

/* ── Aperçu partagé ─────────────────────────────────────────────────────── */
/*
 * Carte telle que la composent les messageries à partir des métadonnées Open
 * Graph. Le rapport 1,91:1 de la vignette est celui que recommande la
 * spécification et qu'appliquent la plupart des clients ; le montrer autrement
 * laisserait croire à un cadrage qui ne sera pas celui obtenu.
 */

.unfurl {
  max-width: 30rem;
  border: 1px solid var(--trait); border-radius: 6px;
  background: var(--surface); overflow: hidden;
}
.unfurl-image { aspect-ratio: 1.91 / 1; background: var(--paper); }
.unfurl-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unfurl-corps { padding: .75rem .9rem; }
.unfurl-hote {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--attenue); margin-bottom: .25rem;
}
.unfurl-titre { font-weight: 600; font-size: .95rem; line-height: 1.3; margin-bottom: .25rem; }
.unfurl-desc {
  font-size: .85rem; color: var(--attenue); margin: 0;
  /* Les messageries coupent à deux ou trois lignes ; la coupe est montrée. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.unfurl-avertissement { margin-top: .9rem; }

/* ── Divers ─────────────────────────────────────────────────────────────── */

.vide { padding: 3rem 1rem; text-align: center; color: var(--attenue); }
.vide p { margin: 0 0 1.2rem; }

.bloc-code {
  font-family: var(--mono); font-size: .84rem;
  background: var(--paper); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .7rem .85rem; overflow-x: auto; white-space: pre; margin: 0;
}
/* Une commande à recopier vaut mieux enroulée que coupée : le défilement
   horizontal cache la fin de la ligne sans le signaler. */
.bloc-code.enroule { white-space: pre-wrap; overflow-wrap: anywhere; }
.dns { width: 100%; font-size: .84rem; }
.dns td { font-family: var(--mono); padding: .5rem .8rem .5rem 0; overflow-wrap: anywhere; }
.dns th { width: 6rem; border-bottom: 0; padding-bottom: .5rem; }
.dns td { border-bottom: 1px solid var(--trait); }

.qr { display: flex; gap: 1.5rem; align-items: flex-start; }
.qr img { width: 132px; height: 132px; border: 1px solid var(--trait); border-radius: var(--rayon); }

.centre { max-width: 25rem; margin: 12vh auto; padding: 0 1.5rem; }
.centre .logo { justify-content: center; margin-bottom: 2.5rem; padding: 0; }

.pagination { display: flex; gap: .5rem; margin-top: 1.5rem; align-items: center; font-size: .88rem; }

.recherche { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.recherche input { max-width: 22rem; }

@media (max-width: 900px) {
  .grille.trois, .grille.deux, .champs-cote { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .rail {
    width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--trait);
    flex-direction: row; align-items: center; gap: 1rem;
    padding: .9rem 1rem; overflow-x: auto;
  }
  .rail nav { flex-direction: row; gap: .3rem; }
  .rail footer, .orgs { display: none; }
  .contenu { padding: 1.6rem 1.2rem 4rem; }
}