/*
Theme Name: H-Code Child
Theme URI: http://wpdemos.themezaa.com/h-code
Author: Themezaa
Author URI: http://www.themezaa.com
Description: Child theme for H-Code theme
License: Themeforest Split Licence
License URI: http://themeforest.net/licenses
Template: h-code
Version: 1.1
Text Domain: h-code-child
*/


/* ============================================================
   THÈME ENFANT — Feuille de styles principale

   SOMMAIRE
   1.  Variables de charte  ← seule section à modifier pour changer les couleurs
   2.  Typographie
   3.  Navigation
   4.  Boutons
   5.  Images
   6.  Dégradés
   7.  Classes utilitaires
   8.  Boutique (WooCommerce)
       8a. Titres WooCommerce
       8b. Boutons WooCommerce
       8c. Grille produits
       8d. Fiche produit
       8e. Panier & checkout
       8f. Livraison
       8h. checkbox RGPD
   9.  Blog
   10.  Popup
   11. Footer
   12. Formulaire contact (Contact Form 7)
   13. Media queries
   ============================================================ */


/* ============================================================
   1. VARIABLES DE CHARTE
   → Modifiez uniquement ici pour adapter toute la charte.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  /* ---------- Couleurs ---------- */
  --couleur-principale:      #622406; /* marron  — titres, boutons, accents   */
  --couleur-accent:          #F4CA36; /* jaune   — hover boutons, dégradés    */
  --couleur-texte:           #ffffff; /* blanc   — texte sur fonds sombres    */
  --couleur-texte-courant:   #333333; /* ardoise — texte sur fonds clairs     */
  --couleur-neutre:          #aaaaaa; /* gris    — placeholders, notes        */
  --couleur-erreur:          #e74c3c; /* rouge   — champs invalides           */
  --couleur-succes:          #46b450; /* vert    — message confirmation envoi */

  /* ---------- Familles ---------- */
  --font-titre:         "Grand Hotel", cursive;  /* h1, h2, citations */
  --font-corps:         "Lato", sans-serif;      /* h3 à h6 et corps de texte    */

  /* ---------- Graisses Lato ---------- */
  --graisse-legere:  300;
  --graisse-normale: 400;
  --graisse-forte:   700;
  --graisse-extra:   900;
}


/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */

/* H1 — limité au contenu WPBakery pour ne pas affecter
   les menus et widgets qui utilisent aussi des balises h1 */
.vc_row h1,
.entry-content h1,
.wpb_wrapper h1 {
  font-family: var(--font-titre);
  font-size: 48px;    /* ← taille h1    */
  line-height: 52px;  /* ← interligne h1 */
  font-weight: 500;
  text-transform: none;
  color: var(--couleur-principale);
  padding-bottom: 24px;
}

/* H2 */
.vc_row h2,
.entry-content h2,
.wpb_wrapper h2{
  font-family: var(--font-titre);
  font-weight: 500;
  text-transform: none;
  color: var(--couleur-principale);
  padding-bottom: 24px;
  font-size: 38px;
  line-height: 42px;
}

/* H3 */
.vc_row h3,
.entry-content h3,
.wpb_wrapper h3{
	font-family: var(--font-corps);
    font-weight: var(--graisse-extra);
    text-transform: none;
    color: var(--couleur-principale);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: normal;
    padding-bottom: 24px;
}

/* H4 */
.vc_row h4,
.entry-content h4,
.wpb_wrapper h4 {
    font-family: var(--font-corps);
    font-weight: var(--graisse-forte);
    text-transform: none;
    color: var(--couleur-principale);
    padding-bottom: 24px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.01em;
}

h4.wp-block-heading {
  color: var(--couleur-principale);
  font-weight: 700;
}

/* H5 */
.vc_row h5,
.entry-content h5,
.wpb_wrapper h5{
font-family: var(--font-corps);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: inherit;
    padding-bottom: 24px;
}

/* Classes typographiques réutilisables */
.citation {
  font-family: var(--font-titre);
  font-size: 32px;    /* ← taille citation normale */
  line-height: 48px;
  font-weight: 500;
  text-transform: none;
  color: var(--couleur-principale);
}

.citation-xl {
  font-family: var(--font-titre);
  font-size: 64px;    /* ← taille grande citation */
  line-height: 72px;
  font-weight: 500;
  text-transform: none;
  color: var(--couleur-principale);
}

