/* ==========================================================================
   A²V — Affaires 2 Valeurs
   Feuille unique de l'annuaire et des kits.
   Refonte 2026 : fond crème gaufré, cartes blanches à grand rayon, or contextuel.
   Référence : design/ (export du canvas, planche « Fonds A2V » option D).
   ========================================================================== */

:root {
    /* Palette du label, retendue sur la maquette 2026 */
    --noir:        #171512;   /* l'encre : titres, texte fort, aplats sombres */
    --or:          #C9A227;   /* l'or de marque : décor, et texte sur fond sombre */
    --or-sombre:   #8A6A16;   /* l'or lisible sur blanc : intitulés, liens survolés */
    --or-profond:  #6E5411;   /* l'or lisible sur l'aplat beige */
    --creme:       #F5F3EE;   /* le fond de page */
    --beige:       #F0E7CE;   /* l'aplat d'accent, pour un bloc sur deux */
    --blanc:       #FFFFFF;

    /* Déclinaisons chaudes, dérivées de l'encre */
    --gris-900:    #3A352D;   /* texte courant */
    --gris-500:    #6B6455;   /* texte doux, intitulés discrets */
    --gris-400:    #5C564C;   /* texte doux sur fond clair, un cran plus lisible */
    --gris-300:    #D8D2C4;   /* filets et séparateurs */
    --gris-100:    #EFEAE0;   /* aplat léger, fond d'avatar en attente d'image */

    /* Rôles */
    /* Le fond de page est désormais le crème, gaufré de fines rayures : c'est lui
       qui fait ressortir les cartes blanches. Le blanc ne sert plus que de surface. */
    --fond:            var(--creme);
    --fond-carte:      var(--blanc);
    --fond-sombre:     var(--noir);
    --fond-accent:     var(--beige);
    --texte:           var(--noir);
    --texte-courant:   var(--gris-900);
    --texte-doux:      var(--gris-500);
    --accent:          var(--or);
    --bordure:         var(--gris-300);
    --bordure-fine:    rgba(23, 21, 18, 0.10);
    --selection:       #EBDBA6;

    /* Typographie */
    /* IBM Plex Sans, chargée dans layout.php. Elle remplace Roboto ET l'ancienne
       pile serif, qui n'était pas un webfont : les titres changeaient donc de
       dessin d'un poste à l'autre. Une seule famille, trois graisses. */
    --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --serif: var(--sans);   /* alias de compatibilité : les titres sont en sans */
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Échelle typographique */
    --taille-2xs:  0.6875rem;  /* 11px — intitulés en capitales */
    --taille-xs:   0.75rem;    /* 12px */
    --taille-sm:   0.8125rem;  /* 13px */
    --taille-md:   0.9375rem;  /* 15px */
    --taille-lg:   1rem;       /* 16px — corps */
    --taille-xl:   1.0625rem;  /* 17px */
    --taille-2xl:  1.375rem;   /* 22px */
    --taille-3xl:  1.625rem;   /* 26px */

    /* Espacement, sur une base de 4px */
    --espace-2xs:  4px;
    --espace-xs:   8px;
    --espace-sm:   12px;
    --espace-md:   16px;
    --espace-lg:   24px;
    --espace-xl:   32px;
    --espace-2xl:  48px;
    --espace-3xl:  64px;

    /* Rythme */
    --largeur-max:   1000px;
    --largeur-texte: 660px;
    --gouttiere:     var(--espace-md);
    --rayon:           22px;  /* surfaces : cartes, encarts, blocs */
    --rayon-controle:  10px;  /* contrôles : boutons, champs, bascules */
    --ombre-survol: 0 16px 36px rgba(23, 21, 18, 0.10);
    --ombre: var(--ombre-survol);   /* alias de compatibilité */
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--taille-lg);
    line-height: 1.6;
    color: var(--texte);
    background-color: var(--fond);

    /* Le filigrane a disparu : le nom du club répété en gros sur toute la page
       parasitait la lecture sans rien apprendre. À la place, de fines rayures
       diagonales qui donnent au fond un grain de papier gaufré. C'est du CSS,
       donc plus de logo-bg.png à charger. */
    background-image: repeating-linear-gradient(
        -45deg,
        #F1EDE3 0 2px,
        transparent 2px 16px
    );

    -webkit-font-smoothing: antialiased;
    position: relative;
}

