@import "https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css";

#ftc-root{
  /* fallback uniquement */
  /*--ftc-accent: var(--pix-secondary, #c82b43);*/

  --ftc-border: rgba(0,0,0,.14);
  --ftc-border2: rgba(0,0,0,.12);
  --ftc-shadow: 0 10px 26px rgba(0,0,0,.08);
  --ftc-shadow2: 0 14px 34px rgba(0,0,0,.10);
}

#ftc-root .ftc-stale{ display:none !important; }

/* wrap */
#ftc-root .ftc-wrap{
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 0 0;
}

/* -------- Search -------- */
#ftc-root .ftc-topRow{
  display:flex;
  justify-content:center;
  margin-bottom: 22px;
}
#ftc-root .ftc-searchRow{
  position:relative;
  width:min(980px,100%);
}
#ftc-root .ftc-search{
  width:100%;
  height:52px;
  border-radius:999px;
  border:1px solid var(--ftc-border);
  background:#fff;
  padding:0 56px 0 58px;
  font-size:18px;
  outline:none;
}
#ftc-root .ftc-search:focus{
  outline:none;
  box-shadow:none;
}

/* loupe */
#ftc-root .ftc-searchRow::before{
  content:"";
  position:absolute;
  left:18px; top:50%;
  transform:translateY(-50%);
  width:22px; height:22px;
  opacity:.45;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18Zm0-2a6 6 0 1 0-4.243-10.243A6 6 0 0 0 10 16Zm10.707 5.293-5.4-5.4 1.414-1.414 5.4 5.4-1.414 1.414Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18Zm0-2a6 6 0 1 0-4.243-10.243A6 6 0 0 0 10 16Zm10.707 5.293-5.4-5.4 1.414-1.414 5.4 5.4-1.414 1.414Z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* clear (on ne force pas la couleur -> laisse text-secondary faire) */
#ftc-root .ftc-clear{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  border-radius:999px;
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
}
#ftc-root .ftc-clear:hover{ background: rgba(0,0,0,.06); }

/* -------- Label maturité -------- */
#ftc-root .ftc-phaseLabel{
  width: min(980px, 100%);
  margin: 0 auto 14px;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

/* si tu utilises .accent au lieu de text-secondary */
#ftc-root .ftc-phaseLabel .accent{
  color: var(--ftc-accent);
}

/* -------- Phases -------- */
#ftc-root .ftc-phases{
  width:min(980px,100%);
  margin: 0 auto 64px;   /* plus d’air avant cards */
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
@media (min-width:768px){
  #ftc-root .ftc-phases{
    flex-direction:row;
    justify-content:center;
    gap:26px;
  }
}

/* boutons moins larges, couleur texte = thème */
#ftc-root .ftc-phase-btn{
  width:min(360px,100%);
  height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color: inherit;
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease;
}
#ftc-root .ftc-phase-btn:hover{
  background: rgba(0,0,0,.04);
}

/* actif: fond = pix-secondary, texte blanc */
#ftc-root .ftc-phase-btn.is-active{
  background: var(--pix-secondary);
  border-color: transparent;
  color:#fff;
}

/* supprime bord noir focus */
#ftc-root .ftc-phase-btn,
#ftc-root .ftc-clear{
  outline:none;
  box-shadow:none;
}
#ftc-root .ftc-phase-btn:focus,
#ftc-root .ftc-phase-btn:focus-visible,
#ftc-root .ftc-phase-btn:active{
  outline:none !important;
  box-shadow:none !important;
}

/* radio dot */
#ftc-root .ftc-radio{
  width:18px; height:18px;
  border-radius:999px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
  border:1px solid rgba(0,0,0,.18);
}
#ftc-root .ftc-radio::after{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.65);
  opacity:0;
  transition: opacity .15s ease;
}
#ftc-root .ftc-phase-btn.is-active .ftc-radio{ border-color: transparent; }
#ftc-root .ftc-phase-btn.is-active .ftc-radio::after{ background:#fff; opacity:1; }

/* -------- Grid -------- */
#ftc-root .ftc-grid-3{
  display:grid;
  grid-template-columns: 1fr;
  row-gap:54px;
  column-gap:44px;
}
@media (min-width:1024px){
  #ftc-root .ftc-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:1023px){
  #ftc-root .ftc-grid-3{
    row-gap:40px;
    column-gap:28px;
  }
}

/* -------- Cards : rien -------- */
#ftc-root .ftc-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
}

#ftc-root .ftc-cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
#ftc-root .ftc-cardTitleRow{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

/* IMPORTANT: on ne force pas la couleur -> text-secondary peut s'appliquer */
#ftc-root .ftc-themeIcon{
  font-size:22px;
  line-height:1;
  margin-top:2px;
}

#ftc-root .ftc-cardTitle{
  margin:0;
  font-size:22px;
  font-weight:800;
  line-height:1.05;
  color: inherit;
}

/* -------- Domain tiles (oui: carte) -------- */
#ftc-root .ftc-domain{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--ftc-border2);
  border-radius:5px;
  background:#fff;
  cursor:pointer;
  transition: background .15s ease;
  margin-top:14px;
}
#ftc-root .ftc-domain:first-child{ margin-top:0; }
#ftc-root .ftc-domain:hover{ background: rgba(0,0,0,.02); }