/* Listes — limité au contenu éditorial uniquement
   pour ne pas casser les menus <ul> du thème */
.entry-content ul,
.wpb_wrapper ul {
  list-style-type: disc;
}


/* ============================================================
   3. NAVIGATION
   ============================================================ */

section {
  padding: 24px 0; /* ← espacement vertical des sections */
}
.vc_section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0; 
    padding-right: 0; 
}

.margin-48 section {
  margin: 48px 0;
}

/* Ancres — compense la hauteur du header fixe */
section,
.vc_row[id],
[id] {
  scroll-margin-top: 200px;
}

/* Cible le conteneur interne des lignes H-Code avec ID */
.vc_row[id] .container,
.vc_row[id] .container-fluid,
.vc_row[id] .wpb_column {
  padding-top: 210px !important;
  margin-top: -210px !important;
}

.shrink-nav.nav-border-bottom {
  border-bottom: 0;
}

.dropdown-menu li:hover {
  font-weight: 900 !important; /* !important nécessaire — spécificité du thème */
}

.nav > li > a {
  padding: 0;
}

.cover-background {
  background-position: top center !important;
}

/* Onglet "Mon compte" — icône seule sans texte */
.menu-icon-only a {
  font-size: 0 !important;
}
.menu-icon-only a i,
.menu-icon-only a img {
  font-size: 16px; /* ← taille de l'icône */
  display: inline-block;
}
#menu-item-1577 {
  padding-top: 16px !important;
  padding-bottom: 6px !important;
}
.menu-icon-only a:hover,
.menu-icon-only a:focus {
  border-bottom-color: rgba(255, 255, 255, 0) !important;
}
.navbar-default .navbar-nav > li.menu-icon-only > a:hover,
.navbar-default .navbar-nav > li.menu-icon-only > a:focus,
.navbar-default .navbar-nav > li.menu-icon-only.open > a,
.navbar-default .navbar-nav > li.menu-icon-only.open:hover > a {
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Logo mini header — désactivé au clic */
figure:hover img {
  transform: none;
  opacity: 1;
  cursor: default;
}

/* Masquer le logo dans la navbar */
.navbar > .nav-header-container .hcode-header-logo {
  display: none;
}

/* Centrage du menu sans logo sur Desktop */
@media only screen and (min-width: 992px) {
  .navbar > .nav-header-container .accordion-menu .navbar-collapse {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}
.navbar > .nav-header-container .accordion-menu {
  flex-grow: unset;
}
.navbar > .nav-header-container > .row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar > .nav-header-container .navbar-nav > li {
  padding: 12px 0 !important;
}

/* Panier — masquer le sous-titre "article" */
.search-cart-header .subtitle {
  font-size: 11px;
  display: none;
}

/* Icône panier */
.top-cart .fa-shopping-cart,
.search-cart-header i {
  font-size: 18px; /* ← taille icône panier */
}
.search-cart-header .top-cart .shopping-cart {
  padding: 12px 0;
}
.wc-block-mini-cart__button {
  color: var(--couleur-principale);
  padding: 12px 0 !important;
}
.navbar .search-cart-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.navbar .accordion-menu {
  padding-right: 0 !important;
}


/* Menu responsive -> ne pas limitr la hauteur du menu */
@media only screen and (max-width: 991px) {

  /* État fermé */
  #mega-menu.navbar-collapse.collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    display: block !important;
  }

  /* État ouvert (Bootstrap 3 ajoute la classe "in" au clic) */
  #mega-menu.navbar-collapse.collapse.in {
    max-height: max-content !important;
    overflow: visible !important;
  }

  /* État transitoire pendant l'animation Bootstrap */
  #mega-menu.navbar-collapse.collapsing {
    max-height: max-content !important;
    overflow: hidden;
  }
}

/* ============================================================
   4. BOUTONS
   ============================================================ */

/* Bouton principal H-Code (classe .marron) */
.marron.highlight-button {
  font-size: 18px;     /* ← taille texte bouton */
  font-weight: normal;
  text-transform: none;
  letter-spacing: 1px; /* ← espacement lettres  */
  color: var(--couleur-texte);
  background-color: var(--couleur-principale);
  border: 2px solid var(--couleur-principale);
  border-radius: 30px; /* ← arrondi : 0 carré | 6px | 30px pilule */
}
.marron.highlight-button:hover {
  color: var(--couleur-principale);
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}

