/* ============================================================
   Styles maison
   ============================================================ */

/* Le pseudo-élément plein écran du footer (plus bas, "width: 100vw") ne
   tient pas compte de la barre de défilement verticale : dans la plupart
   des navigateurs, 100vw inclut sa largeur, donc dès qu'une barre de
   défilement apparaît (ex. quand la fenêtre se réduit et que le texte
   prend plus de lignes), cet élément déborde de quelques pixels à droite
   et déclenche un défilement horizontal -> bord blanc qui cache le
   contenu. On empêche tout débordement horizontal de la page. */
html, body {
  overflow-x: hidden;
}

/* Le CSS Webflow ne contraint que max-width/min-width sur les images (pas
   "width"), donc les attributs HTML width/height (ajoutés pour éviter le
   layout shift) fixaient une hauteur figée pendant que la largeur se
   réduisait pour s'adapter au conteneur -> images écrasées/étirées.
   On force une hauteur proportionnelle pour laisser le ratio intrinsèque
   (déduit des attributs width/height) recalculer la hauteur. */
img {
  height: auto;
}

/* Espace réduit avant le bandeau d'accueil (100px -> 60px) et entre le
   bandeau d'accueil et la section "Un service sur mesure..." (180px de
   margin-bottom sur .quick-stack -> 100px). */
@media (min-width: 992px) {
  .quick-stack {
    margin-top: 60px;
    margin-bottom: 100px;
  }
}

/* Le header (.container-2) utilise la classe Webflow générique ".w-container"
   (max-width: 940px, centrée), mais aucune des autres sections (.quick-stack,
   .quick-stack-2/3/4) n'a de plafond de largeur : elles n'ont qu'une marge
   fixe de 80px de chaque côté, donc sur un grand écran elles s'étirent bord
   à bord. Comme le contenu de ces sections (formulaire, coordonnées...) est
   aligné au début de sa colonne (pas centré), tout se retrouve collé à
   gauche avec un grand vide à droite -> effet "footer décalé à gauche".
   On plafonne toutes les sections à la même largeur, centrée, en gardant au
   moins 80px de marge sur les écrans plus étroits. */
@media (min-width: 992px) {
  .container-2,
  .quick-stack,
  .quick-stack-2,
  .quick-stack-3 {
    max-width: 1500px;
    margin-left: max(80px, calc((100% - 1500px) / 2));
    margin-right: max(80px, calc((100% - 1500px) / 2));
  }

  /* .quick-stack-4 a 80px de padding de chaque côté (pas de marge) et est en
     box-sizing: border-box, donc son padding est inclus dans son max-width
     -> à 1500px comme les autres, son contenu utile ne ferait que 1340px.
     On ajoute donc les 160px de padding au plafond pour que le contenu
     final fasse bien 1500px comme le reste des sections. */
  .quick-stack-4 {
    max-width: 1660px;
    margin-left: max(80px, calc((100% - 1660px) / 2));
    margin-right: max(80px, calc((100% - 1660px) / 2));
  }
}

/* Sur grand écran, les 2 illustrations du bandeau d'accueil (persos-1 et
   persos-2) sont dans des colonnes de grille en "1fr" qui grandissent avec
   la largeur de l'écran, et sont centrées horizontalement dans leur colonne
   -> elles s'étirent/s'écartent bien plus large que le reste du contenu.
   Les cellules Webflow (.w-layout-cell) sont en "flex-direction: column",
   donc l'axe horizontal est contrôlé par "align-items" (pas "justify-
   content", qui ne joue que sur l'axe vertical ici). On réduit leur largeur
   max et on aligne chaque image vers l'intérieur (côté texte) plutôt que
   centrée dans sa colonne. */
