/* ============ Le plan du groupe : encres, matières, mouvement ============ */
  @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
    src:url('/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
    src:url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

  :root{
    --eau:#3EE6D8; --jaune:#FFC800; --rose:#FFA6DC; --bleu:#3B9BFF; --rouge:#E23B2E; --vert:#2ED573; --encre:#111111; --blanc:#FFFFFF;
    --trait:3px; --trait-fin:2px;
    --dur:.4s; --ease:cubic-bezier(.34,1.56,.64,1);
    --police:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
    /* Icônes dessinées au trait 2.2, arrondi ; posées en masque, colorées par currentColor. */
    --i-cal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='4'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
    --i-groupe:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.5'/><circle cx='17' cy='10' r='2.6'/><path d='M3 20c0-3.6 2.7-6.2 6-6.2s6 2.6 6 6.2M15.5 19.5c.2-2.4 1.7-4.2 4-4.2 1 0 1.8.3 2.5.8'/></svg>");
    --i-crayon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l4.5-1L19.5 8l-3.5-3.5L5 15.5z'/><path d='M14 6.5l3.5 3.5'/></svg>");
    --i-gauche:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>");
    --i-droite:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>");
    --i-bas:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9l7 7 7-7'/></svg>");
    --i-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'><path d='M12 4v16M4 12h16'/></svg>");
    --i-fleche:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>");
    --i-coche:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>");
    --i-croix:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'><path d='M5 5l14 14M19 5L5 19'/></svg>");
    --i-poubelle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M9.5 7V4h5v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/></svg>");
    --i-lieu:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.6 7-12a7 7 0 0 0-14 0c0 5.4 7 12 7 12z'/><circle cx='12' cy='9' r='2.5'/></svg>");
    --i-horloge:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v5l3.5 2'/></svg>");
    --i-note:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v14H6z'/><path d='M9 12h6M9 16h6'/></svg>");
    --i-couronne:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18.5h16M4.5 17l.8-9.5 4.7 4 2-6 2 6 4.7-4 .8 9.5'/></svg>");
    --i-echange:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h13l-3-3M20 16H7l3 3'/></svg>");
    --i-etincelle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'><path d='M12 3l2.2 6.3L20.5 11.5l-6.3 2.2L12 20l-2.2-6.3L3.5 11.5l6.3-2.2z'/></svg>");
    --i-repete:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10a8 8 0 0 1 14-4.5l2 2M20 14a8 8 0 0 1-14 4.5l-2-2'/><path d='M20 3.5v4h-4M4 20.5v-4h4'/></svg>");
    --i-plage:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18M3 12l4-4M3 12l4 4M21 12l-4-4M21 12l-4 4'/></svg>");
    --i-mois:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='4'/><path d='M3 10h18M8 3v4M16 3v4'/><circle cx='12' cy='15.5' r='1.6' fill='%23000' stroke='none'/></svg>");
    --i-soleil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/></svg>");
  }

  *,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  html{background:var(--eau);}
  body{font-family:var(--police);font-weight:500;font-size:15px;line-height:1.35;color:var(--encre);background:var(--eau);min-height:100vh;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  input,select,textarea,button{font-family:inherit;color:inherit;}
  button{cursor:pointer;border:none;background:none;padding:0;margin:0;font-weight:700;}
  a{color:var(--encre);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
  ::selection{background:var(--jaune);color:var(--encre);}
  :focus{outline:none;}
  :focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:6px;}
  ::-webkit-scrollbar{width:0;height:0;}
  ::placeholder{color:#3A3A3A;opacity:1;font-weight:500;}
  input,textarea{caret-color:var(--encre);}
  .num{font-variant-numeric:tabular-nums;}

  @keyframes monter{from{transform:translateY(64px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  @keyframes paraitre{from{opacity:0;}to{opacity:1;}}

  /* ---------- icônes ---------- */
  .ico{display:inline-block;width:22px;height:22px;flex:0 0 auto;background:currentColor;
    -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
  .ico-cal{--i:var(--i-cal);} .ico-groupe{--i:var(--i-groupe);} .ico-crayon{--i:var(--i-crayon);}
  .ico-gauche{--i:var(--i-gauche);} .ico-droite{--i:var(--i-droite);} .ico-bas{--i:var(--i-bas);}
  .ico-plus{--i:var(--i-plus);} .ico-fleche{--i:var(--i-fleche);} .ico-coche{--i:var(--i-coche);} .ico-croix{--i:var(--i-croix);}
  .ico-poubelle{--i:var(--i-poubelle);} .ico-lieu{--i:var(--i-lieu);} .ico-horloge{--i:var(--i-horloge);} .ico-note{--i:var(--i-note);}
  .ico-couronne{--i:var(--i-couronne);} .ico-echange{--i:var(--i-echange);} .ico-etincelle{--i:var(--i-etincelle);}
  .ico-repete{--i:var(--i-repete);} .ico-plage{--i:var(--i-plage);} .ico-mois{--i:var(--i-mois);} .ico-soleil{--i:var(--i-soleil);}
  .ico-sm{width:16px;height:16px;} .ico-lg{width:26px;height:26px;}
  /* La marque : le logo du groupe (cycliste), image fournie par Tom, en deux tailles. */
  .oiseau{display:inline-block;width:36px;height:46px;flex:0 0 auto;background:url('/logo-gaspi-128.png') center/contain no-repeat;}
  .oiseau-xl{width:96px;height:126px;background-image:url('/logo-gaspi-360.png');}

  /* ---------- typographie ---------- */
  .marque{font-weight:700;font-size:27px;line-height:.95;letter-spacing:-.05em;color:var(--encre);}
  .marque-xl{font-size:64px;letter-spacing:-.05em;margin:10px 0 6px;}
  .titre{font-weight:700;font-size:24px;line-height:.95;letter-spacing:-.045em;text-wrap:balance;}
  .titre-2{font-weight:700;font-size:20px;line-height:1;letter-spacing:-.035em;}
  .titre-3{font-weight:700;font-size:16px;line-height:1.05;letter-spacing:-.02em;}
  .secondaire{font-weight:500;font-size:13px;line-height:1.35;}
  .petit{font-weight:700;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.02em;}
  .capitalise{text-transform:capitalize;}
  .premiere{display:inline-block;}
  .premiere::first-letter{text-transform:uppercase;}

  /* ---------- le plan : eau, terre, côte ---------- */
  .app{position:relative;min-height:100vh;overflow-x:clip;}
  .colonne{max-width:600px;margin:0 auto;}
  .terre{position:relative;z-index:0;padding:0 16px 10px;}
  /* Le fond de terre : trois taches de la même encre, sans bordure, cernées d'un seul trait noir par le filtre du conteneur.
     Le trait suit l'union des taches, d'où une côte à plusieurs inflexions, un peu irrégulière comme un tracé à la main. */
  .fond{position:absolute;z-index:-1;top:-420px;left:-100vw;right:-100vw;bottom:-130px;pointer-events:none;
    filter:url(#goutte) drop-shadow(3px 0 0 var(--encre)) drop-shadow(-3px 0 0 var(--encre)) drop-shadow(0 3px 0 var(--encre)) drop-shadow(0 -3px 0 var(--encre)) drop-shadow(2.2px 2.2px 0 var(--encre)) drop-shadow(-2.2px -2.2px 0 var(--encre));}
  .fond > span{position:absolute;display:block;background:var(--terre,var(--jaune));}
  .terre-cal{--terre:var(--jaune);} .terre-cross{--terre:var(--rose);} .terre-mine{--terre:var(--blanc);}
  /* Calendrier : le lobe gonfle depuis le haut à droite ; la côte sort haut par la droite, une bosse basse à gauche. */
  .terre-cal .b1{top:0;left:calc(100vw - 34vw);right:calc(100vw - 60vw);bottom:118px;border-radius:0 0 42% 58% / 0 0 110px 230px;}
  .terre-cal .b2{left:calc(100vw - 30vw);width:96vw;height:210px;bottom:56px;border-radius:50% 50% 48% 52% / 60% 60% 40% 40%;}
  .terre-cal .b3{left:calc(100vw + 44vw);width:70vw;height:150px;bottom:96px;border-radius:50%;}
  /* Dispos : ancré en haut à gauche, miroir. */
  .terre-cross .b1{top:0;left:calc(100vw - 60vw);right:calc(100vw - 34vw);bottom:118px;border-radius:0 0 58% 42% / 0 0 230px 110px;}
  .terre-cross .b2{right:calc(100vw - 30vw);width:96vw;height:210px;bottom:56px;border-radius:50% 50% 52% 48% / 60% 60% 40% 40%;}
  .terre-cross .b3{right:calc(100vw + 44vw);width:70vw;height:150px;bottom:96px;border-radius:50%;}
  /* Mes dispos : terre blanche, deux bosses. */
  .terre-mine .b1{top:0;left:calc(100vw - 50vw);right:calc(100vw - 50vw);bottom:118px;border-radius:0 0 50% 50% / 0 0 160px 160px;}
  .terre-mine .b2{left:calc(100vw - 16vw);width:80vw;height:200px;bottom:60px;border-radius:50%;}
  .terre-mine .b3{left:calc(100vw + 50vw);width:64vw;height:140px;bottom:100px;border-radius:50%;}
  @media (min-width:700px){
    .fond{top:-600px;}
    .terre-cal .b1{left:calc(100vw - 10px);right:calc(100vw - 10px);border-radius:0 0 46% 54% / 0 0 150px 260px;}
    .terre-cal .b2{left:calc(100vw + 12vw);width:50vw;height:210px;bottom:30px;}
    .terre-cal .b3{left:calc(100vw + 50vw);width:40vw;height:170px;bottom:100px;}
    .terre-cross .b1{left:calc(100vw - 10px);right:calc(100vw - 10px);border-radius:0 0 54% 46% / 0 0 260px 150px;}
    .terre-cross .b2{right:calc(100vw + 12vw);width:50vw;height:210px;bottom:30px;}
    .terre-cross .b3{right:calc(100vw + 50vw);width:40vw;height:170px;bottom:100px;}
    .terre-mine .b1{left:calc(100vw - 10px);right:calc(100vw - 10px);border-radius:0 0 50% 50% / 0 0 200px 200px;}
    .terre-mine .b2{left:calc(100vw + 18vw);width:34vw;height:240px;bottom:52px;}
    .terre-mine .b3{left:calc(100vw + 62vw);width:22vw;height:170px;bottom:110px;}
    .cell{max-height:72px;}
  }
  /* La côte glisse au défilement : une seule ligne de temps, celle du document ; le filtre voyage avec le fond, sans se recalculer. */
  @supports (animation-timeline: scroll()){
    .fond{animation:cote linear both;animation-timeline:scroll(root);animation-range:0 360px;}
  }
  @keyframes cote{to{transform:translateY(-18px);}}
  /* Un second territoire sur l'eau, pour que le plan montre toujours deux terres. */
  .eau{position:relative;z-index:0;}
  .eau::after{content:'';position:absolute;z-index:-1;pointer-events:none;border:var(--trait) solid var(--encre);}
  .eau-cal::after{right:-150px;bottom:-90px;width:360px;height:220px;background:var(--rose);border-radius:56% 44% 48% 52% / 60% 52% 48% 40%;}
  .eau-cross::after{left:-170px;bottom:-90px;width:380px;height:220px;background:var(--jaune);border-radius:44% 56% 52% 48% / 52% 40% 60% 48%;}
  .eau-mine::after{right:-130px;bottom:-90px;width:340px;height:220px;background:var(--rose);border-radius:52% 48% 44% 56% / 48% 60% 40% 52%;}
  /* Ornements de l'identité : étoiles à quatre branches, blanches au trait noir, posées sur l'eau. */
  .etoile{position:absolute;z-index:-1;width:34px;height:34px;pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 2 C22 14 26 18 38 20 C26 22 22 26 20 38 C18 26 14 22 2 20 C14 18 18 14 20 2 Z' fill='%23FFFFFF' stroke='%23111111' stroke-width='3' stroke-linejoin='round'/></svg>") center/contain no-repeat;}
  .etoile-lg{width:52px;height:52px;}
  /* Les étoiles de l'eau n'ont de place que sous le titre « À venir » du Calendrier. */
  .eau .etoile{display:none;} .eau-cal .etoile{display:block;}
  .eau{padding:84px 16px 170px;}
  @media (min-width:700px){ .eau{padding-top:136px;} }

  .entete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 6px;}
  .marque-btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;}

  /* ---------- capsules, pastilles, îlots ---------- */
  .capsule{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 8px 6px 14px;border:var(--trait-fin) solid var(--encre);border-radius:999px;background:var(--blanc);font-weight:700;font-size:14px;
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);}
  .capsule:hover{transform:translateY(-1px);}
  .capsule:active{transform:scale(.97);}
  .capsule-membre{padding-right:6px;}
  .rond{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:var(--trait-fin) solid var(--encre);background:var(--blanc);color:var(--encre);flex:0 0 auto;
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);}
  .rond:hover{transform:translateY(-1px);}
  .rond:active{transform:scale(.94);}
  .pastille{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--encre);color:var(--blanc);flex:0 0 auto;}
  .pastille .ico{background:var(--blanc);}
  .pastille-sm{width:30px;height:30px;}
  .ilot{background:var(--blanc);border:var(--trait) solid var(--encre);border-radius:28px 24px 30px 26px / 26px 30px 24px 28px;}
  .avatar{display:inline-grid;place-items:center;border-radius:50%;border:var(--trait-fin) solid var(--encre);flex:0 0 auto;line-height:1;}
  .s28{width:28px;height:28px;font-size:13px;} .s30{width:30px;height:30px;font-size:14px;} .s32{width:32px;height:32px;font-size:15px;}
  .s40{width:40px;height:40px;font-size:19px;} .s44{width:44px;height:44px;font-size:21px;} .s54{width:54px;height:54px;font-size:26px;}

  /* commutateur : la pastille jaune traverse d'un bord à l'autre */
  .segment{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:var(--trait-fin) solid var(--encre);border-radius:999px;background:var(--blanc);padding:3px;isolation:isolate;}
  .segment::before{content:'';position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--jaune);border:var(--trait-fin) solid var(--encre);
    transition:left var(--dur) var(--ease);}
  .segment.is-b::before{left:50%;}
  .segment > button{position:relative;z-index:1;padding:8px 16px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--encre);white-space:nowrap;}

  /* états : la terre (plein) et l'eau (creux), jamais la couleur seule */
  .etat{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;border:var(--trait-fin) solid var(--encre);white-space:nowrap;line-height:1;min-height:26px;}
  .etat::before{content:'';width:11px;height:11px;flex:0 0 auto;background:var(--encre);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
  .etat.plein{background:var(--vert);--i:var(--i-coche);}
  .etat.creux{background:var(--rouge);--i:var(--i-croix);}
  .type{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border:var(--trait-fin) solid var(--encre);line-height:1.2;white-space:nowrap;}

  /* niveaux de dispo : la quantité de terre dans l'eau */
  .compteur{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-width:46px;height:34px;padding:0 9px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--eau);font-weight:700;font-size:14px;flex:0 0 auto;isolation:isolate;overflow:hidden;}
  .compteur.niv-1{background:var(--rouge);}
  .compteur.niv-2{background:var(--jaune);}
  .compteur.niv-3{background:var(--vert);}
  .legende{display:flex;gap:16px;justify-content:center;margin-top:14px;flex-wrap:wrap;font-size:11.5px;font-weight:700;}
  .legende > div{display:flex;align-items:center;gap:6px;}
  .goutte{width:16px;height:16px;border-radius:50%;border:2px solid var(--encre);background:var(--eau);position:relative;overflow:hidden;}
  .goutte::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--jaune);}
  .goutte.niv-1{background:var(--rouge);} .goutte.niv-2{background:var(--jaune);} .goutte.niv-3{background:var(--vert);}
  .goutte.creux{background:var(--rouge);} .goutte.plein{background:var(--vert);}

  /* ---------- grilles de mois ---------- */
  .grille{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
  .jour-nom{text-align:center;font-size:11px;font-weight:700;padding:6px 0 4px;}
  .cell{position:relative;aspect-ratio:1/.86;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;color:var(--encre);isolation:isolate;
    transition:transform var(--dur) var(--ease);}
  .cell:active{transform:scale(.92);}
  .cell.is-out{opacity:.6;}
  .cell.is-out .cell-terre{display:none;}
  .cell.is-out .cell-badge{visibility:hidden;}
  .cell-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:700;font-size:15px;line-height:1;}
  .cell-num-sm{width:26px;height:26px;font-size:13px;}
  .cell.is-today .cell-num{background:var(--encre);color:var(--jaune);}
  .cell-pts{display:flex;gap:3px;height:8px;align-items:center;justify-content:center;}
  .pt{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--encre);}
  .cell-terre{position:absolute;z-index:-1;inset:3px;border-radius:44% 56% 52% 48% / 50% 46% 54% 50%;background:var(--jaune);border:var(--trait-fin) solid var(--encre);transform:scale(var(--niv,1));
    transition:transform var(--dur) var(--ease);}
  .cell.niv-0 .cell-terre{display:none;} .cell.niv-1 .cell-terre{--niv:.8;background:var(--rouge);} .cell.niv-2 .cell-terre{--niv:.9;background:var(--jaune);} .cell.niv-3 .cell-terre{--niv:1;background:var(--vert);}
  .cell-badge{font-size:11px;font-weight:700;line-height:1;min-height:11px;}
  .cell.is-none .cell-num{border:2.5px solid var(--rouge);}
  .cell.is-exc::after{content:'';position:absolute;top:4px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--encre);}
  .mois-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;}
  .mois-nav .titre{font-size:clamp(20px,5.6vw,24px);white-space:nowrap;}
  .mois-nav .boutons{display:flex;gap:8px;align-items:center;}
  .aujourdhui{min-height:40px;padding:0 11px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);font-weight:700;font-size:12.5px;
    transition:transform var(--dur) var(--ease);}
  .aujourdhui:active{transform:scale(.96);}

  /* ---------- événements (îlots sur l'eau) ---------- */
  .liste{display:flex;flex-direction:column;gap:10px;}
  .evt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;color:var(--encre);transition:transform var(--dur) var(--ease);}
  .evt:hover{transform:translateY(-2px);}
  .evt:active{transform:scale(.985);}
  .evt-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;flex:0 0 auto;}
  .evt-jour{font-size:32px;font-weight:700;line-height:.9;letter-spacing:-.05em;}
  .evt-corps{flex:1;min-width:0;}
  .evt-titre{font-size:17px;font-weight:700;line-height:1.1;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;}
  .evt-meta{font-size:13px;font-weight:500;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .evt-lieu{font-size:13px;font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;}
  .evt-lieu .ico{width:14px;height:14px;}
  .vide{text-align:center;font-weight:700;padding:30px 16px;}

  /* ---------- Dispos ---------- */
  .rang{display:flex;align-items:center;gap:10px;width:100%;padding:12px 12px;text-align:left;color:var(--encre);}
  .date-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;flex:0 0 auto;}
  .date-box .grand{font-size:22px;font-weight:700;line-height:.95;letter-spacing:-.04em;}
  .avatars{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:0;}
  @media (min-width:420px){ .avatars{gap:14px;} .rang{gap:12px;padding:12px 14px;} }
  .marq-wrap{position:relative;display:inline-flex;flex:0 0 auto;}
  .marq{position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:50%;border:2px solid var(--encre);display:grid;place-items:center;}
  .marq::before{content:'';width:9px;height:9px;background:var(--encre);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
  .marq.plein{background:var(--vert);--i:var(--i-coche);}
  .marq.creux{background:var(--rouge);--i:var(--i-croix);}
  .marq-wrap.non .avatar{border-color:var(--rouge);border-width:3px;box-shadow:inset 0 0 0 2px var(--blanc);}
  .chevron{transition:transform var(--dur) var(--ease);}
  .is-open .chevron{transform:rotate(180deg);}
  .detail{padding:2px 14px 14px;display:flex;flex-direction:column;gap:8px;border-top:var(--trait-fin) dashed var(--encre);margin:0 14px;padding-top:12px;}
  .detail-ligne{display:flex;align-items:center;gap:10px;}
  .ilot.is-today .date-box .grand{background:var(--encre);color:var(--jaune);border-radius:50%;min-width:30px;height:30px;display:grid;place-items:center;padding:0 5px;}

  /* ---------- Mes dispos ---------- */
  .regle{display:flex;align-items:center;gap:12px;padding:12px 14px;}
  .regle-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:var(--trait-fin) solid var(--encre);background:var(--blanc);flex:0 0 auto;}
  .agenda-rang{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;text-align:left;color:var(--encre);border-radius:22px 20px 24px 20px / 20px 24px 20px 22px;}
  .agenda-rang .date-box{width:40px;}
  .agenda-rang .date-box .grand{font-size:19px;}

  /* ---------- barre d'onglets ---------- */
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:35;display:flex;justify-content:center;padding:0 16px calc(14px + env(safe-area-inset-bottom));pointer-events:none;}
  .nav-capsule{pointer-events:auto;display:flex;gap:4px;background:var(--blanc);border:var(--trait) solid var(--encre);border-radius:999px;padding:6px;}
  .nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:88px;padding:8px 14px;border-radius:999px;font-size:11px;font-weight:700;color:var(--encre);border:var(--trait-fin) solid transparent;
    transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
  .nav-btn:active{transform:scale(.95);}
  .nav-btn.is-on{background:var(--jaune);border-color:var(--encre);}
  .fab{position:fixed;z-index:36;right:max(18px,calc(50% - 282px));bottom:calc(92px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:var(--encre);color:var(--blanc);display:grid;place-items:center;border:var(--trait) solid var(--encre);
    transition:transform var(--dur) var(--ease);}
  .fab .ico{background:var(--blanc);}
  .fab:hover{transform:translateY(-2px);}
  .fab:active{transform:scale(.92);}

  /* ---------- feuilles (modales) ---------- */
  .voile{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.55);display:flex;align-items:flex-end;justify-content:center;animation:paraitre .2s;}
  .feuille{background:var(--blanc);border:var(--trait) solid var(--encre);border-bottom:none;border-radius:46px 34px 0 0 / 40px 50px 0 0;padding:26px 20px calc(28px + env(safe-area-inset-bottom));width:100%;max-width:600px;margin:0 auto;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
    animation:monter var(--dur) var(--ease);}
  .feuille-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;}
  .ligne-info{display:flex;gap:10px;align-items:center;font-weight:700;}
  .ligne-info.debut{align-items:flex-start;font-weight:500;line-height:1.4;}
  .menu-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);font-weight:700;font-size:15px;margin-bottom:9px;
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);}
  .menu-btn:hover{background:var(--jaune);}
  .menu-btn:active{transform:scale(.98);}

  /* ---------- formulaires ---------- */
  .label{display:block;font-size:12.5px;font-weight:700;margin:16px 0 7px;}
  .champ{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:12px 14px;border:var(--trait-fin) solid var(--encre);border-radius:18px;font-size:16px;font-weight:500;background:var(--blanc);min-height:48px;text-align:left;
    -webkit-appearance:none;appearance:none;transition:box-shadow var(--dur) var(--ease);}
  .champ:focus{box-shadow:0 0 0 4px var(--jaune);outline:none;}
  textarea.champ{min-height:74px;resize:vertical;font-size:15px;}
  .champ-emoji{width:52px;text-align:center;padding:9px 0;font-size:18px;}
  .deux{display:flex;gap:10px;} .deux > div{flex:1;min-width:0;}
  .puces{display:flex;gap:7px;flex-wrap:wrap;}
  .puce{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:999px;font-weight:700;font-size:13.5px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);color:var(--encre);
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);}
  .puce:active{transform:scale(.95);}
  .puce.is-on{background:var(--encre);color:var(--blanc);}
  .puce-oui.is-on{background:var(--vert);color:var(--encre);}
  .puce-non.is-on{background:var(--rouge);color:var(--encre);}
  .puce-sm{min-width:40px;padding:9px 6px;justify-content:center;font-size:13px;}
  .btns{display:flex;gap:10px;margin-top:18px;}
  .btn{flex:1;min-height:52px;padding:0 18px;border-radius:999px;border:var(--trait) solid var(--encre);font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--encre);
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);}
  .btn:active{transform:scale(.97);}
  .btn-primaire{position:relative;background:var(--jaune);padding-left:56px;padding-right:56px;}
  .btn-primaire .pastille{position:absolute;top:50%;left:calc(100% - 44px);transform:translateY(-50%);transition:left var(--dur) var(--ease);}
  .btn-primaire:active .pastille,.btn-primaire.is-live .pastille{left:6px;}
  .btn-second{background:var(--blanc);}
  .btn-ghost{background:transparent;}
  .btn-icone{flex:0 0 auto;width:52px;padding:0;background:var(--blanc);}
  .btn-icone.danger .ico{background:var(--rouge);}
  .btn-large{width:100%;margin-top:12px;}
  .bande-essai{margin-top:10px;min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--eau);font-weight:700;font-size:13.5px;text-align:center;}
  .bande-essai.niv-3{background:var(--vert);} .bande-essai.niv-2{background:var(--jaune);} .bande-essai.niv-1{background:var(--rouge);} .bande-essai.niv-0{background:var(--eau);}
  .sugg{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);color:var(--encre);text-align:left;
    transition:background var(--dur) var(--ease);}
  .sugg.is-on{background:var(--jaune);}
  .piste{flex:1;height:12px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--eau);overflow:hidden;}
  .piste-terre{height:100%;width:100%;background:var(--vert);border-radius:999px;transform-origin:left center;transition:transform var(--dur) var(--ease);}
  .sugg-btn{margin-top:8px;width:100%;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:var(--trait-fin) dashed var(--encre);background:var(--blanc);font-weight:700;font-size:13.5px;}
  .lieu-sugg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 14px;border-radius:20px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);text-align:left;color:var(--encre);}
  .lieu-sugg:hover{background:var(--jaune);}
  .resume{margin-top:16px;padding:13px 15px;border-radius:22px;border:var(--trait-fin) dashed var(--encre);font-weight:500;font-size:13.5px;line-height:1.4;display:flex;gap:10px;align-items:flex-start;}
  .avertir{margin-top:8px;display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700;padding:9px 12px;border-radius:999px;background:var(--jaune);border:var(--trait-fin) solid var(--encre);}
  .option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;border-radius:999px;border:var(--trait) solid var(--encre);background:var(--blanc);font-weight:700;font-size:15px;color:var(--encre);
    transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
  .option:active{transform:scale(.98);}
  .option.is-on{background:var(--vert);}
  .option.is-on.is-none{background:var(--rouge);}
  .option-gauche{display:flex;align-items:center;gap:10px;}
  .option .goutte{width:18px;height:18px;}
  .membre-fiche{padding:13px;}
  .membre-fiche .ligne{display:flex;align-items:center;gap:10px;}
  .membre-fiche .ligne + .ligne{margin-top:10px;flex-wrap:wrap;gap:6px;}
  .nuance{width:26px;height:26px;border-radius:50%;border:var(--trait-fin) solid var(--encre);transition:transform var(--dur) var(--ease);}
  .nuance.is-on{outline:3px solid var(--encre);outline-offset:2px;}
  .nuance:active{transform:scale(.9);}
  .role{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);font-weight:700;font-size:12px;}
  .role.is-admin{background:var(--jaune);}

  /* ---------- accueil & chargement ---------- */
  .accueil{position:relative;min-height:100vh;overflow:clip;display:flex;flex-direction:column;}
  .accueil-terre{position:relative;z-index:0;padding:56px 24px 34px;text-align:center;}
  .accueil-terre .fond{--terre:var(--jaune);top:-400px;bottom:-120px;}
  .accueil-terre .b1{top:0;left:calc(100vw - 40vw);right:calc(100vw - 55vw);bottom:110px;border-radius:0 0 40% 60% / 0 0 90px 220px;}
  .accueil-terre .b2{left:calc(100vw - 30vw);width:96vw;height:200px;bottom:52px;border-radius:50% 50% 46% 54% / 60% 60% 40% 40%;}
  .accueil-terre .b3{left:calc(100vw + 46vw);width:70vw;height:140px;bottom:98px;border-radius:50%;}
  @media (min-width:700px){
    .accueil-terre .fond{top:-500px;}
    .accueil-terre .b1{left:calc(100vw - 10px);right:calc(100vw - 10px);border-radius:0 0 44% 56% / 0 0 140px 260px;}
    .accueil-terre .b2{left:calc(100vw + 14vw);width:48vw;height:200px;bottom:30px;}
    .accueil-terre .b3{left:calc(100vw + 52vw);width:38vw;height:160px;bottom:100px;}
  }
  .accueil-marque{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
  .accueil-marque .oiseau{width:96px;height:126px;}
  .accueil-liste{display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px;margin:78px auto 0;padding:0 20px;position:relative;z-index:1;}
  /* Les membres sont des îlots de leur couleur, de largeurs et de positions variées, comme des territoires sur le plan. */
  .membre-choix{display:flex;align-items:center;gap:14px;width:86%;padding:12px 12px 12px 14px;text-align:left;color:var(--encre);transition:transform var(--dur) var(--ease);}
  .membre-choix:nth-child(1){width:92%;border-radius:34px 26px 30px 22px / 26px 32px 22px 30px;}
  .membre-choix:nth-child(2){margin-left:auto;width:84%;border-radius:22px 34px 24px 32px / 30px 24px 34px 22px;}
  .membre-choix:nth-child(3){width:88%;margin-left:6%;border-radius:30px 22px 34px 26px / 22px 30px 26px 34px;}
  .membre-choix:nth-child(4){margin-left:auto;width:90%;border-radius:26px 30px 22px 34px / 34px 22px 30px 26px;}
  .membre-choix:nth-child(5){width:82%;margin-left:3%;border-radius:32px 24px 28px 30px / 24px 34px 22px 28px;}
  .membre-choix:hover{transform:translateY(-2px);}
  .membre-choix:active{transform:scale(.98);}
  .membre-nom{font-weight:700;font-size:20px;letter-spacing:-.03em;flex:1;}
  .etiquette{font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:var(--trait-fin) solid var(--encre);background:var(--blanc);color:var(--encre);}
  .accueil-note{margin:26px auto 0;padding:0 24px 150px;font-size:12.5px;font-weight:700;text-align:center;max-width:340px;position:relative;z-index:1;}
  .accueil-rose{position:absolute;z-index:0;right:-130px;bottom:-170px;width:320px;height:300px;background:var(--rose);border:var(--trait) solid var(--encre);border-radius:52% 48% 44% 56% / 60% 50% 50% 40%;pointer-events:none;}
  .accueil-eau{position:absolute;z-index:0;left:-110px;bottom:-70px;width:240px;height:170px;background:var(--blanc);border:var(--trait) solid var(--encre);border-radius:48% 52% 56% 44% / 44% 56% 44% 56%;pointer-events:none;}
  .accueil .etoile{z-index:0;}
  .chargement{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important;}
  }