/* Boutons colorés génériques (jaune, vert, rouge, violet, beige, rose, bleu) */
a.bouton-jaune,
a.bouton-vert,
a.bouton-rouge,
a.bouton-violet,
a.bouton-beige, 
a.bouton-bleu,
a.bouton-rose{
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  padding: 8px 20px;
  color: var(--couleur-principale);
  background-color: #ffffff;
  border-radius: 30px;
  text-decoration: none;
  transition: all .2s;
  margin-bottom: 16px;
  margin-left: 8px;
  margin-right: 8px;
}
a.bouton-jaune  { border: 4px solid #f4ca36; }
a.bouton-vert   { border: 4px solid #8db624; }
a.bouton-rouge  { border: 4px solid #d94d15; }
a.bouton-violet { border: 4px solid #bb5b97; }
a.bouton-beige  { border: 4px solid #0c0; }
a.bouton-bleu  { border: 4px solid #7297ce; }
a.bouton-rose  {border: 4px solid #fbcb9a;}

a.bouton-jaune:hover,
a.bouton-vert:hover,
a.bouton-rouge:hover,
a.bouton-violet:hover,
a.bouton-beige:hover,
a.bouton-bleu:hover,
a.bouton-rose:hover{
  color: var(--couleur-principale);
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}




/* ============================================================
   5. IMAGES
   ============================================================ */

img.picto-petit {
  height: 100px; /* ← taille petit picto */
  width: 100px;
}

img.picto-moyen {
  height: 150px; /* ← taille picto moyen */
  width: 150px;
}

/* Effet photo polaroïd */
img.photo-cadre {
  background: #fbf6e5;
  display: block;
  padding: 20px;           /* ← marges internes */
  margin: 0 auto 27px auto;
  box-shadow: 2px 3px 8px rgba(0,0,0,.25), 0 0 3px rgba(0,0,0,.1);
  opacity: 0.9;
  max-width: 90%;
}

img.photo-cadre.taille-80 {
  max-width: 80%;
}
img.photo-cadre.taille-70 {
  max-width: 70%;
}
img.photo-cadre.taille-60 {
  max-width: 60%;
}
img.photo-cadre.taille-50 {
  max-width: 50%;
}
img.photo-cadre.taille-40 {
  max-width: 40%;
}
img.photo-cadre.taille-30 {
  max-width: 30%;
}
img.photo-cadre.taille-20 {
  max-width: 20%;
}
img.photo-cadre.taille-10 {
  max-width: 10%;
}

img.photo-cadre.gauche { transform: rotate(-2deg); } /* ← angle rotation gauche */
img.photo-cadre.droite { transform: rotate(2deg);  } /* ← angle rotation droite */


/* ============================================================
   6. DÉGRADÉS
   ============================================================ */

.degrade {
  position: relative;
  z-index: 2;
  --gradient-color:     #f4ca36;  /* ← couleur du dégradé par défaut */
  --gradient-direction: to left;  /* ← direction : to left | to right | to bottom */
  --gradient-stop:      40%;      /* ← jusqu'où va la couleur pleine  */
  --transparent-stop:   100%;     /* ← où commence la transparence    */
}
.degrade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--gradient-direction),
    var(--gradient-color) var(--gradient-stop),
    transparent var(--transparent-stop)
  );
  z-index: 1;
  pointer-events: none;
}
.degrade .wpb_column,
.degrade .vc_column-inner {
  position: relative;
  z-index: 3;
}

/* Variantes de direction */
.degrade-jaune-droite { --gradient-direction: to left;  --gradient-color: var(--couleur-accent); }
.degrade-jaune-gauche { --gradient-direction: to right; --gradient-color: var(--couleur-accent); }


/* ============================================================
   7. CLASSES UTILITAIRES
   ============================================================ */

.white  { color: var(--couleur-texte);      }
.marron { color: var(--couleur-principale); }

#home-banner {
  background-position: center center !important;
}


/* ============================================================
   8. BOUTIQUE (WOOCOMMERCE)
   ============================================================ */

/* ----------------------------------------------------------
   8a. Titres WooCommerce
   ---------------------------------------------------------- */

.woocommerce h2,
.woocommerce-page h2,
.woocommerce .woocommerce-loop-product__title,
.woocommerce h2.woocommerce-order-details__title,
.woocommerce h2.entry-title,
h2.wc-block-mini-cart__title {
  font-family: var(--font-corps);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--couleur-principale);
  padding-bottom: 24px;
  font-size: 24px;
}

/* ----------------------------------------------------------
   8b. Boutons WooCommerce
   ---------------------------------------------------------- */

/* Boutons natifs WooCommerce & WC Blocks */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
    font-size: 18px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--couleur-texte) !important;
    background-color: var(--couleur-principale) !important;
    border: 2px solid var(--couleur-principale) !important;
    border-radius: 30px !important;
    padding: 8px 16px;
	margin: 0px 20px
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
  color: var(--couleur-principale) !important;
  background-color: var(--couleur-accent) !important;
  border-color: var(--couleur-accent) !important;
}

