/* =========================================================================
   SFY - Rafraîchissement visuel (2026)
   Fichier ADDITIF : ne modifie ni ne supprime sfy.css, ne touche à aucun
   contenu (node/body). À charger APRES sfy.css dans bootstrap.info pour
   que ces règles priment sur les anciennes valeurs.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Palette unifiée
   Avant : le bandeau de nav utilisait un cyan vif (#009ee0) totalement
   différent du bleu marine déjà utilisé dans le contenu (.sf-hero, .sf-card,
   .sf-proof : #12243a / #244f7c / #315f8f). Résultat : deux identités bleues
   qui ne se répondent pas. On unifie autour de la famille "marine" déjà
   présente dans le contenu — c'est elle qui porte le ton "expert industriel"
   le plus crédible.
   ------------------------------------------------------------------------- */
:root {
  --sfy-navy:        #12243a; /* déjà utilisé par .sf-hero h1 */
  --sfy-blue:         #1c5d8c; /* nouvel accent, remplace le cyan #009ee0 */
  --sfy-blue-dark:   #123a5c;
  --sfy-bg-light:     #f7f9fc; /* déjà utilisé par .sf-panel */
  --sfy-border:        #e0e5ec; /* déjà utilisé par .sf-card */
  --sfy-text:            #222222;
}

/* -------------------------------------------------------------------------
   2. Navigation - remplace le cyan par l'accent unifié, ajoute des
   transitions et un état actif/hover plus net.
   ------------------------------------------------------------------------- */
.navbar-inverse {
  background-color: var(--sfy-blue);
  border-color: var(--sfy-blue-dark);
}
.navbar-inverse .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.88);
  transition: background-color .15s ease, color .15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  background-color: var(--sfy-blue-dark);
  color: #ffffff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: var(--sfy-blue-dark);
  color: #ffffff;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.55);
}

/* En-tête : un peu plus d'air, alignement vertical propre du logo + slogan */
header#header {
  padding: 16px 10px;
}
#site_name {
  letter-spacing: -.01em;
}
#slogan {
  color: #cfd8e3;
}

/* -------------------------------------------------------------------------
   3. Cartes de contenu (.sf-card) - légère profondeur + effet hover,
   coins un peu plus doux. Purement visuel, ne change aucune structure.
   ------------------------------------------------------------------------- */
