/* =============================================================================
   ELMOUCHIR — fiche-entreprise.css
   Bloc « identité + contacter + activités + chiffres » de la fiche entreprise.

   PARTI PRIS
   Sur l'ancienne fiche, les coordonnées — c'est-à-dire la raison d'être de la
   page — étaient reléguées dans une colonne de gauche, sous la ligne de
   flottaison, noyées dans sept phrases qui annonçaient une absence. Ici elles
   remontent juste sous le nom, sous forme de tuiles cliquables, et seules
   celles qui existent occupent de la place.

   Le geste visuel de la maison : un trait de lumière verte qui traverse un
   bloc = donnée révélée. On le retrouve sur le mur d'abonnement (paywall) et
   ici sur le bandeau d'identité. Une seule fois, à l'arrivée.
   ============================================================================= */

.fe{
  --fe-green:    #0a9c53;
  --fe-green-lt: #23c274;
  --fe-green-dk: #065f34;
  --fe-ink:      #0d211a;
  --fe-text:     #20312a;
  --fe-muted:    #6c8578;
  --fe-line:     #e1efe7;
  --fe-surface:  #ffffff;
  --fe-soft:     #f4faf7;
  --fe-r:        18px;
  --fe-ease:     cubic-bezier(.22,.61,.21,1);
  --fe-spring:   cubic-bezier(.34,1.4,.44,1);

  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1rem;
  color: var(--fe-text);
}

/* =============================================================================
   1. BANDEAU D'IDENTITÉ
   ============================================================================= */
.fe__id{
  position: relative;
  display: grid;
  /* La 3e piste etait en `auto` : elle se dimensionnait sur le contenu le plus
     long (« ANNEE DE DEBUT DE L'ACTIVITE »), ecrasait le nom a 200 px, puis la
     largeur posee sur l'element rétrécissait le bloc en laissant un trou de
     375 px. On borne la PISTE, pas l'element. */
  grid-template-columns: auto minmax(0, 1fr) clamp(200px, 25%, 290px);
  gap: clamp(1rem, 3vw, 1.9rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fe-surface);
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-r);
  box-shadow: 0 14px 38px -26px rgba(7,48,30,.5);
  overflow: hidden;
  animation: fe-rise .6s var(--fe-ease) both;
}

/* le trait de lumière — traverse une fois, puis disparaît */
.fe__id::after{
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent,
              rgba(35,194,116,.14), rgba(35,194,116,.30), rgba(35,194,116,.14), transparent);
  transform: translateX(-120%);
  pointer-events: none;
  animation: fe-scan 1.15s cubic-bezier(.4,0,.2,1) .25s both;
}
@keyframes fe-scan{
  0%  { transform: translateX(-120%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100%{ transform: translateX(560%); opacity: 0; }
}

/* --- logo --------------------------------------------------------------- */
.fe__logo{
  grid-row: span 2;
  width: clamp(88px, 14vw, 132px);
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f9f4, #e2f3e9);
  border: 1px solid var(--fe-line);
  box-shadow: 0 12px 26px -16px rgba(7,48,30,.55);
  display: grid; place-items: center;
  animation: fe-pop .65s var(--fe-spring) .1s both;
}
.fe__logo img{ width: 100%; height: 100%; object-fit: cover; }

/* --- nom + adresse ------------------------------------------------------- */
.fe__head{ min-width: 0; }
.fe__head{ min-width: 0; }
.fe__name{
  margin: 0 0 .4rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--fe-ink);
  text-wrap: balance;           /* pas de mot orphelin sur la derniere ligne */
}
.fe__name span{
  display: inline-block;
  animation: fe-word .55s var(--fe-ease) calc(.3s + var(--i, 0) * 45ms) both;
}
.fe__addr{
  display: flex; align-items: flex-start; gap: .45rem;
  margin: 0 0 .9rem;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--fe-muted);
  animation: fe-fade .5s var(--fe-ease) .45s both;
}
.fe__addr svg{ flex: none; margin-top: .18rem; color: var(--fe-green); }