/* Boutons WooCommerce via classes H-Code */
.woocommerce-cart-form .highlight-button,
.woocommerce-cart-form .btn,
.woocommerce .highlight-button,
.woocommerce .btn.highlight-button,
.highlight-button-black-background.checkout-btn,
.woocommerce .highlight-button-black-background.checkout-btn {
  font-size: 18px !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  color: var(--couleur-texte) !important;
  background-color: var(--couleur-principale) !important;
  border: 2px solid var(--couleur-principale) !important;
  border-radius: 30px !important;
  padding: 8px 16px;
}
.highlight-button-black-background.checkout-btn,
.woocommerce .highlight-button-black-background.checkout-btn {
  padding: 16px 30px !important;
}
.woocommerce-cart-form .highlight-button:hover,
.woocommerce-cart-form .btn:hover,
.woocommerce .highlight-button:hover,
.woocommerce .btn.highlight-button:hover,
.highlight-button-black-background.checkout-btn:hover,
.woocommerce .highlight-button-black-background.checkout-btn:hover {
  color: var(--couleur-principale) !important;
  background-color: var(--couleur-accent) !important;
  border-color: var(--couleur-accent) !important;
}

/* Bouton "Ajouter au panier" fiche produit */
.single_add_to_cart_button {
  border-radius: 30px;
  background-color: var(--couleur-principale);
  border-color: var(--couleur-principale);
  color: var(--couleur-accent);
}
.single_add_to_cart_button:hover {
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
  color: var(--couleur-principale);
}

/* Bouton "Achat rapide" */
.quick-buy .btn, .quick-buy .added_to_cart, .exclusive-style .added_to_cart {
  border-radius: 20px;
  background-color: var(--couleur-principale);
  border-color: var(--couleur-principale);
  color: var(--couleur-accent);
}
.quick-buy .btn:hover, .quick-buy .added_to_cart:hover, .exclusive-style .added_to_cart:hover  {
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
  color: var(--couleur-principale);
}

.quick-buy .added_to_cart{
	margin: 4px 0px 0px 20px !important;
}


/* Bouton "Voir le panier" */
.wc-block-components-button:not(.is-link).is-style-outline:not(:focus), .wc-block-components-button:not(.is-link).outlined:not(:focus) {
    box-shadow: inset 0 0 0 0px currentColor !important;
}



/* ----------------------------------------------------------
   8c. Grille produits
   ---------------------------------------------------------- */

/* Nom du produit en grille */
.product-grid-view .product .product-content-wrapper .product-name a h2.woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: none;
  padding-top: 24px;
  line-height: 28px;
}

/* Marge sous chaque produit */
.product-grid-view .product {
  margin: 0 0 8px;
}

/* Limite la largeur du nom pour forcer le retour à la ligne */
.product-content-wrapper {
  margin: 0 auto;
  max-width: 220px;
}

/* Filtre sidebar */
.widget_wpc_filters_widget li {
  margin: 0 !important;
}

/* ----------------------------------------------------------
   8d. Fiche produit
   ---------------------------------------------------------- */

.product-name-details,
.product-deails-related .section-title {
  font-size: 24px;
  letter-spacing: 1px !important;
  text-transform: none !important;
  line-height: 32px;
  color: var(--couleur-principale) !important;
}

.separator-line {
  background: var(--couleur-principale) !important;
}

.wide-separator-line {
  margin-top: 3% !important;
  margin-bottom: 3% !important;
}

.product-deails-related h3.section-title {
  padding-bottom: 24px;
}

