/* =====================================================================================================
   CHARTE GRAPHIQUE ZYGTAG (reprise de la charte Prisme)
   Toutes les couleurs, polices, tailles, espacements et largeurs du site sont définis ici, et seulement ici.
   Pour faire évoluer l'apparence du site, modifier ces valeurs : toutes les pages suivent.
   Règles de mise en page (voir CLAUDE.md) :
   - toutes les pages connectées utilisent la même zone de contenu (.contenu) : même largeur, même marge,
     le texte et les cadres commencent toujours au même endroit ;
   - la place de la barre de défilement est toujours réservée (pas de décalage entre page courte et longue) ;
   - l'élément actif d'un menu ou d'un onglet est en gras sans changer de largeur ;
   - le fil d'Ariane occupe toujours sa ligne (même vide) et la zone de titre a une hauteur fixe : le titre et
     le premier cadre commencent toujours au même endroit ;
   - les formulaires (form.carte) sont limités à --largeur-formulaire, alignés à gauche ;
   - textes : uniquement les 5 tailles de l'échelle ci-dessous ; boutons : tous de même hauteur ;
   - dans un tableau, toutes les cellules ont la même taille (seuls les badges sont plus petits) ;
   - un titre est toujours plus important que ses données : entêtes de colonne en --taille-base gras au-dessus de
     cellules en --taille-donnees ; une étiquette en capitales au-dessus d'une valeur de même taille au plus
     (sinon la majuscule de la valeur dépasse le titre).
   Seule exception : les mails (gabarits comptes/mail_*.html) répètent ces couleurs en dur, les messageries
   n'acceptant pas les variables CSS.
   ===================================================================================================== */
