/* ===================================================================
   carlos.fr — couche de contact
   À ajouter à la fin de /css/main.css.

   Objectif : qu'aucune page du site ne soit un cul-de-sac.
   Aujourd'hui 119 pages sur 121 n'offrent aucun moyen de vous joindre.

   Reprend la typographie du site ('Futura Light Pro', letter-spacing
   .05em, blanc sur fond sombre) — rien de nouveau n'est introduit.
   =================================================================== */


/* -------------------------------------------------------------------
   1. Bloc d'appel en fin de page projet, presse et TV
   ------------------------------------------------------------------- */

.cta {
  margin: 4em auto 3em;
  padding: 2.5em 1.5em;
  max-width: 34em;
  text-align: center;
  border-top: 1px solid #3D3D3F;
  border-bottom: 1px solid #3D3D3F;
}

.cta .cta-line {
  font-size: 1.15em;
  color: #fff;
  margin: 0 0 1.4em;
  line-height: 1.5;
  letter-spacing: .05em;
}

.cta .cta-actions {
  margin: 0 0 1.2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em 1em;
}

.cta .cta-actions a {
  color: #fff;
  text-decoration: none;
  font-size: 1.05em;
  letter-spacing: .08em;
  padding: .55em 1.4em;
  border: 1px solid #777;
  transition: border-color .18s, background .18s, color .18s;
  /* 44px minimum : la cible tactile recommandée par Apple et Google */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.cta .cta-actions a:hover,
.cta .cta-actions a:focus-visible {
  background: #E44325;
  border-color: #E44325;
  color: #fff;
  outline: none;
}

.cta .cta-note {
  margin: 0;
  font-size: .8em;
  color: #888;
  letter-spacing: .12em;
  text-transform: lowercase;
}


/* -------------------------------------------------------------------
   2. Pied de page : téléphone et e-mail sur TOUTES les pages
   ------------------------------------------------------------------- */

footer .contact-line {
  display: block;
  margin-top: .9em;
  font-size: 1em;
}

footer .contact-line a {
  color: #ccc;
  text-decoration: none;
  letter-spacing: .06em;
  padding: .35em .2em;      /* zone tactile confortable sur mobile */
  display: inline-block;
}

footer .contact-line a:hover,
footer .contact-line a:focus-visible {
  color: #fff;
  outline: none;
}

footer .contact-line .divider { color: #555; }


/* -------------------------------------------------------------------
   3. Entrée « contact » dans l'en-tête
   ------------------------------------------------------------------- */

header .nav-contact {
  color: #fff;
  text-decoration: none;
  font-size: .9em;
  letter-spacing: .1em;
  padding: .5em .9em;
  border: 1px solid #777;
  white-space: nowrap;
  transition: border-color .18s, background .18s;
}

header .nav-contact:hover,
header .nav-contact:focus-visible {
  background: #E44325;
  border-color: #E44325;
  outline: none;
}


/* -------------------------------------------------------------------
   4. Adaptation mobile
      (cohérent avec responsive.css — même point de rupture)
   ------------------------------------------------------------------- */

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

  .cta {
    margin: 2.5em 0 2em;
    padding: 2em 1.2em;
  }

  .cta .cta-line { font-size: 1.05em; }

  /* Sur téléphone, l'appel passe en pleine largeur : c'est le geste
     le plus probable, il ne doit pas être un petit bouton. */
  .cta .cta-actions { flex-direction: column; gap: .7em; }
  .cta .cta-actions a { width: 100%; justify-content: center; }

  header .nav-contact { font-size: .85em; padding: .45em .7em; }

  footer .contact-line a { display: block; padding: .5em 0; }
  footer .contact-line .divider { display: none; }
}


/* -------------------------------------------------------------------
   5. LinkedIn — pastille SVG, calée sur les pastilles existantes
      (les autres icônes viennent du sprite langs__.png ; plutôt que
       de retoucher le sprite, LinkedIn est un SVG inline dans le
       gabarit, stylé ici pour être indiscernable des autres.)
   ------------------------------------------------------------------- */

header > div > ul#top-langs > li#linkedin,
ul#anim-langs > li.linkedin {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: .3em;
}

header > div > ul#top-langs > li#linkedin > a,
ul#anim-langs > li.linkedin > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

li.social-svg svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: #ccc;
  transition: fill .18s;
}

li.social-svg > a:hover svg,
li.social-svg > a:focus-visible svg { fill: #fff; }

li.social-svg > a:focus-visible { outline: 1px solid #E44325; outline-offset: 2px; }