/* --- Responsive layout (sans dépendre de Divi) --- */
    :root{
      --lar-gap: 14px;
      --lar-radius: 10px;
      --lar-border: #e7e7e7;
      --lar-bg: #ffffff;
      --lar-bg-alt: #f6f6f6;
      --lar-text: #222;
      --lar-muted: #666;
      --lar-accent: #4f358d;
    }
    .lar-wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 16px 28px;
    }

    .lar-head{
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: var(--lar-gap);
      margin-bottom: 14px;
    }

    .lar-head label{
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
    }

    /* Le libellé "Sélectionnez un mois" doit pouvoir être lisible sur un fond sombre (ex. Divi). */
    .lar-select > label{
      color: #fff;
    }

    .lar-select{
      min-width: 240px;
    }

    .lar-select select{
      width: 100%;
      max-width: 420px;
      padding: 10px 12px;
      border: 1px solid var(--lar-border);
      border-radius: 8px;
      background: #fff;
    }

    fieldset.lar-grid{
      border: 0;
      padding: 0;
      margin: 14px 0 18px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--lar-gap);
    }

    .lar-card{
      position: relative;
      border: 1px solid var(--lar-border);
      border-radius: var(--lar-radius);
      background: var(--lar-bg);
      padding: 0;
      min-height: 122px;
    }

    .lar-card.is-alt{
      background: var(--lar-bg-alt);
    }

    /* Toute la carte est cliquable via le <label> */
    .lar-card label{
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 10px;
      align-items: start;
      cursor: pointer;
      user-select: none;
      height: 100%;
      padding: 12px 12px 10px;
      border-radius: var(--lar-radius);
    }

    .lar-card img{
      width: 56px;
      height: 56px;
      object-fit: contain;
      display: block;
    }

    .lar-card .lar-text{
      line-height: 1.2;
    }

    .lar-title{
      display: block;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .lar-sub{
      display: block;
      color: var(--lar-muted);
      font-size: 0.95em;
      margin-top: 2px;
    }
	
	.grid-break {
  grid-column: 1 / -1;
  height: 0;
}

    /* Radio: on le garde pour l'accessibilité, mais on le masque (sélection via clic sur la carte) */
    .lar-card input[type="radio"]{
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 1px;
      height: 1px;
    }

    /* Bordure + fond léger sur la carte sélectionnée */
    .lar-card:has(input[type="radio"]:checked){
      border-color: #a79ac6;
      box-shadow: 0 0 0 3px rgba(167,154,198,.35);
      background: #a79ac6;
    }

    /* Petit indicateur discret (sans bouton radio visible) */
    .lar-card:has(input[type="radio"]:checked)::after{
      content: "✓";
      position: absolute;
      top: 10px;
      right: 12px;
      font-weight: 800;
      color: var(--lar-accent);
      line-height: 1;
    }

    /* Focus clavier */
    .lar-card:focus-within{
      outline: 2px solid rgba(79,53,141,.35);
      outline-offset: 2px;
    }

    .lar-actions{
      display: flex;
      gap: var(--lar-gap);
      align-items: center;
      flex-wrap: wrap;
    }

    .lar-actions input[type="submit"]{
      appearance: none;
      border: 0;
      border-radius: 10px;
      padding: 12px 18px;
      font-weight: 700;
      background: var(--lar-accent);
      color: #fff;
      cursor: pointer;
    }
    .lar-actions input[type="submit"]:hover{
      filter: brightness(1.05);
    }

    .lar-note{
      color: var(--lar-muted);
      font-size: .95em;
    }

    /* --- Breakpoints --- */
    @media (max-width: 980px){
      fieldset.lar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .lar-wrap{ padding: 14px 12px 22px; }
      fieldset.lar-grid{ grid-template-columns: 1fr; }
      .lar-select{ width: 100%; }
      .lar-actions input[type="submit"]{ width: 100%; }
      .lar-card{ min-height: 0; }
    }

    /* Compat: si :has n’est pas supporté, on ne fait juste pas la bordure accentuée */

.lar-actions input[type=submit]{
  font-family: inherit;
  border-radius: 30px;
  border: solid 2px var(--lar-accent);
  transition: .3s;
  background:#fff;
  color: var(--lar-accent);
}
.lar-actions input[type=submit]:hover{
  border: solid 2px var(--lar-accent);
  background: #a79ac6;
  color: var(--lar-accent);
}

/* Bouton (proche de ta feuille arrivages.css d'origine) */
.lar-actions input[type="submit"]{
  border: solid 2px var(--lar-accent);
  background: #fff;
  color: var(--lar-accent);
  border-radius: 30px;
  transition: 0.3s;
}

.lar-actions input[type="submit"]:hover{
  background: #a79ac6;
}