:root {
  /* Couleurs de base */
  --fond: #f5f6f8;              /* fond de page */
  --surface: #ffffff;           /* cartes, entête, champs */
  --fond-entete: #f8f9fa;       /* entêtes de cartes et de tableaux */
  --texte: #1f2430;
  --texte-doux: #5f6878;
  --bordure: #dde1e7;
  --bordure-forte: #adb5bd;     /* contour des onglets */
  --bordure-legere: #eef0f3;    /* séparation des lignes de tableau */
  --blanc: #ffffff;

  /* Couleur principale (vert, comme Prisme) */
  --accent: #2f6f5e;
  --accent-fonce: #245748;      /* survol des boutons */
  --accent-pale: #e6f0ec;       /* élément actif du menu */
  --accent-survol: #eef5f2;     /* survol des boutons secondaires */

  /* Entête (bandeau du haut) */
  --entete-fond: var(--surface);
  --entete-bordure: var(--bordure);
  --entete-marque: var(--accent);
  --entete-lien: var(--texte-doux);
  --entete-lien-survol: var(--texte);
  --entete-survol-fond: var(--fond);
  --entete-actif-fond: var(--accent-pale);
  --entete-actif-texte: var(--accent);

  /* États et messages */
  --erreur: #b3261e;
  --erreur-pale: #fdecea;
  --succes: #2e7d32;
  --succes-pale: #e8f5e9;
  --info: #055160;
  --info-pale: #e7f6fb;
  --info-bordure: #b6e3f0;

  /* Badges */
  --badge-vert: #198754;
  --badge-gris: #6c757d;
  --badge-noir: #212529;
  --badge-rouge: #dc3545;
  --badge-orange: #fd7e14;
  --badge-bleu: #0d6efd;
  --badge-violet: #5a3e8e;

  /* Typographie */
  --police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;   /* polices du poste : aucune police en ligne */
  --police-mono: Consolas, "Courier New", monospace;
  --taille-racine: 16px;        /* 1rem : toutes les tailles en rem en découlent */
  /* Échelle des tailles : n'utiliser QUE ces 5 tailles pour le texte */
  --taille-titre: 1.75rem;      /* titre de page (h1) */
  --taille-titre-carte: 1rem;   /* titre d'un cadre, en gras */
  --taille-base: .9375rem;      /* texte courant, menu */
  --taille-petite: .8125rem;    /* libellés de champs, aides, fil d'Ariane, pagination, pieds de cadre */
  --taille-mini: .75rem;        /* étiquettes en capitales, badges */
  /* Données : toujours plus petites que leur titre (on réduit les données, jamais on n'agrandit les titres) */
  --taille-donnees: .8125rem;   /* cellules de tableau (entête de colonne : --taille-base en gras) */
  --taille-valeur: var(--taille-mini); /* valeur sous une étiquette en capitales : jamais plus grande qu'elle */
  --taille-controle: var(--taille-donnees); /* champs, listes, boutons (libellé : --taille-petite en gras) */
  --taille-tableau: var(--taille-donnees);
  --taille-marque: 1.2rem;      /* nom « ZYGTAG » dans l'entête */
  --taille-marque-grande: 1.8rem; /* nom « ZYGTAG » sur la page de connexion */
  --taille-code: 1.5rem;        /* champ du code à 6 chiffres */
  --interligne: 1.5;

  /* Site de test, avertissements */
  --test-fond: #fd7e14;
  --attention: #8a4b00;
  --attention-pale: #fff4e5;
  --attention-bordure: #ffd8a8;

  /* Éditeur du message : couleurs de texte proposées (elles s'enregistrent dans le message) */
  --texte-rouge: #c0392b;
  --texte-orange: #d35400;
  --texte-vert: #2f6f5e;
  --texte-bleu: #1f5fa8;
  --texte-violet: #7d3c98;
  --texte-dore: #9a7b4f;
  --zone-message-hauteur: 320px;

  /* Pastilles du choix d'apparence (fond / couleur d'accent : reprennent les thèmes de page-tag.css) */
  --pastille-clair: linear-gradient(135deg, #ffffff 50%, #2f6f5e 50%);
  --pastille-sombre: linear-gradient(135deg, #1d222c 50%, #7fd1b9 50%);
  --pastille-bois: linear-gradient(135deg, #fbf6ee 50%, #9a6b3f 50%);
  --pastille-ocean: linear-gradient(135deg, #ffffff 50%, #1f6fa8 50%);
  --pastille-rose: linear-gradient(135deg, #fffafb 50%, #b5547a 50%);

  /* Aperçu : cadre de téléphone */
  --telephone-largeur: 340px;
  --telephone-hauteur: 640px;
  --telephone-cadre: #1f2430;
  --telephone-bordure: 12px;
  --telephone-rayon: 36px;
  --largeur-apercu: 390px;      /* colonne de l'aperçu (fiche, éditeur, versions) */

  /* Onglets (navigation, « où suis-je ») : petits boutons à contour, l'actif en vert pastel.
     Le vert plein reste réservé aux boutons d'action (déposer, exporter, valider). */
  --onglet-actif-fond: #d3eadf;
  --onglet-actif-texte: var(--accent-fonce);
  --onglet-survol-fond: var(--accent-survol);
  --onglet-padding: 3px 10px;
  --onglet-espace: 6px;

  /* Boutons : tous la même hauteur */
  --bouton-padding-v: 7px;
  --bouton-padding-h: 16px;
  --bouton-padding: var(--bouton-padding-v) var(--bouton-padding-h);
  /* Hauteur commune boutons / champs / listes déroulantes d'une même barre */
  --hauteur-controle: calc(var(--taille-controle) * var(--interligne) + 2 * var(--bouton-padding-v) + 2px);
  --bouton-graisse: 600;

  /* Formes */
  --rayon: 8px;                 /* cartes */
  --rayon-petit: 6px;           /* boutons, champs, messages */
  --rayon-badge: 4px;

  /* Mise en page */
  --largeur-contenu: 1600px;    /* zone de contenu de toutes les pages connectées */
  --largeur-formulaire: 1050px; /* formulaires en carte */
  --marge-page: 24px;           /* marge gauche/droite (écrans larges) */
  --marge-page-mobile: 16px;
  --espace-haut: 32px;          /* entre l'entête et le contenu */
  --hauteur-entete: 56px;
  --espace-titre: 20px;         /* sous le titre de page */
  --hauteur-titre: 44px;        /* zone de titre fixe (titre seul ou titre + bouton) */
}

html { scrollbar-gutter: stable; font-size: var(--taille-racine); }   /* place de la barre de défilement toujours réservée */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: var(--taille-base);
  line-height: var(--interligne);
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--marge-page);
  height: var(--hauteur-entete);
  background: var(--entete-fond);
  border-bottom: 1px solid var(--entete-bordure);
}
.marque { font-weight: 700; font-size: var(--taille-marque); color: var(--entete-marque); text-decoration: none; }
.entete-droite { display: flex; align-items: center; gap: 20px; }
.entete-droite a, .entete-droite .lien { color: var(--entete-lien); text-decoration: none; }
.entete-droite a:hover, .entete-droite .lien:hover { color: var(--entete-lien-survol); }
.utilisateur { color: var(--texte-doux); }

.contenu { max-width: var(--largeur-contenu); margin: var(--espace-haut) auto; padding: 0 var(--marge-page); }
.contenu form.carte { max-width: var(--largeur-formulaire); }
.centre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 32px;
}
.carte-connexion { width: 100%; max-width: 380px; }
.marque-grande { margin: 0; color: var(--accent); font-size: var(--taille-marque-grande); }
.sous-titre { margin-top: 4px; color: var(--texte-doux); }

label { display: block; margin: 16px 0 6px; font-size: var(--taille-petite); font-weight: 600; }
input[type=email], input[type=password], input[type=text] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-size: var(--taille-controle);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.bouton {
  width: 100%;
  margin-top: 24px;
  padding: var(--bouton-padding);
  border: 1px solid var(--accent);
  border-radius: var(--rayon-petit);
  background: var(--accent);
  color: var(--blanc);
  font: inherit;
  font-size: var(--taille-controle);
  line-height: var(--interligne);
  font-weight: var(--bouton-graisse);
  text-align: center;
  white-space: nowrap;           /* un bouton ne passe jamais sur deux lignes */
  cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--texte-doux); cursor: pointer; }
.lien:hover { color: var(--accent); }

.message { padding: 10px 14px; border-radius: var(--rayon-petit); margin-bottom: 16px; font-size: var(--taille-base); }
.message-error { background: var(--erreur-pale); color: var(--erreur); }
.message-success { background: var(--succes-pale); color: var(--succes); }

.modules li { margin: 4px 0; }

.contenu .carte { margin-bottom: 20px; }
.contenu .carte h2 { margin-top: 0; font-size: var(--taille-titre-carte); font-weight: 600; }

.erreur-champ { margin: 6px 0 0; color: var(--erreur); font-size: var(--taille-petite); }
input.champ-code { font-size: var(--taille-code); letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.form-court { max-width: 260px; }
.form-court .bouton { width: auto; margin-top: 12px; }

.liens-secondaires {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: var(--taille-petite);
}
.liens-secondaires a { color: var(--texte-doux); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton-secondaire {
  width: auto;
  margin: 0;
  display: inline-block;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
}
.bouton-secondaire:hover { background: var(--accent-survol); }

/* --- Menu principal --- */
.entete { gap: 8px 24px; height: auto; min-height: var(--hauteur-entete); flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.menu a {
  padding: 6px 12px;
  border-radius: var(--rayon-petit);
  color: var(--entete-lien);
  text-decoration: none;
  white-space: nowrap;
}
.menu a:hover { background: var(--entete-survol-fond); color: var(--entete-lien-survol); }
.menu a.actif { background: var(--entete-actif-fond); color: var(--entete-actif-texte); font-weight: 600; }
/* Largeur réservée pour la version en gras (data-libelle = texte du lien) : rien ne bouge quand l'actif change */
.menu a, .onglets a { display: inline-flex; flex-direction: column; align-items: center; }
.menu a[data-libelle]::after, .onglets a[data-libelle]::after {
  content: attr(data-libelle); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}

/* --- Fil d'Ariane, titres, onglets --- */
.fil { font-size: var(--taille-petite); line-height: 1.5; min-height: 1.35rem; color: var(--texte-doux); margin-bottom: 12px; }
.contenu h1 { font-size: var(--taille-titre); line-height: 1.25; margin: 0 0 var(--espace-titre); }
.contenu > h1 { min-height: var(--hauteur-titre); display: flex; align-items: center; gap: 10px; }
.fil a { color: var(--accent); text-decoration: none; }
.titre-ligne { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--hauteur-titre); margin-bottom: var(--espace-titre); }
.onglets { display: flex; flex-wrap: wrap; gap: var(--onglet-espace); margin-bottom: 16px; }
.onglets a {
  padding: var(--onglet-padding);
  font-size: var(--taille-petite);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-badge);
  text-decoration: none;
  white-space: nowrap;
}
.onglets a:hover { background: var(--onglet-survol-fond); border-color: var(--accent); color: var(--accent-fonce); }
.onglets a.actif { background: var(--onglet-actif-fond); border-color: var(--accent); color: var(--onglet-actif-texte); font-weight: 600; }
.sous-onglets { margin-bottom: 12px; }

/* --- Cartes titrées (comme les captures) --- */
.carte-titree { padding: 0; overflow: hidden; }
.carte-entete {
  margin: 0;
  padding: 12px 16px;
  font-size: var(--taille-titre-carte);
  font-weight: 600;
  background: var(--fond-entete);
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  gap: 10px;
}
.carte-entete h2, .contenu .carte h2.carte-entete { margin: 0; font-size: var(--taille-titre-carte); font-weight: 600; }
.entete-actions { justify-content: space-between; }
.carte-corps { padding: 16px; }
.pied-carte {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: var(--taille-petite);
}
.actions-formulaire { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* --- Tableaux --- */
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-tableau); }
.tableau th {
  font-size: var(--taille-base);
  text-align: left;
  padding: 8px 12px;
  background: var(--fond-entete);
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}
.tableau td { padding: 8px 12px; border-bottom: 1px solid var(--bordure-legere); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr.inactif td { color: var(--texte-doux); }
.tableau a { color: var(--accent); text-decoration: none; }   /* même graisse que la ligne : la couleur suffit */
.tableau-droits { margin-top: 16px; }
.tableau-droits td:not(:first-child), .tableau-droits th:not(:first-child) { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }   /* numéros (CAS, CE…) : même police, chiffres alignés */
.changement .ancien { color: var(--texte-doux); text-decoration: line-through; }

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--rayon-badge);
  font-size: var(--taille-mini);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blanc);
  background: var(--badge-gris);
  white-space: nowrap;
}
.badge-connexion, .badge-vert, .badge-application_ajoutee, .badge-action-0 { background: var(--badge-vert); }
.badge-code_demande, .badge-gris { background: var(--badge-gris); }
.badge-deconnexion, .badge-expiration { background: var(--badge-noir); }
.badge-echec, .badge-blocage, .badge-adresse_inconnue, .badge-action-2 { background: var(--badge-rouge); }
.badge-application_retiree { background: var(--badge-orange); }
.badge-bleu, .badge-action-1 { background: var(--badge-bleu); }