::selection { background: var(--selection); }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--noir);
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.625rem, 4vw, 2.375rem); letter-spacing: -0.01em; line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 2.5vw, var(--taille-3xl)); }
h3 { font-size: var(--taille-lg); }

p { margin: 0 0 1em; }

a { color: var(--noir); text-decoration-color: var(--or-sombre); text-underline-offset: 3px; }
a:hover { color: var(--or-profond); }

img { max-width: 100%; height: auto; }

.conteneur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--espace-lg);
}

.conteneur--texte { max-width: var(--largeur-texte); }

/* Intitulé de section : capitales espacées, en or. Le motif se répète sur
   toutes les pages de la maquette, au-dessus d'un titre ou d'une valeur. */
.intitule {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--taille-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--or-sombre);
    margin: 0 0 var(--espace-sm);
}

.intitule--discret { color: var(--texte-doux); }

/* L'icône suit la couleur de l'intitulé, et ne se laisse pas écraser par un
   conteneur en flex qui voudrait la rétrécir. */
.picto { flex-shrink: 0; }
.intitule--clair   { color: var(--or); }
.intitule--profond { color: var(--or-profond); }

/* Utilitaires. Ils remplacent les styles inline qui s'étaient accumulés dans
   fiche.php, kit.php et kit-index.php, tous porteurs du même réglage. */
.note {
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

.sans-marge { margin: 0; }

/* Filet or : le motif récurrent du label. */
.filet {
    border: 0;
    height: 1px;
    background: var(--or);
    opacity: 0.5;
    margin: var(--espace-2xl) 0;
}

/* --- En-tête ------------------------------------------------------------- */
/* Collé en haut et translucide : la marque et le retour à l'annuaire restent
   atteignables pendant qu'on parcourt une longue grille. */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(245, 243, 238, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.entete__interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-md);
    padding-top: var(--espace-md);
    padding-bottom: var(--espace-md);
}

.entete__marque { display: flex; align-items: center; }

.entete__marque img { display: block; width: 156px; height: auto; }

.entete__lien {
    font-size: var(--taille-sm);
    font-weight: 500;
    text-decoration: none;
}

.entete__lien::after { content: " \2192"; }

/* --- Pied de page -------------------------------------------------------- */

.site-pied {
    margin-top: var(--espace-xl);
    padding: var(--espace-xl) 0 var(--espace-2xl);
    color: var(--texte-doux);
    font-size: var(--taille-sm);
    text-align: center;
}

.site-pied p { margin: 0 0 var(--espace-sm); }
.site-pied p:last-child { margin-bottom: 0; }

.site-pied__liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-xs);
}

.site-pied a { color: var(--gris-400); text-decoration: none; }
.site-pied a:hover { color: var(--or-profond); text-decoration: underline; }
.site-pied__liens span { color: var(--bordure); }

/* --- Avatars ------------------------------------------------------------- */
/* Portrait du membre, ou monogramme quand il n'y en a pas encore. Les huit
   aplats sont sourds et chauds, pris dans la famille du label : ils doivent
   distinguer les cartes les unes des autres sans jamais concurrencer l'or.
   L'indice de variante est calculé sur le slug (src/members.php), donc stable
   d'un build à l'autre : un membre garde sa couleur. */

.avatar {
    display: block;
    width: var(--avatar-taille, 96px);
    height: var(--avatar-taille, 96px);
    border-radius: 50%;
    object-fit: cover;
    background: var(--gris-100);
    flex-shrink: 0;
}

