/* =========================================================================
   ABC PRO - Surcouches CSS personnalisation portail
   v1.0 - Avril 2026 - charte: GREEN_DARK #0F3B35 / GREEN #2ED8A7
   Charge via base.html.twig override apres style.bundle.css
   ========================================================================= */

:root {
  /* Palette ABC PRO (re-expose pour utilisation interne) */
  --abc-green-dark: #0F3B35;
  --abc-green: #2ED8A7;
  --abc-green-mid: #7FE5C4;
  --abc-green-soft: #C7F1E3;
  --abc-green-wash: #F0FCF8;
  --abc-ink: #212B2E;
  --abc-grey: #6B7876;
  --abc-grey-light: #D1D9D7;
  --abc-grey-rule: #B8C4C0;
  --abc-amber: #C28520;
  --abc-amber-soft: #FCF5E1;

  /* Espacements (multiples de 4px) */
  --abc-space-xs: 4px;
  --abc-space-sm: 8px;
  --abc-space-md: 16px;
  --abc-space-lg: 24px;
  --abc-space-xl: 32px;
  --abc-space-2xl: 48px;

  /* Rayons */
  --abc-radius-sm: 6px;
  --abc-radius-md: 10px;
  --abc-radius-lg: 14px;

  /* Ombres */
  --abc-shadow-sm: 0 1px 3px rgba(15, 59, 53, .08);
  --abc-shadow-md: 0 4px 12px rgba(15, 59, 53, .10);

  /* Animations - durees standard ABC PRO */
  --abc-anim-fast: 200ms;
  --abc-anim-medium: 400ms;
  --abc-anim-loader: 20s; /* loader 20 secondes pour signature/contralia */
}

/* =========================================================================
   BOUTONS - charte ABC PRO appliquee aux btn Bootstrap
   ========================================================================= */
.btn-primary {
  background: var(--abc-green) !important;
  border-color: var(--abc-green) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: var(--abc-radius-sm) !important;
  transition: background var(--abc-anim-fast), transform var(--abc-anim-fast) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--abc-green-dark) !important;
  border-color: var(--abc-green-dark) !important;
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--abc-green-dark) !important;
  border-color: var(--abc-green-dark) !important;
}
.btn-dark:hover { background: #082420 !important; border-color: #082420 !important; }

.btn-warning {
  background: var(--abc-amber) !important;
  border-color: var(--abc-amber) !important;
  color: #FFFFFF !important;
}

/* =========================================================================
   CARDS - radius doux + ombre legere ABC PRO
   ========================================================================= */
.card, .card-shadow {
  border-radius: var(--abc-radius-md) !important;
  box-shadow: var(--abc-shadow-sm) !important;
  border: 1px solid var(--abc-grey-rule) !important;
}
.card-header {
  background: var(--abc-green-wash) !important;
  border-bottom: 1px solid var(--abc-grey-light) !important;
  border-top-left-radius: var(--abc-radius-md) !important;
  border-top-right-radius: var(--abc-radius-md) !important;
  color: var(--abc-green-dark) !important;
}

/* =========================================================================
   ACCENT VERTICAL filet ABC PRO sur titres de section
   ========================================================================= */
h1.text-dark, .card .card-title, h2.fw-bold {
  position: relative;
  padding-left: 12px;
}
h1.text-dark::before, .card .card-title::before, h2.fw-bold::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: var(--abc-green);
  border-radius: 2px;
}

/* =========================================================================
   COOKIE BANNER : moins agressif, fond charte
   ========================================================================= */
.cookies-banner, .acceptCookies + * {
  background: var(--abc-green-dark) !important;
}
.acceptCookies {
  background: var(--abc-green) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* =========================================================================
   LOADER 20 SECONDES - animation Lottie-style en SVG/CSS pur
   pour signature electronique Contralia (lent)
   ========================================================================= */
@keyframes abcSpin {
  to { transform: rotate(360deg); }
}
@keyframes abcPulse {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes abcFlow {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
@keyframes abcFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.abc-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abc-space-md);
  padding: var(--abc-space-lg);
  border-radius: var(--abc-radius-lg);
  background: #FFFFFF;
  box-shadow: var(--abc-shadow-md);
  border: 1px solid var(--abc-green-soft);
  animation: abcFadeIn var(--abc-anim-medium) ease-out;
}
.abc-loader__svg {
  width: 96px; height: 96px;
}
.abc-loader__circle {
  fill: none;
  stroke: var(--abc-green-soft);
  stroke-width: 6;
}
.abc-loader__arc {
  fill: none;
  stroke: var(--abc-green);
  stroke-width: 6;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  animation: abcSpin 1.4s linear infinite;
}
.abc-loader__sun {
  fill: var(--abc-green);
  animation: abcPulse 2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.abc-loader__title {
  color: var(--abc-green-dark);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}
.abc-loader__subtitle {
  color: var(--abc-grey);
  font-size: .85rem;
  text-align: center;
  max-width: 260px;
}
.abc-loader__bar {
  width: 100%; max-width: 260px; height: 4px;
  background: var(--abc-green-soft);
  border-radius: 2px; overflow: hidden;
}
.abc-loader__bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--abc-green) 0%, var(--abc-green-dark) 100%);
  border-radius: 2px;
  width: 0%;
  animation: abcLoaderProgress var(--abc-anim-loader) cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes abcLoaderProgress {
  0%   { width: 0%; }
  20%  { width: 35%; }
  60%  { width: 75%; }
  90%  { width: 92%; }
  100% { width: 95%; } /* reste a 95% jusqu'a vrai onload */
}

