/*
Theme Name: Autobike Child
Theme URI: https://autobike.templaza.net/
Description: A child theme of Autobike
Author: TemPlaza Team
Author URI: https://www.templaza.com
Version: 1.1.3
Text Domain: autobike
Template: autobike
*/

header .templaza-divi-logo-wrap .templaza-logo-image {
    max-width: 230px !important; 
}






/* ============================================================
   BLOC "AT A GLANCE" — Carte résumé du profil
   Préfixe .tr- pour éviter tout conflit avec le thème parent
   ============================================================ */

/* --- La carte : fond blanc cassé, coins arrondis, ombre légère --- */
.tr-glance{
  position: relative;               /* nécessaire pour le liseré pointillé interne (::after) */
  background: #FDFCF9;              /* blanc cassé "lin" */
  border: 1px solid rgba(31,44,70,.12);
  border-radius: 14px;
  padding: 34px;
  max-width: 560px;                 /* largeur max de la carte, à ajuster selon la colonne */
  font-family: 'Public Sans', Arial, sans-serif;
}

/* --- Liseré pointillé décoratif à l'intérieur (effet "couture") --- */
.tr-glance::after{
  content: "";
  position: absolute;
  inset: 9px;                       /* 9px de marge par rapport aux bords de la carte */
  border-radius: 9px;
  border: 1.5px dashed rgba(31,44,70,.22);
  pointer-events: none;             /* le liseré ne bloque ni clics ni sélection */
}

/* --- Titre de la carte --- */
.tr-glance-title{
  font-family: 'Bricolage Grotesque', Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1F2C46;                   /* indigo denim */
  margin: 0 0 18px;
}

/* --- Liste : on neutralise les puces et marges de WordPress --- */
.tr-glance-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Chaque ligne : étiquette + valeur, séparées par un filet fin --- */
.tr-glance-list li{
  display: flex;                    /* étiquette et valeur côte à côte */
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31,44,70,.08);
  font-size: 15px;
  line-height: 1.55;
  color: #23272E;
}

/* --- Pas de filet sous la dernière ligne --- */
.tr-glance-list li:last-child{
  border-bottom: 0;
}

/* --- L'étiquette (PROFESSION, EXPERIENCE...) : rouge, mono, majuscules --- */
.tr-glance-list li b{
  min-width: 118px;                 /* aligne toutes les valeurs sur la même colonne */
  flex-shrink: 0;                   /* l'étiquette ne se compresse jamais */
  font-family: 'Spline Sans Mono', 'Courier New', monospace;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B3272D;                   /* rouge garance */
  padding-top: 3px;                 /* aligne optiquement avec la 1re ligne de la valeur */
}

/* --- Mobile : étiquette au-dessus de la valeur --- */
@media (max-width: 480px){
  .tr-glance{ padding: 24px; }
  .tr-glance-list li{
    flex-direction: column;         /* on empile au lieu de mettre côte à côte */
    gap: 2px;
  }
  .tr-glance-list li b{ min-width: 0; }
}










/* ============================================================
   BANDEAU STATISTIQUES — préfixe "tr-" pour éviter tout
   conflit avec les classes du thème ou d'Elementor
   ============================================================ */

/* Import des polices (chiffres + libellés).
   Si ton thème charge déjà des polices via functions.php,
   tu peux supprimer cette ligne et adapter les font-family. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Spline+Sans+Mono:wght@500&display=swap');

/* ---------- Variables : change les couleurs ici ---------- */
:root{
  --tr-stats-bg:    #1F2C46;              /* fond bleu marine */
  --tr-stats-gold:  #C98F2D;              /* le "+" doré */
  --tr-stats-label: #B9C3D6;              /* libellés gris-bleu */
  --tr-stitch:      rgba(242,239,231,.5); /* pointillé couture */
}

/* ---------- Le bandeau ---------- */
.tr-stats-band{
  background: var(--tr-stats-bg);
  padding: 54px 24px;
  position: relative; /* nécessaire pour les coutures ::before/::after */
}