/* Galerie principale — hauteur maximale */
.hcode-single-big-product-thumbnail-carousel .item a img {
  max-height: 400px; /* ← hauteur maximale */
  width: auto;
  max-width: 100%;
}
.hcode-single-big-product-thumbnail-carousel .item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px; /* ← doit correspondre à max-height ci-dessus */
}

/* Image des produits reliés */
img.wp-post-image {
  max-height: 200px; /* ← taille max image produits reliés */
}

/* Tableau des variantes (TablePress) */
.tablepress {
  width: 50%; /* ← largeur du tableau produit */
}
.tablepress tfoot th,
.tablepress thead th {
  background-color: #e2e2e2; /* ← fond entête et pied de tableau */
}

/* ----------------------------------------------------------
   8e. Panier & checkout
   ---------------------------------------------------------- */

/* Rend invisible l'encart "code de réduction" */
.woocommerce-checkout-top {
    float: left;
    width: 100%;
    display: none;
}

/* Correction mise en page formulaire checkout */
.woocommerce-checkout .form-row {
  display: block;
  margin-bottom: 1rem;
}
.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 4px;
}
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

/* Deux colonnes prénom / nom côte à côte */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: left;
  width: 47%;
  box-sizing: border-box;
}
.woocommerce-checkout .form-row-first {
  margin-right: 6%;
}

/* Nettoyage du float après les champs côte à côte */
.woocommerce-checkout .form-row-first + .form-row-last + * {
  clear: both;
}

/* Champs pleine largeur */
.woocommerce-checkout .form-row-wide {
  clear: both;
  width: 100%;
}

/* bouton FERMER */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
    min-height: 2em;
}
.wc-block-components-button.wc-block-components-drawer__close {
    padding: 12px !important;
    right: 24px;
    top: 24px;
}

/* ----------------------------------------------------------
   8f. Livraison
   ---------------------------------------------------------- */

.hcode-shipping-method li {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hcode-shipping-method li label {
  float: none;
  margin: 0;
}
.shipping-method-description {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--couleur-texte-courant);
  text-align: right;
}

/* ----------------------------------------------------------
   8h. checkbox RGPD
   ---------------------------------------------------------- */

.woocommerce-terms-and-conditions-checkbox-text{
	margin-left:30px;
}



/* ============================================================
   9. BLOG
   ============================================================ */

/* titre blog, titre article */
.blog .page-title-section h1, .archive .page-title-section h1, h2.blog-details-headline{
    font-family: var(--font-titre);
    font-size: 48px;    /* ← taille h1    */
    line-height: 60px;  /* ← interligne h1 */
    font-weight: 500;
    text-transform: none;
    color: var(--couleur-principale);
	letter-spacing: inherit;
}
.blog .page-title-section, .archive .page-title-section{
	border: none !important;
}

/* titre article */
.blog-title a {
    font-size: 18px;
	font-weight:700;
    letter-spacing: inherit;
    text-transform: none;
    margin: 5px 0 20px;
	font-family: var(--font-corps) !important;
	color: var(--couleur-principale) !important;
}

/* images */
.blog-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.blog-image img.wp-post-image {
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.blog-details .separator-line{
	display:none !important;
}

/* Bouton "lire la suite" */
.blog-details .highlight-button {
  border-radius: 20px;
  background-color: var(--couleur-principale);
  border-color: var(--couleur-principale);
  color: var(--couleur-accent);
}
.blog-details .highlight-button:hover{
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
  color: var(--couleur-principale);
}

/* H2 main sidebar */
h2.wp-block-heading {
  font-family: var(--font-corps) !important;
  text-transform: none !important;
  color: var(--couleur-principale) !important;
}

/* marge widget */
.widget {
    margin-bottom: 20px;
}

/* étiquette */
.tags a {
    border: 2px solid var(--couleur-principale);
    padding: 0 10px;
    margin: 0 5px 9px 0;
    text-transform: uppercase;
    font-size: 10px;
    display: inline-block;
    line-height: 26px;
    border-radius: 20px;
}
.tags_cloud a {
    font-size: 14px !important;
    text-transform: none;
	color: var(--couleur-principale);
}

.tags a:hover {
    background-color: var(--couleur-accent);
    color: var(--couleur-principale);
	border: 2px solid var(--couleur-accent);
}

/* ------- Article -------- */



/* ============================================================
   10. POPUP
   ============================================================ */

#popmake-955 {
  padding: 5%;
}
#popmake-955 a {
  background-color: #fff;
  border: 2px solid #000;
  font-size: 14px;         /* ← taille texte lien popup */
  padding: 10px 22px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
}
#popmake-955 a:hover {
  background-color: #000;
  color: #fff;
}