/* --- pastilles de contexte ---------------------------------------------- */
.fe__meta{
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0; padding: 0; list-style: none;
}
.fe__chip{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .72rem;
  border-radius: 99px;
  font-size: .78rem; font-weight: 700;
  text-decoration: none !important;
  border: 1px solid var(--fe-line);
  background: var(--fe-soft);
  color: var(--fe-text) !important;
  animation: fe-pop .45s var(--fe-spring) calc(.5s + var(--i, 0) * 50ms) both;
  transition: transform .18s var(--fe-spring), border-color .2s ease, background-color .2s ease;
}
a.fe__chip:hover{
  transform: translateY(-2px);
  border-color: rgba(10,156,83,.45);
  background: #eaf7f0;
  color: var(--fe-green-dk) !important;
}
.fe__chip--place{ background: #eaf7f0; border-color: #cfeadd; color: #0b6b3c !important; }
.fe__chip--rank{ background: var(--fe-ink); border-color: var(--fe-ink); color: #d7f3e4 !important; }
/* les données machine — matricule, dates — en chasse fixe : ce sont des
   références de registre, pas de la prose */
.fe__chip--data{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .73rem; letter-spacing: .02em; }

/* --- flanc droit : outils + chiffres -------------------------------------- */
/* Le bandeau laissait un grand vide a droite du nom, et les chiffres occupaient
   plus bas une rangee entiere pour trois valeurs souvent absentes. Les deux
   problemes se resolvent l'un l'autre. */
/* Le capital « 5 002 000 000,00 » ne se coupe pas : la colonne des chiffres
   grossissait jusqu'a 455 px et le nom se retrouvait sur trois lignes dans
   220 px, alors que la carte en fait 870. On borne le flanc droit. */
.fe__side{
  display: grid;
  gap: .75rem;
  justify-items: end;
  align-content: start;
  width: 100%;
  min-width: 0;
}
.fe__tools{ display: flex; gap: .4rem; animation: fe-fade .5s var(--fe-ease) .6s both; }
.fe__tool{
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--fe-line);
  background: var(--fe-surface);
  color: var(--fe-muted);
  cursor: pointer;
  transition: transform .18s var(--fe-spring), color .2s ease, border-color .2s ease;
}
.fe__tool:hover{ transform: translateY(-2px); color: var(--fe-green); border-color: rgba(10,156,83,.45); }

/* =============================================================================
   2. CONTACTER — le cœur de la page
   ============================================================================= */
.fe__section{ margin-top: clamp(1.25rem, 3vw, 2rem); }
.fe__label{
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .8rem;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fe-muted);
}
.fe__label::after{
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--fe-line), transparent);
}

.fe__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem;
}

.fe__tile{
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem .95rem;
  background: var(--fe-surface);
  border: 1px solid var(--fe-line);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(7,48,30,.05);
  overflow: hidden;
  animation: fe-rise .5s var(--fe-ease) calc(.55s + var(--i, 0) * 70ms) both;
  transition: transform .2s var(--fe-ease), box-shadow .22s ease, border-color .22s ease;
}
.fe__tile:hover{
  transform: translateY(-3px);
  border-color: rgba(10,156,83,.40);
  box-shadow: 0 16px 30px -18px rgba(7,48,30,.4);
}
.fe__tile__icon{
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #eaf7f0;
  color: var(--fe-green-dk);
  transition: transform .3s var(--fe-spring), background-color .22s ease;
}
.fe__tile:hover .fe__tile__icon{ transform: scale(1.08) rotate(-6deg); background: #d7f3e4; }
.fe__tile__body{ min-width: 0; flex: 1 1 auto; }
.fe__tile__label{
  display: block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--fe-muted);
  margin-bottom: .18rem;
}
.fe__tile__value{
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
  font-size: .92rem; font-weight: 600;
  color: var(--fe-ink);
  word-break: break-word;
}
.fe__tile__value img{ height: 20px; width: auto; max-width: none; vertical-align: middle; }

/* bouton copier : il occupe sa place dès le départ, il n'apparaît pas au survol
   — sur tactile un bouton qui n'existe qu'au survol n'existe pas */
