/* ==========================================================================
   Terraïne C1 — le décor
   Frises berbères, niches en arc, props des gouttières.

   Séparé de site.css parce que c'est ce qui se retouche le plus, page par
   page : l'isoler évite de relire toute la mise en page pour déplacer une
   assiette de trois pixels.
   ========================================================================== */

/* ====================================================== FRISES =========== */
/* Motif redessiné en SVG, période bâtie sur trois périodes puis découpée :
   le repeat-x se raccorde sans couture et reste net à toute taille.

   Les planches donnent une hauteur différente par page — 82 px sur l'accueil,
   136 sur histoire, 200 sur boutique et journal, 221 sur commande, 268 sur
   contact. Elle est unifiée à 170, avec deux variantes pour les extrêmes :
   comme le pied, une frise différente à chaque page se lit comme un défaut,
   pas comme une intention. */
.frise{
  height:170px;
  background:url(../img/frise-bande.svg) repeat-x center top;
  background-size:auto 170px;
}
.frise--basse{ height:104px; background-size:auto 104px }
.frise--haute{ height:238px; background-size:auto 238px }
.frise--filet{
  height:22px; background-image:url(../img/frise-filet.svg); background-size:auto 22px;
}
.frise--bandeau{
  height:114px; background-image:url(../img/frise-bandeau.svg); background-size:auto 114px;
}
/* Encadrement du récapitulatif de commande. */
/* Encadrement du récapitulatif : la tuile est carrée et découpée sur ses
   quatre côtés. Une bande horizontale ne marche pas en border-image — un
   découpage de 26 sur une image haute de 26 fait se chevaucher le haut et le
   bas, et il ne reste qu'un filet en haut. */
.cadre-berbere{
  border:22px solid transparent;
  border-image:url(../img/frise-cadre.svg) 30 round;
  background:var(--creme-carte);
}

/* ============================================ PROPS DES GOUTTIÈRES ======= */
/* Une grappe par côté et par section, détourée d'un bloc dans la planche :
   les ombres portées se chevauchent, séparer les objets obligerait à les
   refabriquer.

   Les grappes sont collées aux BORDS de la page, pas à la colonne de contenu :
   sur la planche elles débordent hors cadre, et c'est ce débordement qui fait
   lire la gouttière comme une marge habitée plutôt qu'une bande décorative.

   Le conteneur porte overflow:hidden, donc une grappe plus haute que sa
   section est coupée net au lieu de passer par-dessus la frise suivante. */
/* z-index négatif, pas 0 : un élément positionné à z-index 0 peint AU-DESSUS
   du contenu en flux même s'il le précède dans le DOM, et les props passaient
   devant les libellés du formulaire. La section porte z-index 1, donc le décor
   reste enfermé dans sa pile. */
.decor{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
  --pk:1;                        /* facteur d'échelle, piloté par les paliers */
}
.decor::before,.decor::after{
  content:""; position:absolute; top:0;
  background-repeat:no-repeat; background-size:contain;
}
.decor::before{ left:0;  background-position:left top;  width:calc(var(--pl) * var(--pk)); aspect-ratio:var(--rl) }
.decor::after { right:0; background-position:right top; width:calc(var(--pr) * var(--pk)); aspect-ratio:var(--rr) }

.decor--boutique{ --pl:281px; --rl:.3274; --pr:293px; --rr:.3817 }
.decor--boutique::before{ background-image:url(../img/decor/props/boutique-gauche-1-380.webp) }
.decor--boutique::after { background-image:url(../img/decor/props/boutique-droite-1-380.webp) }

.decor--produit-1{ --pl:269px; --rl:.3631; --pr:253px; --rr:.3428 }
.decor--produit-1::before{ background-image:url(../img/decor/props/produit-gauche-1-380.webp) }
.decor--produit-1::after { background-image:url(../img/decor/props/produit-droite-1-380.webp) }

