/* =========================================================================
   Pizza Soleïade — CSS custom minimal
   Le style du site est géré par Tailwind CSS (CDN). On ne garde ici que les
   quelques cas non couverts par les classes utilitaires.
   ========================================================================= */

/* Ruban violet du hero (forme en chevron, impossible en pur Tailwind) */
.ribbon-purple {
  display: inline-block;
  background-color: #a378b6; /* purple */
  color: #ffffff;
  padding: 10px 34px;
  clip-path: polygon(10% 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 10% 50%);
}

/* --- Touches "Italie" : tricolore vert / blanc / rouge --- */
.tricolore {
  background: linear-gradient(to right,
    #009246 0 33.333%, #ffffff 33.333% 66.666%, #ce2b37 66.666% 100%);
}
.tricolore-v {
  background: linear-gradient(to bottom,
    #009246 0 33.333%, #ffffff 33.333% 66.666%, #ce2b37 66.666% 100%);
}
/* Version douce (transparente) pour un liseré plus discret */
.tricolore-soft {
  background: linear-gradient(to right,
    rgba(0,146,70,0.85) 0 33.333%, rgba(255,255,255,0.9) 33.333% 66.666%, rgba(206,43,55,0.85) 66.666% 100%);
}
/* Petit séparateur tricolore centré (titres de section) */
.tricolore-divider {
  width: 90px; height: 4px; margin: 12px auto 0; border-radius: 9999px;
  background: linear-gradient(to right,
    #009246 0 33.333%, #ffffff 33.333% 66.666%, #ce2b37 66.666% 100%);
}

/* =========================================================================
   Mobile-first : sécurité anti-débordement horizontal
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* =========================================================================
   Décorations latérales (planches d'illustrations dans les marges)
   Injectées par js/layout.js dans #site-deco.
   Deux bandes verticales posées SUR le fond, qui comblent l'espace vide à
   gauche et à droite du contenu (centré sur max-w-6xl = 1152px).
   → Masquées quand il n'y a pas de marge (mobile / tablette) : purement
     décoratif, aucun contenu ajouté à la page.
   ========================================================================= */
#site-deco { display: none; }

/* Affichées seulement quand une marge latérale suffisante existe. */
@media (min-width: 1280px) {
  #site-deco {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;             /* posé sur le fond, derrière le contenu */
    pointer-events: none;   /* purement décoratif, non cliquable */
  }
  .deco-strip {
    position: fixed;
    top: 0;
    bottom: 0;
    /* Largeur = exactement la marge disponible de chaque côté du contenu,
       plafonnée pour rester élégante sur très grand écran. */
    width: calc((100vw - 1160px) / 2);
    max-width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;           /* discret : le contenu central reste roi */
  }
  /* Bande gauche : nette au bord d'écran, estompée vers le centre. */
  .deco-strip-left {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  }
  /* Bande droite : nette au bord d'écran, estompée vers le centre. */
  .deco-strip-right {
    right: 0;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
            mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  }
}