/* ==========================================================================
   Tanat Pro — Page filiale
   Feuille de style de la mise en page « filiale » (Nantes, Marseille, Lille).
   Portee : tout est prefixe .tf-  et confine aux lignes WPBakery qui portent
   la classe correspondante. Rien ne fuit sur le reste du site.

   Police : on herite de Futura PT, deja chargee par le theme Uncode.
   ========================================================================== */

:root {
  --tf-bg: #f4f0e8;
  --tf-ink: #000000;
  --tf-orange: #f65f35;
  --tf-muted: rgba(0, 0, 0, .6);
  --tf-rule: rgba(0, 0, 0, .16);
  --tf-rule-strong: rgba(0, 0, 0, .24);
  --tf-media: #000000;
}

/* --------------------------------------------------------------------------
   1. Fond de page + neutralisation des marges Uncode
   -------------------------------------------------------------------------- */

/* Le fond beige est pose sur les conteneurs de page uniquement.

   Deux exclusions indispensables :
   - pas sur .row-container : les lignes imbriquees portent la meme classe et
     repeindraient un bandeau clair par-dessus la section noire ;
   - pas sur .pum-container : Popup Maker donne AUSSI la classe .main-container
     a ses popups. Sans le :not(), cette regle (0,2,1) bat celle du theme du
     popup (0,2,0) et repeint en beige aussi bien notre popup que celui du
     Portail Pro, qui se charge lui aussi sur cette page. */
body.tf-page,
body.tf-page .page-body,
body.tf-page .main-container:not(.pum-container) {
  background-color: var(--tf-bg);
}

body.tf-page .tf-row {
  background-color: transparent;
}

/* Uncode ajoute des marges sur les derniers enfants : on remet a plat. */
body.tf-page .tf-row .uncode_text_column > *:last-child,
body.tf-page .tf-row .vc_custom_heading:last-child,
body.tf-page .tf-row p:last-child {
  margin-bottom: 0;
}

body.tf-page .tf-row .uncode_text_column p,
body.tf-page .tf-row .uncode_text_column ul {
  margin-bottom: 0;
}

/* Largeur de contenu commune a toutes les sections. */
body.tf-page .tf-row > .row-container > .row-parent,
body.tf-page .tf-row > .row-container > .row > .row-parent {
  max-width: 1296px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   2. Styles de texte reutilisables (a poser en « Extra class » WPBakery)
   -------------------------------------------------------------------------- */

/* Sur-titre : petit, espace, majuscules. */
body.tf-page .tf-eyebrow,
body.tf-page .tf-eyebrow p {
  font-weight: 500;
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tf-ink);
}

body.tf-page .tf-eyebrow--orange,
body.tf-page .tf-eyebrow--orange p {
  color: var(--tf-orange);
}

body.tf-page .tf-eyebrow--muted,
body.tf-page .tf-eyebrow--muted p {
  color: var(--tf-muted);
}

/* Numero de section, aligne a droite dans les en-tetes. */
body.tf-page .tf-secnum,
body.tf-page .tf-secnum p {
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tf-orange);
  text-align: right;
  margin: 0;
}

/* Etiquette de bloc (Double rythme, Tracabilite totale, L'equipe...). */
body.tf-page .tf-label,
body.tf-page .tf-label p {
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tf-ink);
  margin: 0;
}

body.tf-page .tf-label--orange,
body.tf-page .tf-label--orange p {
  color: var(--tf-orange);
}

/* Titre de page. */
body.tf-page .tf-h1,
body.tf-page .tf-h1 h1 {
  font-size: clamp(3.2rem, 12vw, 10rem);
  line-height: .88;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tf-ink);
  font-weight: 400;
  margin: 0;
}

/* Titre de section. */
body.tf-page .tf-h2,
body.tf-page .tf-h2 h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tf-ink);
  font-weight: 400;
  margin: 0;
}

/* Titre de carte. */
body.tf-page .tf-h3,
body.tf-page .tf-h3 h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tf-ink);
  font-weight: 400;
  margin: 0;
}

/* Chapo. */
body.tf-page .tf-lede,
body.tf-page .tf-lede p {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--tf-ink);
}

body.tf-page .tf-lede-sm,
body.tf-page .tf-lede-sm p {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  color: var(--tf-ink);
}

body.tf-page .tf-lede-lg,
body.tf-page .tf-lede-lg p {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--tf-ink);
  max-width: 44ch;
}