.sf-card {
  box-shadow: 0 1px 2px rgba(18, 36, 58, .06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.sf-card:hover {
  box-shadow: 0 6px 18px rgba(18, 36, 58, .10);
  transform: translateY(-2px);
}
.sf-card h3 {
  color: var(--sfy-navy);
}

.sf-hero {
  box-shadow: 0 1px 3px rgba(18, 36, 58, .05);
}

.sf-proof {
  background: var(--sfy-navy);
}

/* -------------------------------------------------------------------------
   4. Boutons - on aligne .btn-default sur l'accent unifié au lieu du noir
   plat #222222, avec un vrai état hover (actuellement absent).
   ------------------------------------------------------------------------- */
.btn-default,
.sf-button-primary {
  background-color: var(--sfy-blue);
  border-color: var(--sfy-blue-dark);
  color: #ffffff !important;
  transition: background-color .15s ease, transform .1s ease;
}
.btn-default:hover,
.btn-default:focus,
.sf-button-primary:hover {
  background-color: var(--sfy-blue-dark);
  border-color: var(--sfy-blue-dark);
  color: #ffffff !important;
}
.sf-button-secondary {
  border-color: var(--sfy-blue);
  color: var(--sfy-blue) !important;
  transition: background-color .15s ease, color .15s ease;
}
.sf-button-secondary:hover {
  background-color: var(--sfy-blue);
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   5. Tableau des publications (rendu par Views) - actuellement un tableau
   nu, sans hiérarchie visuelle. On ajoute alternance de lignes, espacement,
   hover, sans toucher au contenu ni aux templates.
   ------------------------------------------------------------------------- */
div.view .view-content table {
  border-collapse: separate;
  border-spacing: 0;
}
div.view .view-content table > tbody > tr {
  border-bottom: 1px solid var(--sfy-border);
  transition: background-color .12s ease;
}
div.view .view-content table > tbody > tr:hover {
  background-color: var(--sfy-bg-light);
}
div.view .view-content table > tbody > tr > td {
  padding: 16px 12px;
  vertical-align: top;
}
div.view .view-content table > thead > tr > th {
  color: var(--sfy-navy);
  border-bottom: 2px solid var(--sfy-navy);
  padding-bottom: 10px;
}

/* -------------------------------------------------------------------------
   6. Respiration mobile supplémentaire (petits écrans < 480px, non couverts
   par les breakpoints existants à 760/850px).
   ------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .sf-hero {
    padding: 20px 16px;
    border-radius: 10px;
  }
  .sf-hero h1 {
    font-size: 24px;
  }
  .sf-proof,
  .sf-contact {
    padding: 20px 18px;
  }
  div.view .view-content table > tbody > tr > td {
    padding: 10px 6px;
    font-size: 14px;
  }
}

/* -------------------------------------------------------------------------
   8. Sélecteur de langue - actuellement un bloc flottant nu, sans fond ni
   état hover, mal relié visuellement au reste. On lui donne un vrai
   traitement de petit contrôle, sans changer sa position dans le DOM.
   ------------------------------------------------------------------------- */

.block-locale {
  /* margin: 12px 0 20px 0; */
}

#block-locale-0 {
  display: inline-block;
  float: none;
  background: var(--sfy-bg-light);
  border: 1px solid var(--sfy-border);
  border-radius: 999px;
  padding: 4px 10px;
}
.block-locale .content,
.block-locale .inner {
  overflow: hidden; /* clearfix pour les <li> flottants ci-dessous */
}
.block-locale ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-locale li {
  float: left;
  margin: 0 2px;
  list-style: none;
}
.block-locale li a {
  display: inline-flex; /* sûr ici : une seule feuille (l'image), pas de conteneur parent en jeu */
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.block-locale li a:hover {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18,36,58,.08);
}
.block-locale img {
  display: block;
}

/* -------------------------------------------------------------------------
   9. Liens - couleur générale unifiée + correction de la couleur "visité"
   (actuellement non définie : le navigateur affiche sa couleur violette
   par défaut sur les liens déjà cliqués, dont les titres d'article).
   ------------------------------------------------------------------------- */
a,
a:visited {
  color: var(--sfy-blue);
}
a:hover,
a:active {
  color: var(--sfy-blue-dark);
}
h2.title a,
h2.title a:visited {
  color: var(--sfy-navy);
}

/* -------------------------------------------------------------------------
   10. Bandeau citation (#block-block-7, ex. citation Bach) - utilisait
   encore le cyan Bootstrap par défaut, non harmonisé avec la nouvelle
   palette marine.
   ------------------------------------------------------------------------- */
#block-block-7 {
  background-color: var(--sfy-navy) !important;
}
/* Le div interne porte un style="background-color:#009ee0..." en inline :
   seul un sélecteur ciblé + !important peut le supplanter. */
#block-block-7 .content > div {
  background-color: var(--sfy-navy) !important;
}
#block-block-7 a {
  color: #ffffff;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   11. Titres masqués - h2.title est parfois laissé vide volontairement
   (lien commenté dans node.tpl.php). On supprime tout espace qu'il
   occuperait. Nécessite que node.tpl.php n'insère pas d'espace/saut de
   ligne à l'intérieur du <h2> (seul un commentaire HTML, qui ne compte
   pas comme contenu pour :empty).
   ------------------------------------------------------------------------- */
h2.title:empty {
  display: none;
}
.btn-group.btn-group-sm:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   7. Accessibilité - focus clavier visible (absent actuellement sur liens
   de nav et boutons custom).
   ------------------------------------------------------------------------- */
.navbar-nav > li > a:focus-visible,
.btn:focus-visible,
.sf-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}