/* ═══════════════════════════════════════════════════════════════════════════
   Fair4B — pages des communautés d'experts (/communautes et ses sept filles).

   Une feuille partagée plutôt qu'un <style> par page : huit pages portent la
   même grammaire visuelle, et le fichier est mis en cache une fois pour toutes
   (une heure, cf. la politique de cache dans Program.cs). Aucune librairie :
   grille et flexbox natives suffisent, et le site n'a pas à payer 30 Ko de
   framework pour aligner sept cartes.

   Les variables viennent de /styles.css, chargé avant. Les valeurs de repli
   permettent à la page de rester lisible si cette feuille arrive seule.
   ═══════════════════════════════════════════════════════════════════════════ */

.com-wrap {
    max-width: 1080px;
    margin: 0 auto;
    /* L'en-tête est fixe et fait 106 px : bandeau d'annonce (38) + barre de
       navigation (68). L'ancien clamp descendait à 5,5 rem, soit 88 px, et le fil
       d'Ariane passait dessous, coupé en deux dans le sens de la hauteur.
       Constaté le 04/08/2026 sur /communautes et /communautes/fair4ia. */
    padding: calc(106px + clamp(1.5rem, 4vh, 3rem)) var(--gutter, 1.5rem) 4rem;
}

/* ── Retour à la section Communautés de l'accueil ────────────────────────── */
/* Forme et emplacement inspirés du lien "‹ Retour fair4b.com" des pages
   Fair4Pitch (static_pages/css/fair4pitch-chrome.css, règle .f4h__back) :
   même chevron, même ton discret au repos, même position en tête de page.
   Seule la destination change : pas la racine du site, mais /#communautes,
   la section précise d'où le visiteur est arrivé sur ces deux pages.
   Volontairement au-dessus du fil d'Ariane plutôt que fondu dedans : le fil
   d'Ariane dit la hiérarchie de la page, ce lien propose un raccourci vers
   l'origine, ce ne sont pas la même information.

   #main plutôt que .com-back seul : sans lui, ".com-back" seul (0,1,0) perdait
   face à "a:not(.com-btn)" plus bas dans ce fichier (0,2,1), qui l'emportait
   quel que soit l'ordre dans le fichier et forçait le teal des liens
   ordinaires en toutes circonstances, effaçant le ton discret voulu ici.
   Constaté aux styles calculés sur la page servie, même piège que celui
   documenté plus bas pour .com-btn. */
#main .com-back {
    display: inline-block;
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .78rem;
    color: var(--text-mute, rgba(250,250,248,.55));
    text-decoration: none;
    margin-bottom: 1rem;
}

#main .com-back:hover { color: var(--teal, #7AC4B8); text-decoration: underline; }

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.com-crumb {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute, rgba(250,250,248,.55));
    margin-bottom: 1.2rem;
}

.com-crumb a { color: var(--teal, #7AC4B8); text-decoration: none; }
.com-crumb a:hover { text-decoration: underline; }
.com-crumb span[aria-current] { color: var(--text-mute, rgba(250,250,248,.55)); }

/* ── En-tête de page ─────────────────────────────────────────────────────── */
.com-eyebrow {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal, #7AC4B8);
    margin-bottom: .9rem;
}

.com-h1 {
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    margin: 0 0 1.1rem;
    max-width: 20ch;
}

.com-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.65;
    color: var(--text-sub, rgba(250,250,248,.72));
    max-width: 62ch;
    margin: 0 0 2rem;
}

.com-baseline {
    font-family: var(--serif, 'Playfair Display', serif);
    font-style: italic;
    color: var(--text-mute, rgba(250,250,248,.55));
    margin: -.6rem 0 1.6rem;
}

/* ── Bandeau de preuves chiffrées ────────────────────────────────────────── */
.com-proof {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--border, rgba(255,255,255,.1));
    margin-bottom: 3.5rem;
}

.com-proof div { min-width: 8rem; }

