/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    http://localhost/local_wp_quentin
 Description:  Child theme for Twenty Twenty-Four
 Author:       Your Name
 Template:     twentytwentyfour
 Version:      1.1.5
*/

/* === BASE SETUP === */
body, .wp-site-blocks { 
  background: #fff; 
}

.wp-site-blocks { 
  padding-top: 0; 
}

/* Remove default cover backgrounds from header */
.wp-block-template-part[area="header"] .wp-block-cover,
.wp-block-template-part[area="header"] .wp-block-cover__background { 
  display: none !important; 
}

/* === HEADER STYLING === */
.aquonex-header .wp-block-navigation__container { 
  gap: 20px; 
}

.aquonex-header .wp-block-navigation a { 
  text-decoration: none; 
}

.aquonex-header .wp-block-navigation a:hover { 
  text-decoration: underline; 
}

.aquonex-header {
  margin-bottom: 0 !important;
}

.aquonex-header { position: sticky; top: 0; z-index: 50; }

/* Keep inner content contained on huge screens */
.aquonex-header .alignwide { max-width: 1200px; margin: 0 auto; }

/* Optional: tighten the hamburger button */
.wp-block-navigation__responsive-container-open { line-height: 1; }

/* Keep title and hamburger aligned on small screens */
@media (max-width: 782px) {
  .aquonex-header .wp-block-group.alignwide {
    gap: 12px;
  }
}

/* Optional sticky header */
@media (min-width: 600px) {
  .aquonex-header { 
    position: sticky; 
    top: 0; 
    z-index: 50; 
  }
}

/* === SPACING SYSTEM - CLEAN APPROACH === */
/* Reset WordPress default group spacing */
.wp-block-group {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Main content area - no top padding */
main.wp-block-group {
  padding-top: 0 !important;
}

/* Hero section - minimal spacing */
.wp-block-group.alignwide {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Columns - tighter spacing */
.wp-block-columns {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Remove template part spacing */
.wp-block-template-part {
  margin-bottom: 0;
}

/* Specific spacing adjustments for better flow */
.wp-block-group.alignwide + .wp-block-columns {
  margin-top: 8px;
}

/* === BUTTON STYLING === */
.wp-block-button__link {
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
  will-change: background-color, box-shadow, transform;
}

/* Default button hover effects */
.wp-block-button__link:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
}

/* Color-specific hover effects */
.wp-block-button .has-accent-background-color:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 92%, black 8%);
}

.wp-block-button .has-primary-background-color:hover {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 92%, white 8%);
}

/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Button accessibility */
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

/* === CARD COMPONENTS === */
.cards-3 > .wp-block-column { 
  display: flex; 
}

.cards-3 .card {
  display: flex; 
  flex-direction: column; 
  gap: .4rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, transform .12s ease;
}

.cards-3 .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.cards-3 .card h3 { 
  margin: 0 0 .25rem; 
}

/* === CTA BAND STYLING === */
.cta-band .cta-eyebrow {
  margin: 0 0 8px;
  font: 600 0.95rem/1.4 var(--wp--preset--font-family--inter, system-ui);
  color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

.cta-band .cta-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--playfair, serif);
  line-height: 1.2;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--wp--preset--color--base);
}

.cta-band .cta-sub {
  margin: 8px 0 24px;
  font-size: clamp(16px, 1.8vw, 20px);
  color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}

/* White CTA button */
.cta-band .cta-white-btn .wp-block-button__link {
  background: #fff !important;
  color: var(--wp--preset--color--primary) !important;
  border-radius: 14px;
  padding: 12px 26px;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease, transform .12s ease;
}

.cta-band .cta-white-btn .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.cta-band .cta-white-btn .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .cards-3 .card { 
    transition: none; 
    transform: none !important; 
  }
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 780px) {
  .wp-block-group {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  
  .wp-block-group.alignwide {
    margin-bottom: 12px;
  }
}


/* Accroche plus grande sur mobile (page d'accueil) */
@media (max-width: 780px) {
  body.home .hero-tagline {
    font-size: 1.25rem;   /* ≈ 20px : un peu plus grand */
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 16px;
  }
}
/* Masquer certains éléments sur mobile */
/* Les éléments avec .hide-mobile sont déjà masqués en mobile.
   Si tu veux forcer ici aussi : */
@media (max-width: 780px) {
  .hide-mobile { display: none !important; }
}

/* Optionnel : si un Spacer suit l'image, on le masque aussi */
  body.home .hide-mobile + .wp-block-spacer {
    display: none !important;
}

.benefits-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;        /* ligne, colonne */
  margin: 8px 0 24px;
}
.benefits-line > span {
  white-space: nowrap;   /* ne casse pas "Délais courts" etc. */
}