.fe__copy{
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--fe-line);
  background: var(--fe-soft);
  color: var(--fe-green-dk);
  cursor: pointer;
  transition: transform .18s var(--fe-spring), background-color .2s ease, color .2s ease;
}
.fe__copy:hover{ background: var(--fe-green); color: #fff; border-color: var(--fe-green); }
.fe__copy:active{ transform: scale(.88); }
.fe__copy.is-done{ background: var(--fe-green); border-color: var(--fe-green); color: #fff; }
/* onde de confirmation */
.fe__copy.is-done::after{
  content: ""; position: absolute; inset: -6px;
  border-radius: 14px;
  border: 2px solid var(--fe-green);
  animation: fe-ring .6s var(--fe-ease) both;
  pointer-events: none;
}
@keyframes fe-ring{
  from{ opacity: .8; transform: scale(.85); }
  to  { opacity: 0;  transform: scale(1.25); }
}

/* --- champs absents : une ligne, repliée --------------------------------- */
.fe__missing{
  display: flex; align-items: center; gap: .5rem;
  margin-top: .7rem; padding: .55rem .2rem 0;
  border-top: 1px dashed var(--fe-line);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  color: var(--fe-muted);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: color .2s ease;
  animation: fe-fade .5s var(--fe-ease) .9s both;
}
.fe__missing:hover{ color: var(--fe-green); }
.fe__missing svg{ transition: transform .25s var(--fe-ease); }
.fe__missing[aria-expanded="true"] svg{ transform: rotate(180deg); }
.fe__absent{
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .4rem;
  margin-top: .6rem;
}
.fe__absent.is-open{ display: grid; }
.fe__absent li{
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem;
  border-radius: 10px;
  background: var(--fe-soft);
  color: var(--fe-muted);
  font-size: .8rem;
  animation: fe-fade .35s var(--fe-ease) both;
}
.fe__absent li svg{ flex: none; opacity: .5; }

/* =============================================================================
   3. ACTIVITÉS — arbre secteur / activités

   À plat, rien n'indiquait quelle activité relevait de quel secteur : quatre
   pastilles alignées, deux sombres, deux claires, et au lecteur de deviner.
   L'arbre rend la hiérarchie visible, et le rail qui se trace la rend lisible
   dans le temps : on voit la branche descendre avant de voir ses feuilles.
   ============================================================================= */
/* Sur large ecran l'arbre n'occupait qu'un tiers de la largeur et laissait
   500 px de vide a droite : les branches se placent cote a cote. */
.fe__tree{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.1rem clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

.fe__branch{
  position: relative;
  padding-inline-start: 1.15rem;
}
/* le rail vertical de la branche */
.fe__branch::before{
  content: "";
  position: absolute;
  inset-block: 1.35rem .55rem;
  inset-inline-start: 5px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fe-green-lt), rgba(35,194,116,.18));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--fe-ease) calc(.12s + var(--i, 0) * 130ms);
}
.fe__section.is-in .fe__branch::before{ transform: scaleY(1); }
.fe__branch--orphan{ padding-inline-start: 0; }
.fe__branch--orphan::before{ display: none; }

/* --- le secteur : la tête de branche ------------------------------------- */
.fe__sector{
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  margin-inline-start: -1.15rem;
  padding: .5rem .85rem .5rem .5rem;
  border-radius: 12px;
  background: var(--fe-ink);
  color: #eaf6ef !important;
  font-size: .87rem; font-weight: 700;
  text-decoration: none !important;
  opacity: 0;
  animation-fill-mode: both;
  transition: transform .2s var(--fe-spring), box-shadow .22s ease;
}
.fe__section.is-in .fe__sector{
  animation: fe-branch .5s var(--fe-ease) calc(var(--i, 0) * 130ms) both;
}
.fe__sector:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(6,32,20,.8);
  color: #fff !important;
}
.fe__sector__dot{
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: var(--fe-green-lt);
  box-shadow: 0 0 0 0 rgba(35,194,116,.55);
}
/* la pastille pulse une fois quand la branche se déploie */
.fe__section.is-in .fe__sector__dot{
  animation: fe-ping 1s var(--fe-ease) calc(.2s + var(--i, 0) * 130ms) both;
}
.fe__sector__name{ line-height: 1.25; }
.fe__sector__count{
  flex: none;
  min-width: 20px; padding: .05rem .35rem;
  border-radius: 99px;
  background: rgba(35,194,116,.22);
  color: #b7f0d2;
  font: 700 .68rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}

