/*
 * Systeme graphique des pages integrees.
 *
 * Repond a quatre reproches precis :
 *   1. blocs de hauteurs inegales, jusqu'a 231 px d'ecart entre trois cartes ;
 *   2. survols absents ou incoherents ;
 *   3. aucune animation d'entree, pages figees ;
 *   4. boutons et cartes sans icone.
 *
 * Tout est ici, en classes : le contenu des pages reste leger et se restyle
 * sans y toucher.
 */

/* ==========================================================================
   1. Hauteurs egales

   WPBakery etire bien ses colonnes, mais la carte a l'interieur ne suit pas :
   height:100% ne sert a rien tant que la chaine .vc_column-inner > .wpb_wrapper
   n'est pas elle-meme etiree. On deroule donc la chaine en flex, uniquement
   dans les rangees marquees, pour ne rien casser ailleurs.
   ========================================================================== */

/* WPBakery n'a pas conserve l'attribut el_class sur les rangees internes :
   on repere donc les rangees a leur contenu. :has() couvre les navigateurs
   recents ; pour les autres, anim.js pose la classe .coffice-egalise. */
.wpb_row:has(> .row_col_wrap_12 .coffice-carte),
.wpb_row:has(> .row_col_wrap_12 .coffice-visuel),
.wpb_row:has(> .row_col_wrap_12 .coffice-tarif),
.wpb_row:has(> .row_col_wrap_12 .coffice-etape),
.wpb_row:has(> .row_col_wrap_12 .coffice-chiffre),
.wpb_row:has(> .row_col_wrap_12 .coffice-salle),
.vc_row-fluid:has(.coffice-carte),
.vc_row-fluid:has(.coffice-visuel),
.vc_row-fluid:has(.coffice-tarif),
.vc_row-fluid:has(.coffice-etape),
.vc_row-fluid:has(.coffice-chiffre),
.vc_row-fluid:has(.coffice-salle) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.coffice-egalise,
.coffice-egalise .wpb_column,
.coffice-egalise .vc_column_container {
  display: flex;
}

.coffice-egalise {
  flex-wrap: wrap;
  align-items: stretch;
}

.vc_row-fluid:has(.coffice-carte) > .wpb_column,
.vc_row-fluid:has(.coffice-visuel) > .wpb_column,
.vc_row-fluid:has(.coffice-tarif) > .wpb_column,
.vc_row-fluid:has(.coffice-etape) > .wpb_column,
.vc_row-fluid:has(.coffice-chiffre) > .wpb_column,
.vc_row-fluid:has(.coffice-salle) > .wpb_column {
  display: flex;
}

.coffice-egalise .wpb_column > .vc_column-inner,
.coffice-egalise .vc_column_container > .vc_column-inner,
.wpb_column:has(.coffice-carte) > .vc_column-inner,
.wpb_column:has(.coffice-visuel) > .vc_column-inner,
.wpb_column:has(.coffice-tarif) > .vc_column-inner,
.wpb_column:has(.coffice-etape) > .vc_column-inner,
.wpb_column:has(.coffice-chiffre) > .vc_column-inner,
.wpb_column:has(.coffice-salle) > .vc_column-inner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.coffice-egalise .vc_column-inner > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-carte) > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-visuel) > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-tarif) > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-etape) > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-chiffre) > .wpb_wrapper,
.vc_column-inner:has(> .wpb_wrapper .coffice-salle) > .wpb_wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

