/* RC3.68 — Composants communs de mise en forme (application, espace organisateur, pages publiques).
   Règle : aucun lien écrit en texte dans le contenu d'une page ; on navigue par des boutons, des pavés ou des cartes
   cliquables. Couleurs : uniquement les variables d'atelier.css (redéfinies en mode sombre). */

/* Bouton « Retour » : toujours en tête de page, au-dessus du titre, même aspect partout. */
.mc-retour{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px 8px 12px;margin:0 0 14px;
  border:1px solid var(--ligne)!important;border-radius:var(--pilule)!important;background:var(--papier)!important;color:var(--encre)!important;
  font:600 14px/1.2 var(--font-texte)!important;text-decoration:none!important;box-shadow:none!important;transition:border-color .15s,background .15s}
.mc-retour::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:4px}
.mc-retour:hover{border-color:var(--foret)!important;background:var(--foret-voile)!important}
.mc-retour:focus-visible,.mc-pave:focus-visible,.mc-carte-lien:focus-visible{outline:3px solid var(--foret);outline-offset:2px}

/* En-tête de page : titre, phrase d'introduction, actions principales. */
.mc-entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin:0 0 20px}
.mc-entete>div:first-child{flex:1 1 320px;min-width:0}
.mc-entete h1{margin:0 0 6px}
.mc-entete p{margin:0;color:var(--encre-douce);max-width:62ch}

/* Rangée de boutons : à la suite sur ordinateur, les uns sous les autres sur téléphone. */
.mc-boutons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}
.mc-boutons>*{margin:0!important}
@media (max-width:560px){.mc-boutons{flex-direction:column;align-items:stretch}.mc-boutons>.btn,.mc-boutons>a,.mc-boutons>button,.mc-boutons>form{width:100%}
  .mc-boutons>form>button{width:100%}}

/* Pavés : sommaires et menus de navigation (titre + une ligne), toute la surface est cliquable. */
.mc-paves{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0 0 24px!important;padding:0!important;list-style:none!important}
.mc-paves>li{margin:0!important;padding:0!important}
.mc-paves>li::before,.mc-paves>li::marker{content:none}
.mc-pave{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:14px 16px;border:1px solid var(--ligne);
  border-radius:var(--rayon-s);background:var(--papier);color:var(--encre)!important;text-decoration:none!important;
  font:600 15px/1.3 var(--font-texte);transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;padding-right:38px}
.mc-pave small{font:400 13px/1.35 var(--font-texte);color:var(--encre-douce)}
.mc-pave::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--foret);
  border-top:2px solid var(--foret);transform:translateY(-50%) rotate(45deg)}
.mc-pave:hover{border-color:var(--foret);box-shadow:0 6px 18px rgba(22,33,28,.08);transform:translateY(-1px)}
@media (max-width:560px){.mc-paves{grid-template-columns:1fr}}

/* Carte cliquable (un objet, un cercle, une demande…) : toute la carte mène à sa page. */
.mc-carte-lien{display:block;color:inherit!important;text-decoration:none!important;border:1px solid var(--ligne);border-radius:var(--rayon-l);
  background:var(--papier);padding:18px 20px;transition:border-color .15s,box-shadow .15s}
.mc-carte-lien:hover{border-color:var(--foret);box-shadow:0 6px 18px rgba(22,33,28,.08)}

/* Section carte (contenu groupé), avec titre et pied d'actions. */
.mc-carte{border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--papier);padding:20px 22px;margin:0 0 16px}
.mc-carte>h2,.mc-carte>h3{margin-top:0}
.mc-carte>:last-child{margin-bottom:0}
@media (max-width:560px){.mc-carte{padding:16px}}

/* État vide : une phrase et le bouton qui permet d'avancer (jamais un lien dans la phrase). */
.mc-vide{border:1px dashed var(--bordure-champ);border-radius:var(--rayon-l);padding:22px;text-align:center;color:var(--encre-douce)}
.mc-vide p{margin:0 0 12px}
.mc-vide .mc-boutons{justify-content:center}

/* Choix d'un cercle (ou d'un filtre) : pastilles sélectionnables. */
.mc-choix{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mc-choix a,.mc-choix button{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border-radius:var(--pilule);border:1px solid var(--bordure-champ);
  background:transparent;color:var(--encre)!important;font:600 14px/1.2 var(--font-texte);text-decoration:none!important;cursor:pointer}
.mc-choix [aria-current="page"],.mc-choix [aria-pressed="true"]{background:var(--aplat);border-color:var(--aplat);color:var(--sur-aplat)!important}
html[data-theme="dark"] .mc-choix [aria-current="page"],html[data-theme="dark"] .mc-choix [aria-pressed="true"]{background:#2f6a55;border-color:#2f6a55;color:#f5f0e6!important}