/* --- Formulaires --- */
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 20px; }
.champ label { margin-top: 12px; }
.champ input, .champ select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-size: var(--taille-controle);
}
.champ input:disabled { background: var(--fond); color: var(--texte-doux); }
.aide { margin: 6px 0 0; font-size: var(--taille-petite); color: var(--texte-doux); }
.groupe { border: 1px solid var(--bordure); border-radius: var(--rayon-petit); margin: 16px 0; padding: 8px 14px 12px; }
.groupe legend { font-weight: 600; font-size: var(--taille-petite); padding: 0 6px; }
label.case { display: inline-flex; align-items: center; gap: 8px; margin: 8px 20px 0 0; font-weight: 400; }
.case-seule { display: inline-block; margin: 0; }
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtres label { margin: 0; font-weight: 600; font-size: var(--taille-petite); display: flex; flex-direction: column; gap: 4px; }
.filtres select, .filtres input { height: var(--hauteur-controle); padding: 0 9px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); font: inherit; font-size: var(--taille-controle); font-weight: 400; }   /* pas la taille du libellé */
.bouton-auto { width: auto; margin: 0; display: inline-block; text-decoration: none; }
.bouton-contour {
  margin-top: 10px;
  background: var(--surface);
  color: var(--texte-doux);
  border: 1px solid var(--texte-doux);
}
.bouton-contour:hover { background: var(--fond); }
.bouton-danger { width: auto; margin: 0; background: var(--surface); color: var(--erreur); border: 1px solid var(--erreur); }
.bouton-danger:hover { background: var(--erreur-pale); }
.message-info { background: var(--info-pale); color: var(--info); border: 1px solid var(--info-bordure); }
.adresse-envoi { text-align: center; color: var(--texte-doux); }
.centre-texte { text-align: center; font-size: var(--taille-petite); }
.centre-texte a { color: var(--texte-doux); }

