/* =========================================================
   ADMIN TABS (Drupal local tasks) — joli, lisible, responsive
   Cible uniquement le bloc .tabs de Drupal
   ========================================================= */

:root{
  /* Tu peux ajuster ces variables si besoin */
  --tabs-bg: #fff;
  --tabs-border: color-mix(in srgb, var(--col-primary, #00151D), transparent 85%);
  --tabs-active: #fff;
  --tabs-hover: color-mix(in srgb, var(--col-secondary, #249DC5), white 85%);
  --tabs-link: var(--col-primary, #00151D);
  --tabs-link-active: var(--col-primary, #00151D);
  --tabs-radius: 10px;
}

.tabs{
  margin-block: 1rem 1.25rem;
}

/* Le UL des onglets */
.tabs .nav.primary.nav-tabs{
  display: flex;
  flex-wrap: nowrap;                 /* tabs sur une ligne */
  gap: .25rem;
  overflow-x: auto;                  /* scroll horizontal s'il y a trop d'onglets */
  -webkit-overflow-scrolling: touch;
  padding: .25rem;
  border-bottom: 1px dashed var(--col-primary);
  scrollbar-width: none;             /* Firefox : masque la barre */
}
.tabs .nav.primary.nav-tabs::-webkit-scrollbar{ display: none; } /* WebKit */

/* Liens d’onglet */
.tabs .nav-link{
  position: relative;
  color: var(--col-secondary);
  background: var(--col-primary);
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: .5rem .9rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

/* Hover / focus */
.tabs .nav-link:hover{
  background: var(--col-secondary);
  color: var(--white);
  text-decoration: none;
}
.tabs .nav-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--col-secondary, #249DC5), white 20%);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Onglet actif */
.tabs .nav-link.active,
.tabs .nav-item.show .nav-link{
  color: var(--tabs-link-active);
  background: var(--col-secondary);
  color: var(--white);
  border: 1px solid var(--col-secondary);
  border-bottom: 1px solid var(--col-secondary); /* “fusionne” avec la zone de contenu */
}

/* Ajuste la ligne commune pour éviter un petit “gap” visuel */
.tabs .nav.primary.nav-tabs + *{
  border-top: 1px solid var(--col-secondary);
  margin-top: -1px; /* remonte pour joindre la bordure des tabs */
}

/* Compacité sur petits écrans */
@media (max-width: 640px){
  .tabs .nav-link{
	padding: .45rem .7rem;
	font-weight: 600;
  }
}

/* Cas : .secondary (si Drupal en génère) */
.tabs .nav.secondary{
  margin-top: .5rem;
  gap: .25rem;
}
.tabs .nav.secondary .nav-link{
  border-radius: 999px;
  border: 1px solid var(--col-secondary);
  padding: .35rem .7rem;
}
.tabs .nav.secondary .nav-link.active{
  background: var(--col-secondary);
  border-color: color-mix(in srgb, var(--col-secondary), white 60%);
}
/* =========================================================
   MAIN WRAPPER — structure, respiration, largeur & variantes
   ========================================================= */

/* Bande principale */
#main-wrapper.layout-main-wrapper {
  background: var(--bg);
  padding-block: 6rem;
}

/* Conteneur interne principal (Bootstrap .container déjà présent) */
#main-wrapper > #main.container {
  max-width: min(1320px, 92vw);
  margin-inline: auto;
}

/* Grille racine (ligne qui contient main + sidebars) */
#main-wrapper .row.row-offcanvas {
  gap: clamp(12px, 1.6vw, 24px);      /* espace entre colonnes */
}

/* Colonne de contenu (main-content) */
#content.main-content {
}

/* Sidebars : même carte mais un peu plus compacte */
#sidebar_first aside.section,
#sidebar_second aside.section {
  background: #fff;
  border-radius: 12px;
  padding: clamp(14px, 2vw, 22px);
  box-shadow:
	0 1px 2px rgba(0,0,0,.03),
	0 6px 18px rgba(0,0,0,.04);
}

/* Titre de page : cohérent avec ta charte */
#content .title {
  color: var(--col-primary);
  line-height: 1.2;
  margin: 0 0 .75rem;
  font-size: 3rem;
}

/* Paragraphes et blocs texte plus lisibles */
#content .section p {
  margin-block: .5rem 1rem;
  margin-block: 2rem;
  margin-inline: auto;
}
/* Texte éditorial au-dessus du webform : largeur harmonisée */
article.node--type-webform .field--name-body {
  max-width: 72ch;          /* ou 80ch si tu veux un peu plus large */
  margin: 0 auto 2.5rem;    /* centré, avec espace sous le texte */
}

/* Breadcrumbs : affiné et raccroché au contenu */
#block-ami-aprs-breadcrumbs .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 .75rem;
  gap: .25rem;
}
#block-ami-aprs-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: color-mix(in srgb, var(--col-primary), transparent 50%);
}

#block-ami-aprs-views-block-ami-b-home{
  background: var(--col-secondary);
  padding: 1rem 2rem;
  margin-block: 2rem;
  border-radius: 0.5rem;
}
#block-ami-aprs-views-block-ami-b-home a{
  color: var(--white);
  font-weight: 600;
}
#block-ami-aprs-views-block-ami-b-home .views-field-view-node a{
  color: var(--white);
  background: var(--col-primary);
  padding: 2rem;
  margin-block: 1rem;
  border-radius: 0.5rem;
  display: inline-flex;
}

