/* ==========================================================================
   LinkUp — feuille de style partagée des écrans du cahier des charges
   Direction graphique v5. Un seul point de rupture : 560 px.
   Aucune ressource externe : pas de CDN, pas de police distante, pas de traceur.
   ========================================================================== */

/* ---------- polices ----------
   Choix de performance (20/10/2026) : aucune police téléchargée. « Poppins » (titres)
   et « Inter » (texte) ne sont utilisées que si elles sont déjà installées sur
   l'appareil ; sinon, les polices du système (San Francisco, Roboto, Segoe UI…),
   affichées sans attente ni téléchargement. Pour revenir à Poppins partout : héberger
   ses fichiers woff2 (2 graisses, environ 40 Ko) et déclarer les @font-face ici. */

/* Un élément [hidden] reste caché, quelle que soit la règle display d'une classe
   (voile du bandeau cookies, bouton « Activer les notifications »…). */
[hidden]{display:none!important}

:root{
  /* couleurs */
  --marine:#012552;        /* texte et icônes uniquement, jamais en fond de bloc */
  --bleu:#2869FE;          /* choisir : navigation, sélection, boutons de choix */
  --bleu-fonce:#1B4FCC;
  --bleu-clair:#E7EFFF;
  --vert:#198754;          /* valider : enregistrer, confirmer, statut acquis */
  --vert-fonce:#146C43;
  --vert-clair:#E6F2EC;
  --corail:#EB533C;        /* accent : bulles, pastilles, illustrations */
  --corail-fonce:#C9401F;
  --corail-clair:#FDE9E5;
  --vert-doux:#4F9C7A;     /* accent secondaire : bulles, catégorie nature */
  --rose:#F6A89C;
  --rouge:#E92020;         /* alertes et actions destructrices, jamais en fond */
  --logo:#194B4B;          /* réservé au logo */

  --fond:#EDF2F8;
  --bulle:#DDE7F3;
  --blanc:#FFFFFF;
  --gris:#6B7A8C;
  --gris-clair:#A6B1BE;
  --surface:#F1F4F8;
  --trait:#E9EEF3;

  /* ombres */
  --sh-sm:0 2px 4px rgba(1,37,82,.07);
  --sh-md:0 4px 9px rgba(1,37,82,.07);
  --sh-lg:0 8px 16px rgba(1,37,82,.10);
  --sh-bleu:0 6px 14px rgba(40,105,254,.30);
  --sh-vert:0 6px 14px rgba(25,135,84,.28);

  --r-card:20px;
  --r-big:24px;
  --app:430px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--fond);color:var(--marine);line-height:1.55;
  min-height:100vh;position:relative;overflow-x:hidden;
}
h1,h2,h3,h4,.ttl,.btn,.wordmark{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- fond à bulles ---------- */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.bubbles i{position:absolute;border-radius:50%;display:block}
.bubbles i:nth-child(1){width:230px;height:230px;top:-90px;right:-80px;background:var(--corail);opacity:.13}
.bubbles i:nth-child(2){width:150px;height:150px;top:20%;left:-80px;background:var(--vert-doux);opacity:.18}
.bubbles i:nth-child(3){width:110px;height:110px;top:46%;right:-45px;background:var(--corail);opacity:.10}
.bubbles i:nth-child(4){width:190px;height:190px;bottom:-70px;left:-60px;background:#fff;opacity:.45}
.bubbles i:nth-child(5){width:130px;height:130px;bottom:14%;right:-40px;background:var(--vert-doux);opacity:.14}
.bubbles i:nth-child(6){width:70px;height:70px;top:9%;left:36%;background:var(--corail);opacity:.10}

/* ---------- ossature ---------- */
.app{position:relative;z-index:1;width:100%;max-width:var(--app);margin:0 auto;
  min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;padding:0 18px 118px}
.content.no-nav{padding-bottom:28px}
/* .menu.flush réserve déjà sa propre clairance en bas (96px) pour la nav fixe */

/* ---------- en-tête ---------- */
.appbar{display:flex;align-items:center;gap:12px;padding:8px 18px 14px}
.appbar .ttl{flex:1;text-align:center;font-size:17px;font-weight:700}
.iconbtn{width:38px;height:38px;border-radius:13px;background:var(--blanc);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;flex:none}
.iconbtn svg{width:19px;height:19px}
/* Logo — fichier "sans le texte" = marque seule, pas de crop nécessaire */
.logo-mark{width:36px;height:36px;flex:none;display:inline-block;
  background:url('/logos/logo-mobile.png') no-repeat center;
  background-size:contain}
.logo-mark-lg{width:60px;height:60px;
  background:url('/logos/logo-mobile.png') no-repeat center;
  background-size:contain}
.logo-mark-xl{width:96px;height:96px;
  background:url('/logos/logo-mobile.png') no-repeat center;
  background-size:contain}

/* ---------- salutation ---------- */
.greet{display:flex;align-items:center;gap:12px;padding:4px 18px 16px}
.greet .avatar{flex:none}
.greet .txt{flex:1}
.greet .hello{font-size:14px;color:var(--gris)}
.greet .name{font-size:17px;font-weight:700;font-family:'Poppins',sans-serif}

/* ---------- avatar ---------- */
.avatar{width:44px;height:44px;border-radius:15px;background:var(--blanc);
  box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;font-family:'Poppins',sans-serif;overflow:hidden}
.avatar.lg{width:84px;height:84px;border-radius:50%;font-size:26px;background:var(--bleu-clair);box-shadow:none}
.avatar.ring{border:3px solid var(--corail)}
/* Image d'avatar (PNG prédéfini à fond transparent) */
.avatar img,.avatar-sq img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* Sélecteur d'avatar */
/* Grille fluide : des colonnes fixes (8 × 48 px, 6 sous 400 px) débordaient de la
   carte sur les petits écrans (retour de recette). */
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;padding:4px 0}
.avatar-pick{
  position:relative;display:block;aspect-ratio:1;min-width:0;padding:2px;border:2.5px solid transparent;
  background:transparent;cursor:pointer;border-radius:13px;
  transition:border-color .12s;
}
.avatar-pick input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.avatar-pick.sel,.avatar-pick:has(input:checked){border-color:var(--bleu)}
.avatar-pick:has(input:focus-visible){outline:2px solid var(--bleu);outline-offset:2px}
.avatar-pick img{width:100%;height:100%;object-fit:cover;display:block;border-radius:9px}

/* Aperçu au-dessus de la grille (E05, étape « Profil ») */
.avatar-picker-preview{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.avatar-picker-preview-img{width:60px;height:60px;border-radius:17px;overflow:hidden;background:var(--fond);flex:none}
.avatar-picker-preview-img img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-picker-preview p{font-size:13px;color:var(--gris);line-height:1.45}

/* ---------- cartes ---------- */
.card{background:var(--blanc);border-radius:var(--r-card);box-shadow:var(--sh-md);
  padding:18px;margin-bottom:14px;position:relative;overflow:hidden}
.card.flat{box-shadow:var(--sh-sm)}
.card.big{border-radius:var(--r-big);padding:22px}
.card.sel{box-shadow:0 0 0 2px var(--vert), var(--sh-md)}

/* bandeau blanc à bulles colorées */
.hero{background:var(--blanc);border-radius:var(--r-big);box-shadow:var(--sh-md);
  padding:24px 22px;margin-bottom:22px;position:relative;overflow:hidden}
.hero .bb{position:absolute;border-radius:50%;pointer-events:none}
.hero .bb.c1{width:150px;height:150px;top:-60px;right:-45px;background:var(--corail);opacity:.16}
.hero .bb.c2{width:90px;height:90px;bottom:-40px;right:10px;background:var(--vert-doux);opacity:.22}
.hero .bb.c3{width:48px;height:48px;top:34px;right:56px;background:var(--corail);opacity:.2}
.hero .bb.c4{width:70px;height:70px;bottom:-30px;left:-24px;background:var(--vert-doux);opacity:.12}
.hero h2{position:relative;font-size:17px;font-weight:700;line-height:1.3}
.hero p{position:relative;font-size:14.5px;color:var(--gris);margin-top:6px}
.hero .pill{position:relative;margin-top:12px}

/* ---------- typographie utilitaire ---------- */
.section-title{font-size:16px;font-weight:700;font-family:'Poppins',sans-serif;margin:4px 0 12px}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
.cardtitle{font-size:16.5px;font-weight:700;font-family:'Poppins',sans-serif;line-height:1.3}
.meta{font-size:14px;color:var(--gris)}
.muted{color:var(--gris)}
.small{font-size:13.5px}
/* Lien d'action secondaire (« Devenir bénévole → », « Se connecter »…) : à poser sur n'importe quel <a>. */
.go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--bleu)}