/* le bloc de contenu, puis la carte, occupent toute la hauteur disponible */
.coffice-egalise .wpb_text_column,
.coffice-egalise .wpb_text_column > .wpb_wrapper,
.wpb_text_column:has(.coffice-carte),
.wpb_text_column:has(.coffice-visuel),
.wpb_text_column:has(.coffice-tarif),
.wpb_text_column:has(.coffice-etape),
.wpb_text_column:has(.coffice-chiffre),
.wpb_text_column:has(.coffice-salle),
.wpb_text_column:has(.coffice-carte) > .wpb_wrapper,
.wpb_text_column:has(.coffice-visuel) > .wpb_wrapper,
.wpb_text_column:has(.coffice-tarif) > .wpb_wrapper,
.wpb_text_column:has(.coffice-etape) > .wpb_wrapper,
.wpb_text_column:has(.coffice-chiffre) > .wpb_wrapper,
.wpb_text_column:has(.coffice-salle) > .wpb_wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.coffice-carte,
.coffice-tarif,
.coffice-etape,
.coffice-visuel,
.coffice-salle,
.coffice-chiffre {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Le libelle sous le chiffre pousse vers le bas, pour que les socles
   s'alignent d'une colonne a l'autre.

   Le selecteur doit viser le seul libelle : ecrit « .coffice-chiffre span »,
   il attrapait aussi la pastille, qui est un span, et l'icone a l'interieur,
   qui en est un aussi. Ce margin-top:auto sur l'icone l'emportait sur le
   align-items:center de la pastille et la collait au bas de son carre. */
.coffice-chiffre > span:not(.coffice-ico-pastille) {
  margin-top: auto;
}

/* la carte de tarif est centree : sa pastille d'icone doit l'etre aussi,
   sinon l'icone reste calee a gauche sous un titre centre */
.coffice-tarif {
  align-items: center;
}

.coffice-tarif > * {
  width: 100%;
}

.coffice-tarif .coffice-ico-pastille {
  width: 46px;
}

/* le corps pousse le pied de carte vers le bas : les liens s'alignent */
.coffice-visuel__corps,
.coffice-salle__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.coffice-visuel__corps .coffice-lien,
.coffice-salle__corps .coffice-faits {
  margin-top: auto;
}

.coffice-tarif__note {
  flex: 1 1 auto;
}

/* ==========================================================================
   2. Boutons

   Un seul composant pour toutes les pages, avec emplacement d'icone.
   Trois variantes : plein, contour, clair sur photo.
   ========================================================================== */

.coffice-btn,
.coffice-btn-contour,
.coffice-btn-contour-clair,
.coffice-btn-clair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.coffice-btn {
  background: var(--coffice-brun);
  border-color: var(--coffice-brun);
  color: #fff;
}

.coffice-btn-contour {
  background: transparent;
  border-color: var(--coffice-brun);
  color: var(--coffice-brun);
}

/* sur photo : fond blanc pour l'action principale, contour clair pour l'autre */
.coffice-btn-clair {
  background: #fff;
  border-color: #fff;
  color: #222;
}

/* Variante pour les fonds sombres, comme le panneau brun du hero. Le
   contour brun ordinaire y devenait illisible, brun sur brun. */
.coffice-btn-contour-clair {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.9);
  color: #fff;
}

@media (hover: hover) {
  .coffice-btn:hover {
    background: #5f3620;
    border-color: #5f3620;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(127, 76, 41, 0.35);
  }

  .coffice-btn-contour:hover {
    background: var(--coffice-brun);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(127, 76, 41, 0.28);
  }

  .coffice-btn-clair:hover {
    background: var(--coffice-brun);
    border-color: var(--coffice-brun);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  }

  .coffice-btn-contour-clair:hover {
    background: #fff;
    border-color: #fff;
    color: #222;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  /* la fleche avance a l'approche */
  .coffice-btn:hover .coffice-ico[data-ico="fleche"],
  .coffice-btn-contour:hover .coffice-ico[data-ico="fleche"],
  .coffice-btn-clair:hover .coffice-ico[data-ico="fleche"] {
    transform: translateX(3px);
  }
}

.coffice-btn:focus-visible,
.coffice-btn-contour:focus-visible,
.coffice-btn-contour-clair:focus-visible,
.coffice-btn-clair:focus-visible {
  outline: 2px solid var(--coffice-brun);
  outline-offset: 3px;
}

.coffice-btn:active,
.coffice-btn-contour:active,
.coffice-btn-contour-clair:active,
.coffice-btn-clair:active {
  transform: translateY(0) scale(0.98);
}

.coffice-btn .coffice-ico,
.coffice-btn-contour .coffice-ico,
.coffice-btn-contour-clair .coffice-ico,
.coffice-btn-clair .coffice-ico {
  width: 19px;
  height: 19px;
  vertical-align: 0;
  transition: transform 0.2s ease;
}

/* groupe de boutons : gouttiere reguliere, empiles au telephone */
.coffice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

/* ==========================================================================
   3. Survol des cartes
   ========================================================================== */

.coffice-carte,
.coffice-visuel,
.coffice-salle,
.coffice-tarif {
  transition: transform 0.24s ease, box-shadow 0.24s ease,
    border-color 0.24s ease;
}

@media (hover: hover) {
  .coffice-carte:hover,
  .coffice-visuel:hover,
  .coffice-salle:hover,
  .coffice-tarif:hover {
    transform: translateY(-4px);
    border-color: var(--coffice-brun-clair);
    box-shadow: 0 14px 34px rgba(60, 43, 31, 0.14);
  }

  /* la pastille d'icone s'inverse quand la carte reagit */
  .coffice-carte:hover .coffice-ico-pastille,
  .coffice-visuel:hover .coffice-ico-pastille {
    background: var(--coffice-brun);
    color: #fff;
    transform: scale(1.06);
  }

  .coffice-visuel:hover img {
    transform: scale(1.04);
  }

  .coffice-lien:hover .coffice-ico {
    transform: translateX(4px);
  }
}

/* Les photos de carte doivent partager le meme cadrage, sinon les cartes
   egalisees laissent des images de hauteurs differentes : 528, 297 et
   317 px releves avant correction. Salient impose height:auto sur les
   images de contenu, d'ou le !important. Un rapport d'aspect vaut mieux
   qu'une hauteur fixe : le cadrage tient a toutes les largeurs. */
.coffice-visuel > img {
  flex: 0 0 auto;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.coffice-salle > img {
  flex: 0 0 auto;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.coffice-visuel {
  overflow: hidden;
}

.coffice-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.coffice-lien .coffice-ico {
  width: 17px;
  height: 17px;
  vertical-align: 0;
  transition: transform 0.2s ease;
}

/* ==========================================================================
   4. Animations d'entree

   Les blocs arrivent une fois, au moment ou ils entrent dans l'ecran, avec
   un decalage par rang. Le JS ne fait qu'ajouter .est-visible ; si le
   JavaScript est indisponible, .coffice-anim n'est jamais pose et tout
   reste visible.
   ========================================================================== */

.coffice-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--rang, 0) * 90ms);
  will-change: opacity, transform;
}