/* ---------- Effet "point de couture" haut et bas ----------
   Dégradé répété : 55% de trait, 45% de vide = tiret.
   background-size 12px = espacement des points. */
.tr-stats-band::before,
.tr-stats-band::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background-image: linear-gradient(90deg, var(--tr-stitch) 55%, transparent 55%);
  background-size: 12px 2px;
  background-repeat: repeat-x;
}
.tr-stats-band::before{ top: 10px; }    /* couture du haut */
.tr-stats-band::after{  bottom: 10px; } /* couture du bas  */

/* ---------- Grille : 4 colonnes desktop ---------- */
.tr-stats-grid{
  max-width: 1180px;          /* largeur max du contenu, centré */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

/* ---------- Le chiffre ----------
   clamp() = taille fluide : min 34px / idéale 4vw / max 48px */
.tr-stat-number{
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
  color: #fff;
}

/* Le "+" doré (balise <em> dans le chiffre) */
.tr-stat-number em{
  font-style: normal; /* retire l'italique par défaut */
  color: var(--tr-stats-gold);
}

/* ---------- Le libellé (style étiquette machine) ---------- */
.tr-stat-label{
  font-family: 'Spline Sans Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-stats-label);
}

/* ---------- Responsive ---------- */
/* Tablette : 2 colonnes (2x2) */
@media (max-width: 960px){
  .tr-stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
}
/* Petit mobile : 1 colonne empilée (optionnel, supprime si tu préfères 2x2) */
@media (max-width: 380px){
  .tr-stats-grid{ grid-template-columns: 1fr; }
}




/* ============================================================
   TIMELINE EXPÉRIENCE — préfixe "tr-" (zéro conflit thème/Elementor)
   Réutilise les mêmes variables que le bandeau stats si déjà
   présentes ; sinon les voici (ne pas dupliquer :root si déjà là)
   ============================================================ */
:root{
  --tr-indigo:  #1F2C46;  /* titres bleu marine */
  --tr-denim:   #44557A;  /* sous-titres */
  --tr-garance: #B3272D;  /* rouge : fil, points, tirets */
  --tr-gold:    #C98F2D;  /* dates dorées */
  --tr-grey:    #3d4553;  /* texte courant */
}

/* ---------- Conteneur de section ---------- */
.tr-timeline-section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* ---------- Eyebrow (petit label "EXPERIENCE") ----------
   Le tiret pointillé devant est un dégradé répété (comme
   les coutures du bandeau stats) placé en ::before */
.tr-eyebrow{
  font-family: 'Spline Sans Mono', monospace;
  font-size: 18px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff222c;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tr-eyebrow::before{
  content: "";
  width: 34px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--tr-garance) 55%, transparent 55%);
  background-size: 9px 2px;
  background-repeat: repeat-x;
}

/* ---------- Titre de section ---------- */
.tr-timeline-title{
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px); /* taille fluide responsive */
  line-height: 1.08;
/*  color: var(--tr-indigo);  */
  margin: 14px 0 18px;
}

/* ============================================================
   LA FRISE
   Le "fil" vertical pointillé rouge = ::before du conteneur
   (dégradé vertical répété : 55% trait / 45% vide)
   ============================================================ */
.tr-timeline{
  position: relative;   /* référence pour le fil et les points */
  margin-top: 52px;
}
.tr-timeline::before{
  content: "";
  position: absolute;
  left: 19px;           /* aligné avec le centre des points */
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-image: linear-gradient(180deg, var(--tr-garance) 55%, transparent 55%);
  background-size: 2px 12px;   /* 12px = espacement des points du fil */
  background-repeat: repeat-y;
}

/* ---------- Un élément de la frise ---------- */
.tr-tl-item{
  position: relative;
  padding: 0 0 44px 66px;  /* 66px = place pour le point + le fil */
}
.tr-tl-item:last-child{ padding-bottom: 0; }

/* ---------- Le point (cercle rouge avec centre plein) ---------- */
.tr-tl-dot{
  position: absolute;
  left: 8px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F2EFE7;              /* même couleur que le fond de page */
  border: 2px solid var(--tr-garance);
  display: grid;
  place-items: center;
}
.tr-tl-dot::after{                  /* le centre plein */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tr-garance);
}