/* ---------- intro de page (titre + sous-titre) ----------
   En tête de nombreux écrans (inscription, connexion, contact, mes
   activités…). Sur mobile, ces pages n'ont souvent aucune barre au-dessus
   (voir _layout_public.html.twig) : .list-intro est donc le tout premier
   élément visible, d'où un padding généreux même en haut.
   activity/index.html.twig garde son propre réglage (plus dense, pensé
   pour cette page précise) dans son <style> local, chargé après celui-ci. */
.list-intro{padding:28px 0 22px}
.list-intro h1{font-size:22px;font-weight:700;font-family:'Poppins',sans-serif;
  color:var(--marine);line-height:1.25;margin-bottom:8px}
.list-intro p{font-size:13.5px;color:var(--gris);line-height:1.55}

/* ---------- pastilles ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:5px 11px;border-radius:999px;background:var(--blanc);border:1.5px solid var(--trait);
  color:var(--gris);white-space:nowrap}
.pill.blue{background:var(--bleu-clair);border-color:transparent;color:var(--bleu-fonce)}
.pill.green{background:var(--vert-clair);border-color:transparent;color:var(--vert-fonce)}
.pill.coral{background:var(--corail-clair);border-color:transparent;color:var(--corail-fonce)}
.pill.solid-green{background:var(--vert);border-color:transparent;color:#fff}
.pill.solid-coral{background:var(--corail);border-color:transparent;color:#fff}
.pill.off{background:var(--blanc);border-color:var(--trait);color:var(--gris-clair)}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

/* tuile d'organisation */
.tile{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;flex:none;font-family:'Poppins',sans-serif}
.tile.coral{background:var(--corail-clair);color:var(--corail-fonce)}
.tile.green{background:var(--vert-clair);color:var(--vert-fonce)}
.tile.blue{background:var(--bleu-clair);color:var(--bleu-fonce)}
.tile.grey{background:var(--blanc);border:1.5px solid var(--trait);color:var(--gris)}

/* ---------- carte d'activité ---------- */
.act{display:block}
.act .top{display:flex;gap:12px;align-items:flex-start}
.act .top .txt{flex:1;min-width:0}
.act.past{opacity:.72}
.act.past .cardtitle{color:var(--gris)}
/* complet = places à zéro, activité toujours à venir — opacité intacte, titre grisé */
.act.full .cardtitle{color:var(--gris)}

/* ---------- carte activité (liste E13, composant E14) ---------- */
.act-card{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:start;gap:6px 12px;position:relative;
  padding:14px 16px;background:var(--blanc);border-radius:16px;
  box-shadow:0 1px 6px rgba(1,37,82,.08);
  text-decoration:none;color:inherit;transition:box-shadow .15s;margin-bottom:10px}
.act-card:hover{box-shadow:0 4px 14px rgba(1,37,82,.12)}
.act-card > .tile{grid-area:1/1;align-self:start;margin-top:1px}
/* Miniature photo de la carte activité (composant partagé : liste, aperçu admin…) */
.act-img-thumb{grid-area:1/1;align-self:start;margin-top:1px;
  width:46px;height:46px;border-radius:15px;overflow:hidden;flex:none}
