/* ==========================================================================
   10 - Page d'accueil
   P5 du retour d'intégration du 10/09/2026.

   Écarts mesurés le 10/09 entre la maquette et le site :

   | | Maquette | Site |
   |---|---|---|
   | Signature | SOUS la rangée de photos | au-dessus |
   | Photos | 3 x 243 x 243, gouttière 20px | 3 x 273 x 273, gouttière 10px |
   | H1 | présent, réservé aux lecteurs d'écran | aucun |

   La signature au-dessus des photos est précisément le défaut que le client a
   fait corriger sur la maquette : c'est le point qu'il remarquera en premier.
   ========================================================================== */

/* --- Ordre des sections ----------------------------------------------------
   La signature (section b2742f9) et les photos (section aa41305) sont deux
   sections SŒURS à la racine du document Elementor de l'accueil. On peut donc
   les réordonner en CSS, sans toucher au contenu ni rouvrir la page.

   Le conteneur passe en flex colonne, ce qui ne change rien au rendu : les
   sections sont déjà des blocs de pleine largeur empilés.

   Les identifiants d'éléments sont commentés un par un : une règle non
   commentée serait ingérable dans six mois. */

body.home #content .elementor[data-elementor-type],
body.home #content .elementor-9 {
  display: flex;
  flex-direction: column;
}

body.home #content .elementor-element-aa41305 { order: 1; }   /* les trois photos */
body.home #content .elementor-element-b2742f9 { order: 2; }   /* la signature, sous les photos */
body.home #content .elementor-element-5073615 { order: 3; }   /* section vide de fin, reste en dernier */

/* --- Taille des photos et gouttière ----------------------------------------
   Les trois photos ne sont pas une galerie unique mais TROIS colonnes
   Elementor d'une image chacune : la gouttière mesurée à 10px est celle des
   colonnes, pas celle de la galerie.

   `:has()` cible la section intérieure qui porte les galeries, sans dépendre
   d'un identifiant d'élément. */

body.home .elementor-inner-section:has(.e-gallery-image) > .elementor-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

body.home .elementor-inner-section:has(.e-gallery-image) > .elementor-container > .elementor-column {
  flex: 0 0 243px;
  max-width: 243px;
  width: 243px;
}


/* --- Compression verticale : par le padding, jamais par les marges ---------
   Second retour du 10/09/2026.

   CONSTAT : la page d'accueil porte des marges NÉGATIVES posées dans les
   réglages Elementor des sections, bien avant ce chantier :
     07ccaf3 (texte)   margin-top -36px
     5efd7fd7          margin-top -95px
     aa41305 (photos)  margin-top -69px
     20aa473, b2742f9  margin-top +85px

   Une marge négative sur une section ne réduit pas l'espace : elle déplace la
   section par-dessus la précédente, qui garde son padding. Tant que l'ordre du
   DOM ne bougeait pas, l'empilement tenait à peu près. Le réordonnancement des
   sections l'a mis en défaut : les photos, tirées de 69px vers le haut,
   recouvraient le dernier paragraphe sur 40px.

   Règle retenue, et elle vaut pour la suite : AUCUNE MARGE NÉGATIVE SUR UNE
   SECTION ELEMENTOR. On resserre par le padding propre des sections, qui est
   le réglage prévu pour cela et qui ne déplace rien. */

body.home #content .elementor-top-section {
  margin-top: 0 !important;      /* posées dans les réglages de la page */
  margin-bottom: 0 !important;
}

body.home #content .elementor-top-section > .elementor-container {
  padding-block: .75rem;
}

/* Les colonnes portent le padding horizontal par défaut d'Elementor, 10px de
   chaque côté. Il rognait l'image à 233px et gonflait l'écart apparent à 30px.
   On le neutralise pour retrouver exactement 243px d'image et 20px d'écart. */
body.home .elementor-inner-section:has(.e-gallery-image) > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-inline: 0;
}

/* --- Réglage fin de la compression -----------------------------------------
   Après le passage aux marges nulles, il restait 190px de vide entre le texte
   et les photos. Trois sources, traitées séparément plutôt que par une valeur
   unique qui aurait écrasé le rythme partout.

   Note sur la cible : la fiche 14 donne les photos à y=383 sur la maquette.
   Ce chiffre n'est PAS atteignable ici sans recréer un recouvrement : le bloc
   de texte du site est plus long que celui de la maquette et descend à y=507 à
   lui seul. On vise donc le bon écart sous le texte, pas la valeur absolue. */

/* 1. Les sections sans contenu visible ne doivent pas occuper de hauteur.
      Elles portent bien un widget, donc `:not(:has(.elementor-widget))` de la
      fiche ne les attrape pas : on les nomme, avec leur rôle en commentaire. */
body.home #content .elementor-element-20aa473 > .elementor-container,   /* section vide */
body.home #content .elementor-element-5073615 > .elementor-container,   /* section vide de fin */
body.home #content .elementor-element-5efd7fd7 > .elementor-container { /* filet de séparation */
  padding-block: 0;
}

/* 2. La section des photos empilait son propre padding et celui de la section
      intérieure, soit 105px avant la première image. */
body.home #content .elementor-element-aa41305 > .elementor-container,
body.home .elementor-inner-section:has(.e-gallery-image) > .elementor-container {
  padding-block: 0;
}

/* 3. Un peu d'air sous le texte, posé une seule fois et au bon endroit. */
body.home #content .elementor-element-aa41305 {
  margin-block: 0 !important;
}

body.home #content .elementor-element-07ccaf3 > .elementor-container {
  padding-bottom: 1.5rem;
}

/* 4. La section INTÉRIEURE de la galerie portait en plus une marge haute de
      88px, posée elle aussi dans les réglages de la page. Les règles
      précédentes ne visaient que les sections de premier niveau. */
body.home .elementor-inner-section:has(.e-gallery-image) {
  margin-block: 0 !important;
}