/* =====================================================================
   DealFabric — Onglets « Par typologie d equipe »
   =====================================================================
   Source : Refonte/Pages/Accueil/accueil-navy-1-accent-blanc.html,
   module « duo » : une liste de typologies a gauche, le volet
   correspondant a droite, texte et visuel.

   LE MODULE S ASSEMBLE TOUT SEUL. Dans le builder on ne pose que des
   colonnes ordinaires :

     Color Section   df df-sec df-gradient df-gradient-coin df-onglets
       Colonne 1/1   df-head             <- sur-titre + titre
       Colonne 1/1   df-onglets__volet   <- Bloc de texte + Image
       Colonne 1/1   df-onglets__volet
       Colonne 1/1   df-onglets__volet
       Colonne 1/1   df-onglets__volet

   dealfabric-ds/js/df-onglets.js lit le <h3> de chaque volet, en fait
   le libelle d un bouton, range les volets dans un cadre et gere la
   bascule. Ajouter une typologie, c est ajouter une colonne : ni
   classe supplementaire, ni retouche ici.

   Sans JavaScript les volets restent empiles les uns sous les autres.
   Le contenu reste lisible, seule la bascule disparait.

   Pourquoi pas l element Onglets d Enfold : il n offre aucun champ
   « Custom CSS Class », et il pose ses panneaux en position:absolute
   avec une min-height ecrite en ligne par son script. Il aurait fallu
   defaire tout cela avant de commencer a habiller.
   ===================================================================== */

#top .df-onglets{
  --df-ong-nav:    320px;                      /* largeur de la colonne de gauche */
  --df-ong-bord:   rgba(255,255,255,.2);
  --df-ong-fond:   rgba(12,30,52,.4);
  --df-ong-texte:  rgba(255,255,255,.72);      /* libelle au repos */
  --df-ong-prose:  rgba(255,255,255,.82);      /* texte du volet */
}

/* ---------------------------------------------------------------
   Le cadre, cree par le script
   ---------------------------------------------------------------
   clear:both n est pas decoratif. Les colonnes d Enfold sont des
   flottants (« div .flex_column{float:left;width:100%} », grid.css) ;
   le chapeau qui precede en est un. Un conteneur qui etablit son
   propre contexte de formatage se place A COTE d un flottant et non
   en dessous : sans clear, le cadre partait se loger sous le titre.
   --------------------------------------------------------------- */
#top .df-onglets .df-onglets__cadre{
  clear:both;
  display:grid;
  grid-template-columns:var(--df-ong-nav) 1fr;
  margin-top:44px;
  border:1px solid var(--df-ong-bord);
  border-radius:22px;
  overflow:hidden;
  background:var(--df-ong-fond);
  backdrop-filter:blur(12px);
}

/* ---------- La colonne des typologies ---------- */
#top .df-onglets .df-onglets__nav{
  border-right:1px solid var(--df-ong-bord);
  padding:14px;
}
#top .df-onglets .df-onglets__nav button{
  display:block;
  width:100%;
  padding:17px 18px;
  border:1px solid transparent;
  border-radius:12px;
  background:none;
  font-family:inherit;
  font-size:15px;
  line-height:1.35;
  text-align:left;
  color:var(--df-ong-texte);
  cursor:pointer;
  transition:background .18s, color .18s;
}
#top .df-onglets .df-onglets__nav button:hover{
  background:rgba(255,255,255,.1);
  color:#FFFFFF;
}
/* Le libelle actif : pastille blanche, texte marine. --df-ink-fixed
   et non --df-ink : dans une section df-gradient, --df-ink vaut
   deja #FFFFFF, on aurait ecrit blanc sur blanc. */
#top .df-onglets .df-onglets__nav button.df-is-on{
  background:#FFFFFF;
  color:var(--df-ink-fixed);
  font-weight:500;
}

/* ---------------------------------------------------------------
   Les volets
   ---------------------------------------------------------------
   Tous empiles dans la meme cellule : la hauteur du cadre vaut celle
   du plus grand et ne bouge plus d une typologie a l autre. Meme
   mecanique que les volets du mega-menu.

   visibility et non display : un volet cache garde sa place dans le
   calcul de la grille — c est tout l interet — mais il sort de l
   ordre de tabulation et de l arbre d accessibilite.
   --------------------------------------------------------------- */
