/**
 * shapes.css — Système de décorations de section
 * 
 * Formes décoratives positionnées en arrière-plan des sections.
 * Pilotées par ACF via le partial template-parts/partials/shapes.php
 * 
 * Prérequis sur la section parente :
 *   - position: relative
 *   - overflow: hidden
 *   - le contenu interne doit avoir un z-index >= var(--z-base)
 */


/* =========================
   Conteneur global
========================= */
.shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-shape);
    overflow:hidden;
}



/* =========================
   Forme de base
   La largeur est pilotée par les modifiers .shape--md / .shape--lg
   La hauteur s'auto-calcule via background-size: 100% auto
========================= */
.shape {
    position: absolute;
    top: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    aspect-ratio: 1 / 1;
}


/* =========================
   Types de formes
========================= */
.shape--gellule-verte {
    background-image: url('../../img/shapes/Grande-gellule-verte-45.svg');
}

.shape--gellules-vert-et-bleu {
    background-image: url('../../img/shapes/Grandes-Gellules-45-completes.svg');
}

.shape--gellule-bleue {
    background-image: url('../../img/shapes/Grande-gellule-bleue.svg');
}


/* =========================
   Positions horizontales
   Toujours centrées verticalement via top: 50% + translateY(-50%)
========================= */
.shape--left {
    left: 0;
    transform: translate(-50%, -50%);
}

.shape--middle {
    left: 50%;
    transform: translate(-50%, -50%);
}

.shape--right {
    right: 0;
    transform: translate(20%, -50%);
}


/* =========================
   Tailles — MOBILE FIRST
   Mobile : grosses formes centrées et dominantes
========================= */
.shape--md { width: 240%; }
.shape--lg { width: 190%; }


/* =========================
   Tablette
========================= */
@media (min-width: 768px) {
    .shape--md { width: 200%; }
    .shape--lg { width: 150%; }
}


/* =========================
   Desktop
========================= */
@media (min-width: 1024px) {
    .shape--md { width: 180%; }
    .shape--lg { width: 150%; }
}