/* Corps de texte gris. */
body.tf-page .tf-body,
body.tf-page .tf-body p {
  font-size: 1.02rem;
  line-height: 26px;
  color: var(--tf-muted);
}

body.tf-page .tf-body--narrow,
body.tf-page .tf-body--narrow p {
  max-width: 52ch;
}

body.tf-page .tf-body-sm,
body.tf-page .tf-body-sm p {
  font-size: .98rem;
  line-height: 26px;
  color: var(--tf-muted);
}

/* Citation. */
body.tf-page .tf-quote,
body.tf-page .tf-quote p {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--tf-ink);
}

/* --------------------------------------------------------------------------
   3. Filets
   -------------------------------------------------------------------------- */

body.tf-page .tf-rule-top     { border-top: 1px solid var(--tf-rule); }
body.tf-page .tf-rule-bottom  { border-bottom: 1px solid var(--tf-rule); }
body.tf-page .tf-rule-strong  { border-bottom: 1px solid var(--tf-ink); }

/* En-tete de section : titre a gauche, numero a droite, filet noir dessous. */
body.tf-page .tf-sechead > .row-inner-wrapper > .row-inner,
body.tf-page .tf-sechead > .row-inner {
  align-items: baseline;
}

body.tf-page .tf-sechead {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tf-ink);
  margin-bottom: clamp(32px, 4vw, 48px);
}

body.tf-page .tf-sechead--light {
  border-bottom-color: rgba(255, 255, 255, .4);
}

/* --------------------------------------------------------------------------
   4. Section noire (« Trois engagements »)
   -------------------------------------------------------------------------- */

body.tf-page .tf-row--dark {
  background-color: var(--tf-ink) !important;
}

body.tf-page .tf-row--dark .tf-h2,
body.tf-page .tf-row--dark .tf-h2 h2,
body.tf-page .tf-row--dark .tf-h3,
body.tf-page .tf-row--dark .tf-h3 h3 {
  color: #ffffff;
}

body.tf-page .tf-row--dark .tf-body-sm,
body.tf-page .tf-row--dark .tf-body-sm p {
  color: rgba(255, 255, 255, .72);
}

/* Gros numeros orange 01 / 02 / 03. */
body.tf-page .tf-bignum,
body.tf-page .tf-bignum p {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--tf-orange);
  margin: 0;
}

/* Petit numero orange au-dessus des titres de carte. */
body.tf-page .tf-cardnum,
body.tf-page .tf-cardnum p {
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tf-orange);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Chiffres cles de la tetiere
   -------------------------------------------------------------------------- */

body.tf-page .tf-stat,
body.tf-page .tf-stat p {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--tf-ink);
  margin: 0;
}

body.tf-page .tf-stat sup,
body.tf-page .tf-stat .tf-unit {
  font-size: .42em;
  letter-spacing: .06em;
  vertical-align: baseline;
}

body.tf-page .tf-statlabel,
body.tf-page .tf-statlabel p {
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tf-muted);
  margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

body.tf-page .tf-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.tf-page a.tf-btn,
body.tf-page .tf-btn > a,
body.tf-page .tf-btn .btn {
  display: inline-flex !important;
  align-items: center;
  gap: .65em;
  height: 48px;
  padding: 0 28px;
  border-radius: 0;
  background: var(--tf-orange);
  border: 1px solid var(--tf-orange);
  color: #ffffff;
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body.tf-page a.tf-btn:hover,
body.tf-page .tf-btn > a:hover,
body.tf-page .tf-btn .btn:hover {
  background: var(--tf-ink);
  border-color: var(--tf-ink);
  color: #ffffff;
}

/* Variante contour noir (Portail pro / Me connecter). */
body.tf-page a.tf-btn--ghost,
body.tf-page .tf-btn--ghost > a {
  background: transparent;
  border: 1px solid var(--tf-ink);
  color: var(--tf-ink);
}

body.tf-page a.tf-btn--ghost:hover,
body.tf-page .tf-btn--ghost > a:hover {
  background: var(--tf-ink);
  color: #ffffff;
}

/* Numero de telephone du charge de compte. */
body.tf-page .tf-phone,
body.tf-page .tf-phone p {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 8px 0 0;
}

body.tf-page .tf-phone a {
  color: var(--tf-ink);
  text-decoration: none;
}

body.tf-page .tf-phone a:hover {
  color: var(--tf-orange);
}

/* --------------------------------------------------------------------------
   7. Medias
   -------------------------------------------------------------------------- */

/* Vignettes carrees des trois metiers. */
body.tf-page .tf-media-1-1 .single-wrapper,
body.tf-page .tf-media-1-1 .tmb,
body.tf-page .tf-media-1-1 .t-inside {
  background-color: var(--tf-media);
}

body.tf-page .tf-media-1-1 img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.tf-page .tf-media-4-3 img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Uncode arrondit les media par defaut : on remet carre. */
body.tf-page .tf-row .tmb .t-inside,
body.tf-page .tf-row .tmb img {
  border-radius: 0 !important;
}

/* Legende sous la photo d'equipe. */
body.tf-page .tf-caption,
body.tf-page .tf-caption p {
  margin-top: 8px;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tf-muted);
}