.avatar--mono {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    /* Le monogramme suit la taille de la pastille : deux lettres pleines, quel
       que soit le contexte, sans réglage à reprendre à chaque appel. */
    font-size: calc(var(--avatar-taille, 96px) * 0.36);
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--blanc);
    user-select: none;
}

.avatar--v0 { background: #3D3A33; }
.avatar--v1 { background: #5A4A2E; }
.avatar--v2 { background: #4A4A42; }
.avatar--v3 { background: #6E5411; }
.avatar--v4 { background: #45403A; }
.avatar--v5 { background: #5C564C; }
.avatar--v6 { background: #574733; }
.avatar--v7 { background: #33322C; }

/* --- Intro d'annuaire ---------------------------------------------------- */

.annuaire-intro {
    max-width: var(--largeur-texte);
    margin: 3rem auto 2rem;
    text-align: center;
}

.annuaire-intro p { color: var(--texte-doux); font-size: 1.05rem; }

/* --- Accueil ------------------------------------------------------------- */

.accueil { margin: var(--espace-2xl) auto var(--espace-3xl); }

.accueil__intro {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--espace-xl);
}

.accueil__intro p { color: var(--gris-400); font-size: var(--taille-xl); margin: 0; }

.accueil__monogramme { display: block; width: 88px; height: auto; margin: 0 auto var(--espace-md); }

/* La vitrine : des pastilles qui se chevauchent, en éventail descendant. Elle
   dit d'un coup d'œil que le club est un groupe de personnes. */
.accueil__vitrine { text-align: center; }

.accueil__vitrine .intitule { justify-content: center; }

.vitrine {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Pas de flex-wrap : l'éventail se lit d'un seul tenant. En dessous, on
       réduit les pastilles plutôt que de casser la courbe sur deux lignes. */
    list-style: none;
    margin: 0 0 var(--espace-lg);
    padding: 0 0 var(--espace-sm) 14px;
}

.vitrine__element {
    margin-left: -14px;
    margin-top: var(--vitrine-chute, 0);
}

/* Le lien ne porte que la pastille : pas de soulignement à hériter. */
.vitrine__element a { display: block; text-decoration: none; }

.vitrine__avatar {
    border: 3px solid var(--blanc);
    box-shadow: 0 8px 20px rgba(23, 21, 18, 0.14);
    /* La durée du fondu est reprise dans le script de rotation : les deux
       doivent rester d'accord, sinon la pastille change à vue. */
    transition: transform 0.2s ease, opacity 0.45s ease;
    opacity: 1;
}

.vitrine__element a:hover .vitrine__avatar { transform: translateY(-6px); }

.accueil__action { margin: 0; }

.accueil__compteur { gap: var(--espace-sm); }

.accueil__nombre {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--or);
}

/* Lieu : l'image occupe une moitié du bloc, le texte l'autre.
   Sélecteur doublé à dessein : .bento__bloc pose display:flex plus bas dans la
   feuille, et gagnerait à spécificité égale. */
.bento__bloc.accueil__lieu { display: grid; grid-template-columns: 1fr 1fr; }

.accueil__lieu img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    display: block;
}

.accueil__lieu-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
}

.accueil__adresse { margin: var(--espace-xs) 0 0; color: var(--gris-400); font-size: var(--taille-md); }

.accueil__carte { position: relative; min-height: 240px; }

.accueil__carte iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }

/* En haut, jamais en bas : l'attribution « Contributeurs OpenStreetMap » occupe
   le bas de l'iframe sur toute sa largeur, et la licence ODbL impose qu'elle
   reste lisible. Le bouton la recouvrait. */
.accueil__itineraire { position: absolute; top: 16px; right: 16px; }

.accueil__citation { margin: 0; gap: var(--espace-xs); }

.accueil__citation blockquote {
    margin: 0;
    /* Les guillemets sont décoratifs : ils encadrent sans être lus. */
    quotes: none;
}

.accueil__citation blockquote::before,
.accueil__citation blockquote::after {
    display: block;
    font-size: 2.375rem;
    line-height: 0.7;
    color: var(--or);
    font-weight: 600;
}

.accueil__citation blockquote::before { content: "«"; margin-bottom: var(--espace-md); }
.accueil__citation blockquote::after  { content: "»"; text-align: right; margin-top: var(--espace-xs); }

.accueil__citation blockquote p {
    font-size: var(--taille-md);
    line-height: 1.65;
    color: var(--texte-courant);
    margin: 0 0 var(--espace-xs);
}

.accueil__citation figcaption {
    font-size: var(--taille-sm);
    font-weight: 600;
    color: var(--texte-doux);
}

/* Sélecteur doublé, comme pour le lieu : .bento__bloc impose flex-direction
   column plus bas dans la feuille et gagnerait à spécificité égale. */
.bento__bloc.accueil__ecrire {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-md);
}

.accueil__fleche { font-size: 1.25rem; color: var(--or); }

.reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.reseaux__lien {
    display: inline-block;
    padding: 8px 14px;
    font-size: var(--taille-sm);
    font-weight: 500;
    text-decoration: none;
    background: var(--creme);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.reseaux__lien:hover { background: var(--fond-accent); color: var(--or-profond); }

/* --- Recherche ----------------------------------------------------------- */
/* Une seule carte blanche : la loupe, le champ, le compteur. Le champ n'a ni
   cadre ni fond propre, c'est la carte qui fait office de contenant. */

.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-md);
    margin: 0 0 var(--gouttiere);
    padding: 20px 28px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
}

/* Le libellé sert les lecteurs d'écran, la loupe sert les autres. */
.filtres__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.filtres__loupe { color: var(--texte-doux); flex-shrink: 0; }

.filtres input {
    flex: 1;
    min-width: 160px;
    padding: 8px 0;
    font-family: inherit;
    font-size: var(--taille-md);
    color: var(--texte);
    background: transparent;
    border: 0;
    outline: none;
}

.filtres input::placeholder { color: var(--texte-doux); }

/* Le focus se marque sur la carte entière : un contour autour d'un champ sans
   bordure flotterait dans le vide. */
.filtres:focus-within {
    box-shadow: 0 0 0 2px var(--or-sombre);
}

.filtres__compteur {
    margin: 0;
    flex-shrink: 0;
    font-size: var(--taille-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--texte-doux);
}

/* --- Grille de membres --------------------------------------------------- */

.grille-membres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: var(--gouttiere);
    list-style: none;
    margin: 0;
    padding: 0;
}