@media (min-width: 992px) {
  .image-3,
  .image-6 {
    /* min() garde le plafond de 450px sur grand écran, mais redevient
       relatif (90%, comme la règle Webflow d'origine) une fois la colonne
       plus étroite que 450px, pour ne plus jamais déborder. */
    max-width: min(450px, 90%);
  }

  .cell-3 {
    align-items: flex-end;
  }

  .cell-5 {
    align-items: flex-start;
  }

  /* Petit décalage pour ne pas les coller complètement au bord intérieur
     de leur colonne : on les ramène un peu vers le centre de la colonne.
     min() pour que cette marge se réduise aussi sur les colonnes étroites
     au lieu de contribuer à un débordement. */
  .image-3 {
    margin-right: min(60px, 8%);
  }

  .image-6 {
    margin-left: min(60px, 8%);
  }
}

/* Illustration de la section tarifs (perso-3v2, la dernière image avant le
   footer), un peu agrandie par rapport au 50% par défaut du CSS Webflow. */
@media (min-width: 992px) {
  .image-7 {
    max-width: 80%;
  }
}

/* Le footer (.quick-stack-4) porte à la fois le fond bleu ET la grille de
   contenu ; le plafonner à 1500px (règle plus haut) a donc aussi rétréci le
   bandeau bleu. On sépare les deux avec un pseudo-élément qui étend le bleu
   sur toute la largeur de l'écran, pendant que le contenu (formulaire,
   coordonnées) reste centré et plafonné à 1500px. */
.quick-stack-4 {
  position: relative;
  z-index: 0;
  /* Le CSS Webflow met "overflow: hidden" ici, ce qui rognait le
     pseudo-élément ci-dessous à la largeur de la boîte (1500px) au lieu de
     le laisser déborder sur toute la largeur de l'écran. */
  overflow: visible;
  /* Le padding d'origine (0 80px) ne laisse aucun espace en haut/bas : le
     titre "Me contacter" colle au bord supérieur du bandeau bleu, et le
     bouton "Envoyer" au bord inférieur. On ajoute de l'air. */
  padding-top: 30px;
  padding-bottom: 60px;
}

.quick-stack-4::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #0269a6;
  z-index: -1;
}

/* L'icône Facebook (.cell-12) est centrée horizontalement dans sa colonne
   (colonne de largeur .5fr, soit 1/3 de la grille "quick-stack-6"), alors
   que les liens légaux juste en dessous (.cell-16, qui s'étend sur toute la
   largeur de la grille) sont alignés à gauche par défaut. On décale le lien
   "Politique de confidentialité" pour retrouver la même marge que le centre
   de l'icône Facebook (icône de 100px de large, centrée dans 1/3 de la
   largeur totale -> décalage = largeur totale/6 - 50px). */
@media (min-width: 992px) {
  .div-block-10 {
    margin-left: calc(100% / 6 - 50px);
  }
}

/* Le bouton "Envoyer" est aligné à gauche par défaut (comme le reste du
   formulaire) ; sa cellule est en flex-direction: column donc "align-self"
   contrôle l'axe horizontal -> on le pousse à droite du bloc de gauche. */
.submit-button {
  align-self: flex-end;
}

/* Le CSS Webflow d'origine fixe des min-width en pixels (430px pour les
   blocs de texte description/thématiques/RGPD/tarifs, 300px pour l'image
   description, 250px + margin-left:200px pour l'image tarifs) qui ne sont
   assouplis qu'en dessous de 479px de large. Entre ~992px et ~1070px de
   large, la section thématiques/tarifs/RGPD a besoin d'au moins ~1050px
   rien que pour ces min-width -> si la fenêtre est plus étroite, ces blocs
   débordent et se font couper sur le bord (le même problème que pour les
   2 images du bandeau d'accueil, corrigé plus haut). On rend ces min-width
   proportionnels (min(Xpx, 100%)) pour qu'ils rétrécissent avec leur
   colonne au lieu de forcer un débordement. */
.div-block-2,
.div-block-3,
.div-block-4,
.div-block-5 {
  min-width: min(430px, 100%);
}