/* Bandeau de logos clients. */
body.tf-page .tf-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(14px, 2.4vw, 36px);
  row-gap: 24px;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

/* La feuille par defaut du navigateur pose list-style-type:disc sur le li
   lui-meme : une declaration directe bat la valeur heritee du ul, il faut donc
   remettre la regle ici. ::marker couvre les moteurs qui la dessinent a part. */
body.tf-page .tf-logos li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.tf-page .tf-logos li::marker,
body.tf-page .tf-logos li::before {
  content: none;
}

body.tf-page .tf-logos img {
  width: 100%;
  height: clamp(28px, 3.4vw, 48px);
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Chaque logo a sa propre hauteur optique. */
body.tf-page .tf-logos img[data-logo="rca"]      { height: clamp(20px, 2.4vw, 30px); }
body.tf-page .tf-logos img[data-logo="nobilito"] { height: clamp(22px, 2.8vw, 34px); }
body.tf-page .tf-logos img[data-logo="idea"]     { height: clamp(28px, 3.4vw, 42px); }
body.tf-page .tf-logos img[data-logo="asi"]      { height: clamp(34px, 4.2vw, 50px); }
body.tf-page .tf-logos img[data-logo="ij"]       { height: clamp(38px, 4.6vw, 56px); }
body.tf-page .tf-logos img[data-logo="stade"]    { height: clamp(42px, 5.2vw, 62px); }

@media (max-width: 767px) {
  body.tf-page .tf-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Pictogrammes traits de la section « D'ici, pour d'ici ». */
body.tf-page .tf-picto {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.tf-page .tf-picto svg {
  width: clamp(120px, 16vw, 190px);
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   8. Listes cle / valeur (Fiche pratique, coordonnees)
   -------------------------------------------------------------------------- */

body.tf-page .tf-kv {
  width: 100%;
  border-collapse: collapse;
  box-shadow: inset 0 1px 0 var(--tf-ink);
  margin: 0;
}

body.tf-page .tf-kv tr {
  box-shadow: inset 0 -1px 0 var(--tf-rule);
}

body.tf-page .tf-kv th,
body.tf-page .tf-kv td {
  border: 0;
  padding: 12px 0;
  vertical-align: baseline;
  background: transparent;
}

body.tf-page .tf-kv th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tf-muted);
}

body.tf-page .tf-kv td {
  text-align: right;
  font-weight: 500;
  font-size: .92rem;
  line-height: 24px;
  color: var(--tf-ink);
  padding-left: 16px;
}

/* --------------------------------------------------------------------------
   10. Bloc d'appel a l'action de fin de section
   -------------------------------------------------------------------------- */

body.tf-page .tf-cta {
  padding-top: 32px;
  border-top: 1px solid var(--tf-ink);
}

body.tf-page .tf-cta .tf-cta__text,
body.tf-page .tf-cta .tf-cta__text p {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  max-width: 34ch;
  color: var(--tf-ink);
}

/* --------------------------------------------------------------------------
   11. Blocs composes (classes posees par build.py)
   -------------------------------------------------------------------------- */

/* Bloc « Charge de compte » : filet au-dessus. */
body.tf-page .tf-contactblock {
  padding-top: 16px;
  border-top: 1px solid var(--tf-rule);
}

/* Rangee des quatre chiffres cles. */
body.tf-page .tf-stats {
  padding-top: 24px;
  border-top: 1px solid var(--tf-rule);
  margin-top: clamp(32px, 4vw, 48px);
}

/* Bouton d'appel a l'action aligne a droite dans les blocs CTA. */
body.tf-page .tf-btns-wrap--right .tf-btns {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  body.tf-page .tf-btns-wrap--right .tf-btns {
    justify-content: flex-start;
  }
}

/* Photo d'equipe : occupe toute la hauteur de la colonne. */
body.tf-page .tf-media-team img {
  width: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}

/* Bloc clients centre. Uncode pose text-align:left sur .uncont, plus bas dans
   l'arbre : centrer la ligne seule ne suffit pas, il faut viser ses conteneurs. */
body.tf-page .tf-clients,
body.tf-page .tf-clients .uncont,
body.tf-page .tf-clients .uncode_text_column {
  text-align: center;
}

body.tf-page .tf-clients .tf-lede-sm,
body.tf-page .tf-clients .tf-lede-sm p {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

body.tf-page .tf-clients .tf-label {
  margin-bottom: 24px;
}

/* Le tableau cle/valeur ne doit pas heriter des styles de tableau du theme. */
body.tf-page .tf-kv-wrap table {
  margin: 0;
  border: 0;
}

body.tf-page .tf-kv-wrap td a {
  color: var(--tf-ink);
  text-decoration: none;
}

body.tf-page .tf-kv-wrap td a:hover {
  color: var(--tf-orange);
}

/* --------------------------------------------------------------------------
   12. Popup « Être recontacté » (Popup Maker + Contact Form 7)
   -------------------------------------------------------------------------- */

/* Les couleurs du popup viennent du thème Popup Maker « Tanat — Filiale », pose
   par installer.php : rien a surcharger ici. On ne s'occupe que du titre et des
   champs du formulaire, que le theme ne couvre pas.

   Le popup « Login Portail Pro » n'a aucune condition et se charge donc lui
   aussi sur cette page : on cible via :has() le seul popup qui porte notre
   formulaire, pour ne pas deteindre dessus. Si :has() n'etait pas supporte, la
   regle saute sans casser la lisibilite — c'est le theme qui tient les
   couleurs. */
.pum-overlay:has(.tanat-contact) .pum-title {
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #000000;
  font-family: 'Futura PT', 'Jost', 'Century Gothic', -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pum-container .tanat-contact {
  font-family: 'Futura PT', 'Jost', 'Century Gothic', -apple-system, sans-serif;
  color: #000000;
}

.pum-container .tanat-contact .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
}

.pum-container .tanat-contact .fld.full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .pum-container .tanat-contact .form-grid {
    grid-template-columns: 1fr;
  }
}

.pum-container .tanat-contact .lbl {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .6);
}

.pum-container .tanat-contact .lbl .opt {
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(0, 0, 0, .4);
}

/* Champs : bord fin, angles droits, pas d'ombre — comme le reste de la page. */
.pum-container .tanat-contact input[type="text"],
.pum-container .tanat-contact input[type="email"],
.pum-container .tanat-contact input[type="tel"],
.pum-container .tanat-contact select,
.pum-container .tanat-contact textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  font-family: inherit;
  font-size: .95rem;
  line-height: 42px;
  color: #000000;
  transition: border-color .15s ease;
}

