.layout-cards-ams {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;                 /* allow rows to wrap on small screens */

    margin-left: 6rem;
    margin-right: 1rem;
    width: auto;          /* let it be natural */

    max-width: 100%;            /* never exceed viewport width */
    box-sizing: border-box;
    overflow-x: clip;
}

.layout-cards-ams > * {
    min-width: 0 !important;    /* critical: allow children to shrink */
    flex: 1 1 100%;             /* make each row block take full line by default */
}

.ams-flex-group,
.ams-flex-group-transparent {
    margin: .5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;                 /* your spacing */
    padding: 1.2rem;
    box-sizing: border-box;

    /* Let the inner group fit inside the card */
    width: 100%;
    max-width: 100%;
    min-width: 0;                /* allow inner content to shrink */
}

/* If you want the "white card look" only on .ams-flex-group (not the transparent) */
.ams-flex-group {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.ams-flex-group .ams-flex-element,
.ams-flex-group-transparent .ams-flex-element {
    flex: 1 1 0 !important;  /* equal widths across a row */
    min-width: 250px;        /* prevents too-narrow columns */
    max-width: 100%;
    box-sizing: border-box;
    /* text-align: center !important; */
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    /* align-items: center !important; */
}

.ams-flex-group-transparent .ams-flex-element-small {
    flex: 1 1 0 !important;  /* equal widths across a row */
    min-width: 100px;        /* prevents too-narrow columns */
    max-width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    min-height: 0;
}

@media (max-width: 900px) {
    .ams-flex-group {
        flex-direction: column;           /* stack cards vertically */
        align-items: stretch;
    }
}

.layout-cards-ams .card-ams {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 1.2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                0 8px 20px rgba(0, 0, 0, 0.06) !important;
    margin: .5rem;
    max-width: 100%;
    /* width: 100%; */          /* PE PROBLEME POUR AUTRES */
    box-sizing: border-box;
    min-width: 0;               /* critical to enable shrinking of inner content */
}

.layout-cards-ams .card-ams-transparent {
    background-color: none;
    /* padding: 1.2rem !important; */
    margin: .5rem;

    max-width: 100%;
    /* width: 100%; */
    box-sizing: border-box;
    min-width: 0;               /* critical to enable shrinking of inner content */
}

.layout-cards-ams .layout-ams-left-column,
.layout-cards-ams .layout-ams-right-column {
    flex: 1 1 300px;   /* baseline width, but can shrink and wrap */
    min-width: 280px;  /* ensure they don't collapse too small */
    box-sizing: border-box;
}

.layout-cards-ams .card-ams,
.layout-cards-ams .card-ams *,
.layout-cards-ams .card-ams-transparent,
.layout-cards-ams .card-ams-transparent *
 {
    word-wrap: break-word;
    overflow-wrap: anywhere;  /* modern browsers */
}

/* === RESPONSIVE STACKING === */
/* When screen width is below 900px (adjust as needed) */
@media (max-width: 900px) {
    .layout-cards-ams {
        flex-direction: column; /* stack vertically */
    }
    .layout-cards-ams .layout-ams-left-column,
    .layout-cards-ams .layout-ams-right-column {
        flex: 1 1 100%;   /* full-width, stacked */
    }
}

.layout-ams-menstruation-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: 25px;
  justify-content: center;
}


/* ============================================================
   NEW — Proportional column wrappers inside a .card-ams
   ------------------------------------------------------------
   Usage: place two (or more) of these as direct children of a
   .card-ams to get a responsive proportional split, e.g.:

       <div class="card-ams">
           <div class="ams-flex-group-30percent" id="A"> … </div>
           <div class="ams-flex-group-70percent" id="B"> … </div>
       </div>

   The card itself must be a flex row container — add
   "ams-flex-row-card" to the card if you need to override the
   default block behaviour (see helper below).

   On screens ≤ 900 px the columns stack vertically.
   ============================================================ */