/* --- les activités : les feuilles ---------------------------------------- */
.fe__leaves{
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid; gap: .3rem;
  justify-items: start;
}
.fe__leaves li{
  position: relative;
  opacity: 0;
}
.fe__section.is-in .fe__leaves li{
  animation: fe-leaf .42s var(--fe-ease)
             calc(.26s + var(--i, 0) * 130ms + var(--j, 0) * 65ms) both;
}
/* le trait qui relie la feuille au rail */
.fe__leaves li::before{
  content: "";
  position: absolute;
  inset-inline-start: -.62rem;
  top: 50%;
  width: .5rem; height: 2px;
  border-radius: 2px;
  background: rgba(35,194,116,.45);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .3s var(--fe-ease)
              calc(.34s + var(--i, 0) * 130ms + var(--j, 0) * 65ms);
}
.fe__section.is-in .fe__leaves li::before{ transform: scaleX(1); }

.fe__leaf{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--fe-line);
  background: var(--fe-surface);
  color: var(--fe-text) !important;
  font-size: .84rem; font-weight: 600;
  text-decoration: none !important;
  transition: transform .18s var(--fe-spring), border-color .2s ease,
              color .2s ease, background-color .2s ease;
}
.fe__leaf svg{ opacity: 0; transform: rotate(-90deg) translateY(3px); transition: opacity .2s ease, transform .22s var(--fe-spring); }
.fe__leaf:hover{
  transform: translateX(3px);
  border-color: rgba(10,156,83,.45);
  background: #f0faf5;
  color: var(--fe-green-dk) !important;
}
.fe__leaf:hover svg{ opacity: 1; transform: rotate(-90deg) translateY(0); }
[dir="rtl"] .fe__leaf:hover{ transform: translateX(-3px); }
[dir="rtl"] .fe__leaf svg{ transform: rotate(90deg) translateY(3px); }
[dir="rtl"] .fe__leaf:hover svg{ transform: rotate(90deg) translateY(0); }

/* survoler la tête de branche éclaire toute la branche */
.fe__branch:hover::before{ background: var(--fe-green-lt); }
.fe__branch:hover .fe__leaves li::before{ background: var(--fe-green); }

@keyframes fe-branch{
  from{ opacity: 0; transform: translateY(-8px) scale(.96); }
  to  { opacity: 1; transform: none; }
}
@keyframes fe-leaf{
  from{ opacity: 0; transform: translateX(-10px); }
  to  { opacity: 1; transform: none; }
}
@keyframes fe-ping{
  0%  { box-shadow: 0 0 0 0 rgba(35,194,116,.55); }
  70% { box-shadow: 0 0 0 9px rgba(35,194,116,0); }
  100%{ box-shadow: 0 0 0 0 rgba(35,194,116,0); }
}

/* =============================================================================
   4. CHIFFRES
   ============================================================================= */
/* Trois colonnes dans 220 px donnaient 55 px chacune : « ANNEE DE DEBUT DE
   L'ACTIVITE » sur quatre lignes et le capital coupe en plein milieu. En lignes,
   le libelle prend la place qu'il lui faut et la valeur reste alignee a droite. */
/* Un seul panneau a filets plutot que trois boites separees : plus dense, et
   les trois valeurs s'alignent sur la meme colonne de droite. */
