/*
Theme Name: Vitis Concilium
Description: Thème propriétaire Vitis Concilium — reconstruction 2026 après migration WordPress 7.1 / WooCommerce. Reprend la charte graphique du site d'origine (thème Bridge) sans dépendance à WPBakery ni à une licence tierce. Socle classique (non basé blocs).
Author: Viakom
Version: 1.4.5
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: vitis-concilium
*/

/* ==========================================================================
   Jetons de charte — valeurs extraites du CSS de production le 2026-09-11
   (bridge-child/style.css + style inline de la home). Ne pas deviner : ces
   valeurs sont mesurées, pas estimées.
   ========================================================================== */
:root {
  --vc-dore:        #dcc380; /* logo, menu, titres, bordures */
  --vc-rose:        #ff4185; /* accent : boutons, liens, item actif */
  --vc-rose-hover:  #f34a6a;
  --vc-cuir:        #26180c; /* fond header / footer */
  --vc-brun:        #684128;
  --vc-brun-clair:  #7f5736;
  --vc-blanc:       #ffffff; /* fond du bloc de contenu */
  --vc-texte:       #525252; /* corps de texte */
  --vc-gris-clair:  #efece7;
  --vc-gris-bord:   #e2dedb;

  --vc-font-titre:  'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --vc-font-corps:  'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --vc-contenu-max: 1140px;
  --vc-texture:     url("assets/bg-body.jpg"); /* texture cuir du body (Bridge images/bg-body.jpg). Repli : couleur --vc-cuir si absente. NB : uploads/2011/06/img-fond.jpg est une image d'ambiance verres, PAS le fond — ne pas l'utiliser ici. */
}

/* ==========================================================================
   Reset léger
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--vc-rose); text-decoration: none; }
a:hover { color: var(--vc-rose-hover); }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   Base — fond cuir texturé, corps Open Sans
   ========================================================================== */
body {
  font-family: var(--vc-font-corps);
  font-size: 15px;
  line-height: 1.7;
  color: var(--vc-texte);
  background-color: var(--vc-cuir);
  background-image: var(--vc-texture);
  background-repeat: repeat;
}

/* Titres — Raleway, fin */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vc-font-titre);
  font-weight: 300;
  color: #3a3a3a;
  line-height: 1.25;
  margin: 0 0 .6em;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }

/* ==========================================================================
   Ossature — bloc de contenu blanc centré sur le fond cuir
   ========================================================================== */
.vc-container {
  max-width: var(--vc-contenu-max);
  margin: 0 auto;
  padding: 0 20px;
}

.vc-site-content {
  max-width: var(--vc-contenu-max);
  margin: 0 auto;
  background: var(--vc-blanc);
  padding: 50px 60px;
}

/* Gabarit vitrine : deux colonnes (image à gauche, texte à droite).
   Reproduit le moule unique des 27 pages, fourni par le THÈME et non par le
   contenu (le contenu déballé n'a plus à porter la mise en page). */