/* Make a card-ams lay out its direct children as a flex row.
   Add this class alongside card-ams whenever you put percent
   columns inside it.
   NOTE: no flex-wrap here — stacking is handled exclusively by
   the @media query on the percent columns so columns never
   accidentally wrap on wide screens. */
.ams-flex-row-card {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;         /* stay side-by-side until the breakpoint */
    align-items: stretch;
    gap: 0.75rem;
    box-sizing: border-box;
}

/* Shared base for all ams-flex-group-XXpercent */
[class^="ams-flex-group-"][class$="percent"],
[class*=" ams-flex-group-"][class$="percent"] {
    display: flex;
    flex-direction: column;    /* column wrapper: its children stack vertically
                                  unless overridden by ams-flex-content-row */
    gap: 0.75rem;
    box-sizing: border-box;
    min-width: 0;              /* CRITICAL — allows flex children to shrink */
    max-width: 100%;
}

/* Proportional flex-basis values — tweak freely */
.ams-flex-group-20percent { flex: 0 1 20%; }
.ams-flex-group-25percent { flex: 0 1 25%; }
.ams-flex-group-30percent { flex: 0 1 30%; }
.ams-flex-group-33percent { flex: 0 1 33%; }
.ams-flex-group-40percent { flex: 0 1 40%; }
.ams-flex-group-50percent { flex: 0 1 50%; }
.ams-flex-group-60percent { flex: 0 1 60%; }
.ams-flex-group-66percent { flex: 0 1 66%; }
.ams-flex-group-70percent { flex: 0 1 70%; }
.ams-flex-group-75percent { flex: 0 1 75%; }
.ams-flex-group-80percent { flex: 0 1 80%; }
.ams-flex-group-90percent { flex: 0 1 90%; }
.ams-flex-group-100percent { flex: 0 1 100%; }

/* Stack all percent columns on narrow screens */
@media (max-width: 900px) {
    [class^="ams-flex-group-"][class$="percent"],
    [class*=" ams-flex-group-"][class$="percent"] {
        flex: 1 1 100%;        /* full width, stacked */
    }
    
    /* Also switch the row card to column so children stack cleanly */
    .ams-flex-row-card {
        flex-direction: column;
    }
}

@media (max-width: 1350px) {
    .ams-flex-group-20percent,
    .ams-flex-group-25percent,
    .ams-flex-group-33percent {
        flex: 1 1 100%;
    }

    /* Also switch the row card to column so children stack cleanly */
    .ams-flex-row-card {
        flex-direction: column;
    }
}


/* ============================================================
   NEW — Inner content layout helpers
   ------------------------------------------------------------
   Use these *inside* an ams-flex-group-XXpercent (or any
   flex-column container) to control how the direct children
   are arranged.

   ams-flex-content-row     → children side-by-side (equal widths)
   ams-flex-content-columns → children stacked vertically
   ============================================================ */

/* ROW: direct children share available width equally and wrap
   when the container is too narrow. */
.ams-flex-content-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

.ams-flex-content-row > * {
    flex: 1 1 0;           /* equal widths */
    min-width: 120px;      /* avoid micro-columns; tune per use-case */
    max-width: 100%;
    box-sizing: border-box;
}

/* Stack the row's children on very small screens */
@media (max-width: 700px) {
    .ams-flex-content-row {
        flex-direction: column;
    }
    .ams-flex-content-row > * {
        min-width: 0;
        width: 100%;
    }
}

/* COLUMNS: direct children stacked vertically, each filling
   full width.  Heights follow content unless you set an explicit
   height on the parent and add flex: 1 to the children. */
.ams-flex-content-columns {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    align-items: center !important;
}

.ams-flex-content-columns > * {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.ams-flex-content-columns > .dash-graph {
    align-self: center !important;
}

.dash-graph .plot-container.plotly {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* replaces align-content: center */
    width: 100% !important;            /* ensures the container fills available space */
}

.ams-flex-group-40percent {
    overflow: hidden !important;
}

.ams-flex-group-40percent .dash-graph {
    width: 100% !important;
    max-width: 100% !important;
}

.ams-flex-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
}