.carte-membre {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* display:flex écraserait le [hidden] de la feuille du navigateur. */
.carte-membre[hidden] { display: none; }

/* Au repos la carte est nue : c'est le fond crème gaufré qui la détoure. Le
   relief n'apparaît qu'au survol, ce qui désigne la carte visée sans faire
   vibrer la grille entière. */
.carte-membre:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}

/* L'avatar ne remplit plus la carte : une pastille ronde, posée en haut, qui
   laisse la place au nom. Le portrait plein cadre donnait, faute de photos, une
   grille de macarons rigoureusement identiques. */
.carte-membre__avatar { --avatar-taille: 56px; margin-bottom: 18px; }

.carte-membre__corps { flex: 1; }

.carte-membre__entreprise {
    font-size: var(--taille-lg);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--espace-2xs);
}

.carte-membre__entreprise a { text-decoration: none; }

/* Toute la carte est cliquable, sans imbriquer de lien. */
.carte-membre__entreprise a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.carte-membre__dirigeant {
    margin: 0 0 var(--espace-sm);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
}

.carte-membre__meta {
    margin: 0;
    padding-top: var(--espace-sm);
    border-top: 1px solid var(--bordure-fine);
    font-size: var(--taille-sm);
    color: var(--texte-doux);
    line-height: 1.45;
}