#top .df-onglets .df-onglets__corps{ display:grid; }

#top .df-onglets .flex_column.df-onglets__volet{
  grid-area:1 / 1;
  visibility:hidden;
  /* Ce sont des colonnes Enfold : flottement et largeur a defaire. */
  float:none;
  width:auto;
  margin:0;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
  padding:38px 40px;
}
#top .df-onglets .flex_column.df-onglets__volet.df-is-on{
  visibility:visible;
  animation:df-onglets-entree .34s var(--df-ease);
}
@keyframes df-onglets-entree{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}

/* grid.css pose « content:'\0020' » sur ::before ET ::after de toute
   .flex_column. Inoffensif tant que la colonne est un bloc, deux
   cellules de grille parasites des qu elle passe en display:grid. */
#top .df-onglets .flex_column.df-onglets__volet::before,
#top .df-onglets .flex_column.df-onglets__volet::after{ display:none; }

/* Le Bloc de texte et l Image sont les deux cellules du volet. */
#top .df-onglets .df-onglets__volet .av_textblock_section{ margin:0; }
#top .df-onglets .df-onglets__volet h3{
  margin:0;
  font-size:24px;
  line-height:1.2;
  color:#FFFFFF;
}
#top .df-onglets .df-onglets__volet p{
  margin:14px 0 0;
  font-size:16.5px;
  color:var(--df-ong-prose);
}
#top .df-onglets .df-onglets__volet .df-link-go{
  margin-top:20px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.4);
  font-size:14.5px;
  color:#FFFFFF;
}

#top .df-onglets .df-onglets__volet .avia-image-container{
  margin:0;
  display:grid;
  place-items:center;
}

/* L ancienne image restait affichee 0,7 s par-dessus la nouvelle, les
   deux se superposant le temps du fondu.
   ------------------------------------------------------------
   La cause est dans Enfold, image.css ligne 65 :

     .avia-image-container .avia_image,
     .avia-image-container .avia-image-overlay-wrap{ transition: all 0.7s; }

   « all » comprend visibility, qui est une propriete transitionnable.
   Quand le volet passe en visibility:hidden, l image en herite — mais
   avec 0,7 s de retard, car visibility s interpole par paliers : elle
   garde sa valeur de depart pendant toute la duree et ne bascule qu a
   la fin. D ou le fantome.

   On coupe la transition sur les images du module, et seulement
   la : ailleurs sur le site elle sert aux effets de survol. */
#top .df-onglets .df-onglets__volet .avia-image-container .avia_image,
#top .df-onglets .df-onglets__volet .avia-image-container .avia-image-overlay-wrap{
  transition:none;
}
#top .df-onglets .df-onglets__volet .avia-image-container img{
  max-width:82%;
  height:auto;
  filter:drop-shadow(0 22px 48px rgba(0,0,0,.45));
}

/* ---------------------------------------------------------------
   Repli sans JavaScript
   ---------------------------------------------------------------
   Le script ajoute « df-onglets-prets » sur le bloc une fois le
   cadre monte. Tant qu il n est pas passe, les volets restent des
   colonnes ordinaires : rien a masquer, rien a reveler.
   --------------------------------------------------------------- */
#top .df-onglets:not(.df-onglets-prets) .df-onglets__volet{
  visibility:visible;
}

@media (max-width:1000px){
  #top .df-onglets .df-onglets__cadre{ grid-template-columns:1fr; }
  #top .df-onglets .df-onglets__nav{
    border-right:0;
    border-bottom:1px solid var(--df-ong-bord);
  }
  #top .df-onglets .flex_column.df-onglets__volet{
    grid-template-columns:1fr;
    gap:28px;
    padding:30px 26px;
  }
  /* En une seule colonne, 82% de la largeur donnent un objet de
     plus de 280px de haut, qui mange l ecran a lui seul. */
  #top .df-onglets .df-onglets__volet .avia-image-container img{
    max-width:none;
    max-height:220px;
    width:auto;
  }
}