/* Variantes pour pages spinners existantes */
.spinner-border.text-primary {
  color: var(--abc-green) !important;
  width: 2.25rem !important; height: 2.25rem !important;
  border-width: .25em !important;
}

/* =========================================================================
   ENEDIS / LINKY pages - reduire gros vide en haut + cards lisibles
   ========================================================================= */
.row.g-5.g-xxl-10 > .col-xxl-12.mb-xxl-10:first-child {
  margin-bottom: var(--abc-space-md) !important;
}
.card-body.p-0 > .row.g-5.g-lg-9 {
  --bs-gutter-x: var(--abc-space-md);
  --bs-gutter-y: var(--abc-space-md);
}
/* Compactage des cards Enedis sur le haut */
.card.card-shadow .card-body.p-8 {
  padding: var(--abc-space-md) !important;
}
@media (min-width: 992px) {
  .card.card-shadow .card-body.p-8 {
    padding: var(--abc-space-lg) !important;
  }
}
.card-header.p-4 h2 {
  margin-bottom: 0 !important;
  color: var(--abc-green-dark);
}

/* Boutons Retour/Refuser/Accepter Enedis : meilleur alignement + responsive */
.card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abc-space-sm);
  padding: var(--abc-space-md) !important;
  border-top: 1px solid var(--abc-grey-rule);
  background: var(--abc-green-wash);
}
.card-footer .btn { flex: 1 1 auto; min-width: 110px; }

/* =========================================================================
   MOBILE - Edge-to-edge cards, pas de marges laterales inutiles
   pour ecrans < 576px (phones portrait)
   ========================================================================= */
@media (max-width: 575.98px) {
  /* Conteneur principal full-bleed */
  body, html {
    overflow-x: hidden;
  }
  .container, .container-fluid, .container-xxl, .container-xl, .container-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* Cards collees aux bords */
  .card, .card-shadow {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Reduire le padding des card-body sur mobile */
  .card-body, .card-body.p-0, .card-body.p-8, .card-body.p-4 {
    padding: var(--abc-space-md) !important;
  }
  /* Header / breadcrumbs : pas de gros padding */
  .app-header-wrapper, .app-content, .app-container {
    padding-left: var(--abc-space-sm) !important;
    padding-right: var(--abc-space-sm) !important;
  }
  /* Reduire l'espace au-dessus du contenu (gros vide Linky) */
  .row.g-5.g-xxl-10 {
    --bs-gutter-y: var(--abc-space-sm);
    margin-top: 0 !important;
  }
  .row.g-5.g-xxl-10 > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0 !important;
  }
  .mb-xxl-10, .mb-xl-10 { margin-bottom: var(--abc-space-md) !important; }
  /* Boutons full-width sur petit ecran */
  .card-footer { flex-direction: column; }
  .card-footer .btn { width: 100%; }
  /* Texte plus serre */
  h1, .h1 { font-size: 1.4rem !important; }
  h2, .h2 { font-size: 1.2rem !important; }
  h3, .h3 { font-size: 1.05rem !important; }
  /* Footer compact */
  footer .row > div { margin-bottom: var(--abc-space-sm); }
  /* Tableaux : scroll horizontal au lieu de tronquage */
  table, .table-responsive {
    font-size: .85rem !important;
  }
  /* Modal full-screen sur mobile */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
  }
}

/* =========================================================================
   MOBILE landscape (<= 991px tablette)
   ========================================================================= */
@media (max-width: 991.98px) {
  /* Reduire le top whitespace de la navbar */
  .app-toolbar { padding: var(--abc-space-sm) var(--abc-space-md) !important; }
  /* Iframe document signature : prend toute la hauteur dispo */
  #iframeDocument {
    height: calc(100vh - 200px) !important;
    min-height: 480px;
  }
}

/* =========================================================================
   ALERTS / MESSAGES ABC PRO branding
   ========================================================================= */
.alert-warning {
  background: var(--abc-amber-soft) !important;
  border: 1px solid var(--abc-amber) !important;
  color: var(--abc-green-dark) !important;
  border-radius: var(--abc-radius-sm);
}
.alert-info {
  background: var(--abc-green-wash) !important;
  border: 1px solid var(--abc-green) !important;
  color: var(--abc-green-dark) !important;
  border-radius: var(--abc-radius-sm);
}
.alert-danger {
  background: #FFEBEE !important;
  border: 1px solid #C62828 !important;
  color: #B71C1C !important;
  border-radius: var(--abc-radius-sm);
}

/* =========================================================================
   NAVBAR - eviter les contrastes blancs
   ========================================================================= */
.app-navbar .menu-item .menu-link {
  color: var(--abc-green-dark) !important;
  font-weight: 600;
  transition: background var(--abc-anim-fast);
}
.app-navbar .menu-item .menu-link:hover,
.app-navbar .menu-item.active .menu-link {
  background: var(--abc-green-wash) !important;
  color: var(--abc-green-dark) !important;
}

/* =========================================================================
   AVATAR / CARTE COMMERCIAL : meilleur visuel + green border
   ========================================================================= */
.symbol.symbol-50px > img,
.symbol.symbol-65px > img,
.symbol.symbol-100px > img {
  border: 2px solid var(--abc-green-soft);
}

/* =========================================================================
   FORMULAIRES - inputs avec focus charte ABC PRO
   ========================================================================= */
.form-control:focus, .form-select:focus, [contenteditable]:focus {
  border-color: var(--abc-green) !important;
  box-shadow: 0 0 0 .2rem rgba(46, 216, 167, .25) !important;
  outline: none;
}
.input-group-text { background: var(--abc-green-wash); color: var(--abc-green-dark); border-color: var(--abc-grey-rule); }