/*
Theme Name:  Salient Child — Le Coffice
Theme URI:   https://coffice.cafe
Description: Thème enfant de Salient. Porte l'intégration des maquettes validées le 31.08.2026 et les correctifs responsive de l'audit. Permet de mettre Salient à jour sans perdre les personnalisations.
Author:      Le Coffice
Template:    salient
Version:     1.0.0
Text Domain: salient-child
*/

/* ==========================================================================
   Le Coffice — intégration
   Valeurs reprises des maquettes validées :
   brun #7f4c29, Open Sans, capsule header à rayon 25 px.
   ========================================================================== */

:root {
  --coffice-brun: #7f4c29;
  --coffice-brun-clair: #b9794e;
  --coffice-creme: #f7f3ee;
  --coffice-sauge: #edf0ea;
  --coffice-ligne: #e4d8cd;
  --coffice-texte: #444;
  --coffice-gris: #676767;
}

/* --------------------------------------------------------------------------
   1. Correctif critique — CTA comprimés sur mobile

   Constat mesuré sur le site : page Salles à 375 px de large, le bouton
   « Demander un devis sur WhatsApp » tombe à 38 × 108 px, son libellé se
   repliant en colonne verticale.

   Cause : l'élément Salient « Call to Action » se présente en
   div.nectar-cta > span.nectar-button-type > span.link_wrap > a.link_text.
   Le parent .wpb_wrapper passe en display:flex ; .nectar-cta devient un
   élément flexible qui se réduit à son contenu, et .link_wrap étant lui
   aussi en flex, l'ancre se comprime encore.

   Correctif : rendre la chaîne pleine largeur jusqu'à l'ancre, ce qui
   correspond au comportement des maquettes validées (boutons pleine
   largeur, empilés, sur mobile).
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 999px) {

  /* les colonnes du constructeur cessent de comprimer leur contenu */
  .wpb_column,
  .vc_col-sm-3,
  .vc_col-sm-4,
  .vc_col-sm-6 {
    min-width: 0;
  }

  /* a. le conteneur autorise le retour à la ligne.
     Salient place les CTA voisins dans un .wpb_wrapper en
     display:flex / flex-wrap:nowrap : deux boutons se partagent alors
     la largeur au lieu de s'empiler, d'où l'écrasement constaté.
     La règle est inerte sur les .wpb_wrapper qui ne sont pas en flex. */
  .wpb_wrapper {
    flex-wrap: wrap;
  }

  /* b. élément « Call to Action » de Salient */
  .wpb_wrapper > .nectar-cta,
  .nectar-cta {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 12px;
  }

  .nectar-cta .nectar-button-type {
    display: block !important;
    width: 100%;
  }

  /* La mise en page interne du bouton reste celle de Salient : on ne
     surcharge que la largeur. Forcer l'ancre en display:flex ou lui
     imposer overflow-wrap:break-word provoquait des coupures en plein
     mot (« WhatsAp / p », « du C / oworking »). */
  .nectar-cta .link_wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* cible tactile confortable, sans toucher au rendu du texte.
     min-width couvre les libellés courts comme « Email », qui tombaient
     à 42 px de large, sous le seuil de 44 px recommandé au doigt. */
  .nectar-cta a.link_text {
    min-height: 48px;
    min-width: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
    box-sizing: border-box;
  }

  /* Salient découpe le libellé en un span.char par caractère pour son
     animation d'entrée, en display:inline-block. Chaque caractère devient
     alors un point de coupure de ligne possible, d'où « du Cow / orking ».
     Les repasser en inline rétablit des coupures aux espaces seulement.
     L'animation d'entrée est neutralisée sur mobile : sans effet visible,
     puisque les caractères reviennent de toute façon à transform:none. */
  .nectar-cta a.link_text .char {
    display: inline;
  }

  /* c. boutons classiques du thème */
  a.nectar-button,
  .nectar-button,
  .wpb_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 12px 20px !important;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  /* deux boutons voisins s'empilent au lieu de se serrer */
  .wpb_wrapper > .nectar-button + .nectar-button {
    margin-top: 12px;
  }
}

/* --------------------------------------------------------------------------
   2. Titres — le H1 conservait sa taille desktop sur mobile
   Mesuré : 54 px sur un viewport de 375 px, pour un titre de 36 caractères.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 690px) {
  /* :not(.fitty-fit *) epargne les titres mis a l'echelle de leur conteneur
     par Salient (classe fitty-fit), comme le grand mot « le coffice » du
     hero : sans cette exception il retombait de 316 px a 38 px. */
  body h1:not(.fitty-fit *),
  .row .col h1:not(.fitty-fit *),
  .nectar-split-heading:not(.fitty-fit) h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  body h2,
  .row .col h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
}

/* --------------------------------------------------------------------------
   3. Montants des formules

   Les prix sont passés de h1 à h3 pour ne garder qu'un H1 par page. Chez
   Salient, font_style pilote à la fois la balise et la typographie : le
   montant tombait de 54 px à 22 px. La classe coffice-prix, posée sur le
   shortcode, lui rend sa présence sans toucher aux autres h3.
   -------------------------------------------------------------------------- */

