/* Ajustements propres à la version Astro (le reste du style vient des feuilles du thème d'origine, dans /theme) */

/* --- Slider d'accueil (remplace Revolution Slider) --- */
.cs-hero { position: relative; width: 100%; height: 100vh; min-height: 520px; overflow: hidden; background: #77c1c1; }
.cs-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.cs-hero-slide.is-active { opacity: 1; z-index: 1; }
.cs-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero-text { position: absolute; left: 21%; top: 30%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-hero-line {
  display: inline-block; background: #fff; color: #444443; padding: 0 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 90px); line-height: 1.15;
  clip-path: inset(0 100% 0 0); transform: translateX(40%);
}
.cs-hero-slide.is-active .cs-hero-line { animation: cs-line-in 1.2s cubic-bezier(.215,.61,.355,1) forwards; animation-delay: var(--d, .4s); }
@keyframes cs-line-in { to { clip-path: inset(0 0 0 0); transform: translateX(0); } }
/* Flèches : comme la navigation « boldlab-white-navigation » de Revolution Slider
   (fond transparent, chevron blanc, léger glissement au survol). On neutralise le style des boutons du thème. */
.cs-hero .cs-hero-arrow,
.cs-hero .cs-hero-arrow:hover,
.cs-hero .cs-hero-arrow:focus {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 50px; height: 50px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
  color: #fff !important; cursor: pointer;
}
.cs-hero .cs-hero-arrow svg { width: 35px; height: 35px; transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.cs-hero .cs-hero-prev:hover svg { transform: translateX(-10px); }
.cs-hero .cs-hero-next:hover svg { transform: translateX(10px); }
.cs-hero .cs-hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-hero-prev { left: 20px; }
.cs-hero-next { right: 20px; }
@media (max-width: 680px) {
  .cs-hero-text { left: 8%; top: 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero-slide { transition: none; }
  .cs-hero-slide.is-active .cs-hero-line { animation: none; clip-path: none; transform: none; }
}

/* --- Formulaire de contact --- */
.cs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-response-output[hidden] { display: none; }

/* --- Pages légales : marges du contenu Markdown --- */
.qodef-page-content-section > h3 { margin-top: 1.6em; }
.cs-turnstile { margin: 10px 0 27px; min-height: 65px; }

/* --- Message après envoi du formulaire (comme Contact Form 7) --- */
.wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output { border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output { border-color: #ffb900; }



/* --- Réglages propres à certaines pages (repris des options de page du thème) --- */
/* Accueil : le contenu passe sous l'en-tête (le slider commence tout en haut), pas de marge autour du contenu,
   en-tête semi-transparent au-dessus du slider */
.page-id-96 #qodef-page-outer { margin-top: -100px; }
@media only screen and (max-width: 1024px) { .page-id-96 #qodef-page-outer { margin-top: -70px; } }
.page-id-96 #qodef-page-inner { padding: 0; }
.page-id-96.qodef-header--standard #qodef-page-header { background-color: rgba(0, 0, 0, 0.22); }
/* Nos réalisations */
.page-id-1375 #qodef-page-inner { padding: 130px 0 130px; }
@media only screen and (max-width: 1024px) { .page-id-1375 #qodef-page-inner { padding: 90px 0 130px; } }
/* Couleur du bas de pied de page sur L'agence et Contact */
.page-id-371 #qodef-page-footer-bottom-area { background-color: #444443; }
.page-id-1006 #qodef-page-footer-bottom-area { background-color: #fa0072; }

/* Fiche réalisation : diaporama pleine largeur (comme le thème d'origine) */
.qodef-postfolio-single-slider .swiper-slide img { display: block; width: 100%; height: auto; }

/* Pied de page : logo avec les mêmes marges que sur l'ancien site */
#qodef-page-footer .wp-block-image .alignleft { margin-left: 40px; margin-right: 1.5em; margin-bottom: 1.5em; }

/* Accueil, blocs métiers : comme sur l'ancien site, la gélule et le sac étaient affichés en taille « moyenne »
   de WordPress (300 px de large), les autres visuels en grand. On reproduit ces tailles pour un rendu identique. */
.elementor-96 .elementor-element-a71b3d4 img,
.elementor-96 .elementor-element-5d40a35 img { max-width: 300px; }