.pagination { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--bordure); font-size: var(--taille-petite); }
.pagination a { color: var(--accent); }
.pagination-haut { border-top: 0; border-bottom: 1px solid var(--bordure); }
.pagination-vide { color: var(--bordure); }

/* --- Accueil --- */
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.carte-module { display: block; padding: 20px; color: var(--texte); text-decoration: none; font-weight: 600; }
.carte-module:hover { border-color: var(--accent); }
.carte-module span { display: block; margin-top: 6px; font-weight: 400; font-size: var(--taille-petite); color: var(--texte-doux); }

.grille-infos { font-size: var(--taille-valeur); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.grille-infos p { margin: 0; }
.grille-infos > * { min-width: 0; overflow-wrap: anywhere; }
.pleine-largeur { grid-column: 1 / -1; }
.etiquette { display: block; font-size: var(--taille-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); margin-bottom: 2px; }
.filtre-large { flex: 1 1 320px; }
.filtre-large input { width: 100%; }
.champ textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); font: inherit; resize: vertical; font-size: var(--taille-controle); }
.titre-ligne h1 { margin: 0 auto 0 0; }
.titre-ligne { flex-wrap: wrap; }

/* --- Pages de listes : plus de place, colonnes dimensionnées --- */
.tableau-liste { table-layout: auto; min-width: 100%; }
.tableau-liste td, .tableau-liste th { padding: 8px 8px; }
.tableau-liste .col-nom { min-width: 210px; max-width: 420px; overflow-wrap: anywhere; word-break: break-word; }
.tableau-liste .col-texte { min-width: 170px; max-width: 340px; overflow-wrap: anywhere; }
.tableau-liste .col-long { min-width: 260px; max-width: 520px; overflow-wrap: anywhere; }
.tableau-liste .col-court { white-space: nowrap; }
.tableau-liste .col-nombre { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tableau-liste .col-moyen { min-width: 90px; max-width: 160px; overflow-wrap: anywhere; }
.tableau-liste .col-action { white-space: nowrap; width: 1%; }
/* Petits boutons d'action : thème vert, icône ↓ télécharger, ↑ déposer, ✕ supprimer */
.bouton-mini { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 8px; font: inherit;
  font-size: var(--taille-petite); line-height: var(--interligne); color: var(--accent); background: var(--surface);
  border: 1px solid var(--accent); border-radius: var(--rayon-badge); text-decoration: none; cursor: pointer;
  white-space: nowrap; }
.bouton-mini:hover, .bouton-mini:focus-visible { background: var(--accent-survol); color: var(--accent-fonce); border-color: var(--accent-fonce); }
.tableau .bouton-mini { color: var(--accent); font-weight: 500; }
.tableau .bouton-mini:hover { color: var(--accent-fonce); }
.form-mini { display: inline-flex; margin: 0; }
label.bouton-mini { margin: 0; font-weight: 500; }   /* pas la marge des libellés de formulaire */
/* Icônes d'action dessinées (télécharger, déposer, supprimer) : trait épais, couleur du bouton */
.icone { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.barre-liste { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.barre-liste .filtres { flex: 1 1 520px; }
.barre-liste .actions { flex: 0 0 auto; }
form.en-ligne { display: inline-block; margin: 0 8px; }
.liste-noms { margin: 0; padding-left: 36px; columns: 2 320px; font-size: var(--taille-petite); max-height: 420px; overflow-y: auto; }
.liste-noms li { break-inside: avoid; margin-bottom: 2px; }
.pied-carte.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--texte); }

@media (max-width: 700px) {
  .entete { flex-wrap: wrap; height: auto; padding: 10px var(--marge-page-mobile); gap: 8px; }
  .menu { order: 3; flex-basis: 100%; }
  .contenu { padding: 0 var(--marge-page-mobile); margin: 20px auto; }
}

.etapes ol { padding-left: 20px; margin: 0; }
.etapes li { margin-bottom: 20px; }
.qr { margin: 12px 0; width: 200px; height: 200px; }
.qr svg { width: 100%; height: 100%; }
.cle { display: inline-block; margin-top: 8px; padding: 6px 10px; background: var(--fond); border-radius: var(--rayon-badge); letter-spacing: 1px; }

/* =====================================================================================================
   ZYGTAG : fiche du tag, éditeur du message, aperçu
   ===================================================================================================== */
.badge-test { background: var(--test-fond); }
.marge-haut { margin-top: 20px; }
.carte-action { color: var(--accent); }
.message-attention { background: var(--attention-pale); color: var(--attention); border: 1px solid var(--attention-bordure); }
.message-warning { background: var(--attention-pale); color: var(--attention); }
.titre-complement { font-weight: 400; color: var(--texte-doux); font-size: var(--taille-titre-carte); }
.chemin { font-size: var(--taille-mini); overflow-wrap: anywhere; }
.mono { font-family: var(--police-mono); }

/* Fiche : deux colonnes (infos à gauche, aperçu à droite) */
.grille-fiche { display: grid; grid-template-columns: minmax(0, 1fr) var(--largeur-apercu); gap: 0 20px; align-items: start; }
.lien-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lien-tag code { flex: 1 1 320px; padding: 8px 10px; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit); font-family: var(--police-mono); font-size: var(--taille-donnees); overflow-wrap: anywhere; }
.qr-ligne { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px; }
.qr-ligne .qr { width: 150px; height: 150px; margin: 0; }
.bouton-mini.copie-ok { background: var(--accent-pale); }
.bouton-mini-danger { color: var(--erreur); border-color: var(--erreur); }
.bouton-mini-danger:hover, .bouton-mini-danger:focus-visible { background: var(--erreur-pale); color: var(--erreur); border-color: var(--erreur); }
.tableau .bouton-mini-danger, .tableau .bouton-mini-danger:hover { color: var(--erreur); }
.tableau-versions .col-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tableau-versions tr.ligne-choisie td { background: var(--accent-survol); }

