/* Site du Club Informatique de l'ESATIC.
   Charte : encre #0D2240 + bleu ESATIC #2D9CF6 (logo >ci_), Bricolage Grotesque + JetBrains Mono.
   Polices hebergees ici (aucune requete vers Google) : le site reste rapide et sans pisteur. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/polices/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/polices/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --encre: #0D2240;
  --bleu: #2D9CF6;
  --ciel: #8FCBFF;
  --papier: #F5F8FC;
  --surface: #FFFFFF;
  --trait: #DCE4EE;
  --texte: #0D2240;
  --texte-2: #4A5A70;
  --lien: #1462B0;
  --alerte: #B45309;
  --alerte-fond: #FFF6E5;
  --ombre: 0 18px 40px rgba(13, 34, 64, 0.08);
  --rayon: 20px;
  --affichage: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #07111F;
    --surface: #0E1D33;
    --trait: #1D3150;
    --texte: #EAF2FB;
    --texte-2: #A3B6CD;
    --lien: #7CC0FF;
    --alerte: #FBBF5B;
    --alerte-fond: #2A2112;
    --ombre: 0 18px 40px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #07111F;
  --surface: #0E1D33;
  --trait: #1D3150;
  --texte: #EAF2FB;
  --texte-2: #A3B6CD;
  --lien: #7CC0FF;
  --alerte: #FBBF5B;
  --alerte-fond: #2A2112;
  --ombre: 0 18px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Un bloc en display:grid ignorerait l'attribut hidden : on le fait respecter partout. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--affichage);
  font-size: 18px;
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lien); }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); padding: 12px 16px; }
/* Sur petit telephone, le bouton du haut fait doublon avec celui de l'accueil : on garde le logo lisible. */
@media (max-width: 500px) { .nav .bouton-petit { display: none; } }
.bouton-petit { white-space: nowrap; } /* sinon « Espace membres » passait sur deux lignes vers 500 px */

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--bleu); color: #04111F; font-weight: 700; text-decoration: none;
  border: 2px solid var(--bleu); transition: transform .15s ease, background .15s ease;
}
.bouton:hover { transform: translateY(-1px); background: #58B2FA; }
.bouton-contour { background: transparent; color: #fff; border-color: rgba(143, 203, 255, 0.5); }
.bouton-contour:hover { background: rgba(143, 203, 255, 0.12); }
.bouton-petit { min-height: 40px; padding: 0 16px; font-size: 16px; }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- barre du haut ---------- */
.barre {
  position: sticky; top: 0; z-index: 5;
  background: rgba(13, 34, 64, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(143, 203, 255, 0.14);
}
.barre-dedans { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: flex; align-items: center; gap: 12px; min-height: 44px; color: #fff; text-decoration: none; }
.marque-tuile { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(143, 203, 255, 0.25); }
.marque-nom { display: flex; flex-direction: column; font-weight: 700; font-size: 17px; line-height: 1.1; }
.marque-nom small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ciel); font-weight: 700; }
.nav { display: flex; align-items: center; gap: 10px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; color: #fff; font-weight: 600; border: 1px solid rgba(143, 203, 255, 0.3); }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--encre); border: 1px solid rgba(143, 203, 255, 0.2); border-radius: 14px; padding: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; }
.menu a:hover { background: rgba(143, 203, 255, 0.12); }
/* Un <details> ferme cache ses enfants quoi que dise le CSS : liens separes pour l'ecran large. */
.nav-liens { display: none; }
.nav-liens a { display: block; padding: 8px 12px; border-radius: 8px; color: #D6E6F7; text-decoration: none; font-weight: 500; }
.nav-liens a:hover { background: rgba(143, 203, 255, 0.12); color: #fff; }
@media (min-width: 1000px) {
  .nav-liens { display: flex; gap: 2px; }
  .menu { display: none; }
}

/* ---------- accueil ---------- */
.accueil {
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(45, 156, 246, 0.28), transparent 60%),
    linear-gradient(rgba(143, 203, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 40px,
    var(--encre);
  color: #fff;
}
.accueil-dedans { max-width: 1180px; margin: 0 auto; padding: 72px 20px 88px; display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .accueil-dedans { grid-template-columns: 1.1fr 0.9fr; padding: 104px 20px 120px; } }
.invite { font-family: var(--mono); font-size: 15px; color: var(--ciel); letter-spacing: 0.02em; margin-bottom: 20px; }
.invite-signe { color: var(--bleu); font-weight: 800; }
.accueil h1 { font-size: clamp(44px, 7.4vw, 86px); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }
.accueil h1 em { font-style: normal; color: var(--bleu); }
.chapeau { margin-top: 22px; max-width: 34em; font-size: clamp(18px, 2vw, 21px); color: #C9DAEE; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.terminal { background: #061329; border: 1px solid rgba(143, 203, 255, 0.22); border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); overflow: hidden; min-width: 0; }
.terminal-barre { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 1px solid rgba(143, 203, 255, 0.14); font-family: var(--mono); font-size: 13px; color: #8FA6C4; }
.terminal-barre i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.terminal-barre i:nth-child(2) { background: #FEBC2E; }
.terminal-barre i:nth-child(3) { background: #28C840; }
.terminal-barre span { margin-left: 10px; }
.terminal pre { margin: 0; padding: 22px 22px 26px; font-family: var(--mono); font-size: clamp(13px, 1.55vw, 17px); line-height: 1.9; color: #E8F1FB; overflow-x: auto; }
.t-p { color: var(--bleu); font-weight: 800; }
.t-d { color: var(--ciel); }
.t-curseur { display: inline-block; width: 0.6em; height: 1.15em; background: var(--ciel); vertical-align: -0.2em; animation: clignote 1.1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t-curseur { animation: none; } html { scroll-behavior: auto; } .bouton { transition: none; } }

/* ---------- blocs ---------- */
.bloc { padding: 88px 0; }
.bloc-alterne { background: var(--surface); border-block: 1px solid var(--trait); }
.bloc-dedans { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.surtitre { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lien); margin-bottom: 14px; }
.bloc h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; margin-bottom: 40px; }

.grille-sections { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grille-sections { grid-template-columns: repeat(2, 1fr); } .carte-section:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 960px) { .grille-sections { grid-template-columns: repeat(6, 1fr); } .carte-section { grid-column: span 2; } .carte-section:nth-child(n+4), .carte-section:last-child:nth-child(odd) { grid-column: span 3; } }
.carte-section { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px; display: grid; gap: 10px; align-content: start; }
.bloc-alterne .carte-section { background: var(--papier); }
.carte-section svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(45, 156, 246, 0.14); fill: none; stroke: var(--lien); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carte-section h3 { font-size: 23px; font-weight: 700; margin-top: 6px; }
.carte-section p { color: var(--texte-2); font-size: 17px; }

.grille-partenaires { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grille-partenaires { grid-template-columns: repeat(2, 1fr); } }
.carte-partenaire { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px; display: grid; gap: 12px; align-content: start; }
.logo-partenaire { height: 110px; border-radius: 14px; background: #fff; border: 1px solid #E3E9F1; display: flex; align-items: center; justify-content: center; padding: 18px; }
.logo-partenaire img { max-height: 74px; width: auto; }
.carte-partenaire h3 { font-size: 24px; font-weight: 700; margin-top: 6px; }
.carte-partenaire p { color: var(--texte-2); font-size: 17px; }
.lien-fleche { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.lien-fleche::after { content: " →"; white-space: pre; } /* sans pre, l'espace disparaissait dans l'inline-flex */
.lien-fleche:hover { text-decoration: underline; }

.bandeau { background: var(--encre); color: #fff; }
.bandeau-dedans { max-width: 1180px; margin: 0 auto; padding: 64px 20px; display: grid; gap: 14px; justify-items: start; }
.bandeau h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
.bandeau p { color: #C9DAEE; font-size: 19px; margin-bottom: 10px; }

.grille-bureau { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grille-bureau { grid-template-columns: repeat(3, 1fr); } }
.carte-membre { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; display: grid; gap: 4px; justify-items: start; }
.carte-membre strong { font-size: 20px; margin-top: 12px; }
.carte-membre > span:not(.avatar):not(.liens-membre) { color: var(--texte-2); font-family: var(--mono); font-size: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 2px var(--bleu); }

.contact { display: grid; gap: 36px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact h2 { margin-bottom: 16px; }
.chapeau-bloc { color: var(--texte-2); font-size: 19px; max-width: 30em; }
.liste-contact { display: grid; gap: 10px; }
.liste-contact li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); flex-wrap: wrap; }
.etiquette { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); }
.liste-contact a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* Brouillon : tout ce que PYO doit fournir est signale, rien n'est invente. */
.a-completer { border-style: dashed !important; border-color: var(--alerte) !important; background: var(--alerte-fond) !important; }
.a-completer strong, .a-completer span { color: var(--alerte) !important; }

.pied { background: var(--encre); color: #A9BDD6; }
.pied-dedans { max-width: 1180px; margin: 0 auto; padding: 28px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 15px; }
.introuvable { min-height: 100vh; display: grid; align-items: center; }

/* ---------- proposer un projet ---------- */
.proposer { display: grid; gap: 40px; }
@media (min-width: 980px) { .proposer { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.proposer h2 { margin-bottom: 16px; }
.etapes { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 14px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.etapes li::before { content: counter(etape); grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--encre); color: #fff; font-family: var(--mono); font-weight: 800; box-shadow: inset 0 0 0 2px var(--bleu); }
.etapes b { font-size: 19px; line-height: 1.3; }
.etapes span { color: var(--texte-2); font-size: 16px; line-height: 1.45; }
.formulaire { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; display: grid; gap: 16px; box-shadow: var(--ombre); }
.champs-duo { display: grid; gap: 16px; }
@media (min-width: 620px) { .champs-duo { grid-template-columns: 1fr 1fr; } }
.formulaire label { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.formulaire label small { font-weight: 500; color: var(--texte-2); font-size: 13px; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: var(--surface); color: var(--texte);
  font: 500 16px/1.4 var(--affichage);
}
.formulaire textarea { resize: vertical; min-height: 140px; }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.formulaire .accord { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 15px; color: var(--texte-2); }
.formulaire .accord input { width: 22px; min-height: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--bleu); }
.formulaire .bouton { justify-self: start; cursor: pointer; font: 700 17px/1 var(--affichage); }
.formulaire .bouton[disabled] { opacity: 0.6; cursor: wait; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-etat { font-weight: 600; min-height: 1.5em; }
.formulaire-etat.ok { color: #15803D; }
.formulaire-etat.erreur { color: #B91C1C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .formulaire-etat.ok { color: #4ADE80; } :root:not([data-theme="light"]) .formulaire-etat.erreur { color: #F87171; } }
:root[data-theme="dark"] .formulaire-etat.ok { color: #4ADE80; }
:root[data-theme="dark"] .formulaire-etat.erreur { color: #F87171; }

/* Alternance des fonds : une carte ne doit jamais avoir la couleur du bloc qui la porte. */
.carte-partenaire { background: var(--surface); }
.bloc-alterne .carte-partenaire { background: var(--papier); }
.bloc-alterne .carte-membre { background: var(--papier); }
.bloc:not(.bloc-alterne) .liste-contact li { background: var(--surface); }

/* ---------- espace membres et bureau ---------- */
.lien-barre { color: #D6E6F7; text-decoration: none; font-weight: 600; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.lien-barre:hover { background: rgba(143, 203, 255, 0.12); color: #fff; }
.espace-entete .bloc-dedans { padding-top: 48px; padding-bottom: 56px; }
.espace-entete h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
.espace-contenu { padding-top: 32px; padding-bottom: 88px; }
.tableau-bord { display: grid; gap: 20px; }
.carte-espace { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); margin: 0; }
@media (min-width: 620px) { .carte-espace { padding: 32px; } }
.carte-espace h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; margin-bottom: 12px; }
.carte-espace > p { color: var(--texte-2); }
.carte-espace .bouton { margin-top: 20px; }
.aide { color: var(--texte-2); margin-bottom: 18px; max-width: 46em; }
.garanties { margin: 16px 0 4px; display: grid; gap: 8px; }
.garanties li { position: relative; padding-left: 28px; color: var(--texte-2); }
.garanties li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--lien); }
.formulaire-nu { background: none; border: 0; box-shadow: none; padding: 0; }
.choix-sections { border: 1.5px solid var(--trait); border-radius: 14px; padding: 12px 16px 16px; margin: 0; }
.choix-sections legend { font-weight: 600; font-size: 16px; padding: 0 6px; }
.choix-sections legend small { font-weight: 500; color: var(--texte-2); font-size: 13px; }
.cases { display: grid; gap: 4px 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cases { grid-template-columns: repeat(2, 1fr); } }
.cases label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; cursor: pointer; }
.cases input { width: 22px; height: 22px; min-height: 22px; accent-color: var(--bleu); flex-shrink: 0; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.actions-formulaire .bouton { margin-top: 0; }
.bouton-discret { background: transparent; color: var(--lien); border-color: var(--trait); }
.bouton-discret:hover { background: rgba(45, 156, 246, 0.1); }
button.bouton { cursor: pointer; font: 700 17px/1 var(--affichage); }
.fiche-resume { display: grid; gap: 12px; margin: 8px 0 20px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fiche-resume div { background: var(--papier); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.fiche-resume dt { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); }
.fiche-resume dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.etiquette-bloc { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 8px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pastilles li { padding: 7px 14px; border-radius: 999px; background: rgba(45, 156, 246, 0.14); color: var(--lien); font-weight: 600; font-size: 15px; }
.liste-propositions { display: grid; gap: 10px; }
.liste-propositions li { display: grid; gap: 2px 12px; grid-template-columns: 1fr auto; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); }
.liste-propositions li span:not(.statut) { color: var(--texte-2); font-size: 15px; grid-column: 1; }
.liste-propositions .statut, .liste-admin .statut { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: rgba(45, 156, 246, 0.14); color: var(--lien); white-space: nowrap; }
.liste-propositions li.vide, .vide { display: block; color: var(--texte-2); font-style: italic; }
.liens-club { display: grid; gap: 6px; }
.liens-club a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.entete-carte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.entete-carte h2 { margin: 0; }
.compteur { font-family: var(--mono); font-size: 0.55em; vertical-align: middle; color: var(--texte-2); }
.outils-liste { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.outils-liste .bouton { margin-top: 0; }
.filtre { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.filtre select { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--surface); color: var(--texte); padding: 0 10px; font: 500 16px var(--affichage); }
.tableau-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tableau th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-2); background: var(--papier); padding: 10px 12px; white-space: nowrap; }
.tableau td { padding: 10px 12px; border-top: 1px solid var(--trait); vertical-align: top; }
.liste-admin { display: grid; gap: 14px; }
.liste-admin li { border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px; background: var(--papier); display: grid; gap: 6px; }
.ligne-titre { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ligne-titre .statut { grid-row: auto; }
.liste-admin .meta { color: var(--texte-2); font-size: 14px; }
.liste-admin .description { white-space: pre-line; }

/* ---------- palmares ---------- */
.grille-palmares { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grille-palmares { grid-template-columns: repeat(3, 1fr); } }
.carte-palmares { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px; display: grid; gap: 8px; align-content: start; }
.trophee { justify-self: start; min-width: 64px; height: 56px; line-height: 56px; text-align: center; padding: 0 14px; border-radius: 14px; display: inline-block; white-space: nowrap; background: var(--encre); color: #FFD27A; font-family: var(--mono); font-weight: 800; font-size: 20px; box-shadow: inset 0 0 0 2px rgba(255, 210, 122, 0.5); }
.trophee sup { font-size: 0.55em; }
.carte-palmares h3 { font-size: 24px; font-weight: 700; margin-top: 8px; }
.carte-palmares p { color: var(--texte-2); }
.carte-palmares .detail { font-size: 14px; padding: 8px 12px; border: 1.5px solid; border-radius: 10px; }

/* ---------- proposer (accueil) ---------- */
.proposer .etapes { margin-top: 0; }
@media (min-width: 980px) { .proposer { grid-template-columns: 1fr 1fr; align-items: center; } }
.note { margin-top: 12px; font-size: 15px; color: var(--texte-2); }

/* ---------- partenaires sans logo image ---------- */
.logo-texte { gap: 14px; }
.tuile-sigle { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: #0D2240; color: #fff; font-family: var(--mono); font-weight: 800; font-size: 20px; flex-shrink: 0; }
.nom-logo { color: #0D2240; font-weight: 700; font-size: 17px; line-height: 1.15; }
.nom-cadastreci { font-size: 24px; letter-spacing: -0.02em; }
.logo-partenaire.logo-texte img { max-height: 64px; width: 64px; border-radius: 14px; }
.liens-membre { display: flex; gap: 14px; margin-top: 8px; }
.liens-membre a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-family: var(--affichage); font-size: 15px; }

.a-completer.detail { color: var(--alerte); }
/* Une grille laisse ses enfants s’elargir au contenu : le tableau des inscrits defile dans sa carte, pas la page. */
.tableau-bord > * { min-width: 0; }
.fiche-resume dd.t-email { overflow-wrap: anywhere; }
.fiche-resume dd { overflow-wrap: normal; }

/* ================= accueil 3D (17/09/2026) =================
   Scene WebGL (assets/js/scene3d.js) + animations Motion (assets/js/accueil.js).
   Sans JavaScript : l'image rendue par Blender et la console restent lisibles. */

/* Couleur propre a chaque section : pastilles de la scene, cartes, console. */
.carte-section[data-section="cybersecurite"] { --c: #34D399; --c-texte: #047857; }
.carte-section[data-section="iot"] { --c: #FBBF24; --c-texte: #B45309; }
.carte-section[data-section="dev-web"] { --c: #2D9CF6; --c-texte: #1462B0; }
.carte-section[data-section="dev-mobile"] { --c: #A78BFA; --c-texte: #6D28D9; }
.carte-section[data-section="ia-automatisation"] { --c: #FB7185; --c-texte: #BE123C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carte-section { --c-texte: var(--c); } }
:root[data-theme="dark"] .carte-section { --c-texte: var(--c); }

/* ---------- barre : ombre au defilement + fil de lecture ---------- */
.barre { transition: background-color .3s ease, box-shadow .3s ease; }
.barre.est-defilee { background: rgba(13, 34, 64, 0.97); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- mise en page de l'accueil ---------- */
.accueil-3d { position: relative; overflow: hidden; }
.accueil-3d .accueil-dedans { padding: 48px 20px 64px; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "scene" "console"; }
.accueil-3d .accueil-texte { grid-area: texte; }
.accueil-3d h1 { font-size: clamp(42px, 10vw, 72px); }
@media (min-width: 980px) { .accueil-3d h1 { font-size: clamp(56px, 5.3vw, 76px); } }
@media (min-width: 980px) {
  .accueil-3d .accueil-dedans { padding: 56px 20px 72px; column-gap: 32px; row-gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "texte scene" "console scene"; align-items: end; }
  .accueil-3d .console { align-self: start; }
}

/* ---------- la scene ---------- */
.scene { grid-area: scene; position: relative; width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 1 / 1; isolation: isolate; }
.scene::before { content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(45, 156, 246, 0.34), rgba(45, 156, 246, 0.08) 45%, rgba(45, 156, 246, 0) 70%); }
.scene-affiche, .scene-toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-affiche { object-fit: contain; transition: opacity .9s ease .15s; }
.scene-toile { opacity: 0; transition: opacity .9s ease; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.scene-toile.est-saisie { cursor: grabbing; }
.scene.est-prete .scene-toile { opacity: 1; }
.scene.est-prete .scene-affiche { opacity: 0; }
.scene-etiquettes { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .6s ease .35s, visibility 0s .35s; }
.scene.est-prete .scene-etiquettes { visibility: visible; opacity: 1; transition-delay: .35s, 0s; }

.orbite {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px 0 11px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: rgba(5, 16, 34, 0.82); color: #EAF2FB; font: 600 14px/1 var(--affichage); white-space: nowrap; cursor: pointer;
  transition: opacity .35s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.orbite::before { content: ""; position: absolute; inset: -7px -4px; } /* zone de toucher : 44 px meme sur telephone */
.orbite-pastille { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.orbite:hover, .orbite:focus-visible { background: rgba(5, 16, 34, 0.95); border-color: var(--c); }
.orbite:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.orbite.est-choisie { background: rgba(5, 16, 34, 0.95); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); }
.orbite.est-cachee { pointer-events: none; }
.orbite-court { display: none; }
@media (max-width: 560px) {
  .orbite { min-height: 30px; padding: 0 10px 0 9px; gap: 6px; font-size: 13px; }
  .orbite-nom { display: none; }
  .orbite-court { display: inline; }
}

.scene-aide { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(5, 16, 34, 0.6); font: 500 12.5px/1.3 var(--mono); color: #9FB5D1; white-space: nowrap; pointer-events: none; transition: opacity .8s ease; }
.scene-aide.est-lue { opacity: 0; }
.aide-tactile { display: none; }
@media (hover: none) { .aide-souris { display: none; } .aide-tactile { display: inline; } }

/* ---------- la console ---------- */
.console { grid-area: console; width: 100%; max-width: 580px; justify-self: center; }
@media (min-width: 980px) { .console { justify-self: start; } }
/* Hauteur minimale = celle de la fiche d'une section : choisir une section ne pousse pas la page. */
.console-corps { padding: 16px 20px 16px; min-height: 196px; font-family: var(--mono); font-size: 15px; color: #E8F1FB; }
@media (max-width: 560px) { .console-corps { min-height: 250px; padding: 14px 16px; } }
.console-ligne { margin: 0 0 8px; line-height: 1.6; overflow-wrap: anywhere; }
.console-dossiers { display: flex; flex-wrap: wrap; gap: 0 16px; }
.console-dossiers a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ciel); text-decoration: none; }
.console-dossiers a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.console-titre { font: 800 23px/1.2 var(--affichage); letter-spacing: -0.01em; color: var(--c, #fff); }
.console-texte { margin-top: 4px; font: 400 16px/1.5 var(--affichage); color: #C9DAEE; }
.console-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
.console-lien { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px var(--affichage); color: var(--c, var(--ciel)); text-decoration: none; }
.console-lien::after { content: " →"; white-space: pre; }
.console-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.console-nav { display: inline-flex; align-items: center; gap: 4px; }
.console-nav button { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(143, 203, 255, 0.25); background: transparent; color: #EAF2FB; font: 700 16px/1 var(--mono); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.console-nav button:hover { background: rgba(143, 203, 255, 0.12); border-color: rgba(143, 203, 255, 0.5); }
.console-compteur { min-width: 48px; text-align: center; font-size: 13px; color: #8FA6C4; }
.console-apparait { animation: console-entre .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes console-entre { from { opacity: 0; transform: translateY(6px); } }

/* ---------- entree de l'accueil (CSS : visible des la premiere image, sans attendre le JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .accueil-3d .accueil-texte > * { animation: monte .7s cubic-bezier(.2, .7, .2, 1) both; }
  .accueil-3d .accueil-texte > :nth-child(2) { animation-delay: .06s; }
  .accueil-3d .accueil-texte > :nth-child(3) { animation-delay: .12s; }
  .accueil-3d .accueil-texte > :nth-child(4) { animation-delay: .18s; }
  .accueil-3d .console { animation: monte .7s cubic-bezier(.2, .7, .2, 1) .24s both; }
  .accueil-3d .scene { animation: scene-entre 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
}
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }
@keyframes scene-entre { from { opacity: 0; transform: scale(.94); } }
.accueil-3d h1 em { background: linear-gradient(100deg, var(--bleu) 20%, #7FD4FF 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- boutons : enfoncement a ressort pilote par Motion (--appui) ---------- */
.bouton { scale: var(--appui, 1); }

/* ---------- cartes : inclinaison 3D + projecteur qui suit le pointeur ---------- */
.carte-section, .carte-palmares, .carte-partenaire { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: border-color .25s ease, box-shadow .25s ease; }
.carte-section::after, .carte-palmares::after, .carte-partenaire::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c, var(--bleu)) 15%, transparent), transparent 62%);
}
.carte-section:hover::after, .carte-palmares:hover::after, .carte-partenaire:hover::after { opacity: 1; }
.carte-section:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--trait)); box-shadow: var(--ombre); }
.carte-palmares { --c: #FFD27A; }
.carte-palmares:hover, .carte-partenaire:hover { box-shadow: var(--ombre); }
.carte-section svg { background: color-mix(in srgb, var(--c) 16%, transparent); stroke: var(--c-texte); }
.carte-dossier { font: 600 13px/1.4 var(--mono); color: var(--texte-2); margin-top: 4px; }

/* ---------- etapes : un fil qui se dessine au defilement ---------- */
.etapes-cadre { position: relative; }
.etapes-fil { position: absolute; left: 21px; top: 22px; bottom: 40px; width: 2px; border-radius: 2px; background: linear-gradient(var(--bleu), rgba(45, 156, 246, 0.2)); transform-origin: 50% 0; }
.etapes li::before { position: relative; z-index: 1; }

/* ---------- palmares : eclat sur les trophees a leur arrivee ---------- */
.trophee { position: relative; overflow: hidden; }
.trophee::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-130%); }
@media (prefers-reduced-motion: no-preference) {
  .carte-palmares.est-vue .trophee::after { animation: eclat 1.2s .15s ease-out both; }
}
@keyframes eclat { to { transform: translateX(130%); } }

/* ================= espace membres v2 et espaces de section (17/09/2026) ================= */
.aide-courte { font-size: 14px; color: var(--texte-2); line-height: 1.45; }
.compteur-caracteres { justify-self: end; font: 500 12px var(--mono); color: var(--texte-2); }
.compteur-caracteres.depasse { color: #B91C1C; }
.titre-liste { font-size: 20px; font-weight: 700; margin: 28px 0 12px; }
.vide { color: var(--texte-2); font-style: italic; }

/* ---------- avatars ---------- */
.avatar-membre { display: inline-grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--encre); box-shadow: 0 0 0 2px var(--accent, var(--bleu)); }
.avatar-initiales { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 0.02em; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 76px; height: 76px; font-size: 24px; box-shadow: 0 0 0 3px var(--accent, var(--bleu)); }
.avatar-xl { width: 112px; height: 112px; font-size: 36px; box-shadow: 0 0 0 4px var(--accent, var(--bleu)), 0 18px 40px rgba(0, 0, 0, 0.35); }
canvas.avatar-membre { background: none; }

/* ---------- en-tete de profil ---------- */
.profil-bandeau { display: grid; gap: 20px; align-items: center; grid-template-columns: auto minmax(0, 1fr); }
@media (min-width: 900px) { .profil-bandeau { grid-template-columns: auto minmax(0, 1fr) auto; } }
.profil-bandeau .profil-actions { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .profil-bandeau { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profil-bandeau .avatar-xl { width: 96px; height: 96px; font-size: 30px; }
}
@media (min-width: 900px) { .profil-bandeau .profil-actions { grid-column: auto; } }
.avatar-bouton { position: relative; justify-self: start; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.avatar-cadre { display: block; }
.avatar-crayon { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); box-shadow: 0 0 0 3px var(--encre); }
.avatar-crayon svg { width: 17px; height: 17px; fill: none; stroke: #04111F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar-bouton:hover .avatar-crayon { background: #58B2FA; }
.profil-texte { min-width: 0; }
.profil-texte h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.profil-meta { margin-top: 6px; font: 600 14px var(--mono); letter-spacing: 0.06em; color: var(--ciel); }
.profil-bio { margin-top: 10px; max-width: 46em; color: #C9DAEE; }
.profil-bio-vide { font-style: italic; color: #8FA6C4; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.puces li { padding: 4px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--accent, var(--bleu)) 18%, transparent); color: inherit; border: 1px solid color-mix(in srgb, var(--accent, var(--bleu)) 40%, transparent); }
.liens-profil { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.liens-profil a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ciel); text-decoration: none; }
.liens-profil a::after { content: " ↗"; white-space: pre; }
.liens-profil a:hover { text-decoration: underline; }
.carte-espace .liens-profil a, .carte-profil .liens-profil a { color: var(--lien); }

/* ---------- tuiles des sections ---------- */
.entete-carte .aide-courte { max-width: 38em; }
.tuiles-sections { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin-top: 8px; }
.tuile-section { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 16px; background: var(--papier); border: 1px solid var(--trait); border-top: 4px solid var(--c); }
.tuile-titre { font-size: 20px; font-weight: 800; color: var(--texte); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.tuile-titre:hover { text-decoration: underline; }
.tuile-resume { font-size: 15px; color: var(--texte-2); line-height: 1.45; }
.tuile-etat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tuile-section .bouton { justify-self: start; margin-top: 4px; }
.etat-section { display: inline-flex; padding: 4px 10px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: 0.04em; background: var(--surface); border: 1px solid var(--trait); color: var(--texte-2); }
.etat-membre, .etat-bureau { color: color-mix(in srgb, var(--c) 55%, var(--texte)); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.etat-attente { color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 45%, transparent); background: var(--alerte-fond); }

/* ---------- niveaux techniques ---------- */
.badge-niveau { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: 0.04em; border: 1px solid; }
.niveau-debutant { color: #9A3412; background: #FFF1E6; border-color: #FDBA8C; }
.niveau-intermediaire { color: #1E4E8C; background: #E8F2FE; border-color: #9CC8F8; }
.niveau-avance { color: #166534; background: #E7F8EE; border-color: #86DDA8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .niveau-debutant { color: #FDBA8C; background: #2A1A0E; border-color: #7C3A12; }
  :root:not([data-theme="light"]) .niveau-intermediaire { color: #9CC8F8; background: #0E2138; border-color: #24558F; }
  :root:not([data-theme="light"]) .niveau-avance { color: #86DDA8; background: #0D2618; border-color: #1F6B40; }
}
:root[data-theme="dark"] .niveau-debutant { color: #FDBA8C; background: #2A1A0E; border-color: #7C3A12; }
:root[data-theme="dark"] .niveau-intermediaire { color: #9CC8F8; background: #0E2138; border-color: #24558F; }
:root[data-theme="dark"] .niveau-avance { color: #86DDA8; background: #0D2618; border-color: #1F6B40; }

/* ---------- tableau de bord ---------- */
.duo-cartes { display: grid; gap: 20px; }
@media (min-width: 960px) { .duo-cartes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.liste-annonces-courtes { display: grid; gap: 12px; }
.annonce-courte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--papier); border: 1px solid var(--trait); border-left: 4px solid var(--c); }
.annonce-courte .vide, .liste-annonces-courtes .vide { display: block; }
.annonce-sujet { display: inline-block; font-weight: 700; color: var(--texte); text-decoration: none; }
.annonce-sujet:hover { text-decoration: underline; }
.annonce-meta { display: block; font-size: 13px; color: var(--texte-2); }
.annonce-extrait { margin-top: 4px; font-size: 15px; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reponse-bureau { grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px; border-radius: 10px; font-size: 15px; background: color-mix(in srgb, var(--bleu) 10%, var(--surface)); border-left: 3px solid var(--bleu); white-space: pre-line; }
.liste-propositions li .reponse-bureau { grid-row: auto; }

/* ---------- choix en puces (niveau, type, experience) ---------- */
.choix-niveaux, .choix-type { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-type { border: 0; padding: 0; margin: 0; }
.choix-type legend { width: 100%; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.puce-choix { position: relative; display: inline-flex; cursor: pointer; }
.formulaire .puce-choix { display: inline-flex; gap: 0; font-weight: 600; }
.puce-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-choix span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--surface); font-size: 15px; transition: border-color .15s ease, background-color .15s ease; }
.puce-choix:hover span { border-color: var(--bleu); }
.puce-choix input:checked + span { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 16%, var(--surface)); color: var(--texte); }
.puce-choix input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ---------- dialogues ---------- */
.dialogue { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--trait); border-radius: 20px; background: var(--surface); color: var(--texte); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: auto; }
.dialogue::backdrop { background: rgba(4, 12, 24, 0.66); }
.dialogue-dedans { padding: 20px; display: grid; gap: 16px; }
@media (min-width: 620px) { .dialogue-dedans { padding: 28px; } }
.dialogue-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialogue-entete h2 { font-size: clamp(22px, 4vw, 28px); font-weight: 800; }
.bouton-fermer { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--trait); background: transparent; color: var(--texte); font-size: 26px; line-height: 1; cursor: pointer; }
.bouton-fermer:hover { background: var(--papier); }
.photo-edition { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.photo-apercu { display: grid; place-items: center; }
.photo-actions { display: grid; gap: 8px; justify-items: start; }
.bouton-fichier, .formulaire .bouton-fichier { position: relative; display: inline-flex; cursor: pointer; }
.bouton-fichier input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bouton-fichier:focus-within { outline: 3px solid var(--bleu); outline-offset: 3px; }
@media (max-width: 480px) { .photo-edition { grid-template-columns: minmax(0, 1fr); justify-items: center; } .photo-actions { justify-items: center; text-align: center; } }
.choix-couleur { border: 0; padding: 0; margin: 0; }
.choix-couleur legend { font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.pastilles-couleur { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille-couleur { position: relative; width: 44px; height: 44px; cursor: pointer; }
.pastille-couleur input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastille-couleur span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12); }
.pastille-couleur input:checked + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); }
.pastille-couleur input:focus-visible + span { outline: 3px solid var(--texte); outline-offset: 5px; }

/* ---------- en-tete d'une section ---------- */
.section-entete { position: relative; }
.section-entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c, var(--bleu)); }
.section-entete .accueil-dedans, .section-entete .bloc-dedans { position: relative; }
.section-entete h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
.section-entete .invite-signe + span { color: var(--c, var(--ciel)); }
.section-statut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.puce-entete { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: #D6E6F7; background: rgba(143, 203, 255, 0.1); border: 1px solid rgba(143, 203, 255, 0.25); text-decoration: none; }
.puce-accent { color: #fff; border-color: var(--c, var(--bleu)); background: color-mix(in srgb, var(--c, var(--bleu)) 22%, transparent); }
.puce-alerte { color: #FFD27A; border-color: rgba(255, 210, 122, 0.5); }
.puce-alerte:hover { background: rgba(255, 210, 122, 0.12); }

/* ---------- onglets ---------- */
.onglets { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 20px; border-bottom: 1px solid var(--trait); scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; } /* defilement au doigt garde, barre grise cachee */
.lien-barre { white-space: nowrap; }
.onglet { flex-shrink: 0; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--texte-2); font: 700 16px var(--affichage); cursor: pointer; }
.onglet:hover { color: var(--texte); }
.onglet[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--c, var(--bleu)); }
.panneau { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); }
@media (min-width: 620px) { .panneau { padding: 28px; } }
.panneau[hidden] { display: none; }
.panneau > h2, .panneau .entete-carte h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.carte-formulaire { box-shadow: none; }
.champs-trio { display: grid; gap: 16px; }
@media (min-width: 760px) { .champs-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.bouton-lien { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--lien); font: 700 15px var(--affichage); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bouton-danger { color: #B91C1C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bouton-danger { color: #F87171; } }
:root[data-theme="dark"] .bouton-danger { color: #F87171; }
.actions-ligne select, .liste-admin textarea, .liste-candidatures select { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--surface); color: var(--texte); padding: 0 10px; font: 500 16px var(--affichage); max-width: 100%; }
.liste-admin textarea { width: 100%; padding: 10px 12px; min-height: 64px; resize: vertical; }

/* ---------- programme ---------- */
.chronologie { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.activite { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); }
.activite-passee { opacity: 0.62; }
.activite-date { display: grid; place-content: center; text-align: center; height: 72px; border-radius: 12px; background: var(--encre); color: #fff; box-shadow: inset 0 0 0 2px var(--c, var(--bleu)); }
.activite-date b { font-size: 26px; line-height: 1; }
.activite-date span { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ciel); }
.activite-corps { display: grid; gap: 4px; align-content: start; min-width: 0; }
.activite-corps h3 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.puce-type { justify-self: start; padding: 2px 10px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: 0.04em; background: color-mix(in srgb, var(--c, var(--bleu)) 16%, transparent); color: color-mix(in srgb, var(--c, var(--bleu)) 55%, var(--texte)); }
.activite-meta { font-size: 14px; color: var(--texte-2); }
.activite-description { font-size: 15px; color: var(--texte-2); white-space: pre-line; }

/* ---------- annonces ---------- */
.liste-annonces { display: grid; gap: 14px; }
.annonce { display: grid; gap: 8px; padding: 16px 18px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); }
.annonce-auteur { display: flex; align-items: center; gap: 10px; }
.annonce-auteur div { display: grid; line-height: 1.25; }
.annonce-auteur span { font-size: 13px; color: var(--texte-2); }
.annonce h3 { font-size: 20px; font-weight: 700; }
.annonce-corps { white-space: pre-line; overflow-wrap: anywhere; }
.annonce-envois { font-size: 14px; color: var(--texte-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }

/* ---------- bureau de la section ---------- */
.grille-profils { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.carte-profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: var(--papier); border: 1px solid var(--trait); }
.carte-president { border-color: color-mix(in srgb, var(--accent, var(--bleu)) 60%, var(--trait)); }
.carte-profil-texte { display: grid; gap: 2px; min-width: 0; }
.carte-profil-nom { font-size: 18px; overflow-wrap: anywhere; }
.carte-profil-fonction { font: 700 13px var(--mono); letter-spacing: 0.04em; color: var(--lien); }
.carte-profil-meta { font-size: 14px; color: var(--texte-2); overflow-wrap: anywhere; }
.carte-profil-bio { margin-top: 6px; font-size: 15px; color: var(--texte-2); }
.carte-profil .bouton-lien { justify-self: start; }

/* ---------- gestion ---------- */
.sous-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.sous-onglet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--surface); color: var(--texte); font: 700 15px var(--affichage); cursor: pointer; }
.sous-onglet[aria-pressed="true"] { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 14%, var(--surface)); }
.sous-onglet .compteur:empty { display: none; }
.sous-onglet .compteur { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bleu); color: #04111F; }
.vue-gestion { display: grid; gap: 14px; }
.vue-gestion[hidden] { display: none; }
.liste-candidatures { display: grid; gap: 12px; }
.candidature { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); border-left: 4px solid var(--trait); }
.candidature.statut-en-attente { border-left-color: #F59E0B; }
.candidature.statut-acceptee { border-left-color: #22C55E; }
.candidature.statut-refusee { border-left-color: #94A3B8; opacity: 0.85; }
.candidature-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.candidature-identite { display: grid; min-width: 0; }
.candidature-identite span { font-size: 14px; color: var(--texte-2); }
.candidature-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 700px) { .candidature-tete { grid-template-columns: auto minmax(0, 1fr) auto; } .candidature-badges { grid-column: auto; justify-content: end; } }
.candidature-badges .statut, .ligne-titre .statut { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: rgba(45, 156, 246, 0.14); color: var(--lien); white-space: nowrap; }
.candidature-meta { font-size: 14px; color: var(--texte-2); }
.candidature-motivation summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.candidature-motivation p { margin-top: 6px; white-space: pre-line; }
.cellule-membre { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.liste-admin li .description { overflow-wrap: anywhere; }

/* ---------- palmares avec photos (17/09/2026) ---------- */
@media (min-width: 760px) { .grille-palmares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-avec-photo { padding: 0; overflow: hidden; gap: 0; }
.palmares-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--encre); }
.palmares-texte { display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px; }
.palmares-date { font: 600 13px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--texte-2); }
.carte-palmares p b { color: var(--texte); }
.trophee-projet { color: var(--ciel); box-shadow: inset 0 0 0 2px rgba(143, 203, 255, 0.5); font-size: 16px; }

/* ---------- accueil : lien des cartes de section et agenda ---------- */
.carte-section .carte-lien { color: var(--lien); font-size: 16px; }
.agenda { margin-top: 44px; }
.agenda-titre { font-size: clamp(24px, 3vw, 30px); font-weight: 800; margin-bottom: 16px; }
.agenda .chronologie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.agenda .activite { background: var(--surface); }
.agenda-section { justify-self: start; font: 700 13px var(--mono); letter-spacing: 0.04em; color: color-mix(in srgb, var(--c) 60%, var(--texte)); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.agenda-section:hover { text-decoration: underline; }
.agenda h4 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0; }
.agenda .note { margin-top: 14px; }

/* ---------- bureau du club : bureaux des sections ---------- */
.grille-equipes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.carte-equipe { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; background: var(--papier); border: 1px solid var(--trait); border-top: 4px solid var(--c); }
.liste-equipe { display: grid; gap: 6px; font-size: 15px; }
.liste-equipe .meta { color: var(--texte-2); font-size: 13px; overflow-wrap: anywhere; }
.nomination { display: grid; gap: 8px; }
.nomination .bouton { justify-self: start; }

/* ---------- candidature a une section (dialogue) ---------- */
.dialogue-test { width: min(720px, calc(100% - 24px)); }
.test-progression { height: 6px; background: var(--trait); }
.test-progression span { display: block; height: 100%; width: 0; background: var(--c, var(--bleu)); transition: width .3s ease; }
#test-contenu { display: grid; gap: 14px; }
.test-message { font-size: 17px; }
.test-carte { display: grid; gap: 14px; }
.test-question { font-size: clamp(20px, 3.2vw, 24px); font-weight: 700; line-height: 1.3; }
.test-question:focus { outline: none; }
.test-resultat { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 10px 0; }
#test-contenu .formulaire { gap: 14px; }
.case-test { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--papier); font-weight: 600; cursor: pointer; }
.case-test input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--c, var(--bleu)); }
.case-test:has(input:checked) { border-color: var(--c, var(--bleu)); background: color-mix(in srgb, var(--c, var(--bleu)) 12%, var(--papier)); }
.regle-section { font-size: 15px; color: var(--texte-2); padding: 10px 14px; border-radius: 12px; border-left: 4px solid var(--c, var(--bleu)); background: color-mix(in srgb, var(--c, var(--bleu)) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .test-progression span { transition: none; } }

/* ---------- tests et exercices (Google Forms) ---------- */
.liste-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.test-lien { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); border-left: 4px solid var(--trait); }
.test-niveau { border-left-color: var(--c, var(--bleu)); }
.test-passe { opacity: 0.7; }
.test-lien-corps { display: grid; gap: 4px; min-width: 0; }
.test-lien-corps h3 { font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.test-lien-corps .actions-ligne { margin-top: 0; }
.test-lien > .bouton { margin: 0; min-height: 44px; }
.liste-tests-dialogue { margin-top: 10px; }
@media (max-width: 560px) {
  .test-lien { grid-template-columns: 1fr; }
  .test-lien > .bouton { justify-self: start; }
}
.astuce { border: 1px dashed var(--trait); border-radius: 12px; padding: 4px 14px; background: var(--surface); }
.astuce summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--lien); }
.astuce ol { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
.astuce p { font-size: 14px; color: var(--texte-2); margin-bottom: 10px; }
.candidature-test { font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 10px; justify-self: start; }
.test-fait { color: #166534; background: #E7F8EE; }
.test-pas-fait { color: var(--alerte); background: var(--alerte-fond); }
.candidature.statut-annulee { border-left-color: var(--trait); opacity: 0.75; }
.niveau-a-evaluer { color: var(--texte-2); background: var(--surface); border-color: var(--trait); border-style: dashed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .test-fait { color: #86DDA8; background: #0D2618; }
}
:root[data-theme="dark"] .test-fait { color: #86DDA8; background: #0D2618; }

/* ---------- connexion Google et regle « une seule section » (espace) ---------- */
.bouton-google { gap: 10px; background: #fff; color: #1F1F1F; border-color: #DADCE0; }
.bouton-google:hover { background: #F4F6F9; }
.bouton-google svg { flex-shrink: 0; }
.regles-section { display: grid; gap: 12px; margin-bottom: 18px; }
.etat-ma-section { font-size: 17px; font-weight: 600; color: var(--texte); }
.regles { display: grid; gap: 6px; list-style: disc; padding: 14px 16px 14px 32px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); font-size: 15px; color: var(--texte-2); }
.regles li::marker { color: var(--lien); }
.regles b { color: var(--texte); }
.tuile-ma-section { background: color-mix(in srgb, var(--c) 10%, var(--papier)); border-color: color-mix(in srgb, var(--c) 45%, var(--trait)); }

/* ---------- pages de texte : vie privee, conditions ---------- */
.texte-legal { max-width: 72ch; }
.texte-legal h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; line-height: 1.15; margin-bottom: 14px; }
.texte-legal h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; margin: 30px 0 10px; }
.texte-legal p { color: var(--texte-2); margin-bottom: 12px; }
.texte-legal .chapeau-bloc { max-width: none; margin-bottom: 8px; }
.texte-legal .garanties { margin-bottom: 10px; }
.texte-legal a { color: var(--lien); }
.pied-dedans a { color: var(--ciel); }

/* ---------- connexion par e-mail ---------- */
.ou-separateur { display: flex; align-items: center; gap: 12px; margin: 24px 0 6px; color: var(--texte-2); font-size: 14px; }
.ou-separateur::before, .ou-separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
#form-courriel-code input[name="code"] { font: 700 24px var(--mono); letter-spacing: 8px; text-align: center; max-width: 12ch; }