.carte-membre__secteur { color: var(--texte-courant); font-weight: 500; }


.annuaire-vide {
    text-align: center;
    padding: 3rem 0;
    color: var(--texte-doux);
}

/* --- Grille bento -------------------------------------------------------- */
/* Trois colonnes, des blocs qui en occupent une, deux ou trois. C'est la trame
   commune de l'accueil et de la fiche membre. */

.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere);
}

.bento__bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
}

.bento__bloc--large  { grid-column: span 2; }
.bento__bloc--pleine { grid-column: span 3; }

/* Aplat sombre : un bloc sur deux, pour poser un rythme dans la grille. */
.bento__bloc--sombre { background: var(--fond-sombre); color: var(--creme); }
.bento__bloc--sombre a { color: var(--or); }

/* Aplat beige : la variante chaude, pour l'information pratique. */
.bento__bloc--accent { background: var(--fond-accent); }

/* Bloc sans rembourrage : l'image ou l'avatar y va bord à bord. */
.bento__bloc--nu { padding: 0; overflow: hidden; align-items: center; }

.bento__valeur {
    margin: 0;
    font-size: var(--taille-2xl);
    font-weight: 600;
    line-height: 1.3;
}

.bento__valeur--petite { font-size: var(--taille-xl); }

/* Les blocs qui sont des liens réagissent, les autres non. */
a.bento__bloc {
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.bento__bloc:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}

/* --- Fiche membre -------------------------------------------------------- */

.fiche { margin: var(--espace-2xl) auto var(--espace-3xl); }

.fiche__identite { justify-content: flex-end; }

.fiche__titre { margin: 0 0 var(--espace-xs); }

.fiche__dirigeant {
    font-size: var(--taille-lg);
    font-weight: 400;
    color: var(--texte-courant);
    margin: 0;
}

/* L'accroche (« Description 1 » du Sheet) : une phrase, sous le dirigeant.
   Elle ne concurrence pas le titre, elle le prolonge. */
.fiche__accroche {
    font-size: var(--taille-md);
    line-height: 1.5;
    color: var(--texte-doux);
    margin: var(--espace-xs) 0 0;
    max-width: 46ch;
}

.fiche__portrait { min-height: 220px; }

/* Le portrait remplit son bloc : c'est le bloc qui donne la forme, pas la
   pastille. Seul endroit du site où l'avatar n'est pas rond. */
.fiche__avatar {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 0;
    font-size: 4.5rem;
}

/* Coordonnées : autant de colonnes que la largeur en autorise. */
.fiche__coordonnees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--espace-lg);
    margin: 0;
}

/* Une adresse e-mail ne se coupe proprement nulle part : sur une colonne de
   150px elle sortait en « direction@franceextin / cteur.fr ». On lui en donne
   deux, et elle retombe sur une seule ligne dans la quasi-totalité des cas. */
.fiche__coordonnees > .coordonnee--large { grid-column: span 2; }

.fiche__coordonnees dt {
    font-size: var(--taille-xs);
    color: var(--texte-doux);
    margin-bottom: var(--espace-2xs);
}

.fiche__coordonnees dd {
    margin: 0;
    font-size: var(--taille-md);
    font-weight: 600;
    word-break: break-word;
}

.fiche__presentation {
    margin-top: var(--gouttiere);
    padding: 56px 40px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
}

.fiche__presentation .conteneur--texte { padding: 0; }

.fiche__description {
    font-size: var(--taille-xl);
    line-height: 1.65;
    margin: 0;
}

/* Les trois colonnes de description arrivent en blocs successifs, dans l'ordre
   saisi : on espace ce qui suit plutôt que chaque bloc, sinon le premier
   décolle de son intitulé. */
.fiche__description + .fiche__description,
.fiche__description + .savoirs,
.savoirs + .fiche__description,
.savoirs + .savoirs { margin-top: var(--espace-lg); }