.act-img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.act-info{grid-area:1/2;min-width:0}
.act-tags{grid-area:2/2;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:2px}
.act-arr{grid-area:1/3;align-self:start;width:16px;height:16px;stroke:var(--gris-clair);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.act-name{font-size:14px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--marine);line-height:1.3;margin-bottom:2px}
.act-org{font-size:11.5px;color:var(--gris);margin-bottom:4px}
.act-when{font-size:11.5px;color:var(--gris);display:flex;align-items:center;gap:5px}
.act-when svg{flex:none;stroke:var(--gris);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill-places{font-size:11px;font-weight:600;color:var(--vert-fonce);background:var(--vert-clair);border-radius:20px;padding:3px 9px;white-space:nowrap}
.pill-full{font-size:11px;font-weight:600;color:var(--gris);background:var(--fond);border-radius:20px;padding:3px 9px;border:1px solid var(--trait)}
/* états */
.act-card.sel{grid-template-columns:auto 1fr auto auto;box-shadow:0 0 0 2.5px var(--vert),0 1px 6px rgba(1,37,82,.08)}
.act-card.sel .act-arr{grid-area:1/4}
.act-card.full .act-name{color:var(--gris)}
.act-card.past{opacity:.72}
.act-card.past .act-name{color:var(--gris)}
.inscrit-badge{display:none;font-size:11px;font-weight:700;color:#fff;background:var(--vert);padding:3px 10px;border-radius:20px;white-space:nowrap;align-self:start;margin-top:1px}
.act-card.sel .inscrit-badge{display:inline-flex;grid-area:1/3}

/* ---------- boutons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 20px;border-radius:999px;font-size:15px;font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-blue{background:var(--bleu);color:#fff;box-shadow:var(--sh-bleu)}
.btn-green{background:var(--vert);color:#fff;box-shadow:var(--sh-vert)}
.btn-ghost{background:var(--blanc);color:var(--bleu);box-shadow:inset 0 0 0 2px var(--bleu)}
.btn-danger{background:var(--blanc);color:var(--rouge);box-shadow:inset 0 0 0 2px var(--rouge)}
.btn-off{background:var(--blanc);border:1.5px solid var(--trait);color:var(--gris-clair);cursor:default}
.btn-sm{padding:10px 18px;font-size:13.5px;width:auto}

/* barre d'action fixée en bas d'écran */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:linear-gradient(to top,var(--fond) 62%,rgba(237,242,248,0));
  padding:26px 18px 22px}
.actionbar .inner{max-width:var(--app);margin:0 auto}

/* ---------- barre de navigation basse ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--blanc);
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 20px rgba(1,37,82,.10)}
.nav .inner{max-width:var(--app);margin:0 auto;height:76px;
  display:flex;align-items:center;justify-content:space-around;position:relative}
.nav a{display:flex;flex-direction:column;align-items:center;gap:5px;
  width:96px;font-size:10px;font-weight:500;color:var(--gris-clair)}
.nav a svg{width:22px;height:22px;stroke:var(--gris-clair)}
.nav a.on{color:var(--bleu);font-weight:700}
.nav a.on svg{stroke:var(--bleu)}
/* pastille centrale — toujours surélevée et bleue */
.nav .fab{width:96px;position:relative}
.nav .fab .disc{position:absolute;top:-55px;left:50%;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;background:var(--bleu);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 -4px 14px rgba(40,105,254,.22),0 6px 18px rgba(40,105,254,.42);
  border:4px solid var(--fond)}
.nav .fab .disc svg{width:25px;height:25px;stroke:#fff}
.nav .fab .lbl{position:absolute;top:10px;left:0;right:0;text-align:center;
  font-size:10px;font-weight:500;color:var(--gris-clair)}
.nav .fab.on .lbl{color:var(--bleu);font-weight:700}

/* ---------- panneau latéral ---------- */
/* Fermé par défaut : la maquette statique montrait chaque état dans un fichier
   HTML séparé, sans notion de bascule JS. Ces règles ajoutent cette bascule. */
.scrim{position:fixed;inset:0;background:rgba(1,37,82,.42);z-index:60;
  opacity:0;visibility:hidden;transition:opacity .2s ease}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;bottom:0;left:0;width:83%;max-width:330px;z-index:61;
  background:var(--blanc);box-shadow:8px 0 26px rgba(1,37,82,.2);
  display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .25s ease}
/* Menu plus haut que l'écran : il défile (les entrées gardent leur hauteur). */
.drawer>*{flex-shrink:0}
.drawer.open{transform:translateX(0)}
.drawer .dhead{background:var(--bleu);color:#fff;padding:20px 18px;display:flex;align-items:center;gap:12px}
.drawer .dhead .sq{width:48px;height:48px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.drawer .dhead .t{font-size:13.5px;font-weight:600;line-height:1.35}
.drawer .duser{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--trait)}
.duser-avatar{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--fond);display:flex;align-items:center;justify-content:center}
.duser-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.duser-avatar svg{width:20px;height:20px;stroke:var(--gris)}
.drawer .dgroup{padding:16px 18px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--gris-clair)}
.drawer .ditem{display:flex;align-items:center;gap:14px;padding:12px 18px;font-size:14px;font-weight:500}
.drawer .ditem svg{width:20px;height:20px;stroke:var(--gris);flex:none}
.drawer .ditem.on{color:var(--bleu);font-weight:700}
.drawer .ditem.on svg{stroke:var(--bleu)}
.drawer .dsep{height:1px;background:var(--trait);margin:10px 18px}
.drawer .dfoot{margin-top:auto;padding:16px 18px 22px}
/* Visiteur : « S'inscrire » et « Se connecter » en tête du menu latéral */
.drawer .dcta{display:flex;gap:8px;padding:16px 18px 4px}
.drawer .dcta .btn{flex:1}

/* ---------- modale de confirmation (E16/E17 et au-delà) ---------- */
.modal-wrap{display:none;position:fixed;inset:0;z-index:70;
  align-items:center;justify-content:center;padding:20px}
.modal-wrap.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,37,82,.42)}
.modal-panel{position:relative;background:var(--blanc);border-radius:var(--r-card);
  box-shadow:var(--sh-lg);padding:24px;max-width:360px;width:100%}
.modal-panel h3{font-size:18px;font-weight:700;font-family:'Poppins',sans-serif;
  color:var(--marine);margin-bottom:10px}
.modal-panel .recap{font-size:13.5px;color:var(--gris);margin-bottom:20px;line-height:1.5}
.modal-panel form{margin-bottom:8px}
.modal-cancel{display:block;width:100%;text-align:center;background:none;border:0;
  padding:10px;font-size:14px;font-weight:600;color:var(--gris);cursor:pointer}

/* ---------- listes de navigation dans le profil ---------- */
.menu{background:var(--bleu);border-radius:var(--r-big);padding:6px 4px;box-shadow:var(--sh-bleu);overflow:hidden}
/* variante pleine largeur collée au bas (E24) */
.menu.flush{border-radius:28px 28px 0 0;margin:16px -18px 0;padding:8px 4px 96px;box-shadow:none}
.menu a{display:flex;align-items:center;gap:14px;padding:15px 16px;color:#fff}
.menu a + a{border-top:1px solid rgba(255,255,255,.16)}
.menu .sq{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex:none}
.menu .sq svg{width:17px;height:17px;stroke:#fff}
.menu .lbl{flex:1;font-size:14px;font-weight:600;font-family:'Poppins',sans-serif}
.menu .lbl-wrap{flex:1;min-width:0}
.menu .chev{width:16px;height:16px;stroke:rgba(255,255,255,.75);flex:none}

/* ---------- compteurs ---------- */
.stats{display:flex;gap:10px;margin:20px 0}
.stat{flex:1;background:var(--blanc);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--sh-sm)}
.stat .n{font-size:22px;font-weight:700;font-family:'Poppins',sans-serif;line-height:1.1}
.stat .l{font-size:10.5px;color:var(--gris);margin-top:4px;line-height:1.3}
.stat.c1 .n{color:var(--bleu)}
.stat.c2 .n{color:var(--corail-fonce)}
.stat.c3 .n{color:var(--vert)}

/* ---------- indicateur de chargement (E38) ---------- */
/* N'apparaît que si la navigation prend du temps (délai posé côté JS) :
   pas de flash pour les pages qui chargent instantanément. */
.page-loading{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;
  background:var(--bleu);transform-origin:left;transform:scaleX(0);opacity:0;
  transition:transform 8s cubic-bezier(.1,.7,.1,1),opacity .2s ease}
.page-loading.active{opacity:1;transform:scaleX(.7)}

/* ---------- messages flash ---------- */
.flash{border-radius:var(--r-card);padding:13px 16px;font-size:14px;font-weight:600;
  margin-bottom:14px;display:flex;align-items:flex-start;gap:12px}
.flash span{flex:1}
.flash-success{background:var(--vert-clair);color:var(--vert-fonce)}
.flash-error{background:#FBE9E9;color:var(--rouge)}
.flash-info{background:#EAF0FF;color:var(--bleu)}
.flash-close{flex:none;color:inherit;opacity:.6;cursor:pointer;line-height:0}
.flash-close:hover{opacity:1}
.flash-close svg{width:16px;height:16px;stroke:currentColor;display:block}

/* ---------- encadré d'information ---------- */
.note{background:var(--blanc);border-radius:var(--r-card);box-shadow:var(--sh-md);
  padding:16px 16px 16px 18px;position:relative;overflow:hidden;margin-bottom:14px}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--vert)}
.note.coral::before{background:var(--corail)}
.note .h{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.note .h .i{width:24px;height:24px;border-radius:50%;background:var(--vert);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.note.coral .h .i{background:var(--corail)}
.note p{font-size:14px;color:var(--gris);margin-top:7px}

/* ---------- grille disponibilités (E26) ---------- */
.avail-grid{width:100%;border-collapse:collapse}
.avail-grid th{font-size:11px;text-transform:uppercase;color:var(--gris);font-weight:600;padding:0 4px 10px;text-align:center}
.avail-grid thead th:first-child{text-align:left}
.avail-grid tbody th{text-align:left;font-size:13.5px;font-weight:600;color:var(--marine);padding:10px 4px;white-space:nowrap}
.avail-grid td{text-align:center;padding:10px 4px;border-top:1px solid var(--trait)}
.avail-grid input[type=checkbox]{width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--trait);accent-color:var(--bleu);cursor:pointer}

/* ---------- état vide ---------- */
.empty{text-align:center;padding:34px 10px}
.empty svg{margin:0 auto 22px;display:block}
.empty h3{font-size:18px;font-weight:700}
.empty p{font-size:15px;color:var(--gris);margin-top:9px}

/* ---------- séparateur ---------- */
.hr{height:1px;background:var(--trait);margin:14px 0}

/* ---------- étiquette de groupe avec séparateur ----------
   Regroupe une liste de cases à cocher par catégorie (besoins
   d'accompagnement E28…) — différent de .pill-group-lab (pastilles E27), qui
   n'a pas ce trait de séparation. */
.group-lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris);margin:20px 0 12px;display:flex;align-items:center;gap:9px}
.group-lab:first-child{margin-top:0}
.group-lab::after{content:"";flex:1;height:1px;background:var(--trait)}