/* Bandes pleine largeur (si tu veux alterner des sections edge-to-edge) */
#main-wrapper.is-striped {
  background:
	linear-gradient(#fff) padding-box,
	linear-gradient(180deg,
	  color-mix(in srgb, var(--col-secondary), white 92%) 0%,
	  transparent 35%,
	  transparent 65%,
	  color-mix(in srgb, var(--col-secondary), white 92%) 100%
	) border-box;
  border-block: 12px solid transparent; /* crée un liseré doux en haut/bas */
}

/* =========================================================
   APRS — Bloc "accès restreint" Webform
   ========================================================= */

article.node--type-webform .webform-access-denied {
  margin: 2rem auto 2.5rem;
  padding: 1.5rem 1.75rem;
  max-width: 960px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--col-accent, #E74011), transparent 40%);
  background:
    linear-gradient(
      to right,
      rgba(231, 64, 17, 0.06),
      rgba(231, 64, 17, 0.01)
    );
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Icône "info / attention" à gauche */
article.node--type-webform .webform-access-denied::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background-color: var(--col-accent, #E74011);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

/* Texte */
article.node--type-webform .webform-access-denied p {
  margin: 0 0 .25rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--col-primary, #00151D);
}

/* On vire le   si présent */
article.node--type-webform .webform-access-denied p:first-child {
  margin: 0;
}
article.node--type-webform .webform-access-denied p:first-child:empty,
article.node--type-webform .webform-access-denied p:first-child:has( ) {
  display: none;
}

/* Liens "créer un compte" / "vous connecter" */
article.node--type-webform .webform-access-denied a {
  font-weight: 600;
  color: var(--col-secondary, #249DC5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

article.node--type-webform .webform-access-denied a:hover,
article.node--type-webform .webform-access-denied a:focus-visible {
  color: var(--col-primary, #00151D);
}
/* =========================================================
   APRS — Bloc AMI home
   Cible : #block-ami-aprs-views-block-ami-b-home
   ========================================================= */

#block-ami-aprs-views-block-ami-b-home {
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  max-width: 960px;
  background: #ffffff;
  border: 1px solid rgba(0, 21, 29, .06);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .06),
    0 2px 6px rgba(0, 0, 0, .03);
}

/* Titre du bloc */
#block-ami-aprs-views-block-ami-b-home > h2 {
  margin: 0 0 1.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--col-secondary, #249DC5);
}

/* Wrapper contenu */
#block-ami-aprs-views-block-ami-b-home .view-ami {
  margin: 0;
}

/* Liste des AMI (même si une seule entrée pour l’instant) */
#block-ami-aprs-views-block-ami-b-home .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-ami-aprs-views-block-ami-b-home .item-list li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.4rem 1.6rem;
  border-radius: .5rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 21, 29, .04);
  transition: all .18s ease-out;
}

/* Hover carte */
#block-ami-aprs-views-block-ami-b-home .item-list li:hover {
  background: #f3f9fc;
  border-color: var(--col-secondary, #249DC5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  transform: translateY(-2px);
}

/* Titre de l’AMI */
#block-ami-aprs-views-block-ami-b-home .views-field-title a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--col-primary, #00151D);
  text-decoration: none;
}

#block-ami-aprs-views-block-ami-b-home .views-field-title a:hover {
  color: var(--col-secondary, #249DC5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Texte descriptif */
#block-ami-aprs-views-block-ami-b-home .views-field-body {
  font-size: .95rem;
  color: var(--muted, #49566b);
  max-width: 70ch;
}

/* Lien "Effectuez votre soumission" → bouton primaire */
#block-ami-aprs-views-block-ami-b-home .views-field-view-node a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .6rem;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  background: var(--col-primary, #00151D);
  color: #ffffff !important;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: all .18s ease-out;
}

#block-ami-aprs-views-block-ami-b-home .views-field-view-node a::after {
  content: "›";
  margin-left: .45rem;
  font-size: 1rem;
}

#block-ami-aprs-views-block-ami-b-home .views-field-view-node a:hover {
  background: var(--col-secondary, #249DC5);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  #block-ami-aprs-views-block-ami-b-home {
    padding: 1.75rem 1.25rem;
    margin: 2rem 0;
  }

  #block-ami-aprs-views-block-ami-b-home .item-list li {
    padding: 1.1rem 1.2rem;
  }

  #block-ami-aprs-views-block-ami-b-home .views-field-body {
    max-width: 100%;
  }
}

/* Responsive */
@media (max-width: 768px) {
  article.node--type-webform .webform-access-denied {
    padding: 1.25rem 1.25rem;
    gap: .75rem;
  }
}

/* Petits écrans : relâcher les contraintes */
@media (max-width: 991.98px){
  #content.main-content,
  #sidebar_first aside.section,
  #sidebar_second aside.section {border-radius: 10px;
  }
  #main-wrapper > #main.container {max-width: 96vw;}
  #content .title {font-size: 2rem;}
}

/* Très grands écrans : éviter l’effet “couloir étroit” */
@media (min-width: 1400px){
  #main-wrapper > #main.container {max-width: 960px;}
}

/* Un peu d’air sous les messages système si présents */
.highlighted .section {
  margin-bottom: .75rem;
}

/* Tabs admin raccordés visuellement au contenu (si tu utilises admin.css) */
.tabs + #block-ami-aprs-content .content > article,
.tabs + .section {
  margin-top: 0;
}