/* ============================================================================
   REKOV — 05 · le fondateur
   ----------------------------------------------------------------------------
   Première image photographique du site — tout le reste est géométrique
   (logotype, chiffres, filets). Le changement de registre est assumé, pas un
   accident : la photo est traitée en duotone encre/terre brûlée pour
   rejoindre la palette plutôt que de l'interrompre.

   Voix : cette section nomme Ugo Tricas et s'écrit à la troisième personne /
   en promesse directe. Le reste du site continue à dire « nous » — les deux
   registres coexistent, l'un ne corrige pas l'autre.

   Aucun second bouton ici (header.css verrouille une seule action, répétée à
   l'identique) : le lien LinkedIn est un lien de texte simple, jamais un
   .btn--primary.
============================================================================ */

.fd {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* Le cadre garde son ratio 4/5 et se centre sur la hauteur du texte :
     autant de texte au-dessus qu'en dessous de la photo. */
  align-items: center;
}

/* ---- La photo — sans retouche, montée en passe-partout ----
   Décision prise en comparatif (cinq traitements, six cadres) : la photo
   reste brute. Les indices du visage sont ce que la section doit livrer —
   un duotone les écrase, et un visage teinté se lit comme une mise en
   scène juste au moment où la page demande qu'on fasse confiance à
   quelqu'un. La cohérence est portée par le contenant : un carton en
   hairline sombre, la photo montée en retrait dedans. Rayon 0, filets
   seulement, aucune ombre, aucune couleur hors palette. */
.fd-frame {
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
  border: 1px solid var(--hair-d);
  background: var(--hair-d);
}
.fd-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--hair-d);
}
.fd-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* ---- Le repli visible : aucune photo déposée ----
   Même principe que .todo en page légale (style.css) : un manque doit se
   voir sur la page, jamais se masquer dans un commentaire HTML — sans quoi
   rien n'empêche cet état de partir en ligne sans qu'on le remarque. */
.fd-photo__todo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
}

.fd-body .t-page { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.fd-body .lead { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.fd-body .lead strong { color: var(--fg); }

/* ---- La mention du moteur de calcul ----
   Une seule phrase, en retrait sous un filet : l'angle de vente reste la
   rigueur humaine, pas la technologie — ce n'est pas un site technique. */
.fd-eng {
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-size: 0.875rem; line-height: 1.6; color: var(--fg-2);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- Le lien LinkedIn — la marque seule, jamais un bouton ----
   Réduit à son glyphe dans un carré en hairline : le libellé passe en
   aria-label, ce qui évite qu'un second libellé d'action vienne
   concurrencer le CTA unique. */
.fd-act {
  display: flex; align-items: center; gap: 0.9rem;
}
.fd-act__k { font-size: 0.8125rem; color: var(--fg-2); }
.fd-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--rule); color: var(--fg);
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fd-li svg { width: 1.125rem; height: 1.125rem; fill: currentColor; display: block; }
.fd-li:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Le lien LinkedIn en texte — conservé pour les pages légales ---- */
.fd-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; font-size: 0.9375rem; color: var(--fg);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2em;
  transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fd-link:hover { color: var(--accent); border-color: var(--accent); }
.fd-link span { display: inline-block; transition: transform var(--t-med) var(--ease); }
.fd-link:hover span { transform: translateX(3px); }

@media (max-width: 780px) {
  .fd { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  /* Une colonne : plus rien à centrer, le cadre reprend un ratio large. */
  .fd-photo { aspect-ratio: 16 / 10; }
  /* La boîte devient large et courte : cadrée en haut, elle ne montrait plus
     que le front. Le recentrage vertical garde le visage entier visible. */
  .fd-photo img { object-position: center 25%; }
}