/* ---------- formulaires ---------- */
.field{margin-bottom:18px}
.field > label{display:block;font-size:14.5px;font-weight:600;color:var(--marine);margin-bottom:6px}
.input{display:block;width:100%;padding:14px 16px;border-radius:14px;
  border:1.5px solid var(--trait);background:var(--blanc);
  font-size:15px;font-family:inherit;color:var(--marine);outline:none;
  transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--gris-clair)}
.input:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(40,105,254,.10)}
.input.err{border-color:var(--rouge)}
.input.ok{border-color:var(--vert)}
textarea.input{resize:none;min-height:90px;line-height:1.55}
.input-wrap{position:relative}
.input-wrap .input{padding-right:50px}
.input-wrap .toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  padding:4px;color:var(--gris);background:none;border:0;cursor:pointer}
.input-wrap .toggle svg{width:20px;height:20px;stroke:currentColor;display:block;fill:none}
.field-msg{font-size:13.5px;margin-top:5px;color:var(--gris);line-height:1.4}
.field-msg.err{color:var(--rouge)}
.field-msg.ok{color:var(--vert-fonce)}

/* règles de robustesse */
.rules{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:10px 14px;margin-top:8px;list-style:none}
.rules li{font-size:13.5px;color:var(--gris);padding:3px 0 3px 20px;position:relative}
.rules li::before{content:"·";position:absolute;left:6px;font-size:14px;line-height:1;color:var(--gris-clair)}
.rules li.ok{color:var(--vert-fonce)}
.rules li.ok::before{content:"✓";font-size:11px;left:4px;top:4px;color:var(--vert)}

/* case à cocher */
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer;line-height:1.5}
.check input[type=checkbox]{width:18px;height:18px;min-width:18px;border-radius:5px;
  border:1.5px solid var(--trait);accent-color:var(--bleu);cursor:pointer;margin-top:2px}
.check a{color:var(--bleu);text-decoration:underline}
/* .field label (libellé de champ : bloc, gras) ne s'applique pas aux cases à cocher : case et texte côte à côte. */
.field label.check{display:flex;font-weight:400;color:inherit}
.check input[type=radio]{width:18px;height:18px;min-width:18px;accent-color:var(--bleu);cursor:pointer;margin-top:2px}

/* pills groupées (centres d'intérêt E27, besoins) */
.pill-group-lab{font-size:11px;text-transform:uppercase;font-weight:700;
  letter-spacing:.05em;color:var(--gris);margin:16px 0 8px}
.pill-group-lab:first-child{margin-top:0}
.pill-group{display:flex;flex-wrap:wrap;gap:8px}
/* Grille à 3 colonnes (coche | texte | colonne fantôme de la même largeur que
   la coche) : le texte reste visuellement centré quand la coche est masquée
   (non sélectionné), et se retrouve à droite d'une coche visible une fois
   sélectionné — sans que la pastille ne change de largeur d'un état à l'autre
   (les 2 colonnes latérales sont toujours réservées, coche visible ou non).
   Scopé à .pill-group .pill (pas juste .pill) : .pill tout court est aussi
   la pastille d'étiquette générique (badges d'activité, page d'accueil...),
   qui n'a rien à voir avec ce widget de sélection et ne doit pas hériter
   d'un display:grid à 3 colonnes. */
.pill-group .pill{position:relative;display:grid;grid-template-columns:16px 1fr 16px;
  align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--trait);
  font-size:13.5px;font-weight:600;color:var(--marine);cursor:pointer;background:var(--blanc)}
.pill-group .pill input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;margin:0}
.pill-group .pill-tick{grid-column:1;width:16px;height:16px;visibility:hidden;stroke:var(--bleu);flex:none}
.pill-group .pill > span{grid-column:2;text-align:center}
.pill-group .pill:has(input:checked){border-color:var(--bleu);color:var(--bleu);background:var(--bleu-clair)}
.pill-group .pill:has(input:checked) .pill-tick{visibility:visible}
.pill-group .pill:has(input:focus-visible){outline:2px solid var(--bleu);outline-offset:2px}

/* avatar profil (E24) + sélecteur d'avatar (E25) */
.prof-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto;display:block;object-fit:cover}
.prof-avatar-initials{display:flex;align-items:center;justify-content:center;
  background:var(--bleu-clair);color:var(--bleu);font-weight:700;font-size:22px;
  font-family:'Poppins',sans-serif}
/* .avatar-select (pas .avatar-picker : ce nom existe déjà plus haut pour un
   autre système de sélecteur, en collision avec celui-ci) */
.avatar-current{display:flex;align-items:center;gap:12px}
.avatar-current-preview{position:relative;width:48px;height:48px;border-radius:13px;
  overflow:hidden;background:var(--fond);display:flex;align-items:center;justify-content:center;flex:none}
.avatar-current-preview img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-current-preview img[hidden]{display:none}
.avatar-current-icon svg{width:22px;height:22px;stroke:var(--gris)}
.avatar-toggle-link{font-size:13.5px;font-weight:600;color:var(--bleu);cursor:pointer;background:none;border:0;padding:0;text-decoration:underline}
.avatar-grid-wrap{max-height:0;overflow:hidden;transition:max-height .25s ease}
.avatar-grid{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.avatar-choice{position:relative;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:13px;overflow:hidden;
  border:2.5px solid transparent;cursor:pointer;background:var(--fond)}
.avatar-choice img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-choice input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.avatar-choice:has(input:checked){border-color:var(--bleu)}
.avatar-choice-icon svg{width:22px;height:22px;stroke:var(--gris)}

/* indicateur d'étape */
.steps{display:flex;align-items:center;gap:7px;margin-bottom:22px}
.steps .dot{height:6px;border-radius:3px;background:var(--trait)}
.steps .dot.on{width:22px;background:var(--bleu)}
.steps .dot:not(.on){width:6px}

/* cartes de sélection de rôle (E3) */
/* Conteneur — colonne sur mobile, rangée sur desktop.
   grid-auto-rows:1fr égalise la hauteur des cartes empilées sur mobile,
   quelle que soit la longueur du titre/de la description de chacune. */
.role-cards-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px}
.role-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:16px;padding:18px 16px;min-height:88px;
  background:var(--blanc);border-radius:var(--r-big);box-shadow:var(--sh-md);
  border:2px solid transparent;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.role-card:hover{border-color:var(--bleu);box-shadow:var(--sh-md),0 0 0 4px rgba(40,105,254,.10)}
