/* =====================================================================
   Victoria Yachting — habillage commun du site (vy-core 1.1.7, complété en 1.1.8)
   Chargé sur toutes les pages publiques, après le CSS du thème.
   Chaque bloc ne cible que des classes « vy-… » posées dans les pages,
   ou des composants précis (grilles, filtres, formulaire).
   Couleurs : bleu nuit #101D33 · bleu titres #15255E · doré #C2A843
   ===================================================================== */

/* ── 1. RYTHME VERTICAL ───────────────────────────────────────────────
   Les lignes « large » (réglage par défaut du thème) valent 96px en
   ordinateur ; on réduit progressivement sur tablette et mobile. */
@media (max-width: 1024px) {
  body .l-section.height_large { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
@media (max-width: 600px) {
  body .l-section.height_large { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}

/* ── 2. PETITS MOTIFS RÉUTILISABLES ───────────────────────────────── */

/* filet doré sous un titre */
.vy-filet::after {
  content: ""; display: block; width: 48px; height: 1px;
  background: #C2A843; margin-top: 20px;
}
.vy-filet-centre::after { margin-left: auto; margin-right: auto; }

/* carte bordée (partenaires, contacts…) : bordure dorée au survol */
.vy-card > .vc_column-inner {
  height: 100%;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.vy-card:hover > .vc_column-inner {
  border-color: #C2A843 !important;
  box-shadow: 0 18px 40px -26px rgba(16, 29, 51, .4);
}

/* lien « majuscules + flèche » */
.vy-lien { margin: 22px 0 0 !important; }
.vy-lien a {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  color: #101D33; border-bottom: 1px solid #C2A843; padding-bottom: 5px;
  text-decoration: none; transition: color .2s ease;
}
.vy-lien a::after { content: "\2192"; margin-left: 8px; }
.vy-lien a:hover { color: #C2A843; }

/* ── 3. ENCARTS ───────────────────────────────────────────────────── */

.vy-sunbrella .w-image img { box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .65); }

/* certifications : logos alignés, garanties en lignes réglées */
.vy-certif .w-image { height: 84px; display: flex; align-items: center; margin-bottom: 28px; }
.vy-certif .w-image img { max-height: 84px; width: auto; }
.vy-certif ul { list-style: none; margin: 26px 0 0; padding: 0; }
.vy-certif li {
  margin: 0; padding: 16px 0; border-top: 1px solid rgba(16, 29, 51, .12);
  font-size: 15px; line-height: 1.65;
}
.vy-certif li strong {
  display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; color: #101D33; margin-bottom: 4px;
}

/* ── 4. VIGNETTES (gammes 717, produits 1213, réalisations 753) ────── */

/* dégradé bleu nuit, titre calé en bas à gauche, filet doré, zoom doux */
.w-grid.layout_717 .w-grid-item-h,
.w-grid.layout_1213 .w-grid-item-h,
.w-grid.layout_753 .w-grid-item-h { overflow: hidden; }

.w-grid.layout_717 .w-grid-item-h img,
.w-grid.layout_1213 .usg_post_image_1 img,
.w-grid.layout_753 .usg_post_image_1 img {
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.w-grid.layout_717 .w-grid-item:hover .w-grid-item-h img,
.w-grid.layout_1213 .w-grid-item:hover .usg_post_image_1 img,
.w-grid.layout_753 .w-grid-item:hover .usg_post_image_1 img { transform: scale(1.05); }

.w-grid.layout_717 .usg_vwrapper_1,
.w-grid.layout_1213 .usg_vwrapper_1 {
  padding: 80px 26px 24px !important;
  background: linear-gradient(0deg, rgba(5, 13, 33, .82) 0%, rgba(5, 13, 33, 0) 100%) !important;
  pointer-events: none;   /* le clic traverse jusqu'au lien de l'image */
}
.w-grid.layout_717 .usg_post_title_1,
.w-grid.layout_1213 .usg_post_title_1 { margin: 0 !important; line-height: 1.2 !important; }
.w-grid.layout_717 .usg_post_title_1 { font-size: 24px !important; }

.w-grid.layout_717 .usg_post_title_1::after,
.w-grid.layout_1213 .usg_post_title_1::after {
  content: ""; display: block; width: 28px; height: 1px; background: #C2A843;
  margin-top: 12px; transition: width .35s ease;
}
.w-grid.layout_717 .w-grid-item:hover .usg_post_title_1::after,
.w-grid.layout_1213 .w-grid-item:hover .usg_post_title_1::after { width: 56px; }

/* carrousel des univers de l'accueil : vignettes carrées */
.vy-univers-car .w-grid-item-h { aspect-ratio: 1 / 1; }
.vy-univers-car .usg_post_custom_field_1,
.vy-univers-car .usg_post_custom_field_1 a,
.vy-univers-car .usg_post_custom_field_1 img {
  display: block; width: 100%; height: 100% !important; object-fit: cover;
}

/* ── 5. FILTRES DE GAMMES ─────────────────────────────────────────────
   Les boutons pleins deviennent des onglets fins : texte en petites
   capitales, soulignement doré pour l'onglet actif. */
body .w-filter .w-filter-item { gap: 6px 34px; }
body .w-filter .w-filter-item-value > label {
  padding: 10px 0 9px; border: 0; border-bottom: 1px solid transparent;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  color: rgba(16, 29, 51, .6); background: none;
  transition: color .2s ease, border-color .2s ease;
}
body .w-filter .w-filter-item-value > label:hover { background: none; color: #101D33; }
body .w-filter .w-filter-item-value > label:has(input:checked) {
  background: none; color: #101D33; border-bottom-color: #C2A843;
}

/* ── 6. FORMULAIRE DE CONTACT ─────────────────────────────────────── */

body div.wpforms-container input[type="text"],
body div.wpforms-container input[type="email"],
body div.wpforms-container input[type="tel"],
body div.wpforms-container select,
body div.wpforms-container textarea {
  border: 1px solid rgba(16, 29, 51, .22) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s ease;
}
body div.wpforms-container input:focus,
body div.wpforms-container select:focus,
body div.wpforms-container textarea:focus { border-color: #C2A843 !important; outline: none; }

body div.wpforms-container label.wpforms-field-label {
  font-size: 12px !important; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 500 !important; color: rgba(16, 29, 51, .75) !important;
}
body div.wpforms-container .wpforms-field-layout > .wpforms-field-label {
  font-size: 20px !important; margin: 14px 0 6px !important;
}
body div.wpforms-container button[type="submit"] { margin-top: 10px; }

/* bloc contact : carte blanche du formulaire sur bandeau teinté */
.vy-contact-carte > .vc_column-inner { box-shadow: 0 30px 60px -40px rgba(16, 29, 51, .35); }
.vy-contact-coord .w-iconbox { margin-bottom: 10px; }
.vy-contact-coord .w-iconbox-icon { color: #C2A843 !important; }

/* ── 7. PAGES LÉGALES : colonne de lecture étroite ─────────────────── */
body.vy-legal .l-main .l-section-h { max-width: 820px; }
body.vy-legal .l-main h1 { margin-bottom: 2.5rem; }
body.vy-legal .l-main h2,
body.vy-legal .l-main h3 {
  font-size: 24px; margin-top: 3rem; padding-top: 2.25rem;
  border-top: 1px solid rgba(16, 29, 51, .12);
}

/* ── 8. DIVERS ─────────────────────────────────────────────────────── */

/* bloc contact : rattrape le retrait du bloc réutilisable imbriqué pour
   s'aligner sur la marge du site (déjà posé dans le bloc, répété ici) */
.vy-contact-coord a { color: #fff; }
.vy-contact-coord a:hover { color: #C2A843; }

/* carte Google de la page Contact : angles droits comme le reste du site */
.l-main iframe[src*="google.com/maps"] { border-radius: 0 !important; display: block; }

/* ── 9. PAGES DE GAMME (1.1.8) ─────────────────────────────────────── */

/* sous-gamme sans texte d'introduction : le sur-titre resterait seul →
   on le masque, ainsi que l'espace qui le suit */
.vy-gamme-surtitre:not(:has(+ .vy-gamme-intro)),
.vy-gamme-surtitre:not(:has(+ .vy-gamme-intro)) + .w-separator { display: none; }

/* filtre réduit à « Tous » (gamme sans sous-gamme) : inutile, on le masque */
.w-filter:has(.w-filter-item-values > .w-filter-item-value:only-child),
.w-filter:has(.w-filter-item-values > .w-filter-item-value:only-child) + .w-separator { display: none; }

/* ── 10. ÉTAPES « CHAQUE ÉTAPE, PENSÉE POUR VOUS » (1.1.8) ──────────────
   Même trait fin que les autres cartes du site ; le survol garde le
   fond bleu nuit défini dans le CSS du thème. */
body .step-card > .vc_column-inner { border-color: rgba(16, 29, 51, .22) !important; }
body .step-card:hover > .vc_column-inner { border-color: #101D33 !important; }

/* ==========================================================================
   11. Images à hauteur fixe dans une demi-colonne (1.1.9)
   Une image à hauteur imposée (480 px sur Savoir-faire) gardait sa largeur
   naturelle : une photo presque carrée (« La personnalisation ») ne remplissait
   donc pas sa colonne, contrairement aux photos plus larges. On force la largeur
   à 100 % ; le recadrage est géré par object-fit: cover, déjà posé par le thème.
   ========================================================================== */
:is(.vc_col-sm-6, .vc_col-md-6) > .vc_column-inner > .wpb_wrapper > .w-image.has_height .w-image-h,
:is(.vc_col-sm-6, .vc_col-md-6) > .vc_column-inner > .wpb_wrapper > .w-image.has_height img {
	width: 100%;
}
:is(.vc_col-sm-6, .vc_col-md-6) > .vc_column-inner > .wpb_wrapper > .w-image.has_height img {
	object-fit: cover;
}

/* ==========================================================================
   12. Fiches produit : nom de la collection un peu plus grand (1.1.10)
   Demande client du 13/10 : 40 px → 48 px sur ordinateur.
   ========================================================================== */
.single-produit h1.post_title {
	font-size: 48px;
	line-height: 1.15;
}
@media (max-width: 1024px) {
	.single-produit h1.post_title { font-size: 40px; }
}
@media (max-width: 600px) {
	.single-produit h1.post_title { font-size: 32px; }
}