.com-proof strong {
    display: block;
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1;
    color: var(--teal, #7AC4B8);
    margin-bottom: .35rem;
}

.com-proof span {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .84rem;
    color: var(--text-mute, rgba(250,250,248,.55));
}

/* ── Corps de texte ──────────────────────────────────────────────────────── */
.com-wrap h2 {
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 3.2rem 0 1rem;
    max-width: 30ch;
}

.com-wrap h3 {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.8rem 0 .5rem;
    color: var(--text, #FAFAF8);
}

.com-wrap p,
.com-wrap li {
    color: var(--text-sub, rgba(250,250,248,.72));
    line-height: 1.72;
    font-size: 1.02rem;
    max-width: 68ch;
}

/* Sans marge, deux paragraphes consécutifs se collent et se lisent comme un seul
   bloc : c'était le cas de toute la page, pas d'un endroit isolé. Les blocs qui
   veulent rester compacts (FAQ, encart d'appel) remettent margin: 0 plus bas. */
.com-wrap p { margin: 0 0 1.1rem; }

/* :not(.com-btn) matters: without it this rule ties .com-btn on specificity
   for source order alone and, for .com-wrap a vs .com-btn specifically, the
   descendant selector's extra type component (0,1,1) outranks .com-btn's
   (0,1,0) outright — teal text on the teal button background, invisible.
   Confirmed via computed styles on the live page (recette 07/08/2026). */
.com-wrap a:not(.com-btn) { color: var(--teal, #7AC4B8); }

.com-wrap ul { padding-left: 1.1rem; }
.com-wrap li { margin-bottom: .45rem; }

/* ── Grille des sept communautés ─────────────────────────────────────────── */
.com-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    /* Explicit rather than relying on the initial value: grid items stretch
       to the row's tallest member by default, but stating it here makes the
       equal-height intent unambiguous instead of implicit. */
    align-items: stretch;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.com-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card, #1e1e1c);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: var(--radius-lg, 10px);
    padding: 1.5rem 1.4rem 1.3rem;
    transition: border-color .2s, transform .2s;
}

a.com-card { text-decoration: none; }
a.com-card:hover { border-color: var(--teal, #7AC4B8); transform: translateY(-2px); }

/* Fair4IA occupe deux colonnes : c'est la communauté sur laquelle le marché
   nous cherche, elle ne peut pas avoir la même surface que les six autres. */
.com-card-lg { grid-column: span 2; }

@media (max-width: 620px) {
    .com-card-lg { grid-column: span 1; }
}

.com-card h3 {
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: 1.32rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--text, #FAFAF8);
}

.com-card-lg h3 { font-size: 1.6rem; }
.com-card h3 em { font-style: normal; color: var(--teal, #7AC4B8); }
.com-card-lg h3 em { color: var(--gold, #C8A96E); }

.com-card p {
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    flex: 1;
}

.com-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .82rem;
    color: var(--text-mute, rgba(250,250,248,.55));
    border-top: 1px solid var(--border-s, rgba(255,255,255,.06));
    padding-top: .8rem;
}

.com-card-meta b { color: var(--teal, #7AC4B8); font-size: .95rem; }
.com-card-lg .com-card-meta b { color: var(--gold, #C8A96E); }
.com-card-go { color: var(--teal, #7AC4B8); font-weight: 600; }

/* Communauté dont la page n'est pas encore ouverte : la carte informe mais ne
   promet pas un lien qui renverrait un 404. */
.com-card-soon .com-card-go { color: var(--text-mute, rgba(250,250,248,.55)); font-weight: 400; }

/* ── Listes de profils et de technologies ────────────────────────────────── */
.com-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.com-tags li {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .84rem;
    color: var(--text-sub, rgba(250,250,248,.72));
    background: var(--input-bg, rgba(255,255,255,.06));
    border: 1px solid var(--border-s, rgba(255,255,255,.06));
    border-radius: 999px;
    padding: .32rem .8rem;
    margin: 0;
}

/* ── Étapes numérotées (processus de sélection) ──────────────────────────── */
.com-steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: etape; }

.com-steps > li {
    counter-increment: etape;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.6rem;
    max-width: 66ch;
}

.com-steps > li::before {
    content: counter(etape, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .1rem;
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--teal, #7AC4B8);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 50%;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.com-steps b { display: block; color: var(--text, #FAFAF8); margin-bottom: .2rem; }

/* ── Encadré (modèle 10 % / 10 %, cas clients) ───────────────────────────── */
.com-box {
    background: var(--bg-soft, #222220);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-left: 2px solid var(--teal, #7AC4B8);
    border-radius: var(--radius, 6px);
    padding: 1.4rem 1.5rem;
    margin: 1.6rem 0;
}

.com-box h3 { margin-top: 0; }
.com-box p:last-child { margin-bottom: 0; }
.com-box-todo { border-left-color: var(--gold, #C8A96E); }

/* ── Questions fréquentes ────────────────────────────────────────────────── */
/* Les réponses sont ouvertes par défaut : le contenu d'un FAQPage doit être
   visible à l'écran, et un <details> replié reste dans le DOM mais demande un
   geste. Le pli n'est là que pour l'utilisateur qui veut balayer la liste. */
.com-faq { border-top: 1px solid var(--border, rgba(255,255,255,.1)); margin-top: 1.5rem; }

.com-faq details { border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); }

.com-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 0;
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #FAFAF8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.com-faq summary::-webkit-details-marker { display: none; }

.com-faq summary::after {
    content: '−';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--teal, #7AC4B8);
    flex-shrink: 0;
}

.com-faq details:not([open]) summary::after { content: '+'; }
.com-faq p { padding: 0 0 1.3rem; margin: 0; }

/* ── Appel à l'action de fin de page ─────────────────────────────────────── */
.com-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 1rem;
    padding: 1.8rem;
    background: var(--bg-soft, #222220);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: var(--radius-lg, 10px);
}

.com-cta p { margin: 0; flex: 1 1 22rem; }

.com-btn {
    font-family: var(--sans, 'DM Sans', sans-serif);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius, 6px);
    padding: .8rem 1.4rem;
    border: 1px solid var(--teal, #7AC4B8);
    background: var(--teal, #7AC4B8);
    color: var(--ink, #1A1A18);
    cursor: pointer;
}

.com-btn-ghost { background: transparent; color: var(--teal, #7AC4B8); }
.com-btn:hover { opacity: .88; }

@media (prefers-reduced-motion: reduce) {
    a.com-card:hover { transform: none; }
}