.div-block {
  min-width: min(250px, 100%);
}

.div-block-6 {
  min-width: min(500px, 100%);
}

.image-2 {
  min-width: min(300px, 100%);
}

.image-3,
.image-6 {
  /* Le plancher de 250px (même assoupli en min(250px,100%)) suffisait
     encore à déborder une fois combiné à la marge de rapprochement ajoutée
     plus haut. On le supprime complètement : mieux vaut une image un peu
     plus petite qu'une image coupée sur le bord de l'écran. */
  min-width: 0;
}

.image-7 {
  min-width: min(250px, 100%);
  margin-left: min(200px, 20%);
}

/* En dessous de 991px, les 2 images du bandeau d'accueil s'empilent à
   gauche du texte (comportement Webflow d'origine), mais collées au bord
   gauche de leur colonne au lieu d'être centrées. On les centre et on les
   agrandit un peu (leur max-width d'origine, 100%, ne laissait pas de
   marge de manoeuvre puisqu'elles ne remplissaient déjà pas leur colonne). */
@media (max-width: 991px) {
  /* "align-items" ne centre que le CONTENU de la cellule ; si la cellule
     elle-même (en tant qu'item de la grille #welcome) ne s'étire pas pour
     remplir toute sa colonne ("justify-self"), centrer son contenu ne
     change rien puisqu'il n'y a pas de place libre à l'intérieur de la
     cellule elle-même. On force les deux. */
  .cell-3,
  .cell-5 {
    justify-self: stretch !important;
    align-items: center !important;
  }

  .image-3,
  .image-6 {
    width: min(370px, 100%) !important;
  }

  /* La dernière image avant le footer (perso-3v2, tarifs) est cachée par
     Webflow à cette largeur ("display:none"). On la réaffiche, en
     l'agrandissant (50% d'origine -> 80%) ; sa cellule (.cell-8) centre
     déjà son contenu, comme le texte juste au-dessus. */
  .div-block-9 {
    display: block !important;
  }

  .image-7 {
    max-width: 80% !important;
  }

  /* Le bouton Facebook (image-5) doit faire la même taille que le rond
     photo (image-4, 80px à cette largeur). */
  .image-5 {
    width: 80px !important;
  }

  /* Le texte "Page Facebook de Compagno" (.cell-14) était aligné à
     droite de sa cellule ("align-items:flex-end", ajouté par Webflow
     seulement à cette largeur), contrairement au texte des coordonnées
     (.cell-10, resté "flex-start") juste au-dessus. Résultat : un écart
     différent avec l'icône Facebook qu'avec la photo. On aligne .cell-14
     comme .cell-10 pour retrouver le même écart. */
  .cell-14 {
    align-items: flex-start !important;
  }
}

/* En dessous de 767px, les 2 images du bandeau sont empilées l'une sous
   l'autre (1 seule colonne), chacune prenant toute la largeur de la ligne,
   avec la même largeur relative (60%) que la 3e image (.image-2, section
   "Un service sur mesure...") qui suit juste après et qui, elle aussi, à
   cette largeur, occupe toute la largeur de sa ligne. */
@media (max-width: 767px) {
  #welcome.w-node-_363b3255-9caf-e6c9-cb2d-a00273351fdb-cbfc0fab {
    grid-template-columns: 1fr !important;
  }

  #w-node-c74dcc3c-46e3-9af8-bd38-3ef606afecac-cbfc0fab,
  #w-node-_97ff40ca-1d44-800c-4e08-4ae7355f7d18-cbfc0fab {
    grid-column: span 1 / span 1 !important;
  }

  #w-node-_2731ab22-5afe-a0ce-adb0-d64febe120a7-cbfc0fab {
    grid-column: span 1 / span 1 !important;
  }

  .image-3,
  .image-6 {
    width: auto !important;
    max-width: 80% !important;
  }
}

/* Champ anti-spam (honeypot) : invisible pour les humains, visible pour les robots */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}