/* =========================================================================
   MUSLIMA WORK — LE CATALOGUE DES FORMATIONS RECOMMANDÉES

   Un catalogue éditorial, pas un annuaire. Le fond reste l'ivoire du site, les
   cartes sont blanches, et la couleur ne sert que trois fois : la catégorie en
   prune adouci, le tarif gratuit en framboise, et la pastille « Recommandée ».
   Tout le reste est du texte et de l'espace.

   Rien n'invente de langage. La carte reprend « card card--hover » du site —
   même filet, même soulèvement d'un pixel au survol ; les pastilles de filtre
   sont les « chip » de l'accueil ; les listes déroulantes et le champ de
   recherche sont ceux de style.css ; le hero est celui de la page de contact,
   au style près ; et le tiroir de détail emprunte sa coquille à celui du
   contact rapide — « ct-fond », « ct-tiroir » et leur en-tête prune viennent
   de contact.css, chargée avant celle-ci. Deux tiroirs qui s'ouvrent pareil
   valent mieux que deux inventions.

   Toutes les classes sont préfixées « fo- » ou « fcard » : rien ici ne peut
   déteindre sur le reste du site.

   Sommaire
     0. Le hero et l'en-tête de section
     1. Les filtres
     2. La grille
     3. La carte
     4. L'état vide et la transparence
     5. Le tiroir de détail
     6. Petits écrans
     7. Mouvement réduit
   ========================================================================= */

/* =========================================================================
   0. LE HERO ET L'EN-TÊTE DE SECTION
   ========================================================================= */