.coffice-anim.est-visible {
  opacity: 1;
  transform: none;
}

/* les chiffres montent en compteur, cf. js/anim.js */
.coffice-chiffre strong {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .coffice-anim,
  .coffice-anim.est-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .coffice-btn,
  .coffice-btn-contour,
  .coffice-btn-clair,
  .coffice-carte,
  .coffice-visuel,
  .coffice-salle,
  .coffice-tarif,
  .coffice-visuel img,
  .coffice-ico {
    transition: none;
  }
}

/* ==========================================================================
   5. Ajustements au telephone
   ========================================================================== */

@media only screen and (max-width: 690px) {
  .coffice-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* les colonnes s'empilent : plus besoin d'etirer */
  .coffice-egalise .wpb_column,
  .coffice-egalise .vc_column_container {
    display: block;
  }

  .coffice-ico-pastille {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   6. Complements demandes apres relecture
   ========================================================================== */

/* groupe de boutons centre */
.coffice-actions.est-centre {
  justify-content: center;
}

/* note mise en valeur, avec son icone */
.coffice-encadre.a-icone {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border-left: 4px solid var(--coffice-brun);
  border-radius: 0 14px 14px 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(60, 43, 31, 0.07);
}

.coffice-encadre.a-icone > .coffice-ico {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--coffice-brun);
}

.coffice-encadre.a-icone p:last-child {
  margin-bottom: 0;
}

/* pastilles du hero : icone accolee au libelle */
.coffice-puce {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.coffice-puce .coffice-ico {
  width: 15px;
  height: 15px;
  vertical-align: 0;
}

/* La FAQ reprend le style de l'accueil actuel (toggles--minimal-shadow).
   Seule retouche : la couleur d'accent au survol et a l'ouverture, pour
   rester dans le brun du site plutot que le noir par defaut de Salient. */
.toggles--minimal-shadow .toggle.default > .toggle-title a:hover,
.toggles--minimal-shadow .toggle.default.open > .toggle-title a {
  color: var(--coffice-brun);
}

/* Le bouton d'une fiche de salle vit dans la carte : il se colle au bas du
   corps pour que les deux fiches s'alignent, et prend toute la largeur pour
   qu'on voie sans hesiter qu'il porte sur cette salle-la. */
.coffice-salle__corps .coffice-actions {
  margin-top: 22px;
}

.coffice-salle__corps .coffice-actions .coffice-btn,
.coffice-salle__corps .coffice-actions .coffice-btn-contour {
  width: 100%;
}

/* ==========================================================================
   7. Corrections de relecture du 01.09.2026
   ========================================================================== */

/* La section avis ne rend rien tant qu'aucun widget n'est configure. Sans
   cette regle, sa rangee restait visible : vide, mais haute de 173 px avec
   ses marges. On efface la rangee entiere. */
.wpb_row:has(.coffice-avis-absente),
.vc_row-fluid:has(.coffice-avis-absente),
.wpb_column:has(.coffice-avis-absente) {
  display: none !important;
}

/* Chiffres cles : les pastilles n'etaient pas alignees d'une colonne a
   l'autre, l'inline-flex suivant l'alignement du texte environnant. On les
   cale a gauche, on fixe leur taille et on les agrandit. */
.coffice-chiffre {
  align-items: flex-start;
  padding: 26px 24px;
}

.coffice-chiffre .coffice-ico-pastille {
  align-self: flex-start;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #fff;
}

.coffice-chiffre .coffice-ico-pastille .coffice-ico {
  width: 30px;
  height: 30px;
}

.coffice-chiffre strong {
  font-size: 1.8em;
}

@media only screen and (max-width: 690px) {
  .coffice-chiffre .coffice-ico-pastille {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }

  .coffice-chiffre .coffice-ico-pastille .coffice-ico {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   8. Bandes de photos

   Le site manquait de presence humaine. Ces bandes montrent le lieu vivant
   plutot que des salles vides : on y sert un cafe, on y travaille, on s'y
   retrouve.
   ========================================================================== */

.coffice-bande {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 34px;
}

.coffice-bande figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--coffice-creme);
}

.coffice-bande img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.55s ease;
}

/* La bande recadre au format 4/5 et le sujet n'est pas toujours au centre.
   Un biais pose globalement arrangeait une photo et en abimait une autre :
   le cadrage se regle donc image par image, depuis bande_photos(). */
.coffice-bande figure.cadre-haut img {
  object-position: 50% 22%;
}

.coffice-bande figure.cadre-bas img {
  object-position: 50% 78%;
}

/* la legende se pose sur la photo, lisible grace au degrade */
.coffice-bande figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 16px;
  background: linear-gradient(to top, rgba(45, 30, 20, 0.78), transparent);
  color: #fff;
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.3;
}