/* ============================================================
   11. FOOTER
   ============================================================ */

footer .footer-middle {
  padding-top: 20px;    /* ← espacement haut footer */
  padding-bottom: 45px; /* ← espacement bas footer  */
}


/* ============================================================
   12. FORMULAIRE CONTACT (Contact Form 7)
   ============================================================ */

#contact {
  top: -300px !important; /* Décalage pour barre de navigation fixe */
  position: relative;
  z-index: 99999;
}

#responsive-form {
  max-width: 600px; /* ← largeur du formulaire */
  margin: 0 auto;
  width: 100%;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.column-half,
.column-full {
  flex: 1 1 100%;
  position: relative;
  box-sizing: border-box;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* ← espace entre le label et le champ */
}

.required-note {
  font-size: 12px;
  color: var(--couleur-texte-courant);
  margin: -4px 0 8px 0;
}

.req {
  color: var(--couleur-erreur);
  margin-left: 2px;
}

/* Labels */
.field-group label {
  font-size: 16px;
  font-weight: 500;
  color: var(--couleur-principale);
  margin-bottom: 20px !important; /* ← correction : était "20" sans unité */
}

/* Champs de saisie */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  margin: 0 !important;
  padding: 10px 12px;
  font-size: 16px;      /* ← min. 16px — évite le zoom iOS */
  font-weight: 400;
  color: var(--couleur-texte-courant);
  background-color: #ffffff;
  border: 1px solid #f4ca36;
  border-radius: 6px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

textarea {
  resize: vertical;
  min-height: 100px; /* ← hauteur minimale */
}

/* ⚠ Placeholder : ne pas mettre #fff — contraste insuffisant (WCAG 1.4.3) */
::placeholder          { color: var(--couleur-texte-courant); opacity: 1; }
:-ms-input-placeholder { color: var(--couleur-texte-courant); }
::-ms-input-placeholder{ color: var(--couleur-texte-courant); }

/* Focus clavier — obligatoire accessibilité (WCAG 2.4.7) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(240, 209, 138, .45);
}

/* Champ invalide (CF7) */
.wpcf7-not-valid     { border-color: var(--couleur-erreur) !important; }
.wpcf7-not-valid-tip { font-size: 12px; color: var(--couleur-erreur); margin-top: 4px; display: block; }

/* Bouton d'envoi */
input[type="submit"],
.wpcf7-submit {
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  background-color: #ffffff;
  color: var(--couleur-principale);
  border: 1px solid #ffffff;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
input[type="submit"]:hover,
input[type="submit"]:focus,
.wpcf7-submit:hover,
.wpcf7-submit:focus {
  background-color: var(--couleur-principale);
  color: var(--couleur-texte);
  border-color: var(--couleur-principale);
}

/* Case à cocher RGPD */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

input[type="checkbox"] {
  width: 20px;           /* ← taille de la case */
  height: 20px;
  margin: 2px 10px 5px 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #ffffff; /* ← couleur de la coche */
}

.rgpd {
  font-size: 12px;
  line-height: 1.5;
  color: var(--couleur-texte-courant);
  margin-left: 0 !important;
}

.rgpd-link {
  padding-left: 30px; /* ← aligne le lien sous le texte, après la case */
  margin-top: 4px;
}
.rgpd-link a {
  color: var(--couleur-texte-courant);
  font-size: 12px;
  text-decoration: underline;
}

.wpcf7-form-control.wpcf7-checkbox { margin: 0; }

/* Message de confirmation */
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--couleur-succes);
  position: relative;
  top: -40px;
}


/* ============================================================
   13. MEDIA QUERIES
   ============================================================ */

/* Formulaire : 2 colonnes sur écrans ≥ 768px */
@media only screen and (min-width: 48em) {
  .column-half {
    flex: 1 1 calc(50% - .5rem);
  }
}

/* Formulaire : bouton pleine largeur sur mobile */
@media only screen and (max-width: 30em) {
  input[type="submit"],
  .wpcf7-submit {
    width: 100%;
  }
}