.coffice-prix h3 {
  font-size: 42px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

@media only screen and (max-width: 690px) {
  .coffice-prix h3 {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Barre d'actions rapides

   Reprend le langage visuel du site : capsule blanche translucide à rayon
   généreux, brun #7f4c29, coins arrondis. Le café passe en premier.
   -------------------------------------------------------------------------- */

.coffice-bar {
  position: fixed;
  z-index: 9000;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  width: max-content;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}

.coffice-bar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 26px rgba(60, 43, 31, 0.18);
}

.coffice-bar__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--coffice-brun);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
}

.coffice-bar__lien.is-primaire {
  background: var(--coffice-brun);
  color: #fff;
}

/* Survol franc : le lien s'inverse en brun plein, se souleve et prend une
   ombre. L'icone suit, elle herite de currentColor. Reserve aux appareils
   dotes d'un vrai survol, sinon l'etat reste colle apres un appui tactile. */
@media (hover: hover) {
  .coffice-bar__lien:hover {
    background: var(--coffice-brun);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(127, 76, 41, 0.32);
    text-decoration: none;
  }

  .coffice-bar__lien.is-primaire:hover {
    background: #5f3620;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(127, 76, 41, 0.45);
  }
}

.coffice-bar__lien:focus-visible {
  background: var(--coffice-brun);
  color: #fff;
  text-decoration: none;
}

/* retour tactile a l'appui */
.coffice-bar__lien:active {
  transform: translateY(0) scale(0.97);
  background: var(--coffice-brun);
  color: #fff;
}

.coffice-bar__lien:focus-visible {
  outline: 2px solid var(--coffice-brun);
  outline-offset: 2px;
}

.coffice-bar__icone {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.coffice-bar__court {
  display: none;
}

/* le bouton « retour en haut » de Salient se décale au-dessus de la barre */
body #to-top,
body #to-top.mobile-enabled {
  bottom: 96px;
}

/* le bas de page n'est pas masqué par la barre flottante */
body {
  padding-bottom: 104px;
}

/* --- mobile : barre pleine largeur, ancrée au bas de l'écran --- */

@media only screen and (max-width: 999px) {

  .coffice-bar {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
    max-width: none;
  }

  .coffice-bar__inner {
    gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-radius: 0;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--coffice-ligne);
    box-shadow: 0 -4px 18px rgba(60, 43, 31, 0.12);
  }

  .coffice-bar__lien {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    min-height: 56px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 14px;
  }

  /* le libellé long laisse place au libellé court */
  .coffice-bar__long {
    display: none;
  }

  .coffice-bar__court {
    display: block;
  }

  /* toutes les icônes occupent la même boîte, sinon la pastille de l'action
     primaire est plus haute et son libellé descend sous les autres */
  .coffice-bar__icone {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
  }

  /* l'action primaire reste lisible sans pavé plein sur toute la hauteur */
  .coffice-bar__lien.is-primaire {
    background: transparent;
    color: var(--coffice-brun);
  }

  .coffice-bar__lien.is-primaire .coffice-bar__icone {
    color: #fff;
    background: var(--coffice-brun);
    border-radius: 999px;
    padding: 4px;
  }

  /* a l'appui, l'element passe en brun : la pastille s'inverse pour rester
     visible sur ce fond */
  .coffice-bar__lien.is-primaire:active .coffice-bar__icone {
    background: #fff;
    color: var(--coffice-brun);
  }

  .coffice-bar__lien.is-desktop {
    display: none;
  }

  /* le contenu ne passe pas sous la barre */
  body {
    padding-bottom: 68px;
  }

  body #to-top,
  body #to-top.mobile-enabled {
    bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coffice-bar__lien {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5. Pages integrees depuis les maquettes validees

   Les styles vivent ici et non en attribut style : WordPress assainit le
   contenu des pages et supprime notamment « background: rgba(...) ». Passer
   par des classes evite ce piege, allege le contenu et permet de restyler
   sans toucher aux pages dans le constructeur.
   -------------------------------------------------------------------------- */

/* --- hero de l'accueil --- */

.coffice-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 600px;
  padding: 48px 40px;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.coffice-hero__mot {
  margin: 0 0 auto;
  color: var(--coffice-brun);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.88;
  font-size: clamp(52px, 9vw, 150px);
}

.coffice-hero__panneau {
  max-width: 640px;
  margin-top: 40px;
  padding: 30px;
  border-radius: 18px;
  background-color: rgba(127, 76, 41, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
}

.coffice-hero__panneau h1 {
  margin: 0 0 0.5em;
  color: #fff;
  font-size: 1.75em;
  line-height: 1.2;
}

.coffice-hero__panneau p {
  margin: 0 0 1.2em;
  color: #fff;
}

.coffice-hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Les boutons sont definis dans css/systeme.css, qui en est le seul
   proprietaire. Les avoir declares ici aussi provoquait un bouton blanc
   sur fond blanc dans le hero : Salient charge style.css une seconde fois,
   apres systeme.css, et l'ancienne couleur reprenait le dessus. */


/* --- pastilles --- */

.coffice-puces {
  margin-top: 20px;
}

.coffice-puce {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: rgba(127, 76, 41, 0.74);
  color: #fff;
  font-size: 0.85em;
}

.coffice-pastille {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #f2ebe4;
  color: var(--coffice-brun);
  font-size: 0.86em;
  font-weight: 600;
}

/* --- cartes de contenu --- */

.coffice-carte {
  height: 100%;
  padding: 28px;
  border: 1px solid var(--coffice-ligne);
  border-radius: 18px;
  background: #fff;
}

.coffice-carte h3 {
  margin: 0 0 0.5em;
  color: var(--coffice-brun);
  font-size: 1.35em;
}

.coffice-carte p {
  margin: 0;
  color: var(--coffice-gris);
}

/* carte avec photo en tete */
.coffice-visuel {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--coffice-ligne);
  border-radius: 18px;
  background: #fff;
}

.coffice-visuel img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.coffice-visuel__corps {
  padding: 26px;
}

.coffice-visuel h3 {
  margin: 0 0 0.4em;
  color: var(--coffice-brun);
  font-size: 1.4em;
}

.coffice-visuel p {
  margin: 0 0 1em;
  color: var(--coffice-gris);
}

.coffice-lien {
  color: var(--coffice-brun);
  font-weight: 700;
}

/* --- fiche de salle --- */

.coffice-salle {
  height: 100%;
  overflow: hidden;
  border: 1px solid #dfd4ca;
  border-radius: 22px;
  background: #fff;
}

.coffice-salle > img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.coffice-salle__corps {
  padding: 30px;
}

.coffice-salle h3 {
  margin: 0 0 0.4em;
  color: var(--coffice-brun);
  font-size: 1.6em;
}

.coffice-faits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 0;
}