.role-card .ico{grid-row:1/3;grid-column:1;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center}
.role-card .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.role-card .rh{grid-row:1;grid-column:2;font-size:16px;font-weight:700;font-family:'Poppins',sans-serif;line-height:1.25}
.role-card .rd{grid-row:2;grid-column:2;font-size:14px;color:var(--gris);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.role-card .arr{grid-row:1/3;grid-column:3;width:18px;height:18px;stroke:var(--gris-clair);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* étiquettes à bascule (E5 — besoins, intérêts) */
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tag-toggle{font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--trait);background:var(--blanc);color:var(--gris);cursor:pointer}
.tag-toggle.on{background:var(--bleu-clair);border-color:var(--bleu);color:var(--bleu-fonce)}

/* grille de disponibilités (E5 bénévole, E26) */
.dispo-grid{width:100%;border-collapse:collapse}
.dispo-grid th{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);text-align:center;padding:0 4px 12px}
.dispo-grid th:first-child{text-align:left}
.dispo-grid td{padding:7px 4px;text-align:center}
.dispo-grid td:first-child{font-size:14px;font-weight:600;text-align:left;padding-left:0}
.dispo-grid tr + tr td{border-top:1px solid var(--trait)}
.dispo-box{width:30px;height:30px;border-radius:10px;border:1.5px solid var(--trait);
  background:var(--blanc);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dispo-box.on{background:var(--bleu);border-color:var(--bleu)}
.dispo-box.on svg{stroke:#fff}
.dispo-box svg{width:14px;height:14px;stroke:transparent;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cartes de type de contact (EC) ---------- */
.contact-types{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.ctype{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 14px 12px;border-radius:16px;border:1.5px solid var(--trait);
  background:var(--blanc);cursor:pointer;text-align:left;
  transition:border-color .15s,box-shadow .15s}
.ctype input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.ctype:has(input:focus-visible){outline:2px solid var(--bleu);outline-offset:2px}
.ctype:hover{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(40,105,254,.10)}
.ctype:has(input:checked){border-color:var(--bleu);background:var(--bleu-clair);box-shadow:0 0 0 3px rgba(40,105,254,.12)}
.ctype .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--fond)}
.ctype:has(input:checked) .ico{background:rgba(40,105,254,.12)}
.ctype .ico svg{stroke:var(--gris);display:block}
.ctype:has(input:checked) .ico svg{stroke:var(--bleu)}
.ctype .lbl{font-size:12.5px;font-weight:600;color:var(--marine);line-height:1.3}
.ctype .sub{font-size:11px;color:var(--gris);line-height:1.4}

/* ---------- confirmation d'envoi (EC, activité…) ---------- */
.confirm-block{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 0 8px}
.confirm-ico{width:72px;height:72px;border-radius:50%;background:var(--vert-clair);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

/* ---------- planche de composants ---------- */
.sheet{padding:24px 18px 40px}
.sheet h1{font-size:19px;font-weight:700;margin-bottom:4px}
.sheet .intro{font-size:13px;color:var(--gris);margin-bottom:24px}
.sheet .lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris);margin:24px 0 10px;display:flex;align-items:center;gap:9px}
.sheet .lab::after{content:"";flex:1;height:1px;background:var(--trait)}
.sheet .demo-nav{position:static;box-shadow:var(--sh-md);border-radius:18px;overflow:visible;margin-top:38px}
.sheet .demo-nav .inner{height:72px}

/* ─────────────────────────────────────────────────────────────
   Composants desktop — masqués sur mobile par défaut
   ──────────────────────────────────────────────────────────── */
.dt-header{display:none}
.dt-footer{display:none}
/* Le wizard vit dans .dt-header mais on le masque aussi si dt-header absent */
.dt-wizard{display:none}
/* Nav latérale du compte (E25-E30) : desktop uniquement, le mobile garde son bouton retour */
.acc-nav{display:none}

/* ─────────────────────────────────────────────────────────────
   Desktop ≥ 561 px
   ──────────────────────────────────────────────────────────── */
@media (min-width:561px){
  /* Le conteneur des pages publiques (body:has(.dt-header) .content, plus bas)
     a déjà 36px de padding en haut : .list-intro n'a plus besoin d'en ajouter. */
  .list-intro{padding:0 0 26px}
  .list-intro h1{font-size:26px;margin-bottom:10px}
  .list-intro p{font-size:14.5px}

  body{padding:0;background:var(--fond);display:flex;flex-direction:column}
  .app > .nav{display:none}
  .app{max-width:100%;border-radius:0;box-shadow:none;overflow:visible;flex:1;min-height:0}
  .dt-header,.dt-footer{flex:none}

  /* ── En-tête desktop ──────────────────────────────────────── */
  .dt-header{
    display:block;
    position:sticky;top:0;z-index:50;
    background:var(--blanc);
    border-bottom:1px solid var(--trait);
    box-shadow:0 1px 14px rgba(1,37,82,.07);
  }
  /* Barre principale : logo + nav + actions */
  .dt-hbar{
    display:flex;align-items:center;gap:24px;
    max-width:1200px;margin:0 auto;
    padding:0 40px;height:60px;
  }
  .dt-logo{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;flex:none;
  }
  /* Logo PNG desktop (fourni par LinkUp) */
  .dt-logo-img{height:34px;width:auto;display:block}
  /* Fallback texte si PNG absent */
  .dt-wordmark{
    font-size:17px;font-weight:700;
    font-family:'Poppins',sans-serif;color:var(--marine);
  }
  .dt-nav{display:flex;align-items:center;gap:2px;flex:1}
  .dt-nav a{
    font-size:13.5px;font-weight:500;color:var(--gris);
    text-decoration:none;padding:6px 12px;border-radius:8px;white-space:nowrap;
  }
  .dt-nav a:hover{background:var(--fond);color:var(--marine)}
  .dt-nav a.on{color:var(--marine);font-weight:600}
  /* « Découvrir LinkUp » (membre connecté) : menu déroulant sans JavaScript */
  .dt-more{position:relative}
  .dt-more summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--gris);
    padding:6px 12px;border-radius:8px;white-space:nowrap}
  .dt-more summary::-webkit-details-marker{display:none}
  .dt-more summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
  .dt-more summary:hover,.dt-more[open] summary{background:var(--fond);color:var(--marine)}
  .dt-more:has(a.on) summary{color:var(--marine);font-weight:600}
  .dt-more-panel{position:absolute;left:0;top:calc(100% + 6px);min-width:210px;background:var(--blanc);
    border-radius:12px;box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column;z-index:60}
  .dt-more-panel a{padding:9px 12px}
  .dt-hactions{display:flex;align-items:center;gap:8px;flex:none}
  /* Picto user — espace membre (connecté uniquement) */
  .dt-user-btn{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--fond);border:1.5px solid var(--trait);
    color:var(--marine);cursor:pointer;text-decoration:none;flex:none;
  }
  .dt-user-btn:hover{background:var(--bleu-clair);border-color:var(--bleu)}
  .dt-user-btn svg{display:block;pointer-events:none}
  /* Burger — connecté uniquement (absent sur pages publiques) */
  .dt-burger{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1.5px solid var(--trait);
    cursor:pointer;color:var(--marine);flex:none;
  }
  .dt-burger:hover{background:var(--fond)}
  .dt-burger svg{display:block;pointer-events:none}
  /* Boutons CTA — header non connecté */
  .dt-btn-signin{
    font-size:13.5px;font-weight:600;color:var(--marine);
    text-decoration:none;padding:6px 14px;border-radius:8px;
    border:1.5px solid var(--trait);white-space:nowrap;
  }
  .dt-btn-signin:hover{background:var(--fond)}
  .dt-btn-signup{
    font-size:13.5px;font-weight:600;color:#fff;
    text-decoration:none;padding:7px 16px;border-radius:8px;
    background:var(--bleu);white-space:nowrap;
  }
  .dt-btn-signup:hover{opacity:.88}
  /* Logo mobile dans l'appbar — image ou fallback CSS */
  .logo-mobile-img{height:28px;width:auto;display:block}

  /* ── Wizard (dans .app, entre header et card) ────────────── */
  .dt-wizard{
    display:flex;align-items:flex-start;justify-content:center;
    width:100%;max-width:660px;
    padding:0 0 24px;gap:0;
  }
  .wstep{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
  .wnum{
    width:32px;height:32px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:700;font-family:'Poppins',sans-serif;
    background:var(--blanc);color:var(--gris-clair);
    border:1.5px solid var(--trait);
  }
  .wlbl{font-size:11px;font-weight:500;color:var(--gris-clair);white-space:nowrap}
  .wstep.on .wnum{
    background:var(--bleu);color:#fff;border-color:var(--bleu);
    box-shadow:0 3px 10px rgba(40,105,254,.28);
  }
  .wstep.on .wlbl{color:var(--marine);font-weight:600}
  .wstep.done .wnum{background:var(--vert);color:#fff;border-color:var(--vert)}
  .wstep.done .wlbl{color:var(--gris)}
  .wline{
    flex:1;height:1.5px;background:var(--trait);
    margin-top:15px;min-width:32px;max-width:80px;
  }
  /* Points-étapes mobiles masqués quand le wizard desktop est actif */
  body:has(.dt-wizard) .steps{display:none}

  /* ── Footer desktop ───────────────────────────────────────── */
  .dt-footer{
    display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:15;
    background:#194b4b;
    border-top:none;
    padding:18px 40px;
  }
  .dt-footer-inner{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;
    max-width:1200px;margin:0 auto;
    font-size:11.5px;color:rgba(255,255,255,.65);
  }
  .dt-footer-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .dt-footer a{color:rgba(255,255,255,.65);text-decoration:none}
  .dt-footer a:hover{color:#fff}

  /* ── Templates avec dt-header : éléments mobile masqués ───── */
  body:has(.dt-header) .appbar{display:none}
  body:has(.dt-header) .greet{display:none}

  /* ── Carte centrée : formulaires publics (avec dt-header) ─── */
  body:has(.dt-header) .app{
    display:flex;flex-direction:column;align-items:center;
    padding:40px 24px 80px;
  }
  body:has(.dt-header) .content,
  body:has(.dt-header) .content.no-nav{
    flex:none;
    width:100%;max-width:660px;
    background:var(--blanc);
    border-radius:24px 24px 0 0;
    padding:36px 40px 20px;
    margin:0;
  }
  /* Carte sans actionbar : 4 coins arrondis + ombre complète */
  body:has(.dt-header) .content:not(:has(~ .actionbar)){
    border-radius:24px;
    padding-bottom:36px;
    box-shadow:0 16px 48px rgba(1,37,82,.11);
  }
  body:has(.dt-header) .actionbar{
    width:100%;max-width:660px;
    background:var(--blanc);
    border-radius:0 0 24px 24px;
    border-top:1px solid var(--trait);
    padding:18px 40px 32px;
    position:static;
    box-shadow:0 16px 48px rgba(1,37,82,.11);
  }
  body:has(.dt-header) .actionbar .inner{padding:0;max-width:none}

  /* ── Carte activité desktop ───────────────────────────────── */
  body:has(.dt-header) .act-card{display:flex;align-items:center;gap:16px;padding:18px 22px}
  body:has(.dt-header) .act-card > .tile{flex:none}
  body:has(.dt-header) .act-info{flex:1;min-width:0}
  body:has(.dt-header) .act-tags{flex:none;display:flex;gap:8px;align-items:center}
  body:has(.dt-header) .act-arr{flex:none}
  body:has(.dt-header) .act-name{font-size:15.5px}
  body:has(.dt-header) .act-org{font-size:12.5px}
  body:has(.dt-header) .act-when{font-size:12.5px}
  body:has(.dt-header) .act-card.sel{display:flex}
  body:has(.dt-header) .act-card.sel .inscrit-badge{display:inline-flex;grid-area:unset}
  body:has(.dt-header) .act-card.sel .act-arr{grid-area:unset;flex:none}

  /* ── Nav latérale du compte (E25-E30) ────────────────────────── */
  body:has(.dt-header) .acc-layout{
    display:grid;grid-template-columns:240px 1fr;gap:24px;
    align-items:start;width:100%;
  }
  body:has(.dt-header) .acc-nav{
    display:block;position:sticky;top:84px;
    background:var(--blanc);border-radius:var(--r-card);box-shadow:var(--sh-md);
    padding:20px 0;
  }
  body:has(.dt-header) .acc-nav .acc-greet{padding:0 20px 16px;margin-bottom:8px;border-bottom:1px solid var(--trait)}
  body:has(.dt-header) .acc-nav .acc-greet .h{font-size:16px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--marine)}
  body:has(.dt-header) .acc-nav .acc-greet .sub{font-size:12px;color:var(--gris);margin-top:2px}
  body:has(.dt-header) .acc-nav a{display:block;padding:11px 20px;font-size:14px;font-weight:500;color:var(--marine);border-left:3px solid transparent}
  body:has(.dt-header) .acc-nav a:hover{background:var(--fond)}
  body:has(.dt-header) .acc-nav a:last-child{border-top:1px solid var(--trait);margin-top:8px}
  body:has(.dt-header) .acc-nav a.on{background:var(--bleu-clair);border-left-color:var(--bleu);color:var(--bleu);font-weight:700}

  /* ── Role cards : bénévole et participant côte à côte, alignés entre eux ;
     « Je représente une structure » repasse sur sa propre ligne, en pleine
     largeur (celle des 2 autres cartes réunies), présentée à l'horizontale
     comme sur mobile (icône à gauche, texte à droite, chevron visible).
     .role-cards-grid pose 2 colonnes ; les 2 premières cartes se partagent
     3 lignes en sous-grille (icône / titre / texte) pour rester alignées
     l'une à l'autre même si leur contenu diffère en longueur.
     ⚠ Suppose exactement 3 cartes, la 3ᵉ étant « structure » : à revoir si
     leur nombre ou leur ordre change.
     ────────────────────────────────────────────────────────── */
  .role-cards-grid{display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto;gap:16px}
  .role-cards-grid .role-card:nth-child(-n+2){
    grid-row:1/span 3;grid-template-rows:subgrid;grid-template-columns:1fr;
    display:grid;justify-items:center;text-align:center;
    padding:28px 18px 24px;column-gap:0;row-gap:0;min-height:0;
  }
  .role-cards-grid .role-card:nth-child(-n+2) .ico{
    grid-row:1;grid-column:1;align-self:end;
    width:64px;height:64px;border-radius:20px;margin-bottom:14px;
  }
  .role-cards-grid .role-card:nth-child(-n+2) .ico svg{width:32px;height:32px}
  .role-cards-grid .role-card:nth-child(-n+2) .rh{grid-row:2;grid-column:1;align-self:start;font-size:16px;margin-bottom:6px}
  .role-cards-grid .role-card:nth-child(-n+2) .rd{grid-row:3;grid-column:1;align-self:start;font-size:13.5px;line-height:1.5;
    display:block;overflow:visible;-webkit-line-clamp:unset}
  .role-cards-grid .role-card:nth-child(-n+2) .arr{display:none}

  /* 3ᵉ carte (structure) : pleine largeur, présentation identique au mobile. */
  .role-cards-grid .role-card:last-child{
    grid-row:4;grid-column:1/-1;
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;text-align:left;
    column-gap:16px;padding:20px 24px;min-height:88px;
  }
  .role-cards-grid .role-card:last-child .ico{
    grid-row:1/3;grid-column:1;
    width:52px;height:52px;border-radius:16px;margin-bottom:0;
  }
  .role-cards-grid .role-card:last-child .ico svg{width:26px;height:26px}
  .role-cards-grid .role-card:last-child .rh{grid-row:1;grid-column:2;font-size:16px;margin-bottom:0}
  .role-cards-grid .role-card:last-child .rd{grid-row:2;grid-column:2;font-size:14px;color:var(--gris);line-height:1.5;
    display:block;overflow:visible;-webkit-line-clamp:unset}
  .role-cards-grid .role-card:last-child .arr{display:block;grid-row:1/3;grid-column:3}

  /* ── Cartes de type de contact (EC) ──────────────────────── */
  .contact-types{grid-template-columns:repeat(3,1fr);gap:12px}
  .ctype{padding:18px 16px 14px}
  .ctype .ico{width:38px;height:38px;border-radius:12px}

  /* ── Écrans app (nav cachée, pleine largeur) ──────────────── */
  .app:has(> .nav) .appbar{
    padding:14px 48px;
    border-bottom:1px solid var(--trait);
    position:sticky;top:0;z-index:10;
    background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  }
  .app:has(> .nav) .content{padding:24px 48px 40px}

  /* ── Formulaires sans dt-header (E26, E16…) ──────────────── */
  .app:not(:has(> .nav)) .appbar{padding:20px 48px 16px}
  .app:not(:has(> .nav)) .content.no-nav{
    max-width:660px;margin:0 auto;padding:40px;
  }
  .app:not(:has(> .nav)) .actionbar{
    position:static;box-shadow:none;border-top:1px solid var(--trait);
  }
  .app:not(:has(> .nav)) .actionbar .inner{max-width:none;padding:16px 48px}

  /* Panneau latéral */
  .drawer,.scrim{position:absolute}
  .drawer{border-radius:0}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ── E10 — Bandeau cookies : carte d'information non bloquante, ambiance sport ── */
.cookie-card{
  position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:80;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--marine);color:#fff;border-radius:20px;padding:14px 16px;
  box-shadow:0 14px 40px rgba(1,37,82,.28);border-left:6px solid var(--corail);
  animation:cookie-in .35s ease-out;
}
body.is-public .cookie-card{bottom:calc(12px + env(safe-area-inset-bottom))}
.cookie-ball{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vert);color:#fff}
.cookie-body{flex:1;min-width:200px}
.cookie-title{font-size:14px;font-weight:700;font-family:'Poppins',sans-serif;margin:0 0 3px}
.cookie-txt{font-size:12.5px;line-height:1.5;margin:0;opacity:.88}
.cookie-txt a{color:#fff;text-decoration:underline;font-weight:600}
.cookie-ok{flex:none;margin-left:auto;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--corail);color:#fff;font:inherit;font-size:13.5px;font-weight:700}
.cookie-ok:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes cookie-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cookie-card{animation:none}}
@media (min-width:561px){
  .cookie-card,body.is-public .cookie-card{left:auto;right:24px;bottom:24px;max-width:460px}
}

/* Texte réservé aux lecteurs d'écran (ex. libellé de chaque case de la grille des disponibilités) */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* « Mon équipe » (espace partenaire) */
.team-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--trait)}
/* Mobile : le texte (e-mail long) passe à la ligne, les actions descendent sous le texte plutôt que de déborder. */
.team-row>div:first-child{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.team-row:first-of-type{border-top:0}
.team-name{font-weight:600;color:var(--marine);font-size:14px}
.team-actions{display:flex;gap:10px;flex:none}
.link-btn{background:none;border:0;padding:0;font-size:13px;font-weight:600;color:var(--bleu);cursor:pointer;text-decoration:underline}
.link-btn.danger{color:#E92020}

/* « Activités à organiser » (espace partenaire) */
.proposal{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--trait)}
.proposal:first-of-type{border-top:0}
.proposal-link{text-decoration:none;color:inherit}
.proposal-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.proposal-actions summary{cursor:pointer;list-style:none}
.proposal-refuse{display:grid;gap:6px;margin-top:8px}
.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--corail);color:#fff;font-size:11.5px;font-weight:700;margin-left:6px;vertical-align:middle}