.fe__figs{
  display: grid;
  gap: 0;
  margin: 0;
  width: 100%;
  background: var(--fe-soft);
  border: 1px solid var(--fe-line);
  border-radius: 12px;
  overflow: hidden;
}
.fe__fig{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .52rem .75rem;
  border-bottom: 1px solid var(--fe-line);
  animation: fe-pop .45s var(--fe-spring) calc(.62s + var(--i, 0) * 60ms) both;
  transition: background-color .22s ease;
}
.fe__fig:last-child{ border-bottom: 0; }
.fe__fig:hover{ background: #eaf7f0; }
.fe__fig dt{
  margin: 0;
  font-size: .58rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fe-muted);
  line-height: 1.3;
  text-align: start;
}
.fe__fig dd{
  margin: 0;
  font: 800 clamp(.76rem, .95vw, .95rem)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--fe-ink);
  text-align: end;
  white-space: nowrap;          /* la valeur ne se coupe jamais */
}
.fe__fig--void dd{ color: #c3d6cb; }
.fe__fig--void dt{ opacity: .7; }

/* =============================================================================
   5. ARRIVÉE AU DÉFILEMENT + MOUVEMENT RÉDUIT
   ============================================================================= */
.fe__section{ opacity: 0; }
.fe__section.is-in{ animation: fe-rise .55s var(--fe-ease) both; opacity: 1; }

@keyframes fe-rise{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes fe-fade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes fe-word{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes fe-pop { from{ opacity: 0; transform: scale(.85); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  .fe *, .fe *::before, .fe *::after{ animation: none !important; }
  .fe__section{ opacity: 1 !important; }
  .fe__sector, .fe__leaves li{ opacity: 1 !important; }
  .fe__branch::before, .fe__leaves li::before{ transform: none !important; transition: none !important; }
  .fe__id::after{ display: none; }
  .fe__tile:hover, .fe__chip:hover, .fe__leaf:hover, .fe__sector:hover,
  .fe__fig:hover, .fe__tool:hover{ transform: none; }
}

@media (max-width: 991.98px){
  .fe__id{ grid-template-columns: auto minmax(0, 1fr); }
  .fe__logo{ grid-row: span 1; }
  .fe__side{ grid-column: 1 / -1; justify-items: stretch; min-width: 0; }
  .fe__tools{ justify-content: flex-end; }
}
@media (max-width: 575.98px){
  .fe__id{ grid-template-columns: 1fr; justify-items: start; }
}

/* =============================================================================
   6. MODE SOMBRE
   ============================================================================= */
.navbar-dark .fe{
  --fe-surface: #14231c;
  --fe-soft:    #17281f;
  --fe-line:    rgba(255,255,255,.10);
  --fe-text:    #dbeee3;
  --fe-ink:     #f1fbf5;
  --fe-muted:   #90ad9f;
}
.navbar-dark .fe__id,
.navbar-dark .fe__tile,
.navbar-dark .fe__fig{ box-shadow: none; }
.navbar-dark .fe__chip--rank{ background: #23c274; border-color: #23c274; color: #04140d !important; }

/* =============================================================================
   7. COMPATIBILITÉ AVEC layouts/contact-copy.blade.php
   Ce partial gère déjà le déchiffrement au clic des .btn-copy-slide. On réutilise
   donc ses classes — mais sa feuille place le bouton en absolu, invisible tant
   qu'on ne survole pas. Dans une tuile, le bouton a sa place réservée.
   ============================================================================= */
.fe .contact-item-wrapper{
  position: static;
  display: inline-flex; align-items: center;
  margin: 0; padding: 0;
}
.fe .btn-copy-slide{
  position: static;
  opacity: 1; visibility: visible;
  transform: none;
  right: auto; top: auto;
}
/* la confirmation utilise l'état posé par contact-copy.blade.php */
.fe .btn-copy-slide.copied{
  background: var(--fe-green) !important;
  border-color: var(--fe-green) !important;
  color: #fff !important;
}
.fe .btn-copy-slide.copied::after{
  content: ""; position: absolute; inset: -6px;
  border-radius: 14px;
  border: 2px solid var(--fe-green);
  animation: fe-ring .6s var(--fe-ease) both;
  pointer-events: none;
}
.fe .fe__copy{ position: relative; }