.fo{background:var(--bg-white,#fff)}

/* --- Le haut de page ----------------------------------------------------
   Un titre, une phrase, un filet. Rien à droite, aucun second titre : trois
   formulations du même propos se suivaient avant qu'on voie une seule carte.
   La grille commence à moins de six cents pixels du haut du document. */
.fo-hero{padding:clamp(20px,2.2vw,30px) 0 0}
.fo-hero .wrap{padding-bottom:clamp(16px,1.8vw,24px);border-bottom:1px solid #F2EAEF}
.fo-hero__titre{
  margin:0;
  font-size:clamp(25px,2.6vw,33px);font-weight:700;line-height:1.12;
  letter-spacing:-.028em;color:var(--plum,#32172A);
}
.fo-hero__p{
  margin:12px 0 0;max-width:56ch;
  font-size:15px;line-height:1.65;color:var(--ink-2,#5A5058);
}

.fo-corps{
  padding:clamp(18px,2vw,26px) 0 clamp(56px,6vw,88px);
  background:var(--bg-tint,#FCF8FB);
}

/* =========================================================================
   1. LES FILTRES
   ========================================================================= */
.fo-filtres{display:grid;gap:12px;margin-bottom:16px}
/* La première ligne : tout ce qui n'est pas une catégorie. */
.fo-filtres__ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* « width:auto » : « .select » est en pleine largeur dans style.css, et sans
   cela chaque liste occupait toute la ligne — la barre se pliait en trois
   rangées et repoussait la grille de cent cinquante pixels. */
.fo-filtres__select{flex:0 0 auto;width:auto;height:40px;min-width:168px}

/* Le champ de recherche et sa loupe : la loupe est posée dedans, le
   rembourrage du champ lui fait la place. */
.fo-filtres__boite{position:relative;display:block;flex:1 1 300px;max-width:400px}
.fo-filtres__loupe{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:#A9909F;pointer-events:none;
}
.fo-filtres__loupe svg{width:17px;height:17px}
.fo-filtres__input{height:40px;padding-left:40px}
/* La croix que les navigateurs ajoutent aux champs « search » : elle double
   le bouton « Tout afficher » et casse l'alignement. */
.fo-filtres__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* --- Les pastilles de catégorie ----------------------------------------- */
.fo-chips{display:flex;flex-wrap:wrap;gap:7px}
.fo-chip{height:32px;padding:0 13px;font-size:13px;border-radius:999px}
.fo-chip.est-actif{
  background:var(--plum,#32172A);border-color:var(--plum,#32172A);
  color:#FFFBFD;font-weight:600;
}
.fo-chip.est-actif:hover{
  background:#25101F;border-color:#25101F;color:#FFFBFD;transform:translateY(-1px);
}
.fo-chip:focus-visible{outline:2px solid #951753;outline-offset:2px}
/* « Gratuites seulement » n'est pas une catégorie : allumée, elle prend le
   framboise plutôt que le prune, et se distingue ainsi de la ligne du
   dessus. */
.fo-chip--gratuit.est-actif{
  background:var(--mw-accent,#C92D78);border-color:var(--mw-accent,#C92D78);
}
.fo-chip--gratuit.est-actif:hover{background:#B32468;border-color:#B32468}

/* « Tout afficher » ferme la ligne, poussé à droite. */
.fo-filtres__vider{
  margin-left:auto;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--mw-accent,#C92D78);
  text-decoration:underline;text-underline-offset:3px;
}
.fo-filtres__vider:hover{color:#951753}
.fo-filtres__vider:focus-visible{outline:2px solid #951753;outline-offset:3px;border-radius:3px}

.fo-compte{
  margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--ink-3,#857B83);
}

/* =========================================================================
   2. LA GRILLE
   ========================================================================= */
.fo-grille{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
}
.fo-grille > li{display:flex}

/* =========================================================================
   3. LA CARTE
   ========================================================================= */
/* « card » lui donne le blanc, le filet et le soulèvement ; on reprend ici le
   rembourrage, parce que la bande de couverture doit toucher les bords, et le
   rayon de douze pixels des cartes récentes du site. */
.fcard{
  position:relative;width:100%;padding:0;overflow:hidden;
  border-radius:12px;border-color:#F1E8ED;
}
.fcard:hover{border-color:#E7D5E0}

/* --- La couverture ------------------------------------------------------ */
.fcard__couv{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(126deg,#F7EAF2 0%,#F2E8F7 58%,#EDE6F8 100%);
}
.fcard__couv img{width:100%;height:100%;object-fit:cover;display:block}
/* Sans image, la carte porte le losange de la marque, seul, au centre d'un
   dégradé très pâle. Aucune illustration d'emprunt : mieux vaut un signe
   qu'une photographie qui ne dit rien de la formation. */
.fcard__couv--signe{display:grid;place-items:center}
.fcard__losange{
  width:26px;height:26px;rotate:45deg;border-radius:6px;
  background:linear-gradient(135deg,#D3458C 0%,#951753 100%);
  opacity:.30;
}

.fcard__badge{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:999px;
  background:var(--mw-accent,#C92D78);color:#fff;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;
}

/* --- Le contenu --------------------------------------------------------- */
.fcard__corps{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:18px 20px 16px;
}
.fcard__cat{
  margin:0 0 9px;
  font-size:11px;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:#9A7189;
}
.fcard__t{
  margin:0;font-size:18px;font-weight:600;line-height:1.32;
  letter-spacing:-.018em;color:var(--plum,#32172A);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fcard__org{margin:7px 0 0;font-size:13.5px;font-weight:500;color:var(--ink-2,#5A5058)}
.fcard__res{
  margin:11px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2,#5A5058);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Les trois faits, sur une ligne, séparés par des points médians. Ils sont
   secondaires : c'est l'intitulé qu'on lit d'abord. */
.fcard__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:13px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3,#857B83);
}

.fcard__pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:15px;
  border-top:1px solid var(--line,#ECE8EA);
}
.fcard__prix{font-size:13px;font-weight:600;color:var(--ink-2,#5A5058)}
.fcard__prix--gratuit{color:var(--mw-accent,#C92D78)}

/* Le seul élément qui se clique, et c'est un vrai bouton : son intitulé est
   lu tel quel par un lecteur d'écran. Son pseudo-élément couvre la carte —
   toute la surface réagit, sans ajouter une seconde cible au clavier. */
.fcard__lien{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--plum,#32172A);
  transition:color 180ms ease;
}
.fcard__lien::after{content:"";position:absolute;inset:0;z-index:1}
.fcard__lien:hover{color:var(--mw-accent,#C92D78)}
.fcard:hover .fcard__lien{color:var(--mw-accent,#C92D78)}
.fcard__lien:focus-visible{outline:2px solid #951753;outline-offset:4px;border-radius:3px}
.fcard__fleche{display:grid;place-items:center;transition:transform 220ms ease}
.fcard__fleche svg{width:15px;height:15px}
.fcard:hover .fcard__fleche{transform:translateX(3px)}

/* =========================================================================
   4. L'ÉTAT VIDE ET LA TRANSPARENCE
   ========================================================================= */
.fo-vide{
  display:grid;justify-items:start;gap:16px;
  padding:clamp(28px,4vw,48px);
  background:#fff;border:1px solid #F1E8ED;border-radius:12px;
}
.fo-vide__t{
  margin:0;max-width:40ch;
  font-size:16px;line-height:1.6;color:var(--ink-2,#5A5058);
}

.fo-transparence{
  margin:clamp(28px,3vw,40px) 0 0;max-width:74ch;
  font-size:12.5px;line-height:1.65;color:var(--ink-3,#857B83);
}

/* =========================================================================
   5. LE TIROIR DE DÉTAIL
   La coquille — le voile, le glissement, la largeur — vient de contact.css,
   et l'en-tête prune du tiroir de contact. Ce qui suit est l'intérieur.
   ========================================================================= */
.fo-tiroir{width:min(520px,100%)}
.fo-tiroir__tete{padding:24px 26px 22px}
.fo-tiroir__titre{
  margin:0;font-size:23px;font-weight:700;line-height:1.24;
  letter-spacing:-.026em;color:#FFFBFD;
}
.fo-tiroir__org{margin:8px 0 0;font-size:14px;color:rgba(255,251,253,.76)}

.fo-tiroir__corps{padding-top:0}
.fo-tiroir__img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  margin:22px 0 4px;border-radius:10px;
}
.fo-tiroir__p{
  margin:18px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-2,#5A5058);
}

/* Les informations pratiques : deux colonnes de couples, filets très fins. */
.fo-faits{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin:24px 0 0;padding:0;
  background:#F1E8ED;border:1px solid #F1E8ED;border-radius:10px;overflow:hidden;
}
.fo-faits > div{background:#fff;padding:13px 15px}
.fo-faits dt{
  margin:0;font-size:11px;font-weight:700;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:#9A7189;
}
.fo-faits dd{margin:7px 0 0;font-size:13.5px;line-height:1.45;color:var(--plum,#32172A)}

.fo-bloc{margin-top:26px}
.fo-bloc__t{
  margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.35;
  letter-spacing:-.014em;color:var(--plum,#32172A);
}
.fo-liste{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.fo-liste li{
  position:relative;padding-left:17px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2,#5A5058);
}
/* Un tiret plutôt qu'une puce dessinée : dans une liste, un losange se
   répéterait autant de fois qu'il y a de points. */
.fo-liste li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:#D8C3D1;
}

.fo-tiroir__acces{
  margin:22px 0 0;padding:13px 15px;
  background:var(--rose-pale,#FBEAF2);border-radius:8px;
  font-size:13px;line-height:1.6;color:#6B1238;
}

/* --- Le pied, toujours visible ------------------------------------------ */
.fo-tiroir__pied{
  flex:none;display:grid;gap:12px;justify-items:center;
  padding:16px 26px calc(20px + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid #F1E8ED;
}
.fo-tiroir__cta{width:100%}
.fo-tiroir__retour{
  padding:0;border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--ink-2,#5A5058);
  text-decoration:underline;text-underline-offset:3px;
}
.fo-tiroir__retour:hover{color:var(--mw-accent,#C92D78)}
.fo-tiroir__retour:focus-visible{outline:2px solid #951753;outline-offset:3px;border-radius:3px}
.fo-tiroir__sans-lien{
  margin:0;text-align:center;
  font-size:13px;line-height:1.6;color:var(--ink-3,#857B83);
}

/* =========================================================================
   6. PETITS ÉCRANS
   ========================================================================= */
@media (max-width:1024px){
  .fo-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .fo-grille{grid-template-columns:1fr}
  .fo-filtres__boite{flex:1 1 100%;max-width:none}
  .fo-filtres__select{flex:1 1 100%;min-width:0}
  .fo-filtres__vider{margin-left:0}
  /* Seize pixels : en dessous, iOS agrandit la page au premier appui. */
  .fo-filtres__input,.fo-filtres__select{font-size:16px}
  .fcard__couv{aspect-ratio:16/8}
  .fo-faits{grid-template-columns:1fr}
  .fo-tiroir__tete{padding:20px}
  .fo-tiroir__pied{padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================================
   7. MOUVEMENT RÉDUIT
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .fcard,.fcard__lien,.fcard__fleche{transition:none}
  .card--hover.fcard:hover{transform:none}
  .fo-chip{transition:none}
}