/* Page activité : organisateurs sur place */
.onsite{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--trait)}
.onsite:first-of-type{border-top:0;padding-top:0}
.onsite-name{font-weight:700;font-size:14px;color:var(--marine)}
.onsite-link{font-size:13.5px;font-weight:600;color:var(--bleu);word-break:break-all}

/* Fenêtre d'inscription : « en tant que » (compte bénévole et participant) */
.role-choice{border:0;padding:0;margin:0 0 14px;text-align:left}
.radio-line{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 0;cursor:pointer}

/* « Mon profil » : mes profils (cumulables) */
.profile-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--trait)}
.profile-row:first-of-type{border-top:0}
.profile-name{font-weight:700;font-size:14px;color:var(--marine)}
.profile-actions{flex:none}

/* « Ma structure » : onglets entre ses pages (espace partenaire) */
.structure-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:2px solid var(--trait);margin:0 0 18px;scrollbar-width:none}
.structure-tabs a{flex:none;padding:10px 14px 11px;font-size:14px;font-weight:600;color:var(--gris);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.structure-tabs a.on{color:var(--bleu);border-bottom-color:var(--bleu)}

/* Bas de « Mon profil » : propositions discrètes (accompagner, être accompagné·e…) */
.profile-offers{text-align:center;margin:0 0 16px;line-height:1.9}
.profile-offers a,.profile-offers .link-btn{font-size:inherit;font-weight:600}
.inline-form{display:inline}

/* « Mes notifications » */
.notif-prefs,.notif-always,.push-card,.install-card{margin:0 0 14px}
.notif-pref{border:0;margin:0;padding:12px 0;border-top:1px solid var(--trait)}
.notif-pref:first-of-type{border-top:0}
.notif-pref-title{float:left;width:100%;font-weight:700;font-size:14px;color:var(--marine);padding:0;margin-bottom:2px}
.notif-pref-title+*{clear:both}
.notif-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.notif-choice{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--trait);border-radius:99px;font-size:13.5px;cursor:pointer}
.notif-choice:has(input:checked){border-color:var(--bleu);background:var(--bleu-clair);color:var(--bleu);font-weight:600}
.notif-choice input{accent-color:var(--bleu);margin:0}
.notif-save{margin-top:8px}
.notif-always-list{margin:0;padding-left:18px;font-size:13.5px;color:var(--gris);line-height:1.7}
.push-enable{display:inline-flex;width:auto}
/* Installer l'app : pas-à-pas iPhone et bandeau mobile */
/* Aperçu d'une activité dans l'admin (iframe) : on regarde, on fait défiler, on ne clique pas */
body.is-preview a,body.is-preview button,body.is-preview input,body.is-preview select,body.is-preview textarea,body.is-preview label{pointer-events:none}
body.is-preview .cookie-card,body.is-preview .install-banner{display:none!important}
.job-title-form{display:flex;gap:8px;flex-wrap:wrap}
.job-title-form .input{flex:1;min-width:180px}
.pair-sharing{border:0;margin:0;padding:0}
.pair-sharing-title{font-weight:700;font-size:14px;color:var(--marine);margin-bottom:4px;padding:0}
.pair-sharing>p{margin-bottom:10px}
.modal-pair-sharing{text-align:left;margin:4px 0 14px;padding:10px 12px;background:var(--fond);border-radius:12px}
.modal-pair-sharing .check{display:flex;gap:8px;align-items:center;font-size:13.5px;margin-top:6px}
.pair-contacts{display:grid;gap:4px;margin-top:6px}
.calendar-links{display:grid;gap:8px;margin-top:10px;text-align:center}
.calendar-links .btn{padding:10px 14px;font-size:14px}
.install-steps{margin:4px 0 0;padding-left:20px;font-size:13.5px;line-height:1.7}
.install-ico{width:16px;height:16px;vertical-align:-3px;color:var(--bleu)}
.install-banner{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:10px;
  background:var(--blanc);border-radius:16px;box-shadow:var(--sh-md);padding:10px 12px}