/* Énumérations : deux colonnes dès qu'il y a la place, les éléments étant
   courts. Puce en or posée en pseudo-élément, pour garder une vraie <ul>
   sémantique sous le lecteur d'écran. */

.savoirs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espace-xs) var(--espace-lg);
}

.savoirs__item {
    position: relative;
    padding-left: var(--espace-md);
    font-size: var(--taille-lg);
    line-height: 1.5;
    color: var(--texte-courant);
}

.savoirs__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.fiche__kit { margin-top: var(--espace-lg); text-align: center; }

/* --- Navigation entre membres -------------------------------------------- */

.voisins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere);
    margin-top: var(--gouttiere);
}

.voisins__lien {
    display: flex;
    align-items: center;
    gap: var(--espace-md);
    padding: 28px;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.voisins__lien:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}

.voisins__lien--centre {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--espace-2xs);
}

.voisins__lien--fin { justify-content: flex-end; text-align: right; }

.voisins__avatar { --avatar-taille: 52px; }

.voisins__nom {
    display: block;
    font-size: var(--taille-md);
    font-weight: 600;
    line-height: 1.35;
}

.voisins .intitule { margin-bottom: var(--espace-2xs); display: block; }
.voisins .note { margin: 0; }

.bouton {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    border-radius: var(--rayon-controle);
    cursor: pointer;
    background: var(--noir);
    color: var(--creme);
    transition: background 0.15s ease;
}

.bouton:hover { background: var(--gris-900); color: var(--or); }

.bouton--or { background: var(--or); color: var(--noir); }
.bouton--or:hover { background: var(--or-sombre); color: var(--noir); }

.bouton--discret {
    background: transparent;
    color: var(--noir);
    border: 1px solid var(--bordure);
}

.bouton--discret:hover { background: var(--blanc); color: var(--noir); border-color: var(--or); }

/* Encart du label sur la fiche : la preuve d'appartenance. */

/* --- Page indisponible --------------------------------------------------- */

.indisponible {
    max-width: var(--largeur-texte);
    margin: 5rem auto;
    text-align: center;
}

.indisponible__macaron { width: 96px; opacity: 0.35; margin-bottom: 1.5rem; }

/* --- Page kit ------------------------------------------------------------ */

.kit { margin: 2rem auto 4rem; }
.kit > p,
.kit__intro,
.kit__etape > p { max-width: 68ch; }

.kit__intro {
    padding: 20px 24px;
    background: var(--blanc);
    border-left: 3px solid var(--or);
    border-radius: var(--rayon);
    margin-bottom: 2.5rem;
}

.kit__etape { margin: 2.5rem 0; }

.kit__etape-titre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.kit__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--or);
    color: var(--noir);
    font-family: var(--serif);
    font-weight: 700;
    border-radius: 50%;
}

.kit__etape-titre h2 { margin: 0; }

/* Aperçu du macaron + bascule clair / sombre */
.macaron-apercu {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    padding: 28px;
    background: var(--blanc);
    border: 1px solid var(--bordure-fine);
    border-radius: var(--rayon);
}

.macaron-apercu__scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: var(--rayon);
    background: var(--creme);
    transition: background 0.2s ease;
}

.macaron-apercu__scene[data-variante="sombre"] { background: var(--noir); }
.macaron-apercu__image { width: 150px; height: 150px; }

.macaron-apercu__options { flex: 1; min-width: 240px; }

.bascule {
    display: inline-flex;
    padding: 3px;
    background: var(--gris-100);
    border-radius: var(--rayon-controle);
    margin-bottom: 20px;
}

.bascule button {
    padding: 8px 18px;
    font-family: inherit;
    font-size: 0.875rem;
    background: transparent;
    color: var(--texte-doux);
    border: 0;
    border-radius: var(--rayon-controle);
    cursor: pointer;
}

.bascule button[aria-pressed="true"] {
    background: var(--noir);
    color: var(--creme);
    font-weight: 500;
}