.coffice-fait {
  padding: 14px 16px;
  border-radius: 12px;
  background: #f7f3ee;
}

.coffice-fait strong {
  display: block;
  color: var(--coffice-brun);
}

.coffice-fait span {
  color: var(--coffice-gris);
  font-size: 0.92em;
}

/* --- tarifs --- */

.coffice-tarif {
  height: 100%;
  padding: 30px;
  border: 1px solid #dfd4ca;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}

/* La carte mise en avant garde une bordure de 1 px et gagne un anneau :
   une bordure de 2 px la rendait 4 px plus haute que ses voisines, ce qui
   cassait l'alignement de la rangee. */
.coffice-tarif.est-mis-en-avant {
  border-color: var(--coffice-brun);
  box-shadow: 0 0 0 1px var(--coffice-brun);
}

.coffice-tarif h3 {
  margin: 0 0 0.4em;
  font-size: 1.25em;
}

.coffice-tarif__montant {
  margin: 0 0 0.4em;
  color: var(--coffice-brun);
  font-size: 2.4em;
  font-weight: 600;
  line-height: 1;
}

.coffice-tarif__note {
  margin: 0;
  min-height: 3.4em;
  color: var(--coffice-gris);
}

/* --- etapes numerotees --- */

.coffice-etape {
  height: 100%;
  padding: 26px;
  border-left: 4px solid var(--coffice-brun);
  border-radius: 0 16px 16px 0;
  background: #f7f3ee;
}

.coffice-etape span {
  color: var(--coffice-brun);
  font-weight: 700;
  font-size: 0.8em;
}

.coffice-etape h3 {
  margin: 0.3em 0 0.4em;
  font-size: 1.2em;
}

.coffice-etape p {
  margin: 0;
  color: var(--coffice-gris);
}

/* --- divers --- */

.coffice-encadre {
  margin: 1.2em 0;
  padding: 18px 22px;
  border-radius: 14px;
  background: #f7f3ee;
  color: var(--coffice-gris);
}

.coffice-chiffre {
  padding: 22px;
  border-radius: 16px;
  background: #f7f3ee;
}

.coffice-chiffre strong {
  display: block;
  color: var(--coffice-brun);
  font-size: 1.6em;
  line-height: 1.1;
}

.coffice-chiffre span {
  color: var(--coffice-gris);
  font-size: 0.92em;
}

.coffice-surtitre {
  margin-bottom: 0.4em;
  color: var(--coffice-brun);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78em;
}

.coffice-photo {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
}

@media only screen and (max-width: 690px) {
  .coffice-hero {
    min-height: 520px;
    padding: 32px 22px;
  }

  .coffice-hero__panneau {
    padding: 22px;
  }

  .coffice-hero__actions {
    flex-direction: column;
  }

  .coffice-btn,
  .coffice-btn-clair {
    width: 100%;
  }

  .coffice-faits {
    grid-template-columns: 1fr 1fr;
  }
}

/* le lien « Voir la carte → » des cartes est un lien texte : au doigt, il lui
   faut une zone de contact d'au moins 44 px, sans changer son apparence. */
@media only screen and (max-width: 999px) {
  .coffice-lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- section avis, alimentee par les avis Google --- */

.coffice-avis h2 {
  margin: 0 0 1em;
  color: var(--coffice-brun);
}

.coffice-avis__widget {
  margin-top: 8px;
}