.install-banner img{border-radius:10px;flex:none}
.install-banner-text{flex:1;min-width:0;display:grid;font-size:12.5px;line-height:1.35;color:var(--gris)}
.install-banner-text strong{font-size:14px;color:var(--marine)}
.install-banner-cta{flex:none;width:auto;padding:8px 14px;font-size:13.5px}
.install-banner-close{flex:none;background:none;border:0;font-size:22px;line-height:1;color:var(--gris);cursor:pointer;padding:4px}

/* « Ma structure » → une activité (vue organisateur) */
.org-title{font-size:19px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--marine);margin:2px 0 6px;line-height:1.25}
.org-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:14px}
.org-actions .btn{width:auto}
.org-actions p{flex-basis:100%;margin:0}
.org-group-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin:14px 0 4px}
.org-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;padding:10px 0;border-top:1px solid var(--trait)}
.org-pair .org-person{border-top:0;padding:0}
.org-pair-link{color:var(--gris-clair);padding-top:2px}
.org-person{padding:10px 0;border-top:1px solid var(--trait)}
.org-person .pill{margin-left:4px;vertical-align:middle}
.org-sensitive{margin-top:4px;padding:6px 8px;background:var(--fond);border-radius:8px;display:grid;gap:2px}
@media(max-width:560px){.org-pair{grid-template-columns:1fr}.org-pair-link{display:none}}