/* Cadre de téléphone autour de l'aperçu */
.telephone { width: var(--telephone-largeur); max-width: 100%; margin: 0 auto; padding: var(--telephone-bordure);
  background: var(--telephone-cadre); border-radius: var(--telephone-rayon); }
.telephone-ecran { height: var(--telephone-hauteur); max-height: 75vh; overflow: hidden; background: var(--surface);
  border-radius: calc(var(--telephone-rayon) - var(--telephone-bordure)); }
.telephone iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Éditeur : message à gauche, aperçu à droite (collé en haut au défilement) */
.grille-editeur { display: grid; grid-template-columns: minmax(0, 1fr) var(--largeur-apercu); gap: 0 20px; align-items: start; }
.contenu form.grille-editeur { max-width: none; }
.colonne-apercu { position: sticky; top: 12px; }
.choix-themes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
label.choix-theme { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; font-weight: 400; font-size: var(--taille-base); cursor: pointer; }
.pastille-theme { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bordure-forte); }
.pastille-clair { background: var(--pastille-clair); }
.pastille-sombre { background: var(--pastille-sombre); }
.pastille-bois { background: var(--pastille-bois); }
.pastille-ocean { background: var(--pastille-ocean); }
.pastille-rose { background: var(--pastille-rose); }
.barre-outils, .barre-image { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px;
  background: var(--fond-entete); border: 1px solid var(--bordure); border-bottom: 0; border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; }
