:root {
  --maroon: #7a1f2b;
  --cream: #f2e8c9;
  --gold: #e0b84a;
  --bg: #000;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: 'Arial Narrow', Arial, sans-serif;
}
a { color: inherit; }

.skip-link { position: absolute; left: -9999px; }

/* ---------- Grille ----------
   La grille est découpée en rangées d'un tiers de carré ("unit").
   Un carré occupe 3 rangées (3 unités + 2 gaps = sa largeur, donc bien carré),
   un rectangle (shape = wide) 2 rangées ≈ 2/3 de sa largeur. */
.grid-wrap {
  /* Marges extérieures = espace entre les blocs (44 px desktop, 22 px mobile).
     Au-delà de --max-width, du noir apparaît de part et d'autre. */
  --gap: 44px;
  --max-width: 1100px;
  container-type: inline-size;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--gap);
}
.grid {
  --gap: 44px;
  --col: calc((100cqw - var(--gap)) / 2);
  --unit: calc((var(--col) - 2 * var(--gap)) / 3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--unit);
  grid-auto-flow: row dense;
  gap: var(--gap);
}
@media (max-width: 640px) {
  .grid-wrap { --gap: 22px; }
  .grid {
    --gap: 22px;
    --col: 100cqw;
    grid-template-columns: 1fr;
  }
}

/* Repli pour les navigateurs sans container queries (ex. Safari < 16, sur un vieux macOS qui ne
   peut plus se mettre à jour) : --col se calcule alors depuis la largeur de la fenêtre (vw) au
   lieu de la largeur du conteneur (cqw). Moins précis si une barre latérale du navigateur réduit
   la largeur réelle du contenu, mais restaure des hauteurs de grille cohérentes au lieu de laisser
   chaque case s'étirer à la hauteur de son contenu (carrés non recadrés, carte/menus déformés). */
@supports not (container-type: inline-size) {
  .grid {
    --col: calc((min(100vw, var(--max-width)) - 3 * var(--gap)) / 2);
  }
  @media (max-width: 640px) {
    .grid {
      --col: calc(min(100vw, var(--max-width)) - 2 * var(--gap));
    }
  }
}

