/* ============================================================================
   Fiche de poste, mise en page en deux colonnes
   ----------------------------------------------------------------------------
   Feuille ECRITE A LA MAIN, comme offres-complements.css, et pour la meme
   raison : le build Tailwind du depot est purge et aucune chaine ne permet de
   le regenerer. Toute classe non prevue au moment du build manque en silence,
   ce qui est le pire mode de panne possible pour une mise en page.

   DEUX COLONNES, ET CE QU'ELLES PORTENT
   -------------------------------------
   Le formulaire demande une heure. Pendant cette heure, ce que le candidat
   postule, jusqu'a quand, et ce qui l'attend ensuite ne doivent jamais quitter
   sa vue : c'est la colonne de gauche, COLLANTE et volontairement compacte. La
   description du poste, elle, fait souvent trois ecrans : elle vit a droite,
   au-dessus du formulaire, et defile avec lui.

   ⚠️ La colonne collante n'accepte AUCUN `overflow` autre que `visible` sur un
   de ses ancetres : un overflow ailleurs fait de l'element un conteneur de
   defilement et tue `position: sticky` sans lever la moindre erreur.

   DES CARTES, ET POURQUOI
   -----------------------
   Le formulaire etait un seul bloc encadre de trois ecrans de haut : aucun
   repere de progression, et sur telephone on ne savait jamais ou l'on en
   etait. Chaque <fieldset> devient une carte. Le decoupage existait deja dans
   le HTML, il devient simplement visible.
   ========================================================================== */

.fiche-poste {
    --fiche-marge: clamp(16px, 4vw, 40px);
    --fiche-laize: 1240px;
    padding-block: 28px 48px;
}
@media (min-width: 1024px) { .fiche-poste { padding-block: 40px 72px; } }

.fiche-grille {
    width: min(100% - 2 * var(--fiche-marge), var(--fiche-laize));
    margin-inline: auto;
    display: grid;
    gap: 20px;
}
@media (min-width: 1024px) {
    .fiche-grille {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
    }
    /* 96 px : la hauteur de l'entete posee, plus un peu d'air. */
    .fiche-aside { position: sticky; top: 96px; }
}
@media (min-width: 1280px) {
    .fiche-grille { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 44px; }
}

.fiche-aside, .fiche-corps { display: grid; gap: 16px; align-content: start; }

/* ---------------------------------------------------------------------------
   LA CARTE, forme commune
   ------------------------------------------------------------------------- */
.fiche-carte {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}
@media (min-width: 640px) { .fiche-carte { padding: 26px; } }

