/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: Thème enfant de Hello Elementor.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1791536495
Updated: 2026-10-09 09:01:35
*/


/* ==========================================================
   1. HEADER ET POSITION DU CONTENU
   ========================================================== */

/* Le header passe devant le contenu. */
#masthead {
  position: relative;
  z-index: 10;
  margin-bottom: 0;
}

/* Accueil : le fond de la page remonte sous la déchirure. */
body.home #masthead {
  margin-bottom: -200px;
}

/* Le contenu reste derrière le header. */
main#content {
  position: relative;
  z-index: 1;
}

/* Autres pages et articles : espace sous le header. */
body:not(.home) main#content {
  padding-top: 20px;
}


/* ==========================================================
   2. BANDEAU BLEU — DÉCHIRURES EN HAUT ET EN BAS
   ========================================================== */

/*
 * --couleur-papier : couleur des bordures.
 * --hauteur-dechirure : hauteur du cadre du masque.
 * --masque-papier : SVG dessinant le contour irrégulier.
 *
 * Le fond bleu reste défini dans Elementor.
 */
#bandeau-bleu {
  position: relative;

  --couleur-papier: #f5f0e4;
  --hauteur-dechirure: 75px;

  --masque-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='tear' filterUnits='userSpaceOnUse' x='-40' y='-60' width='1280' height='180'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025 0.12' numOctaves='3' seed='11' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-40,-40 H1240 V33 L1150,30 L1090,39 L1010,28 L930,36 L850,29 L770,40 L680,31 L590,38 L510,27 L420,36 L330,29 L240,40 L150,30 L70,37 L-40,31 Z' fill='white' filter='url(%23tear)'/%3E%3C/svg%3E");
}

/*
 * Bordures décoratives au-dessus du fond bleu.
 * Le masque laisse apparaître le bleu entre les accrocs.
 * Elles ne bloquent pas les clics sur le contenu.
 */
#bandeau-bleu::before,
#bandeau-bleu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hauteur-dechirure);
  background: var(--couleur-papier);
  z-index: 2;
  pointer-events: none;

  -webkit-mask-image: var(--masque-papier);
  mask-image: var(--masque-papier);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  mask-mode: alpha;
}

/* Bord supérieur : raccord de 1px. */
#bandeau-bleu::before {
  top: -1px;
}

/* Bord inférieur : masque retourné. */
#bandeau-bleu::after {
  bottom: -1px;
  transform: rotate(180deg);
}


/* ==========================================================
   3. ARTICLES — MINIATURES AU FORMAT PAYSAGE 3:2
   ========================================================== */

/* Cadre de proportions identiques pour toutes les images. */
#grille-articles .hfe-post-image a {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Recadrage centré, sans déformation de l'image. */
#grille-articles .hfe-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================================
   4. MOBILE — ÉCRANS DE 767PX ET MOINS
   ========================================================== */

@media (max-width: 767px) {

  /* Accueil : chevauchement réduit. */
  body.home #masthead {
    margin-bottom: -80px;
  }

  /* Accueil : protège le contenu du premier conteneur. */
  body.home main#content
  .elementor[data-elementor-type="wp-page"]
  > .e-con:first-child {
    padding-top: 120px;
  }

  /* Autres pages et articles : espace sous le header. */
  body:not(.home) main#content {
    padding-top: 25px;
  }
}