.telechargements { font-size: 0.875rem; }
.telechargements dt {
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--texte-doux);
}
.telechargements dd { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.telechargements a {
    padding: 5px 12px;
    font-size: 0.8125rem;
    text-decoration: none;
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-controle);
}

.telechargements a:hover { border-color: var(--or); background: var(--blanc); }

/* Bloc de code : l'élément central de la page kit. */
.bloc-code { position: relative; }

.bloc-code pre {
    margin: 0;
    padding: 24px;
    overflow-x: auto;
    background: var(--noir);
    color: var(--creme);
    border-radius: var(--rayon);
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    tab-size: 2;
}

.bloc-code__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.bloc-code__retour {
    font-size: 0.875rem;
    color: var(--or-sombre);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bloc-code__retour[data-visible="true"] { opacity: 1; }

.consignes {
    padding: 24px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-top: 3px solid var(--or);
    border-radius: var(--rayon);
}

.consignes ol { margin: 0; padding-left: 20px; }
.consignes li { margin-bottom: 12px; }
.consignes li:last-child { margin-bottom: 0; }
.consignes strong { display: block; font-family: var(--serif); font-size: 1.0625rem; }
.consignes code {
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 1px 5px;
    background: var(--creme);
    border-radius: 2px;
}

/* --- Index des kits ------------------------------------------------------ */

.liste-kits { list-style: none; margin: 0; padding: 0; }

.liste-kits li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--fond-carte);
    border: 1px solid var(--bordure-fine);
    border-radius: var(--rayon);
    margin-bottom: 8px;
}

/* --- Accessibilité ------------------------------------------------------- */

:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 20px;
    background: var(--or);
    color: var(--noir);
    z-index: 10;
}

.saut-contenu:focus { left: 0; }

/* --- Responsive ---------------------------------------------------------- */
/* Le bento à trois colonnes réclame un palier intermédiaire : passer
   directement de trois à une casserait la lecture sur tablette. */

@media (max-width: 900px) {
    .bento,
    .voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Sur deux colonnes, « pleine » et « large » désignent la même chose. */
    .bento__bloc--pleine,
    .bento__bloc--large { grid-column: span 2; }

    .bento__bloc:not(.bento__bloc--nu) { padding: 28px; }

    .fiche__avatar { min-height: 180px; }
    .fiche__portrait { min-height: 180px; }
    .fiche__presentation { padding: 40px 28px; }

    .bento__bloc.accueil__lieu { grid-template-columns: 1fr; }

    /* Le lien du milieu passe sous les deux flèches plutôt que de les écraser. */
    .voisins__lien--centre { grid-column: span 2; }
}

@media (max-width: 640px) {
    .grille-membres { grid-template-columns: 1fr; }

    .bento,
    .voisins { grid-template-columns: 1fr; }

    .bento__bloc--pleine,
    .bento__bloc--large,
    .voisins__lien--centre { grid-column: span 1; }

    .bento__bloc:not(.bento__bloc--nu) { padding: 24px; }

    .fiche__avatar { min-height: 160px; }
    .fiche__portrait { min-height: 0; }
    .fiche__presentation { padding: 32px 24px; }

    .accueil__nombre { font-size: 2.75rem; }
    .bento__bloc.accueil__ecrire { flex-direction: column; align-items: flex-start; }
    .fiche__description { font-size: var(--taille-lg); }

    .voisins__lien--fin { justify-content: flex-start; text-align: left; }


    .filtres { gap: var(--espace-sm); }
    .filtres__compteur { width: 100%; text-align: center; }

    .macaron-apercu { flex-direction: column; }
}

@media print {
    .entete, .site-pied, .filtres, .bloc-code__actions, .saut-contenu { display: none; }
    /* La trame gaufrée est décorative : elle ne doit pas consommer d'encre. */
    body { background-color: var(--blanc); background-image: none; }
}