.barre-image { border-radius: 0; font-size: var(--taille-petite); color: var(--texte-doux); }
.barre-outils button, .barre-image button, .barre-outils select { min-width: 32px; height: 32px; padding: 0 8px; font: inherit;
  font-size: var(--taille-petite); color: var(--texte); background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-badge); cursor: pointer; }
.barre-outils button:hover, .barre-image button:hover { border-color: var(--accent); background: var(--accent-survol); }
.barre-outils button.actif { background: var(--onglet-actif-fond); border-color: var(--accent); }
.separateur-outils { width: 1px; height: 22px; background: var(--bordure); margin: 0 4px; }
.couleurs { display: inline-flex; gap: 3px; }
.barre-outils .pastille-couleur { min-width: 22px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c); }
.barre-outils .pastille-couleur:hover { background: var(--c); border-color: var(--texte); }
.barre-outils .pastille-auto, .barre-outils .pastille-auto:hover { background: var(--surface); font-weight: 700; }
.couleur-rouge { --c: var(--texte-rouge); }
.couleur-orange { --c: var(--texte-orange); }
.couleur-vert { --c: var(--texte-vert); }
.couleur-bleu { --c: var(--texte-bleu); }
.couleur-violet { --c: var(--texte-violet); }
.couleur-dore { --c: var(--texte-dore); }
.zone-message { min-height: var(--zone-message-hauteur); padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 0 0 var(--rayon-petit) var(--rayon-petit); overflow-wrap: anywhere; }
.zone-message:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.zone-message.depot { outline: 2px dashed var(--accent); background: var(--accent-survol); }
.zone-message img { max-width: 100%; height: auto; border-radius: var(--rayon-petit); cursor: pointer; }
.zone-message img.taille-petite { max-width: 40%; }
.zone-message img.taille-moyenne { max-width: 70%; }
.zone-message img.selectionnee { outline: 3px solid var(--accent); }
.zone-message img.envoi { opacity: .4; }
.zone-message h2, .zone-message h3 { margin: .6em 0 .3em; }
.zone-message blockquote { margin: .6em 0; padding-left: 12px; border-left: 3px solid var(--bordure-forte); color: var(--texte-doux); }

/* Galeries d'images */
.galerie-details { margin-top: 12px; }
.galerie-details summary { cursor: pointer; font-size: var(--taille-petite); color: var(--accent); }
.galerie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vignette { width: 84px; height: 84px; padding: 0; border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  background: var(--fond); cursor: pointer; overflow: hidden; }
.vignette:hover { border-color: var(--accent); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-grande { padding: 0 16px 16px; gap: 16px; }
.carte-image { margin: 0; width: 220px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); overflow: hidden; background: var(--surface); }
.carte-image img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--fond); }
.carte-image figcaption { padding: 8px 10px; font-size: var(--taille-petite); }
.carte-image form { margin-top: 6px; }

@media (max-width: 1100px) {
  .grille-fiche, .grille-editeur { grid-template-columns: minmax(0, 1fr); }
  .colonne-apercu { position: static; }
}