.fiche-carte-offre { border-left: 3px solid var(--samko-gold, #c9a961); }

.fiche-client {
    margin: 0 0 .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--samko-blue, #1a5490);
}
.fiche-titre {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.24;
    font-weight: 700;
    color: var(--samko-navy, #0f2a47);
    text-wrap: balance;
}
@media (min-width: 640px) { .fiche-titre { font-size: 1.5rem; } }

.fiche-echeance {
    margin: .9rem 0 0;
    font-size: .875rem;
    color: #64748b;
}
.fiche-echeance strong { color: #1e293b; }

/* Le raccourci vers le formulaire n'a de sens que sur telephone, ou la
   description peut faire trois ecrans avant le premier champ. Sur grand
   ecran, le formulaire est deja a cote. */
.fiche-ancre {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1rem;
    min-height: 44px;
    padding-inline: 1rem;
    border-radius: 4px;
    background: var(--samko-navy, #0f2a47);
    color: #eef3f8;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
@media (min-width: 1024px) { .fiche-ancre { display: none; } }

.fiche-surtitre {
    margin: 0 0 .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--samko-blue, #1a5490);
}
/* La description arrive du back-end avec ses propres sauts de ligne, et elle
   est bornee en largeur : elargir le cadre ne doit pas allonger les lignes. */
.fiche-description {
    margin: 0;
    white-space: pre-line;
    line-height: 1.72;
    color: #334155;
    max-width: 68ch;
}

/* ---------------------------------------------------------------------------
   LE FORMULAIRE, une carte par etape
   ------------------------------------------------------------------------- */
.fiche-form { display: grid; gap: 16px; }

.fiche-form > fieldset {
    margin: 0;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}
@media (min-width: 640px) { .fiche-form > fieldset { padding: 26px; } }

/* ⚠️ Une <legend> native s'INSERE DANS la bordure de son fieldset et la coupe
   en deux. Dans une carte, cela produit une entaille sur l'arete haute. Le
   `float` la fait redevenir un bloc ordinaire a l'interieur de la carte, sans
   toucher a la semantique : le <legend> reste le nom accessible du groupe. */
.fiche-form legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
}
.fiche-form legend + * { clear: both; }

/* Le dernier fieldset porte le consentement et n'a pas de titre : il se
   rattache visuellement au bloc d'envoi. */
.fiche-form > fieldset:last-of-type { border-top-width: 1px; padding-top: 20px; }
@media (min-width: 640px) { .fiche-form > fieldset:last-of-type { padding-top: 26px; } }

/* Sur telephone, le retrait de 32 px sous chaque legende (ml-8) volait un
   dixieme de la largeur utile a chaque champ, sans rien apporter : la carte
   marque deja le groupe. */
@media (max-width: 639px) {
    .fiche-form .ml-8 { margin-left: 0 !important; }
    .fiche-form legend { margin-bottom: .35rem; }
}

/* La barre d'envoi : sur telephone elle se colle en bas de la carte et le
   bouton prend toute la largeur, avec une cible de 48 px. */
.fiche-form .btn-primary { min-height: 48px; }
@media (max-width: 639px) {
    .fiche-form form > div:last-child,
    .fiche-envoi { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    .fiche-form .btn-primary { width: 100%; justify-content: center; }
}

/* Les champs de fichier natifs debordent volontiers de leur carte sur
   telephone : le nom du fichier choisi peut etre tres long. */
.fiche-form input[type="file"] { max-width: 100%; }

/* ---------------------------------------------------------------------------
   ETATS DE CHARGEMENT ET D'ERREUR
   ------------------------------------------------------------------------- */
.fiche-etat {
    width: min(100% - 2 * var(--fiche-marge), var(--fiche-laize));
    margin-inline: auto;
}

/* La note d'introduction est un enfant direct du formulaire, donc hors des
   cartes : sur le fond ivoire elle flottait sans attache. Elle recoit une
   forme de note, distincte d'une carte d'etape pour ne pas se faire prendre
   pour l'une d'elles. */
.fiche-form > p {
    margin: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid #e8edf3;
    border-left: 3px solid #cbd5e1;
    border-radius: 10px;
    line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   L'ENTETE RESTE A L'ECRAN
   ---------------------------------------------------------------------------
   Le formulaire fait plusieurs ecrans : sans entete fixe, le candidat perd
   toute sortie et tout repere des qu'il commence a descendre.

   ⚠️ Un `overflow` autre que `visible` sur body ou sur un ancetre annulerait
   ce sticky ET celui de la colonne de contexte, sans lever la moindre erreur.
   ------------------------------------------------------------------------- */
.entete-fiche {
    position: sticky;
    top: 0;
    z-index: 50;
}
/* La colonne collante se cale sous l'entete, pas sous le haut de la vitre. */
@media (min-width: 1024px) { .fiche-aside { top: 88px; } }
/* Une ancre ne doit pas atterrir SOUS l'entete. */
.fiche-poste [id] { scroll-margin-top: 84px; }

/* ---------------------------------------------------------------------------
   LA DESCRIPTION SE REPLIE
   ---------------------------------------------------------------------------
   Certaines annonces font trois ecrans : le formulaire devenait inatteignable
   au pouce, et le defilement interminable. Repliee, la description montre ses
   premieres lignes et s'ouvre a la demande.

   Le voile du bas n'est pas un ornement : sans lui, le texte se coupe net au
   milieu d'une ligne et rien ne dit qu'il continue.
   ------------------------------------------------------------------------- */
.fiche-desc-boite {
    position: relative;
    max-height: 260px;
    overflow: hidden;
    transition: max-height 380ms cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 1024px) { .fiche-desc-boite { max-height: 340px; } }

.fiche-desc-boite::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 86px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 88%);
    pointer-events: none;
    transition: opacity 220ms ease-out;
}
/* max-height: none ne se transitionne pas : on ouvre sur une valeur haute,
   assez grande pour toute annonce et assez petite pour que la duree reste
   perceptible comme un depliage et non comme un saut. */
.fiche-desc-boite.est-deplie { max-height: 9000px; }
.fiche-desc-boite.est-deplie::after { opacity: 0; }

.fiche-deplier {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
    min-height: 44px;
    padding-inline: 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--samko-blue, #1a5490);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.fiche-deplier:hover { background: #eef3f8; border-color: #c3d0de; }
.fiche-deplier svg { transition: transform 260ms cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
    .fiche-desc-boite, .fiche-desc-boite::after, .fiche-deplier svg { transition-duration: 1ms; }
}

/* ⚠️ `sm:hidden` N'EXISTE PAS dans le build Tailwind purge du depot : la
   classe manque, et elle echoue en silence. C'est ainsi que « Voir les offres
   SAMKO GROUP Offres » s'est affiche sur grand ecran. Toute bascule
   d'affichage passe donc par une classe declaree ici. */
.fiche-mobile-seul { display: inline; }
@media (min-width: 640px) { .fiche-mobile-seul { display: none; } }

/* Meme motif : `sm:h-9` n'est pas dans le build purge. La hauteur du logotype
   est donc declaree ici, ou elle a un effet. */
.fiche-logo { height: 32px; }
@media (min-width: 640px) { .fiche-logo { height: 36px; } }

/* ---------------------------------------------------------------------------
   DEUX CLASSES QUE LE BUILD TAILWIND N'A PAS
   ---------------------------------------------------------------------------
   `frontend/css/tw.css` est un artefact PURGE et irregenerable : une classe qui
   n'y figure pas ne produit rien, et sans la moindre erreur.

   Mesure faite AU NAVIGATEUR le 04/09, en creant un temoin par classe et en
   lisant le style calcule. C'est la seule methode fiable : chercher la classe
   par une expression reguliere dans le fichier se trompe, parce que « a:b » s'y
   ecrit « .a\:b », avec une contre-oblique que l'echappement standard ne
   produit pas.

   Deux classes seulement manquent reellement, et les deux se voient dans le
   bloc « Autres documents » de poste.html :
     .pt-3            le titre du bloc se colle au filet de separation, a 1 px
                      au lieu de 13.
     .sm:items-start  la rangee retombe sur align-items: normal, donc etiree :
                      le bouton « Retirer » fait 72 px de haut au lieu de 20, sa
                      zone cliquable couvre toute la rangee, et son souligne se
                      retrouve au milieu, decale du champ qu'il concerne.

   NE PAS y ajouter hover:text-red-700, hover:text-samko-navy ni
   focus:ring-samko-blue : elles sont DEJA declarees dans style.css, a la valeur
   identique. Les redeclarer ne servait a rien.
   ------------------------------------------------------------------------- */
.pt-3 { padding-top: .75rem; }
@media (min-width: 640px) {
  .sm\:items-start { align-items: flex-start; }
}

/* Champ manquant a l'envoi. `ring-2` et `ring-red-400` ne sont PAS dans le
   build Tailwind purge : une classe absente ne produit rien, en silence. */
.champ-manquant {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Le message d'erreur reste sous les yeux du candidat meme quand la page
   defile jusqu'au champ manquant, quatre mille pixels plus haut. Aucun
   ancetre du formulaire ne porte overflow:hidden, sticky tient donc. */
.erreur-collee {
  position: sticky;
  bottom: 8px;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
}