.vc-two-col {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ==========================================================================
   Boutons — pastille rose à flèche, signature visuelle du site
   ========================================================================== */
.vc-btn {
  display: inline-block;
  background: var(--vc-rose);
  color: #fff;
  font-family: var(--vc-font-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  padding: 14px 22px;
  transition: background .2s ease;
}
.vc-btn:hover { background: var(--vc-rose-hover); color: #fff; }
.vc-btn::after { content: " \00BB"; }

/* Colonne média du gabarit vitrine : boutons en haut (comme le site d'origine),
   image dessous. Colonne en flex pour maîtriser l'ordre. */
.vc-col-media { display: flex; flex-direction: column; gap: 16px; }
.vc-col-media img { display: block; width: 100%; height: auto; }
.vc-btn-list { order: -1; display: flex; flex-direction: column; gap: 10px; }
/* Vestige de l'éditeur classique : un <br> entre les liens de bouton dans le
   contenu importé. En display:flex, ce <br> devient un item à part entière
   et casse le gap (10px attendu -> ~45px observé). Neutralisé plutôt que
   corrigé page par page dans le contenu. */
.vc-btn-list br { display: none; }

/* Gabarit vitrine (.vc-two-col), toutes pages confondues — accueil,
   Mentions légales, et les pages à boutons (Particuliers, Entreprises,
   Comité d'entreprise, Qui sommes-nous et leurs sous-pages) : le texte
   chevauche la partie droite de l'image, qui s'y fond doucement — comme
   sur la production. .vc-two-col est LE moule partagé par toutes ces
   pages (voir tools/PLAN-DEBALLAGE.md) : pas de raison de le traiter
   différemment selon la page. Les boutons (.vc-btn-list, order:-1 dans
   .vc-col-media) restent au-dessus de l'image, pleinement opaques — seul
   le <img> porte le fondu. Scopé à un min-width pour ne pas casser
   l'empilement mobile. */
@media (min-width: 783px) {
  .vc-two-col {
    display: grid;
    grid-template-columns: 1fr;
  }
  .vc-two-col > .vc-col-media,
  .vc-two-col > .vc-col-text {
    grid-column: 1;
    grid-row: 1;
  }
  /* Image calée sur le coin haut-gauche de .vc-site-content (marge
     négative égale à son padding : 50px 60px) et 30% plus grande qu'avant
     (70% -> 91%) pour vraiment glisser sous le texte, comme en production. */
  .vc-col-media {
    position: relative;
    width: 91%;
    margin: -50px 0 0 -60px;
  }
  .vc-col-media img {
    /* Reste pleinement opaque sur une bonne partie de sa largeur (la photo
       doit rester bien visible à gauche) et ne bascule dans le fondu que
       juste avant le début du texte (35% du conteneur), pour ne jamais
       chevaucher une zone encore visible de la photo. */
    -webkit-mask-image: linear-gradient(to right, #000 32%, transparent 42%);
            mask-image: linear-gradient(to right, #000 32%, transparent 42%);
  }
  /* Les boutons (pages vitrine à boutons) flottent en overlay directement
     sur la photo, comme en production : ils ne poussent plus la colonne
     média en flux (sinon la photo n'occupe plus toute la hauteur). Calage
     mesuré sur la production le 2026-09-16 : 15px depuis le bord gauche,
     52px depuis le bord haut de .vc-col-media. */
  .vc-btn-list {
    position: absolute;
    top: 52px;
    left: 15px;
    width: auto;
    max-width: 320px;
  }
  .vc-col-text {
    position: relative;
    z-index: 1;
    margin-left: 35%;
    /* Occupe le reste de la largeur (pas de plafond artificiel) — sur la
       production le texte occupe une mesure large, pas une colonne étroite. */
    max-width: 640px;
    /* Filet de sécurité sur la fine bande de transition, au cas où le
       texte le plus large (titre) déborderait légèrement dessus. */
    text-shadow: 0 0 16px var(--vc-blanc), 0 0 6px var(--vc-blanc);
  }
}
.vc-btn-block { display: block; text-align: center; }

/* ==========================================================================
   En-tête — bandeau cuir, logo doré, menu doré (actif en rose)
   ========================================================================== */
.vc-header { background: var(--vc-cuir); position: relative; }
.vc-header-inner {
  max-width: var(--vc-contenu-max);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-logo img { display: block; }

.vc-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.vc-menu a {
  font-family: var(--vc-font-titre);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13px;
  color: var(--vc-dore);
}
.vc-menu a:hover,
.vc-menu .current-menu-item > a { color: var(--vc-rose); }

/* Bouton hamburger — masqué sur ordinateur, seul déclencheur du menu en
   dessous de 782px (voir le bloc responsive plus bas et js/menu.js). */
.vc-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 28px;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.vc-menu-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--vc-dore);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.vc-menu-toggle.is-active .vc-menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vc-menu-toggle.is-active .vc-menu-toggle-bar:nth-child(2) { opacity: 0; }
.vc-menu-toggle.is-active .vc-menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Pied de page — trois niveaux sur cuir (pré-footer, colonnes, mentions)
   ========================================================================== */
.vc-footer {
  background: var(--vc-cuir);
  color: #b9a98f;
  padding: 50px 0 30px;
}

/* Pré-footer : réseaux sociaux, newsletter, contact rapide (ex-page #2262,
   "Pré-footer [ne pas supprimer]" — contenu repris en dur ici). */
.vc-prefooter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(220, 195, 128, .25);
}
.vc-prefooter h5 {
  color: var(--vc-dore);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  margin: 0 0 14px;
}
.vc-social-icons a {
  display: inline-block;
  color: var(--vc-dore);
  font-size: 22px;
  margin-right: 16px;
}
.vc-social-icons a:hover { color: var(--vc-rose); }
.vc-prefooter-phone a { color: var(--vc-dore); font-size: 20px; font-weight: 600; }
.vc-prefooter-notice { font-size: 13px; color: #b9a98f; }

.vc-prefooter .mc4wp-form input[type="email"],
.vc-prefooter .mc4wp-form input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.vc-prefooter .mc4wp-form input[type="submit"] {
  background: var(--vc-rose);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  font-family: var(--vc-font-titre);
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
}
.vc-prefooter .mc4wp-form input[type="submit"]:hover { background: var(--vc-rose-hover); }

/* Bouton contour blanc (sur fond cuir), variante du bouton plein rose. */
.vc-btn-outline {
  margin-top: 14px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.vc-btn-outline:hover { background: var(--vc-rose); border-color: var(--vc-rose); color: #fff; }

@media (max-width: 782px) {
  .vc-prefooter { grid-template-columns: 1fr; gap: 26px; }
}
.vc-footer h3 {
  color: var(--vc-dore);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
}
.vc-footer a { color: #b9a98f; }
.vc-footer a:hover { color: var(--vc-dore); }
.vc-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.vc-footer-cols a { display: inline-block; }
.vc-footer-list { list-style: none; margin: 0; padding: 0; }
.vc-footer-list li { margin: 0 0 8px; }
.vc-footer-list a { color: #b9a98f; font-size: 14px; line-height: 1.4; }
.vc-footer-list a:hover { color: var(--vc-dore); }

@media (max-width: 782px) {
  .vc-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

/* Galerie (page Références) — logos partenaires, taille native (150px) :
   pas d'étirement en pleine largeur de colonne (ça les pixeliserait). */
.vc-gallery-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; align-items: center; }
.vc-gallery-grid a { display: block; }
.vc-gallery-grid img { width: auto; max-width: 150px; height: auto; display: block; }
.vc-footer-contact { margin-top: 40px; }
.vc-footer-contact p { margin: 4px 0 14px; color: var(--vc-dore); font-size: 18px; }
.vc-footer-legal {
  border-top: 1px solid rgba(220, 195, 128, .25);
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .04em;
}
.vc-footer-legal ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Responsive — la colonne image passe au-dessus du texte
   ========================================================================== */
@media (max-width: 782px) {
  .vc-site-content { padding: 30px 22px; }
  .vc-two-col { grid-template-columns: 1fr; gap: 24px; }

  /* Logo et bouton hamburger restent sur la même ligne : seul le menu
     déroulant (#vc-menu-list) passe en panneau plein largeur sous
     l'en-tête, ancré sur .vc-header (position: relative). */
  .vc-menu-toggle { display: flex; }
  .vc-menu ul#vc-menu-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--vc-cuir);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
    z-index: 100;
  }
  .vc-menu ul#vc-menu-list.is-open { display: flex; }
  .vc-menu ul#vc-menu-list li { border-top: 1px solid rgba(220, 195, 128, .2); }
  .vc-menu ul#vc-menu-list a { display: block; padding: 14px 20px; }
}

/* ==========================================================================
   Fil du blog — grille de cartes avec image, à l'image de la production.
   ========================================================================== */
.vc-blog-filters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 30px;
  padding: 0;
  border-bottom: 1px solid var(--vc-gris-bord);
  padding-bottom: 20px;
}
.vc-blog-filters a {
  font-family: var(--vc-font-titre);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vc-texte);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.vc-blog-filters a:hover { color: var(--vc-rose); }
.vc-blog-filters li.current a { color: var(--vc-rose); border-color: var(--vc-rose); }

.vc-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.vc-blog-card { display: flex; flex-direction: column; }
.vc-blog-card-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--vc-gris-clair);
}
.vc-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-blog-card-cat {
  font-family: var(--vc-font-titre);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vc-rose);
  margin: 14px 0 6px;
}
.vc-blog-card h2 { font-size: 18px; margin: 0 0 8px; }
.vc-blog-card h2 a { color: #3a3a3a; }
.vc-blog-card h2 a:hover { color: var(--vc-rose); }
.vc-blog-card-date { font-size: 12px; color: #8a8a8a; margin: 0 0 10px; }
.vc-blog-card-excerpt { font-size: 14px; color: var(--vc-texte); flex-grow: 1; }
.vc-blog-card-more { margin-top: 14px; align-self: flex-start; }

/* nav.pagination : classe par défaut de the_posts_pagination() (WP core). */
nav.pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
nav.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--vc-font-titre);
  font-size: 13px;
  color: var(--vc-texte);
  border: 1px solid var(--vc-gris-bord);
}
nav.pagination .page-numbers.current,
nav.pagination .page-numbers:hover { background: var(--vc-rose); border-color: var(--vc-rose); color: #fff; }

@media (max-width: 980px) {
  .vc-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vc-blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WooCommerce — habillage des gabarits par défaut du plugin (2026-09-15).
   Boutique en sommeil, pas de surcharge de template : on reprend juste la
   charte (boutons roses, typos, couleurs) sur les éléments WooCommerce
   standard, sans toucher à leur structure HTML.
   ========================================================================== */
.woocommerce-breadcrumb {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0 0 24px;
}
.woocommerce-breadcrumb a { color: #8a8a8a; }
.woocommerce-breadcrumb a:hover { color: var(--vc-rose); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--vc-rose);
  font-family: var(--vc-font-titre);
  font-size: 22px;
}

.woocommerce div.product .stock { font-size: 13px; font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: #4a8c4a; }
.woocommerce div.product .stock.out-of-stock { color: #b33; }

.woocommerce div.product form.cart .quantity .qty {
  height: 46px;
  border: 1px solid var(--vc-gris-bord);
  padding: 0 12px;
  font-family: var(--vc-font-corps);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce div.product form.cart .button {
  display: inline-block;
  background: var(--vc-rose);
  color: #fff;
  font-family: var(--vc-font-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  padding: 14px 22px;
  border: 0;
  border-radius: 0;
  transition: background .2s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--vc-rose-hover);
  color: #fff;
}

.woocommerce div.product .product_meta { margin-top: 20px; font-size: 13px; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  font-family: var(--vc-font-titre);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-color: var(--vc-rose); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vc-rose); }

.woocommerce span.onsale {
  background: var(--vc-rose);
  font-family: var(--vc-font-titre);
  text-transform: uppercase;
  font-size: 11px;
}