.cell {
  grid-row: span 3;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.cell.wide { grid-row: span 2; }
.cell.tall { grid-row: span 5; }   /* = un carré + un rectangle empilés, gap compris */
.cell img,
.cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cell.video { background: #111; }
/* Photos et vidéos des carrés : pas d'appui long « Enregistrer l'image » sur iPhone / iPad, pas de
   glisser-déposer ni de sélection (le clic droit est bloqué dans script.js). Aperçus PDF exclus. */
.cell:not(.pdf) img,
.cell:not(.pdf) video {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
.cell.pdf { background: #fff; }
.cell.pdf img { object-position: center top; }
/* Étiquette « Ouvrir PDF » des carrés Menu PDF : écrans tactiles seulement (téléphone, tablette), où il n'y a
   ni infobulle ni curseur pour dire que la vignette s'ouvre. Style repris de « Ouvrir dans Maps » (carte Google). */
.pdf-open { display: none; }
.cell.pdf a.cell-link { position: relative; }
body:not(.edit-mode) .pdf-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  background: #fff;
  color: #1a73e8;                                 /* bleu de l'étiquette Google « Maps » */
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  font: 500 14px/1.2 Roboto, Arial, sans-serif;   /* Roboto 500 chargée dans index.html ; l'icône suit (1,15 em) */
  white-space: nowrap;
  text-decoration: none;
  pointer-events: none;
}
.pdf-open svg { flex: 0 0 auto; display: block; width: 1.15em; height: 1.15em; }
.pdf-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdf-upload-row .hint { margin: 0; }
.pdf-preview-wrap { margin-top: 10px; }
#pdf-preview-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; background: #fff; border: 1px solid #e6dfcc; display: block; }
#pdf-preview-img[hidden], #pdf-fields[hidden] { display: none; }
body.edit-mode .cell video { pointer-events: none; }
/* Diaporama mixte : images et vidéos superposées, seule .active est visible. Durée du fondu réglable
   par carré (popup carré, section Défilement) via --fade-duration, posée par script.js ; 1,2 s
   par défaut si absente. L'élément entrant (.active) se pose au-dessus de l'élément sortant
   (.leaving), qui reste opaque le temps du fondu : pas de « creux » vers le fond pendant la transition. */
/* Apparition (script.js, « Apparition ») : au premier rendu, chaque carré naît invisible (.unrevealed) et
   apparaît en fondu (.revealing pose la transition, durée tirée au sort dans --reveal-duration). */
.cell.unrevealed, #site-footer.unrevealed { opacity: 0; }
.cell.revealing, #site-footer.revealing { transition: opacity var(--reveal-duration, 1.2s) ease-in-out; }
.cell.slideshow { background: #111; }
.cell.slideshow img,
.cell.slideshow video {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--fade-duration, 1.2s) ease-in-out;
}
.cell.slideshow .leaving { opacity: 1; z-index: 1; transition: none; }
.cell.slideshow .active { opacity: 1; z-index: 2; }
.cell > a.cell-link {
  display: block;
  width: 100%;
  height: 100%;
}
.cell.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
body.edit-mode .cell.map iframe { pointer-events: none; }
.cell.placeholder {
  background: repeating-linear-gradient(45deg, #222, #222 10px, #2b2b2b 10px, #2b2b2b 20px);
  color: #888;
  font-size: 0.85rem;
  text-align: center;
  padding: 10px;
}

.panel {
  container-type: inline-size;
  background: var(--maroon);
  color: var(--gold);
  text-align: center;
  padding: 6%;
  overflow: hidden;            /* jamais de barre de défilement : ce qui dépasse est coupé */
  white-space: nowrap;         /* pas de retour à la ligne automatique : seuls les sauts explicites comptent */
  /* stack content vertically instead of inheriting row-flex from .cell */
  flex-direction: column;
}
.panel-body { width: 100%; }
/* Quand le panneau contient des pictos, son contenu s'empile (titre puis pictos)
   et la case des pictos s'étire pour prendre toute la hauteur restante — c'est
   elle qui doit remplir l'espace, pas le reste des panneaux (texte/titres),
   dont le centrage vertical habituel ne change pas. */
.panel-body:has(.logos) {
  flex: 1 1 auto;        /* prend toute la hauteur du panneau (sans hauteur en %, que Safari résout mal) */
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panel-body:has(.logos) .logos {
  flex: 1 1 auto;
  min-height: 0;   /* la grille se contraint à l'espace restant au lieu de le dépasser */
}
.panel h2 {
  font-size: clamp(1rem, 3vw, 1.6rem);
  line-height: 1.3;
  margin-bottom: 0.8em;
  letter-spacing: 0.02em;
}
.panel p {
  font-size: clamp(0.75rem, 2vw, 1rem);
  line-height: 1.6;
  margin-bottom: 0.8em;
}
.panel a {
  text-decoration: underline;
  font-weight: bold;
}
.panel .email {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: bold;
  text-decoration: underline;
  display: inline-block;
  margin-bottom: 0.8em;
}

/* Logos des plateformes d'avis — plus de bulle : pictos nus, teintés,
   dans l'ordre donné. Cases carrées de taille --size, calculée par
   script.js (fitLogos) pour que l'ensemble remplisse la place disponible
   du panneau (largeur et hauteur), sur 1, 2, 3… lignes selon leur nombre ;
   la dernière ligne, si elle est incomplète, est centrée. */
.logos {
  --size: 56px;                /* posé par script.js selon la place disponible */
  --gap-ratio: 0.35;           /* espace entre pictos = 35 % de leur taille (lu par script.js) */
  padding: 8% 5%;              /* air autour du bloc : haut/bas, gauche/droite (en % de la largeur du panneau) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--size) * var(--gap-ratio));
  margin-top: 0.6em;
}
.logos > a,
.logos > span {
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s;
}
.logos a:hover { transform: scale(1.08); }
/* Le picto est appliqué comme masque (seule sa silhouette compte) et rempli
   avec --icon-color, réglable par bloc dans le popup Ctrl+Shift+L (colonne
   Couleur), qu'il vienne du CDN Simple Icons ou d'un fichier local. */
.logos .icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  background-color: var(--icon-color, #e2711d);
  -webkit-mask-image: var(--icon-src);
  mask-image: var(--icon-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Repli texte si le logo n'est pas chargé (fichier absent) */
.logos .fallback {
  color: var(--icon-color, #e2711d);
  font-size: 0.55rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
  padding: 0;
}

footer {
  text-align: center;
  color: #b9ab98;
  font-size: 0.85rem;
  padding: 24px 10px;
  font-family: Georgia, serif;
}

/* ---------- Mode édition (Ctrl/Cmd + Shift + M) ---------- */
.edit-toolbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--maroon);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  z-index: 50;
  font-size: 0.95rem;
}
.edit-toolbar[hidden] { display: none; }
.edit-toolbar-title { font-weight: bold; color: var(--gold); margin-right: 6px; }
.edit-toolbar button,
.modal-actions button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  background: var(--cream);
  color: var(--maroon);
}
.edit-toolbar button:hover,
.modal-actions button:hover { background: var(--gold); }
.modal-actions button.primary { background: var(--gold); font-weight: bold; }

body.edit-mode .cell { outline: 2px dashed var(--gold); outline-offset: -2px; }
body.edit-mode .cell.dragging { opacity: .5; }

.cell-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 6px;
  z-index: 5;
}
body.edit-mode .cell-controls { display: flex; }
.cell-controls button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell-controls button:hover { background: var(--maroon); }
.cell-controls button.danger:hover { background: #b00020; }

/* ---------- Modals (fond) ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal-box {
  background: #faf7ef;
  color: #222;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  width: 100%;
  max-height: 94vh;
  overflow: hidden;
}
.hint { font-size: 0.8rem; color: #777; margin: 4px 0; min-height: 1em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions button {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  font: inherit;
  background: #e9e2d0;
  color: #333;
}
.modal-actions button:hover { background: #ddd4bd; }
.modal-actions button.primary { background: var(--maroon); color: var(--cream); font-weight: bold; }
.modal-actions button.primary:hover { background: #5e1721; }

/* ---------- Fenêtre « carré » : 80 % de large, deux colonnes ---------- */
.modal-box.square-box {
  width: 80vw;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
}
.sq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px 12px;
  border-bottom: 1px solid #e6dfcc;
}
.sq-head h3 { color: var(--maroon); font-size: 1.15rem; }
.close-x {
  border: 0; background: transparent; color: #999;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.close-x:hover { color: var(--maroon); }
.sq-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}
.sq-settings {
  padding: 16px 22px;
  border-right: 1px solid #e6dfcc;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sq-images { padding: 16px 22px; overflow-y: auto; min-height: 320px; }
.sq-section[hidden], #images-section[hidden], #library-view[hidden], #upload-wrap[hidden], .sq-field[hidden] { display: none; }
.sq-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a6a3a; margin-bottom: 6px; font-weight: bold; }
.sq-field { display: block; margin-top: 10px; }
.sq-field input[type="text"],
.sq-field input[type="url"],
.sq-field input[type="number"],
.sq-field select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #d6cdb6;
  background: #fff;
  color: #222;
  font: inherit;
}
.sq-field input:focus, .sq-field select:focus { outline: 2px solid var(--gold); border-color: transparent; }
.sq-field input[type="number"] { width: 110px; }
.sq-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 22px 16px;
  border-top: 1px solid #e6dfcc;
}
.sq-foot .hint { flex: 1; margin: 0; }

/* Boutons segmentés (type, forme, défilement) */
.seg { display: inline-flex; background: #ece6d6; border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }   /* coins modérés : le groupe passe souvent sur 2 lignes */
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.88rem;
  color: #555;
  transition: background .12s, color .12s;
}
.seg input:checked + span { background: var(--maroon); color: var(--cream); font-weight: bold; }
.seg label:hover span { color: var(--maroon); }
.seg input:checked + span:hover { color: var(--cream); }

/* Bibliothèque */
.library-head { display: flex; justify-content: space-between; align-items: center; }
.library-head .sq-label { margin: 0; }
.library-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#btn-order-sel[hidden] { display: none; }
button.pill {
  border: 1px solid var(--maroon);
  background: transparent;
  color: var(--maroon);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
button.pill:hover { background: var(--maroon); color: var(--cream); }
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.lib-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color .15s, transform .12s;
  background: #e9e2d0;
}
.lib-tile.wide { aspect-ratio: 3 / 2; }
.lib-tile.tall { aspect-ratio: 1 / 1.72; }
.lib-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-play {
  position: absolute; inset: 0; margin: auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; pointer-events: none;
}
@media (hover: hover) { .lib-tile:hover { transform: scale(1.02); outline-color: #c9bd9c; } }
.lib-tile.selected { outline-color: var(--maroon); }
.lib-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--maroon);
  color: var(--cream);
  font-weight: bold;
  font-size: 0.78rem;
  min-width: 22px; height: 22px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.lib-delete {
  position: absolute;
  top: 5px; right: 5px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: none;
}
/* Souris : la croix apparaît au survol. Écran tactile (iPad, mobile) : la croix est invisible mais le
   coin haut-droit reste actif (toucher → confirmation de suppression). Rien n'apparaît ni ne
   disparaît au survol, sinon Safari iOS prend le premier toucher pour un « survol » et ne transmet
   pas le clic (il fallait taper deux fois pour sélectionner une vignette). */
@media (hover: hover) { .lib-tile:hover .lib-delete { display: block; } }
@media (hover: none)  { .lib-delete { display: block; opacity: 0; } }
.lib-delete:hover { background: #b00020; }

/* Recadrage */
.crop-wrap { text-align: center; margin-bottom: 8px; }
/* Scène de cadrage : la source vidéo est sous le canvas, à la même taille, recouverte par lui */
.crop-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 8px;
}
#crop-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #000;
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  display: block;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
#crop-canvas:active { cursor: grabbing; }
/* Source vidéo : réellement affichée (donc décodée par le navigateur), mais cachée sous le canvas */
.video-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
}
/* Miniature d'une vidéo que ce navigateur ne sait pas décoder */
.lib-tile.unreadable video { visibility: hidden; }
.lib-unreadable {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
  font-size: 0.72rem; color: #8a6a3a; line-height: 1.3;
  pointer-events: none;
}
#crop-wrap[hidden], #video-options[hidden], #video-progress[hidden] { display: none; }
.video-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin: 6px 0 10px; }
.sq-field.compact { margin-top: 0; }
.sq-field.compact input[type="number"] { width: 84px; }
.video-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.85rem; color: #555; }
.video-progress progress { flex: 1; height: 10px; accent-color: var(--maroon); }
#crop-zoom { width: 100%; max-width: 420px; accent-color: var(--maroon); }
.upload-view .modal-actions { margin-top: 12px; }

/* Ligne « couleur » commune aux fenêtres */
.color-cell { display: inline-flex; align-items: center; gap: 6px; }
.color-cell input[type="color"] { width: 40px; height: 30px; padding: 2px; border: 1px solid #d6cdb6; border-radius: 6px; background: #fff; }
/* Champ hex collable à côté d'une pastille de couleur (#rrggbb ou #rgb) */
.hex-input {
  width: 74px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid #d6cdb6;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.85rem;
  font-family: ui-monospace, Menlo, monospace;
}
.hex-input:focus { outline: 2px solid var(--gold); border-color: transparent; }
button.mini {
  border: 0; background: #eee5d3; color: #333;
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; font: inherit; font-size: 0.75rem; line-height: 1;
}
button.mini:hover { background: var(--maroon); color: #fff; }
button.mini:disabled { opacity: .3; cursor: default; }
button.mini:disabled:hover { background: #eee5d3; color: #333; }
button.mini.danger:hover { background: #b00020; }

@media (max-width: 800px) {
  .modal-box.square-box { width: 96vw; }
  .sq-body { grid-template-columns: 1fr; overflow-y: auto; }
  .sq-settings { border-right: 0; border-bottom: 1px solid #e6dfcc; }
}

/* ---------- Popup d'ordre des carrés (Ctrl/Cmd + Shift + 1 / 2) ----------
   Miniature de la vraie grille : réutilise .grid-wrap/.grid (container queries, formes, dense) avec
   un gap réduit, et force le nombre de colonnes (la règle 1 colonne du site est liée à la largeur
   de la fenêtre, pas à celle de la miniature). Fenêtre étroite en mode 1 colonne, comme un téléphone. */
.modal-box.order-box {
  width: 760px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.modal-box.order-box.narrow-mode { width: 420px; }
.order-hint { margin: 10px 22px 4px; }
.order-box > .sq-head, .order-box > .order-hint, .order-box > .sq-foot { flex: 0 0 auto; }
.order-gridwrap {
  --gap: 12px;
  --max-width: none;
  margin: 0;              /* le « margin: 0 auto » de .grid-wrap empêcherait l'étirement dans la colonne flex */
  align-self: stretch;
  padding: 6px 22px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.grid.order-grid {
  --gap: 12px;
  --col: calc((100cqw - var(--gap)) / 2);
  grid-template-columns: 1fr 1fr;
}
.grid.order-grid.one-col {
  --col: 100cqw;
  grid-template-columns: 1fr;
}
.order-cell {
  cursor: grab;
  background: #e9e2d0;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.order-cell:active { cursor: grabbing; }
.order-cell.dragging { opacity: .4; }
.order-cell.drop-target { outline-color: var(--maroon); }
.order-cell.panel-thumb { color: var(--cream); font-weight: bold; font-size: 0.9rem; }
.order-cell.map-thumb { background: #4a6b8a; color: #fff; font-weight: bold; }
.order-cell.pdf-thumb { background: #fff; }
.order-cell.pdf-thumb img { object-position: center top; }
.order-cell-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5px 8px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.order-cell-name.auto { font-weight: normal; font-style: italic; color: #ddd; }
.order-cell-name input { width: 100%; padding: 2px 5px; border-radius: 5px; border: 1px solid var(--gold); font: inherit; font-weight: bold; color: #222; background: #fff; }
.order-cell-btns { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.order-cell-btns .mini { background: rgba(0,0,0,.65); color: #fff; }
.order-cell-btns .mini:hover { background: var(--maroon); }
.order-end {
  cursor: default;
  background: transparent;
  border: 2px dashed #c9bd9c;
  color: #8a6a3a;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.order-end.drop-target { border-color: var(--maroon); color: var(--maroon); }

/* ---------- Popup de recadrage / enregistrement (ouverte après le choix d'un fichier) ---------- */
.modal-box.upload-box {
  position: relative;
  width: 480px;
  max-width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
}
.upload-box .upload-close { position: absolute; top: 10px; right: 12px; }

/* ---------- Popup des textes (Ctrl/Cmd + Shift + L) : clair, pleine page ---------- */
.modal.light { background: rgba(0,0,0,.55); }
.modal-box.texts-box {
  max-width: 96vw;
  width: 96vw;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #faf7ef;
  color: #222;
  padding: 18px 22px;
}
.texts-box h3 { color: var(--maroon); margin-bottom: 4px; }
.texts-box .hint { color: #666; }
.texts-header { flex: 0 0 auto; margin-bottom: 8px; }
.texts-groups { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; }
.texts-box .modal-actions button { background: var(--maroon); color: var(--cream); }
.texts-box .modal-actions button:hover { background: #5e1721; }

.texts-group { background: #fff; border: 1px solid #e3ddcc; border-radius: 10px; padding: 10px 12px 12px; }
.texts-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.texts-group-head h4 { color: var(--maroon); font-size: 1rem; }
button.small.dark { border-color: var(--maroon); color: var(--maroon); }
button.small.dark:hover { background: var(--maroon); color: var(--cream); }

.texts-table-wrap { overflow-x: auto; }
.texts-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.texts-table th, .texts-table td { padding: 6px 8px; border-bottom: 1px solid #eee5d3; vertical-align: top; text-align: left; }
.texts-table th { color: #7a1f2b; font-weight: bold; font-size: 0.78rem; white-space: nowrap; }
.texts-table tr:hover td { background: #fdfaf2; }
.texts-value { white-space: pre-wrap; word-break: break-word; cursor: text; min-width: 160px; }
.texts-value .texts-text { display: inline; }
.texts-value.empty .texts-text { color: #999; font-style: italic; }
.texts-muted { color: #aaa; }
.texts-order { white-space: nowrap; width: 1%; }
.texts-order .mini { margin-right: 2px; }
.texts-style { white-space: nowrap; width: 1%; }
.texts-style input, .texts-style select, .texts-table select {
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid #d6cdb6;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.82rem;
}
.texts-style input[type="number"] { width: 60px; }
.texts-style input[type="color"] { width: 32px; height: 26px; padding: 1px; vertical-align: middle; }
.texts-style input.hex-input { width: 74px; font-family: ui-monospace, Menlo, monospace; }
.texts-input {
  width: 100%;
  min-width: 220px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--maroon);
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}
.logo-preview {
  width: 22px; height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
  background: var(--cream);
  border-radius: 50%;
  padding: 3px;
}


/* ---------- Sous-menu d'ordre des éléments d'un diaporama (double-clic dans le popup d'ordre) ---------- */
.modal-box.items-box {
  width: 720px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.items-box > .sq-head, .items-box > .order-hint, .items-box > .sq-foot { flex: 0 0 auto; }
.items-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 6px 22px 12px;
  align-content: start;
}
.items-grid .lib-tile { cursor: grab; outline-color: transparent; }
.items-grid .lib-tile:active { cursor: grabbing; }
.items-grid .lib-tile.dragging { opacity: .4; }
.items-grid .lib-tile.drop-target { outline-color: var(--maroon); }
.items-grid .order-cell-btns { top: auto; bottom: 6px; }
/* Croix « Retirer du diaporama » : toujours visible ici (souris comme tactile), à la différence de la bibliothèque */
.items-grid .lib-delete { display: block; opacity: 1; }
.order-cell.slideshow-thumb { cursor: pointer; }

/* ---------- Catégories de la bibliothèque ---------- */
/* Pastilles (filtre, pinceau, import, popup de classement) : bouton à point coloré, cochable */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d6cdb6; background: #fff; color: #444;
  border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 0.8rem; cursor: pointer; line-height: 1.2;
}
.cat-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #bbb); flex: 0 0 auto; }
.cat-chip .count { color: #999; font-size: 0.72rem; }
.cat-chip.on { background: var(--maroon); border-color: var(--maroon); color: var(--cream); font-weight: bold; }
.cat-chip.on .count { color: #e9d9c0; }
.cat-chips.big .cat-chip { font-size: 0.95rem; padding: 7px 14px; }
.cat-chips.big .cat-chip .dot { width: 11px; height: 11px; }
.cat-chip .key { font-size: 0.7rem; opacity: .6; }
@media (hover: hover) { .cat-chip:hover { border-color: var(--maroon); } }

.lib-cats-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* Sur chaque vignette : points de catégorie (bas-gauche) et marque « utilisée » (bas-droite) */
.lib-dots { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 3px; pointer-events: none; }
.lib-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.lib-used {
  position: absolute; right: 6px; bottom: 6px; pointer-events: none;
  background: rgba(0,0,0,.62); color: #fff; font-size: 0.68rem; font-weight: bold;
  border-radius: 9px; padding: 1px 7px; line-height: 16px;
}

/* ---------- Popup de classement (Ctrl/Cmd + Shift + O) ---------- */
.modal-box.cats-box { width: 960px; max-width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
.cats-filter-row { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid #e6dfcc; flex-wrap: wrap; }
.cats-filter-row .sq-label { margin: 0; }
.cats-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 300px; }
.cats-stage { min-height: 0; background: #1a1714; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cats-stage img, .cats-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.cats-stage .hint { color: #bbb; text-align: center; }
.cats-side { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid #e6dfcc; }
.cats-side .hint { margin: 0; }
.cats-counter { font-weight: bold; color: var(--maroon); font-variant-numeric: tabular-nums; }
.cats-nav { display: flex; justify-content: space-between; gap: 8px; }
.cats-validate {
  border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer;
  font: inherit; font-weight: bold; background: var(--maroon); color: var(--cream);
}
.cats-validate:hover { background: #5e1721; }
.cats-validate:disabled, .cats-nav button:disabled { opacity: .4; cursor: default; }
.cats-manage summary { cursor: pointer; color: #8a6a3a; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: .06em; }
.cats-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.cats-row, .cats-add { display: flex; align-items: center; gap: 6px; }
.cats-row input[type="text"], .cats-add input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 5px 7px; border-radius: 6px; border: 1px solid #d6cdb6; font: inherit; font-size: 0.85rem; background: #fff; color: #222; }
.cats-row input[type="color"], .cats-add input[type="color"] { width: 32px; height: 28px; padding: 1px; border: 1px solid #d6cdb6; border-radius: 6px; background: #fff; }
@media (max-width: 800px) {
  .cats-body { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 45vh) auto; overflow-y: auto; }
  .cats-side { border-left: 0; border-top: 1px solid #e6dfcc; }
}

/* ---------- Éditeurs autorisés (Ctrl/Cmd + Shift + A) ---------- */
.modal-box.editors-box { width: 520px; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.editors-body { padding: 14px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.editors-body > .hint { margin: 0; }
.editors-list { display: flex; flex-direction: column; gap: 6px; }
.editors-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid #e6dfcc; border-radius: 8px; }
.editors-email { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.92rem; color: #222; }
.editors-row .hint { margin: 0; white-space: nowrap; }
.editors-add { display: flex; gap: 8px; }
.editors-add input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #d6cdb6; background: #fff; color: #222; font: inherit; }
.editors-add input:focus { outline: 2px solid var(--gold); border-color: transparent; }

/* ---------- Trafic du site (Ctrl/Cmd + Shift + S) ---------- */
.modal-box.traffic-box { width: 980px; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; }
.traffic-body { padding: 14px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.traffic-body > .hint { margin: 0; }
.traffic-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.traffic-bar .hint { margin: 0; }
.traffic-nav { display: inline-flex; align-items: center; gap: 8px; }
.traffic-nav[hidden] { display: none; }
.traffic-nav .mini { width: 26px; height: 26px; }
.traffic-label { min-width: 190px; text-align: center; font-weight: bold; color: var(--maroon); }
.traffic-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.traffic-kpi, .traffic-card { background: #fff; border: 1px solid #e6dfcc; border-radius: 10px; padding: 12px 14px; }
.traffic-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a6a3a; font-weight: bold; }
.traffic-kpi-value { font-size: 1.7rem; font-weight: bold; color: var(--maroon); line-height: 1.2; font-variant-numeric: tabular-nums; }
.traffic-kpi-delta { font-size: 0.8rem; color: #777; }
.traffic-kpi-delta.up { color: #2f6b3a; }
.traffic-kpi-delta.down { color: #b00020; }
.traffic-chart svg { display: block; width: 100%; height: auto; }
.traffic-chart .bar { fill: var(--maroon); }
.traffic-chart .bar.old { fill: #c9a9ae; }            /* avant la mise en ligne du nouveau site */
.traffic-chart .bar:hover { fill: var(--gold); }
.traffic-chart .axis { stroke: #e6dfcc; stroke-width: 1; }
.traffic-chart .mark { stroke: #8a6a3a; stroke-width: 1; stroke-dasharray: 4 3; }
.traffic-chart text { font-size: 11px; fill: #777; font-family: inherit; }
.traffic-chart text.mark-label { fill: #8a6a3a; font-weight: bold; }
.traffic-ranks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.traffic-section { margin: 4px 0 -6px; }
.traffic-behaviour { display: flex; flex-direction: column; gap: 10px; }
.traffic-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 0.88rem; margin-top: 7px; }
.traffic-row .n { color: #777; font-variant-numeric: tabular-nums; white-space: nowrap; }
.traffic-row .track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #efe9da; overflow: hidden; }
.traffic-row .fill { display: block; height: 100%; background: var(--maroon); border-radius: 3px; }
/* Pays suivants sous « Autres » (classement des pays) : petit, italique, sur une ou deux lignes */
.traffic-more { margin: 6px 0 0; font-size: 0.76rem; font-style: italic; color: #8a6a3a; line-height: 1.45; }
@media (max-width: 800px) {
  .traffic-kpis { grid-template-columns: repeat(2, 1fr); }
  .traffic-ranks { grid-template-columns: 1fr; }
}