@media (hover: hover) {
  .coffice-bande figure:hover img {
    transform: scale(1.05);
  }
}

/* une photo mise en avant occupe deux colonnes et deux rangees */
.coffice-bande figure.est-large {
  grid-column: span 2;
  grid-row: span 2;
}

.coffice-bande figure.est-large img {
  aspect-ratio: 1 / 1;
  height: 100% !important;
}

@media only screen and (max-width: 999px) {
  .coffice-bande {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media only screen and (max-width: 690px) {
  .coffice-bande figure.est-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .coffice-bande figure.est-large img {
    aspect-ratio: 4 / 3;
  }

  .coffice-bande figcaption {
    padding: 26px 14px 12px;
    font-size: 0.85em;
  }
}

/* ==========================================================================
   9. Revue de presse

   Une coupure de presse n'est pas une photo : l'information utile est en
   haut, dans le titre de l'article. On cadre donc par le haut, alors que
   les cartes illustrees restent centrees. Le reste, hauteurs egales,
   survol et animation d'entree, vient de .coffice-visuel.
   ========================================================================== */

.coffice-visuel.est-presse > img {
  aspect-ratio: 16 / 11;
  object-position: top center;
  background: var(--coffice-creme);
}

.coffice-presse__source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--coffice-brun);
}

.coffice-presse__source .coffice-ico {
  width: 17px;
  height: 17px;
  vertical-align: 0;
}

.coffice-presse__date {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coffice-gris);
}

.coffice-visuel.est-presse h3 {
  margin: 0 0 18px;
  font-size: 1.1rem;
  line-height: 1.34;
}

/* Sans version en ligne, la carte garde un pied : sans lui, elle serait la
   seule dont le bas ne s'aligne pas sur celui de ses voisines. */
.coffice-presse__papier {
  margin-top: auto;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--coffice-gris);
}