/* =====================================================================
   DealFabric — Jalons « Le déroulé du projet »
   =====================================================================
   Source : Refonte/Audit froideur/1 - Tres froides/02 - Services et
   conseils/02 - services-conseils-v2-deroule-jalons.html

   Meme famille que df-onglets plus haut : un seul panneau ouvert a la
   fois. La difference est la commande — un rail horizontal de cartes a
   anneau, lu de gauche a droite, plutot qu un index vertical. Trois
   ronds sur un trait ne se lisaient pas comme des commandes ; l anneau
   du bouton radio dit a lui seul qu il y a un choix, et qu un seul
   element est affiche.

   LE MODULE S ASSEMBLE TOUT SEUL :

     Color Section  df df-sec df-gradient df-gradient-coin df-jalons
       Colonne 1/1  df-head df-head-left     <- sur-titre + titre
       Colonne 1/3  df-jalons__etape         <- etiquette, titre, liste
       Colonne 1/3  df-jalons__etape
       Colonne 1/3  df-jalons__etape
       Colonne 1/2  df-jalons__suite         <- ce qui suit le deroule
       Colonne 1/2  df-jalons__suite

   df-jalons.js lit l etiquette (df-label) et le <h3> de chaque etape
   pour composer sa pastille, puis range les etapes dans un panneau.
   Ajouter une phase = ajouter une colonne.

   Sans JavaScript les trois etapes restent cote a cote, lisibles.
   ===================================================================== */

#top .df-jalons{
  --df-jal-bord:  rgba(255,255,255,.28);
  --df-jal-fond:  rgba(255,255,255,.07);
  --df-jal-texte: rgba(255,255,255,.78);
}

/* clear:both pour la meme raison que le cadre des onglets : le chapeau
   qui precede est une colonne flottante, et un conteneur qui etablit
   son propre contexte de formatage se placerait A COTE d elle. */
#top .df-jalons .df-jalons__cadre{
  clear:both;
  margin-top:8px;
}

/* ---------- Le rail de pastilles ---------- */
#top .df-jalons .df-jalons__rail{
  display:grid;
  grid-template-columns:repeat(var(--df-jal-n, 3), 1fr);
  gap:40px;
  margin:12px 0 26px;
}
#top .df-jalons .df-jalons__rail button{
  position:relative;
  display:grid;
  grid-template-columns:20px 1fr;
  grid-template-rows:auto auto;
  gap:3px 14px;
  align-items:center;
  width:100%;
  padding:17px 20px 18px;
  border:1px solid var(--df-jal-bord);
  border-radius:14px;
  background:var(--df-jal-fond);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
#top .df-jalons .df-jalons__rail button:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.68);
  transform:translateY(-3px);
}
#top .df-jalons .df-jalons__rail button:focus-visible{
  outline:2px solid var(--df-gold-soft);
  outline-offset:3px;
}

/* Le chevron se loge dans la gouttiere : le parcours se lit de gauche
   a droite sans qu on ait a l ecrire. */
#top .df-jalons .df-jalons__rail button + button::before{
  content:"";
  position:absolute;
  left:-25px;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid rgba(255,255,255,.34);
  border-top:2px solid rgba(255,255,255,.34);
  transform:translateY(-50%) rotate(45deg);
}

/* Anneau vide = jalon disponible ; anneau coche = jalon ouvert. */
#top .df-jalons .df-jalons__rail button i{
  grid-row:1 / 3;
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  transition:box-shadow .22s, background .22s;
}
#top .df-jalons .df-jalons__rail button:hover i{ box-shadow:inset 0 0 0 2px #FFFFFF; }

#top .df-jalons .df-jalons__rail button em{
  font-style:normal;
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  transition:color .22s;
}
#top .df-jalons .df-jalons__rail button span{
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--df-jal-texte);
  transition:color .22s;
}

/* Le jalon ouvert : carte pleine, plus la pointe qui la relie a son
   panneau. Les couleurs sont ecrites en « fixed » parce que la section
   porte df-gradient, qui a deja bascule --df-ink vers le blanc. */