/* ---------- Date dorée ---------- */
.tr-tl-date{
  font-family: 'Spline Sans Mono', monospace;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffad22;
}

/* ---------- Titre du poste ---------- */
.tr-tl-item h3{
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
/*  color: var(--tr-indigo);  */
  margin: 6px 0 2px;
}

/* ---------- Sous-titre (entreprise · lieu) ---------- */
.tr-tl-item h4{
  font-size: 18px;
  font-weight: 600;
/*  color: var(--tr-denim); */
  margin: 0 0 12px;
}

/* ---------- Liste des missions ----------
   On retire les puces natives et on dessine un petit
   tiret rouge en ::before de chaque <li> */
.tr-tl-item ul{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
}
.tr-tl-item li{
  position: relative;
  padding: 4px 0 4px 22px;   /* 22px = place pour le tiret */
  font-size: 15px;
  line-height: 1.65;
  color: #f7f7f7;
}
.tr-tl-item li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;                 /* centré sur la 1re ligne de texte */
  width: 12px;
  height: 2px;
  background: var(--tr-garance);
}

/* ---------- Responsive mobile ---------- */
@media (max-width: 640px){
  .tr-tl-item{ padding-left: 52px; }      /* on resserre la marge */
  .tr-tl-item h3{ font-size: 19px; }
  .tr-timeline{ margin-top: 36px; }
}











/* ============================================================
   SECTION FAQ — accordéon natif <details>/<summary>, zéro JS
   Réutilise les variables --tr-* déjà déclarées (stats/timeline)
   ============================================================ */

.tr-faq-section{
  max-width: 880px;        /* colonne plus étroite = meilleure lisibilité */
  margin: 0 auto;
  padding: 20px 24px;
}

/* ---------- Titre H2 (SEO) ---------- */
.tr-faq-title{
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  color: var(--tr-indigo);
  margin: 14px 0 12px;
}

/* ---------- Sous-titre ---------- */
.tr-faq-subtitle{
  font-size: 16px;
  line-height: 1.65;
  color: var(--tr-grey);
  max-width: 640px;
  margin: 0 0 40px;
}

/* ---------- Un item de la FAQ ---------- */
.tr-faq-item{
  background: #FDFCF9;                      /* blanc cassé */
  border: 1px solid rgba(31,44,70,.12);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;                          /* arrondi propre à l'ouverture */
  transition: border-color .2s;
}
.tr-faq-item[open]{
  border-color: rgba(179,39,45,.45);        /* liseré garance quand ouvert */
}

/* ---------- La question (summary) ---------- */
.tr-faq-item summary{
  cursor: pointer;
  list-style: none;                          /* retire le triangle natif */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--tr-indigo);
  transition: color .2s;
}
.tr-faq-item summary::-webkit-details-marker{ display: none; } /* Safari */
.tr-faq-item summary:hover{ color: var(--tr-garance); }

/* ---------- Le "+" qui devient "–" à l'ouverture ----------
   Dessiné en ::after, pivote à 45° quand le details est ouvert */
.tr-faq-item summary::after{
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(179,39,45,.09);          /* pastille rose pâle */
  color: var(--tr-garance);
  font-size: 18px;
  font-weight: 400;
  display: grid;
  place-items: center;
  transition: transform .25s;
}
.tr-faq-item[open] summary::after{
  transform: rotate(45deg);                  /* + pivoté = × (effet fermer) */
}

/* ---------- La réponse ---------- */
.tr-faq-answer{
  padding: 0 22px 20px;
  border-top: 1px dashed rgba(31,44,70,.18); /* couture de séparation */
}
.tr-faq-answer p{
  font-size: 15px;
  line-height: 1.7;
  color: var(--tr-grey);
  margin: 14px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .tr-faq-item summary{ font-size: 15.5px; padding: 15px 16px; }
  .tr-faq-answer{ padding: 0 16px 16px; }
}









































/*  */