@media only screen and (max-width: 690px) {
  .coffice-presse__source {
    flex-wrap: wrap;
    gap: 6px;
  }

  .coffice-presse__date {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ==========================================================================
   10. Bandeau d'infos rapides

   Horaires, adresse et acces, juste sous le hero. Ces trois informations
   ne vivaient qu'en bas de page : seize ecrans de defilement en mobile.
   ========================================================================== */

/* Grille plutot que flex : avec flex:1 1 260px, la carte au texte le plus
   long prenait la moitie de la largeur et les deux autres se repliaient
   dans la moitie restante. Ici les trois colonnes sont egales. */
.coffice-infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.coffice-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--coffice-ligne);
  border-radius: 18px;
  background: #fff;
  color: var(--coffice-texte);
  font-size: 0.97rem;
  line-height: 1.4;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

/* Le lien vit dans le div, pas a sa place : wpautop enveloppe dans un <p>
   toute ancre posee en enfant direct. Le rembourrage passe donc sur
   l'ancre, pour que toute la carte reste cliquable. */
.coffice-info.est-lien {
  padding: 0;
}

.coffice-info.est-lien > a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  color: inherit;
  text-decoration: none;
}

/* la pastille est calibree pour une tete de carte : ici elle accompagne
   une seule ligne de texte, donc plus petite et sans marge basse */
.coffice-info .coffice-ico-pastille {
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  border-radius: 11px;
}

.coffice-info .coffice-ico-pastille .coffice-ico {
  width: 19px;
  height: 19px;
}

@media (hover: hover) {
  .coffice-info.est-lien:hover {
    transform: translateY(-2px);
    border-color: var(--coffice-brun-clair);
    box-shadow: 0 10px 24px rgba(60, 43, 31, 0.12);
  }

  .coffice-info.est-lien:hover .coffice-ico-pastille {
    background: var(--coffice-brun);
    color: #fff;
  }
}

.coffice-info.est-lien:active {
  transform: translateY(0) scale(0.99);
}

@media only screen and (max-width: 999px) {
  .coffice-infos {
    grid-template-columns: 1fr;
  }

  .coffice-info {
    padding: 14px 16px;
  }
}

/* -------------------------------------------------------------------------
 * Reseaux sociaux
 *
 * Pose par [coffice_reseaux] au bas des coordonnees, dans « Infos pratiques ».
 * Icone seule, sans texte, a peine plus grande qu'une ligne.
 *
 * Deux pieges, tous deux mesures le 05.09.2026 :
 *
 * 1. La rangee « Infos pratiques » est en text_color="light" : Salient met en
 *    blanc tout lien qu'elle contient, avec plus de poids qu'une simple
 *    classe. L'icone, coloree par currentColor, sortait blanche sur creme.
 *    La couleur est donc posee sur l'icone elle-meme, en background-color,
 *    et ne depend plus de celle du lien.
 *
 * 2. Le conteneur ne pose aucun alignement : il rend ses icones en ligne et
 *    laisse la colonne decider. Centree ici, elles sont centrees ; a gauche
 *    ailleurs, elles suivent. Un flex avec justify-content aurait fige un
 *    choix qui n'est pas le sien.
 * ---------------------------------------------------------------------- */

.coffice-reseaux {
  display: block;
  margin-top: 14px;
  line-height: 0;
}

.coffice-reseau,
.wpb_text_column .coffice-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* la cible fait 44 px, le dessin 20 : le rembourrage porte la difference */
  width: 44px;
  height: 44px;
  margin: 0 2px;
  border-radius: 50%;
  vertical-align: middle;
  background-image: none;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.coffice-reseau .coffice-ico {
  width: 20px;
  height: 20px;
  /* independant de la couleur du lien, que Salient force en blanc ici */
  background-color: var(--coffice-brun, #7f4c29);
  transition: background-color 0.2s ease;
}

/* Enferme, sinon l'etat reste colle apres un appui sur ecran tactile. */
@media (hover: hover) {
  .coffice-reseau:hover,
  .wpb_text_column .coffice-reseau:hover {
    background-color: var(--coffice-brun, #7f4c29);
    background-image: none;
    background-size: auto;
  }

  .coffice-reseau:hover .coffice-ico {
    background-color: #fff;
  }
}

.coffice-reseau:active {
  transform: scale(0.94);
}

/* -------------------------------------------------------------------------
 * Note secondaire
 *
 * La classe etait posee depuis le 02.09 sans aucune regle : les renvois
 * « Voir aussi... » se lisaient donc exactement comme le corps de texte.
 * ---------------------------------------------------------------------- */

.coffice-note {
  margin-top: 10px;
  font-size: 0.92em;
  opacity: 0.85;
}