#top .df-jalons .df-jalons__rail button.df-is-on{
  background:#FFFFFF;
  border-color:#FFFFFF;
  transform:none;
  box-shadow:0 14px 30px rgba(4,16,30,.28);
}
#top .df-jalons .df-jalons__rail button.df-is-on i{
  box-shadow:inset 0 0 0 2px var(--df-ink-fixed);
  background:radial-gradient(circle, var(--df-ink-fixed) 0 44%, transparent 45%);
}
#top .df-jalons .df-jalons__rail button.df-is-on em{ color:#8A6C32; }
#top .df-jalons .df-jalons__rail button.df-is-on span{ color:var(--df-ink-fixed); }
#top .df-jalons .df-jalons__rail button.df-is-on::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:16px;
  height:16px;
  background:#FFFFFF;
  border-radius:3px;
  transform:translateX(-50%) rotate(45deg);
}

/* ---------- Le panneau ---------- */
/* Contrairement aux volets du mega-menu, les etapes ne sont PAS
   empilees : le panneau epouse la phase ouverte. Une phase tient en
   quatre lignes, une autre en sept — a hauteur commune, la plus
   courte laissait un grand vide qui se lisait comme un defaut. La
   page bouge donc un peu au changement, et c est le compromis que
   retient la maquette. */
#top .df-jalons .df-jalons__corps{ display:block; }

#top .df-jalons .flex_column.df-jalons__etape{
  display:none;
  float:none;
  width:auto;
  margin:0;
  padding:28px 32px 30px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:18px;
  background:var(--df-jal-fond);
}
#top .df-jalons .flex_column.df-jalons__etape.df-is-on{
  display:block;
  animation:df-jalons-entree .36s var(--df-ease);
}
@keyframes df-jalons-entree{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
/* Meme piege que partout : grid.css pose un contenu sur les deux
   pseudo-elements de toute .flex_column, inoffensif en bloc, deux
   cellules de grille des que la colonne passe en display:grid. */
#top .df-jalons .flex_column.df-jalons__etape::before,
#top .df-jalons .flex_column.df-jalons__etape::after{ display:none; }

/* L etiquette et le titre sont passes dans la pastille : les laisser
   aussi dans le panneau les dirait deux fois. Le script leur pose
   df-jalons-repris plutot que de compter sur l ordre des blocs. */
#top .df-jalons .df-jalons__etape .df-jalons-repris{ display:none; }

#top .df-jalons .df-jalons__etape ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 44px;
  margin:0;
  padding:0;
  list-style:none;
}
#top .df-jalons .df-jalons__etape li{
  margin:0;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:15px;
  list-style:none;
}
#top .df-jalons .df-jalons__etape li::before{ content:none; }
/* Dans un panneau, le filet de la premiere ligne de chaque colonne
   ferait doublon avec le bord. */
#top .df-jalons .df-jalons__etape li:nth-child(1),
#top .df-jalons .df-jalons__etape li:nth-child(2){
  border-top:0;
  padding-top:0;
}

/* ---------- Ce qui suit le deroule ---------- */
/* Les deux colonnes ne font pas partie des phases : filet pleine
   largeur et respiration nettement plus grande que l interieur du
   panneau. */
#top .df-jalons .flex_column.df-jalons__suite{
  margin-top:64px;
  padding-top:46px;
  border-top:1px solid rgba(255,255,255,.26);
}

/* Tant que le script n est pas passe, les etapes restent visibles. */
#top .df-jalons:not(.df-jalons-prets) .df-jalons__etape{ display:block; }

@media (max-width:1000px){
  #top .df-jalons .df-jalons__rail{
    grid-template-columns:1fr;
    gap:30px;
  }
  #top .df-jalons .df-jalons__rail button:hover{ transform:none; }
  #top .df-jalons .df-jalons__rail button + button::before{
    left:50%;
    top:-18px;
    transform:translateX(-50%) rotate(135deg);
  }
  #top .df-jalons .df-jalons__rail button.df-is-on::after{ display:none; }
  #top .df-jalons .df-jalons__etape ul{ grid-template-columns:1fr; }
  #top .df-jalons .df-jalons__etape li:nth-child(2){
    border-top:1px solid rgba(255,255,255,.22);
    padding-top:13px;
  }
}