.decor--produit-2{ --pl:269px; --rl:.4201; --pr:253px; --rr:.4259 }
.decor--produit-2::before{ background-image:url(../img/decor/props/produit-gauche-2-380.webp) }
.decor--produit-2::after { background-image:url(../img/decor/props/produit-droite-2-380.webp) }

.decor--histoire{ --pl:277px; --rl:.2121; --pr:291px; --rr:.2316 }
.decor--histoire::before{ background-image:url(../img/decor/props/histoire-gauche-1-380.webp) }
.decor--histoire::after { background-image:url(../img/decor/props/histoire-droite-1-380.webp) }

.decor--journal{ --pl:301px; --rl:.3665; --pr:275px; --rr:.3146 }
.decor--journal::before{ background-image:url(../img/decor/props/journal-gauche-1-380.webp) }
.decor--journal::after { background-image:url(../img/decor/props/journal-droite-1-380.webp) }

.decor--contact{ --pl:329px; --rl:.4618; --pr:329px; --rr:.4609 }
.decor--contact::before{ background-image:url(../img/decor/props/contact-gauche-1-380.webp) }
.decor--contact::after { background-image:url(../img/decor/props/contact-droite-1-380.webp) }

.decor--commande{ --pl:257px; --rl:.2587; --pr:247px; --rr:.2626 }
.decor--commande::before{ background-image:url(../img/decor/props/commande-gauche-1-380.webp) }
.decor--commande::after { background-image:url(../img/decor/props/commande-droite-1-380.webp) }

/* ================================================== LES PALIERS ========== */
/* La maquette n'a été arbitrée qu'en desktop. Sous 1200 px la gouttière ne
   suffit plus à porter les grappes à leur taille ; sous 900 elle n'existe
   plus du tout et les garder mordrait sur le texte. */

@media (max-width:1440px){
  .decor{ --pk:.72 }
}

@media (max-width:1200px){
  .decor{ --pk:.42; opacity:.72 }
  /* définition réduite : à cette taille la grande est du poids gâché */
  .decor--boutique::before{ background-image:url(../img/decor/props/boutique-gauche-1-220.webp) }
  .decor--boutique::after { background-image:url(../img/decor/props/boutique-droite-1-220.webp) }
  .decor--produit-1::before{ background-image:url(../img/decor/props/produit-gauche-1-220.webp) }
  .decor--produit-1::after { background-image:url(../img/decor/props/produit-droite-1-220.webp) }
  .decor--produit-2::before{ background-image:url(../img/decor/props/produit-gauche-2-220.webp) }
  .decor--produit-2::after { background-image:url(../img/decor/props/produit-droite-2-220.webp) }
  .decor--histoire::before{ background-image:url(../img/decor/props/histoire-gauche-1-220.webp) }
  .decor--histoire::after { background-image:url(../img/decor/props/histoire-droite-1-220.webp) }
  .decor--journal::before{ background-image:url(../img/decor/props/journal-gauche-1-220.webp) }
  .decor--journal::after { background-image:url(../img/decor/props/journal-droite-1-220.webp) }
  .decor--contact::before{ background-image:url(../img/decor/props/contact-gauche-1-220.webp) }
  .decor--contact::after { background-image:url(../img/decor/props/contact-droite-1-220.webp) }
  .decor--commande::before{ background-image:url(../img/decor/props/commande-gauche-1-220.webp) }
  .decor--commande::after { background-image:url(../img/decor/props/commande-droite-1-220.webp) }
}

@media (max-width:900px){
  .decor{ display:none }
}

/* ==================================================== FRISES MOBILE ====== */
@media (max-width:980px){
  .frise{ height:126px; background-size:auto 126px }
  .frise--basse{ height:84px; background-size:auto 84px }
  .frise--haute{ height:164px; background-size:auto 164px }
  .frise--bandeau{ height:80px; background-size:auto 80px }
}
@media (max-width:560px){
  .frise,.frise--basse,.frise--haute{ height:86px; background-size:auto 86px }
}