.pum-container .tanat-contact textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 22px;
  resize: vertical;
}

.pum-container .tanat-contact input:focus,
.pum-container .tanat-contact select:focus,
.pum-container .tanat-contact textarea:focus {
  outline: none;
  border-color: #f65f35;
}

.pum-container .tanat-contact ::placeholder {
  color: rgba(0, 0, 0, .35);
}

.pum-container .tanat-contact .submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .16);
}

.pum-container .tanat-contact .btn-submit,
.pum-container .tanat-contact input[type="submit"] {
  height: 48px;
  padding: 0 28px;
  border: 1px solid #f65f35;
  border-radius: 0;
  background: #f65f35;
  color: #ffffff;
  font-family: inherit;
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.pum-container .tanat-contact .btn-submit:hover,
.pum-container .tanat-contact input[type="submit"]:hover {
  background: #000000;
  border-color: #000000;
}

/* Messages de Contact Form 7 : mêmes angles droits que le reste. */
.pum-container .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 0;
  font-size: .9rem;
  line-height: 22px;
}

.pum-container .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: .78rem;
  color: #d63638;
}

.pum-container .tanat-contact .wpcf7-spinner {
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. Ajustements mobiles
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.tf-page .tf-secnum,
  body.tf-page .tf-secnum p {
    text-align: left;
  }

  body.tf-page .tf-sechead {
    margin-bottom: 32px;
  }
}