/* « Ma structure » → Activités : liste simple, chaque ligne ouvre l'activité */
.struct-acts-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.struct-acts-head .btn{width:auto}
.sub-tabs{display:flex;gap:6px;margin:12px 0 4px}
.sub-tabs a{padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600;color:var(--gris);background:var(--fond)}
.sub-tabs a.on{background:var(--bleu-clair);color:var(--bleu)}
.struct-act{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--trait);color:inherit;text-decoration:none}
.struct-act:hover .title{color:var(--bleu)}
.struct-act .act-date{width:46px;text-align:center;flex:none;background:var(--fond);border-radius:12px;padding:6px 4px}
.struct-act .act-date .d{font-size:19px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--marine);line-height:1}
.struct-act .act-date .m{font-size:10px;text-transform:uppercase;font-weight:600;color:var(--gris);letter-spacing:.04em}
.struct-act .act-inf{flex:1;min-width:0}
.struct-act .eyebrow{font-size:11px}
.struct-act .title{font-size:15px;font-weight:700;font-family:'Poppins',sans-serif;margin:2px 0 3px;color:var(--marine)}
.struct-act .meta{font-size:12.5px;color:var(--gris)}
.struct-act-go{width:18px;height:18px;color:var(--gris-clair);flex:none}
.badge-inscrit,.badge-past,.badge-cancel{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;margin-top:5px}
.badge-inscrit{color:var(--vert-fonce);background:var(--vert-clair)}
.badge-past{color:var(--gris);background:var(--fond)}
.badge-cancel{color:#a12b2b;background:#fde4e4}

/* Saisie des présences (partenaire) : l'état affiché suit le bouton coché */
.pres-all{display:flex;justify-content:flex-end;padding-top:10px}
.pres-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--trait)}
.pres-row:last-child{border-bottom:0}
.pres-row .info{flex:1;min-width:0}
.pres-row .name{font-size:15px;font-weight:600;color:var(--marine)}
.pres-toggle{display:flex;gap:4px;flex:none}
.pres-btn{position:relative;padding:8px 14px;border-radius:10px;border:2px solid var(--trait);background:var(--blanc);font-size:13px;font-weight:600;cursor:pointer;color:var(--gris)}
.pres-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pres-btn:focus-within{outline:2px solid var(--bleu);outline-offset:2px}
.pres-btn.yes:has(.pres-input:checked){border-color:var(--vert);background:var(--vert-clair);color:var(--vert-fonce)}
.pres-btn.no:has(.pres-input:checked){border-color:var(--corail);background:var(--corail-clair);color:var(--corail-fonce)}

/* « Ma structure » → Présences */
.att-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--trait);flex-wrap:wrap}
.att-row:first-of-type{border-top:0}
.att-info{flex:1 1 220px;min-width:0}
.att-row .btn{width:auto}
.att-left{color:var(--corail-fonce);font-weight:600}
.att-count{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.att-edit{margin-left:4px}

/* Recette (APP_STAGE=testing) : bandeau « site de test », au-dessus de tout. */
.stage-banner{position:relative;z-index:90;background:#FFF4D6;color:#7A5400;font-size:12px;text-align:center;padding:6px 12px;border-bottom:1px solid #F2D58A}