/* === CONTENT WIDTH MANAGEMENT === */

/* Container principal - largeur standard pour le contenu */
.wp-block-post-content {
  max-width: 720px; /* contentSize du theme.json */
  margin: 0 auto;
  padding: 0 24px;
}

/* Large content - largeur étendue */
.wp-block-post-content .alignwide {
  max-width: 1120px; /* wideSize du theme.json */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Full width content - pleine largeur (déjà géré par WordPress) */
.wp-block-post-content .alignfull {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* Groupes avec background - largeur contrôlée */
.wp-block-group:not(.alignfull):not(.alignwide) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Sections avec background muted - restent dans la largeur standard */
.wp-block-group.has-muted-background-color:not(.alignfull):not(.alignwide) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* === RESPONSIVE BREAKPOINTS === */

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .wp-block-post-content {
    padding: 0 40px;
  }
  
  .wp-block-post-content .alignwide {
    padding: 0 40px;
  }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .wp-block-post-content {
    max-width: 100%;
    padding: 0 32px;
  }
  
  .wp-block-post-content .alignwide {
    max-width: 100%;
    padding: 0 32px;
  }
  
  .wp-block-group:not(.alignfull):not(.alignwide) {
    max-width: 100%;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .wp-block-post-content {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .wp-block-post-content .alignwide {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .wp-block-group:not(.alignfull):not(.alignwide) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Ajustements spécifiques mobile pour les boîtes */
  .wp-block-group.has-muted-background-color {
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
  }
}

/* === CORRECTIONS SPÉCIFIQUES === */

/* Assurer que les éléments pleine largeur n'ont pas de padding supplémentaire */
.alignfull .wp-block-group {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 767px) {
  .alignfull .wp-block-group {
    padding-left: 20px;
    padding-right: 20px;
  }
}

:root {
  /* espace visuel à droite des champs/bouton */
  --field-right-gap: 16px;
}

/* Wrapper */
.aquo-contact { max-width: 680px; }

/* Labels */
.aquo-contact .wpcf7-form label{
  display:block; font-weight:600; color:#134E4A; margin:0 0 8px;
}

/* Inputs + textarea */
.aquo-contact input[type="text"],
.aquo-contact input[type="email"],
.aquo-contact textarea{
  box-sizing: border-box;
  width: calc(100% - var(--field-right-gap));   /* crée l'espace à droite */
  margin-right: var(--field-right-gap);
  font: inherit;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 18px;
}

.aquo-contact textarea{
  min-height: 160px; line-height: 1.6; resize: vertical;
}

/* Placeholder */
.aquo-contact ::placeholder{ color:#6b7280; opacity:1; }

/* Focus ring mint */
.aquo-contact input:focus,
.aquo-contact textarea:focus{
  outline:0;
  border-color:#8DD3BF;
  box-shadow:0 0 0 4px rgba(141,211,191,.35);
}

/* Bouton mint (quasi pleine largeur avec gap à droite) */
.aquo-contact .aquo-btn,
.aquo-contact input[type="submit"].aquo-btn{
  display:block;
  box-sizing: border-box;
  width: calc(100% - var(--field-right-gap));
  margin-right: var(--field-right-gap);
  padding:16px 20px;
  border-radius:16px;
  border:1px solid #8DD3BF;
  background:#8DD3BF;
  color:#134E4A;
  font-weight:700;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  transition:background-color .2s, transform .02s;
}
.aquo-contact .aquo-btn:hover{ background:#73C9B0; }
.aquo-contact .aquo-btn:active{ transform:translateY(1px); }

/* Option : sur mobile, supprimer le gap pour éviter tout risque d’overflow */
@media (max-width: 640px){
  .aquo-contact input[type="text"],
  .aquo-contact input[type="email"],
  .aquo-contact textarea,
  .aquo-contact .aquo-btn,
  .aquo-contact input[type="submit"].aquo-btn{
    width: 100%;
    margin-right: 0;
  }
}