/* flèche: on ne force pas -> mets class text-secondary dans le JS */
#ftc-root .ftc-domain > div:first-child{
  font-weight:900;
  line-height:1;
  margin-top:1px;
}

#ftc-root .ftc-domain-title{
  margin:0;
  font-size:14px;
  font-weight:500;
  line-height:1.25;
  color: inherit;
}

/* -------- Footer link -------- */
/* ne force pas la couleur -> mets class text-secondary dans le JS */
#ftc-root .ftc-cardFooter{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}
#ftc-root .ftc-allLink{
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#ftc-root .ftc-allLink:hover{ text-decoration: underline; }
#ftc-root .ftc-allLink::after{
  content:"\2192";
  font-weight:900;
  line-height:1;
}

/* No results */
#ftc-root .ftc-noresults{
  text-align:center;
  margin:46px 0 30px;
}
#ftc-root .ftc-noresults .t1{
  font-size:32px;
  font-weight:800;
}
#ftc-root .ftc-noresults .t2{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  color: inherit;
}

/* Companies / Experts cards */
#ftc-root .ftc-logos,
#ftc-root .ftc-experts{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
#ftc-root .ftc-org,
#ftc-root .ftc-expert{ width:170px; }

#ftc-root .ftc-org a,
#ftc-root .ftc-expert a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow: var(--ftc-shadow);
  transition: box-shadow .2s ease;
  color: inherit;
}
#ftc-root .ftc-org a:hover,
#ftc-root .ftc-expert a:hover{ box-shadow: var(--ftc-shadow2); }

#ftc-root .ftc-org img{
  width:120px; height:120px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
}
#ftc-root .ftc-expert img{
  width:120px; height:120px;
  object-fit:cover;
  background:#fff;
  border-radius:999px;
}

#ftc-root .ftc-lbl{
  text-align:center;
  font-weight:600;
  font-size:13px;
  color: inherit;
  word-break: break-word;
}

/* 1) Search: texte saisi + placeholder plus petits */
#ftc-root .ftc-search{
  font-size: 16px !important;
}
#ftc-root .ftc-search::placeholder{
  font-size: 16px !important;
}

/* 2) Label maturité: plus petit / moins gras */
#ftc-root .ftc-phaseLabel{
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 3) Boutons: contour pix-secondary + hover pix-secondary */
#ftc-root .ftc-phase-btn{
  border-color: var(--pix-secondary) !important;
}
#ftc-root .ftc-phase-btn:hover{
  background: var(--pix-secondary) !important;
  color: #fff !important;
}
#ftc-root .ftc-phase-btn:hover .ftc-radio::after{
  opacity: 1;              /* optionnel: dot visible au hover */
  background: #fff;
}
#ftc-root .ftc-phase-btn:hover .ftc-radio{
  border-color: transparent;
}

/* 4) Icons: si tu les as “perdus”, c’est souvent la taille/couleur.
      On force juste la taille, la couleur reste via text-secondary */
#ftc-root .ftc-themeIcon{
  display: inline-block !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* 5) Flèches: pas bold */
#ftc-root .ftc-domain > div:first-child{
  font-weight: 400 !important;
}

/* 6) Hover des domains: gris très clair (pas transparent) */
#ftc-root .ftc-domain:hover{
  background: rgba(0,0,0,.03) !important;
}

/* 7) Titres sections: 32px weight 700 */
#ftc-root .ftc-title{
  font-size: 32px !important;
  font-weight: 700 !important;
}

/* Espaces entre sections (Experts métiers / Services publics / Experts) */
#ftc-root .ftc-section{
  margin-top: 64px !important;   /* espace avant chaque section */
}

#ftc-root .ftc-title{
  margin-bottom: 18px !important; /* espace entre titre et liste */
  margin-top: 18px !important;
}

/* Si tu veux encore + d’air juste après la grille des thématiques */
#ftc-root .ftc-grid-3{
  margin-bottom: 72px !important;
}

/* Boutons maturité: transparents + moins longs */
#ftc-root .ftc-phase-btn{
  background: transparent !important;
  width: min(300px, 100%) !important;   /* moins long */
}

/* Desktop: encore un peu plus court */
@media (min-width:768px){
  #ftc-root .ftc-phase-btn{
    width: 280px !important;
  }
}

/* Hover = pix-secondary */
#ftc-root .ftc-phase-btn:hover{
  background: var(--pix-secondary) !important;
  color: #fff !important;
}

/* Actif = pix-secondary */
#ftc-root .ftc-phase-btn.is-active{
  background: var(--pix-secondary) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Boutons encore moins longs + plus espacés */
#ftc-root .ftc-phases{
  gap: 18px !important;           /* mobile */
}

@media (min-width:768px){
  #ftc-root .ftc-phases{
    gap: 36px !important;         /* desktop: plus espacé */
  }
  #ftc-root .ftc-phase-btn{
    width: 240px !important;      /* encore moins long */
  }
}

/* mobile un peu plus court aussi */
#ftc-root .ftc-phase-btn{
  width: min(260px, 100%) !important;
}
/* HOME — noms (domaines / entreprises / experts / thématiques) en pix-gray-9 */
#ftc-root .ftc-cardTitle,
#ftc-root .ftc-domain-title,
#ftc-root .ftc-lbl{
  color: var(--pix-gray-9) !important;
}
#ftc-root .ftc-title{
  color: var(--pix-gray-9) !important;
}