/**
 * Drupal Diff Module - Style BIAT v4 FINAL
 * drupal/diff:^2.1 - rendu "Visual Inline"
 *
 * DOM réel :
 *  .diff-responsive-table-wrapper
 *    > h2                          ← titre entité
 *    > .block-unblock              ← bouton bloc
 *    > div                         ← "Soumis par X le Y"
 *    > div                         ← CONTENEUR UNIQUE des champs
 *        > div                     ← 1 champ = [div label][div valeur]
 *        > a[href^="tel"]          ← téléphone (lien direct, PAS dans grille)
 *        > ul.social-media-links   ← site web / réseaux
 *        > .paragraph--type--*    ← paragraphes imbriqués
 */

/* =====================================================
   BASE
   ===================================================== */
   .diff-header *, .diff-controls *, .diff-responsive-table-wrapper * {
    box-sizing: border-box;
  }
  .diff-header, .diff-controls, .diff-responsive-table-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1c1c1a;
  }
  
  /* =====================================================
     EN-TÊTE
     ===================================================== */
  .diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #FAFAFA;
    border: 1px solid #e8e5dd;
    border-radius: 14px;
    margin-bottom: 14px;
    width: 80%;
    margin: 15px auto;
  }
  .diff-header label { display: none; }
  
  .diff-revision__items {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .diff-revision__items-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }
  .diff-revision__items-group::before { content: "⏱"; font-size: 11px; }
  .diff-revision__items-group:first-child {
    background: #FEF0EF; color: #C0392B; border: 1px solid #F5C6C3;
  }
  .diff-revision__items-group:last-child {
    background: #EEF8E6; color: #27760A; border: 1px solid #BDE49A;
  }
  .diff-revision__items-group:first-child::after {
    content: "→"; color: #c0bdb5; font-size: 15px; font-weight: 400; margin-left: 6px;
  }
  .diff-revision__item-date a, .diff-revision__item-author a {
    color: inherit; text-decoration: none;
  }
  .diff-revision__item-date::after { content: " · "; opacity: 0.5; }
  
  .diff-navigation { display: flex; gap: 8px; }
  .diff-navigation__link a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px; border: 1px solid #dedad0; border-radius: 10px;
    font-size: 13px; font-weight: 500; color: #2c2b28; background: #fff;
    text-decoration: none; transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
  }
  .diff-navigation__link a:hover { background: #f4f2ed; border-color: #b0ada3; }
  .diff-navigation__link.prev-link a::before { content: "‹  "; font-size: 15px; }
  .diff-navigation__link.next-link a::after  { content: "  ›"; font-size: 15px; }
  
  /* =====================================================
     CONTRÔLES
     ===================================================== */
  .diff-controls {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    width: 80%;
    margin: 15px auto;
  }
  .diff-controls__item { display: flex; flex-direction: column; gap: 4px; }
  .diff-controls__item label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: #a09d95;
  }
  .diff-controls .dropbutton-wrapper {
    border: 1px solid #dedad0; border-radius: 8px; overflow: hidden; background: #fff;
  }
  .diff-controls .dropbutton { list-style: none; margin: 0; padding: 0; display: flex; }
  .diff-controls .dropbutton-action a,
  .diff-controls .dropbutton-toggle button {
    display: inline-flex; align-items: center; padding: 7px 13px;
    font-size: 12px; color: #2c2b28; text-decoration: none; background: transparent;
    border: none; border-left: 1px solid #dedad0; cursor: pointer;
    transition: background 0.12s; white-space: nowrap;
  }
  .diff-controls .dropbutton-action:first-child a { border-left: none; }
  .diff-controls .dropbutton-action a:hover,
  .diff-controls .dropbutton-toggle button:hover { background: #f7f5f0; }
  
  /* =====================================================
     CARTE PRINCIPALE
     ===================================================== */
  .diff-responsive-table-wrapper {
    border: 1px solid #e8e5dd;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    width: 80%;
    margin: auto;
  }
  
  /* Titre */
  .diff-responsive-table-wrapper > h2 {
    padding: 15px 20px 12px; font-size: 16px; font-weight: 700;
    color: #1c1c1a; border-bottom: 1px solid #eeebe3; margin: 0;
  }
  .diff-responsive-table-wrapper > h2 a { color: inherit; text-decoration: none; }
  .diff-responsive-table-wrapper > h2 span { color: inherit; }
  
  /* Bouton Bloc */
  .diff-responsive-table-wrapper .block-unblock { padding: 10px 20px 0; }
  .diff-responsive-table-wrapper .block-unblock a {
    display: inline-flex; align-items: center; padding: 3px 10px;
    font-size: 11px; font-weight: 600; border: 1px solid #F5C6C3;
    border-radius: 20px; background: #FEF0EF; color: #C0392B;
    text-decoration: none; width: auto; transition: background 0.12s;
  }
  .diff-responsive-table-wrapper .block-unblock a:hover { background: #FADBD8; }
  
  /* Soumis par */
  .diff-responsive-table-wrapper > div:first-of-type {
    padding: 8px 20px 10px; font-size: 12px; color: #908d84;
    border-bottom: 1px solid #eeebe3;
  }
  .diff-responsive-table-wrapper > div:first-of-type a {
    color: #1a62b5; text-decoration: none; font-weight: 500;
  }
  
  /* Masquer bg-banner */
  .diff-responsive-table-wrapper .bg-banner { display: none !important; }
  
  /* =====================================================
     CONTENEUR PRINCIPAL
     ===================================================== */
  .diff-responsive-table-wrapper > div:not(:first-of-type) {
    padding: 0;
    display: block;
    border: none;
    background: transparent;
  }
  
  /* =====================================================
     SÉPARATEURS DE SECTION (injectés par JS)
     ===================================================== */
  .diff-section-header {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 20px !important;
    background: #FAFAFA!important;
    border-bottom: 1px solid #e8e5dd !important;
    border-top: 1px solid #e8e5dd !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6b6860 !important;
    /* annuler la grille champ si elle s'applique */
    grid-template-columns: unset !important;
  }
  .diff-section-header > * {
    padding: 0 !important; background: none !important; border: none !important;
    font-size: inherit !important; font-weight: inherit !important;
    color: inherit !important; text-transform: inherit !important;
  }
  
  /* =====================================================
     CHAQUE CHAMP  (div > div dans le conteneur principal)
     Grille label (210px) | valeur (1fr)
     ===================================================== */
  .diff-responsive-table-wrapper > div > div {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: start;
    border-bottom: 1px solid #f0ede6;
  }
  .diff-responsive-table-wrapper > div > div:last-child { border-bottom: none; }
  
  /* Label */
  .diff-responsive-table-wrapper > div > div > div:first-child:not(:only-child) {
    font-size: 13px;
    font-weight: 500;
    color: #4a4944;
    padding: 11px 16px 11px 20px;
    background: #FAFAFA;
    border-right: 1px solid #f0ede6;
    line-height: 1.4;
  }
  
  /* Valeur */
  .diff-responsive-table-wrapper > div > div > div:last-child,
  .diff-responsive-table-wrapper > div > div > div:only-child {
    color: #2c2b28; padding: 11px 16px; line-height: 1.6; word-break: break-word;
  }
  
  /* =====================================================
     TÉLÉPHONE : wrappé en .diff-tel-row par le JS
     Même apparence qu'un champ email normal
     ===================================================== */
  .diff-tel-row {
    display: grid !important;
    grid-template-columns: 210px 1fr;
    align-items: start;
    border-bottom: 1px solid #f0ede6;
  }
  .diff-tel-row__label {
    font-size: 13px;
    font-weight: 500;
    color: #4a4944;
    padding: 11px 16px 11px 20px;
    background: #faf9f6;
    border-right: 1px solid #f0ede6;
    line-height: 1.4;
  }
  .diff-tel-row__value {
    padding: 11px 16px;
    color: #2c2b28;
    line-height: 1.6;
    word-break: break-word;
  }
  .diff-tel-row__value a[href^="tel"] {
    color: #2c2b28;
    text-decoration: none;
  }
  /* Highlight si modifié */
  .diff-tel-row:has(del) .diff-tel-row__label::after,
  .diff-tel-row:has(ins) .diff-tel-row__label::after {
    content: "✎ modifié";
    display: inline-flex; align-items: center;
    margin-left: 7px; padding: 1px 7px;
    font-size: 10px; font-weight: 600;
    color: #7a6000; background: #FFF0B2;
    border-radius: 8px; vertical-align: middle; white-space: nowrap;
  }
  .diff-tel-row:has(del) .diff-tel-row__value { background: #FEF5F5; }
  .diff-tel-row:has(ins) .diff-tel-row__value { background: #F3FBE9; }
  
  /* =====================================================
     SITE WEB / RÉSEAUX SOCIAUX
     Remettre dans la grille avec pseudo-label
     ===================================================== */
  .diff-responsive-table-wrapper .social-media-links--platforms {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0ede6;
  }
  /* Pseudo-label "Site web" */
  .diff-responsive-table-wrapper .social-media-links--platforms::before {
    content: "Site web";
    font-size: 13px;
    font-weight: 500;
    color: #4a4944;
    padding: 11px 16px 11px 20px;
    background: #faf9f6;
    border-right: 1px solid #f0ede6;
    line-height: 1.4;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .diff-responsive-table-wrapper .social-media-links--platforms li {
    padding: 8px 16px;
  }
  .diff-responsive-table-wrapper .social-media-links--platforms a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border: 1px solid #dedad0; border-radius: 20px;
    font-size: 12px; color: #1a62b5; text-decoration: none; background: #fff;
    transition: background 0.12s;
  }
  .diff-responsive-table-wrapper .social-media-links--platforms a:hover { background: #f0f5fc; }
  
  /* Champ logo (visually-hidden) → pas de grille */
  .diff-responsive-table-wrapper > div > div:has(.visually-hidden) {
    display: block; padding: 12px 20px; border-bottom: 1px solid #f0ede6;
  }
  .diff-responsive-table-wrapper > div > div:has(.visually-hidden) > div:first-child {
    display: none;
  }
  
  /* =====================================================
     HIGHLIGHT CHANGEMENTS
     ===================================================== */
  /* Fond rouge sur cellule contenant del */
  .diff-responsive-table-wrapper > div > div > div:has(del) { background: #FEF5F5; }
  /* Fond vert sur cellule contenant ins */
  .diff-responsive-table-wrapper > div > div > div:has(ins) { background: #F3FBE9; }
  
  /* Badge "✎ modifié" sur le label de la ligne changée */
  .diff-responsive-table-wrapper > div > div:has(del) > div:first-child::after,
  .diff-responsive-table-wrapper > div > div:has(ins) > div:first-child::after {
    content: "✎ modifié";
    display: inline-flex; align-items: center;
    margin-left: 7px; padding: 1px 7px;
    font-size: 10px; font-weight: 600;
    color: #7a6000; background: #FFF0B2;
    border-radius: 8px; vertical-align: middle; white-space: nowrap;
  }
  
  /* Highlight téléphone modifié */
  .diff-responsive-table-wrapper > div > a[href^="tel"]:has(del),
  .diff-responsive-table-wrapper > div > a[href^="tel"]:has(ins) {
    background: #FFFCF3;
  }
  
  /* del / ins */
  del, del.diffmod {
    background: #FBCFCF; color: #8B1515;
    text-decoration: line-through; border-radius: 5px;
    padding: 2px 6px; font-style: normal; font-weight: 500;
  }
  ins, ins.diffmod {
    background: #C5E8A0; color: #1E6B00;
    text-decoration: none; border-radius: 5px;
    padding: 2px 6px; font-style: normal; font-weight: 500; margin-left: 3px;
  }
  p.diffmod {
    background: #FFFBE5; border: 1px solid #EDD96A;
    border-radius: 6px; padding: 5px 10px; margin: 0;
  }
  del.diffimg, ins.diffimg { background: transparent; padding: 0; }
  del.diffimg { border: 2px solid #F5C6C3; border-radius: 6px; display: inline-block; }
  ins.diffimg { border: 2px solid #BDE49A; border-radius: 6px; display: inline-block; margin-left: 4px; }
  .diffsrc img { max-width: 100px; height: auto; border-radius: 5px; display: block; }
  
  /* =====================================================
     PARAGRAPHES IMBRIQUÉS
     ===================================================== */
  .diff-responsive-table-wrapper .paragraph--type--conseil-administration,
  .diff-responsive-table-wrapper .paragraph--type--indicateurs,
  .diff-responsive-table-wrapper .paragraph--type--comites-issus,
  .diff-responsive-table-wrapper .paragraph--type--principaux-actionnaires,
  .diff-responsive-table-wrapper .paragraph--type--controle,
  .diff-responsive-table-wrapper .paragraph--type--personne-chargee-relations,
  .diff-responsive-table-wrapper .paragraph--type--composition-du-capital,
  .diff-responsive-table-wrapper .paragraph--type--evolution-du-capital,
  .diff-responsive-table-wrapper .paragraph--type--capital,
  .diff-responsive-table-wrapper .paragraph--type--ratio {
    border: 1px solid #eeebe3;
    border-left: 3px solid #dedad0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #FAFAFA;
    display: block !important; /* annuler la grille parente */
  }
  .diff-responsive-table-wrapper .paragraph--view-mode--default:has(del),
  .diff-responsive-table-wrapper .paragraph--view-mode--default:has(ins) {
    border-left-color: #8FCC5A; background: #F8FDF2;
  }
  
  /* Sous-champs dans paragraphe */
  .diff-responsive-table-wrapper .paragraph--view-mode--default > div {
    display: grid !important;
    grid-template-columns: 44% 1fr !important;
    align-items: start; gap: 6px 10px;
    padding: 4px 0 !important;
    background: none !important; border: none !important;
    border-bottom: 1px solid #f0ede6 !important;
  }
  .diff-responsive-table-wrapper .paragraph--view-mode--default > div:last-child {
    border-bottom: none !important;
  }
  .diff-responsive-table-wrapper .paragraph--view-mode--default > div > div:first-child {
    font-size: 10px !important; font-weight: 700 !important;
    color: #a09d95 !important; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 2px 0 !important;
    background: none !important; border: none !important;
  }
  .diff-responsive-table-wrapper .paragraph--view-mode--default > div > div:last-child {
    font-size: 13px; color: #2c2b28; padding: 0 !important;
  }
  
  /* Carte Direction */
  .diff-responsive-table-wrapper .card {
    display: inline-flex !important; flex-direction: column; gap: 3px;
    padding: 10px 14px; border: 1px solid #eeebe3; border-radius: 10px;
    background: #faf9f6; min-width: 160px;
  }
  .diff-responsive-table-wrapper .card .function {
    font-size: 10px; font-weight: 700; color: #a09d95;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .diff-responsive-table-wrapper .card .name {
    font-size: 14px; font-weight: 700; color: #1c1c1a;
  }
  
  /* contextual-region */
  .diff-responsive-table-wrapper .contextual-region > h2 { display: none !important; }
  .diff-responsive-table-wrapper .contextual-region a {
    color: #1a62b5; text-decoration: none; font-weight: 600; font-size: 15px;
  }
  
  /* =====================================================
     RESPONSIVE
     ===================================================== */
  @media (max-width: 760px) {
    .diff-header { flex-direction: column; align-items: stretch; }
    .diff-controls { flex-direction: column; align-items: stretch; }
  
    .diff-responsive-table-wrapper > div > div,
    .diff-tel-row,
    .diff-responsive-table-wrapper .social-media-links--platforms {
      grid-template-columns: 1fr !important;
    }
    .diff-tel-row__label { border-right: none; border-bottom: 1px solid #f0ede6; padding: 8px 14px 4px; }
    .diff-tel-row__value { padding: 4px 14px 8px; }
    .diff-responsive-table-wrapper > div > div > div:first-child:not(:only-child) {
      border-right: none; border-bottom: 1px solid #f0ede6;
      padding: 8px 14px 4px !important; font-size: 11px; color: #a09d95;
      background: #faf9f6;
    }
    .diff-responsive-table-wrapper > div > div > div:last-child { padding: 4px 14px 8px !important; }
    .diff-responsive-table-wrapper .paragraph--view-mode--default > div {
      grid-template-columns: 1fr !important;
    }
    .diff-responsive-table-wrapper .social-media-links--platforms::before {
      border-right: none; border-bottom: 1px solid #f0ede6;
      padding: 8px 14px 4px !important;
    }
  }
  
  /* =====================================================
     MODE SOMBRE
     ===================================================== */
  @media (prefers-color-scheme: dark) {
    .diff-header { background: #27261f; border-color: #3a3830; }
    .diff-revision__items-group:first-child { background: #3D1210; color: #F5A0A0; border-color: #6B2020; }
    .diff-revision__items-group:last-child  { background: #142A06; color: #A8D870; border-color: #2E5A10; }
    .diff-navigation__link a { background: #27261f; border-color: #3a3830; color: #d4d1c6; }
  
    .diff-responsive-table-wrapper { background: #1e1d17; border-color: #3a3830; color: #d4d1c6; }
    .diff-responsive-table-wrapper > h2 { color: #eae7dc; border-color: #2e2d26; }
  
    .diff-responsive-table-wrapper > div > div { border-color: #2a2920; }
    .diff-responsive-table-wrapper > div > div > div:first-child:not(:only-child) {
      background: #23221c; border-color: #2a2920; color: #8a877e;
    }
    .diff-responsive-table-wrapper > div > div > div:has(del) { background: #2D0E0E; }
    .diff-responsive-table-wrapper > div > div > div:has(ins) { background: #0E2206; }
  
    .diff-section-header { background: #2a2920 !important; border-color: #3a3830 !important; }
  
    .diff-responsive-table-wrapper .paragraph--view-mode--default { background: #22211b; border-color: #3a3830; }
    .diff-responsive-table-wrapper .card { background: #22211b; border-color: #3a3830; }
  
    .diff-tel-row__label { background: #23221c; border-color: #2a2920; color: #8a877e; }
    .diff-tel-row__value { color: #d4d1c6; }
    .diff-responsive-table-wrapper .social-media-links--platforms::before {
      background: #23221c; border-color: #2a2920; color: #8a877e;
    }
    .diff-responsive-table-wrapper .social-media-links--platforms a {
      background: #27261f; border-color: #3a3830; color: #7aaee8;
    }
  
    del, del.diffmod { background: #3D1010; color: #F09090; }
    ins, ins.diffmod { background: #122806; color: #90CC55; }
    p.diffmod { background: #2A2408; border-color: #7A6520; }
  }