/* Les polices sont embarquees : sans cela la page est belle la ou elles
   sont installees, et en police systeme partout ailleurs. */
@font-face{font-family:'Bricolage Grotesque';src:url('/polices/bricolage-grotesque.woff2') format('woff2');font-weight:200 800;font-display:swap;}
@font-face{font-family:'Instrument Sans';src:url('/polices/instrument-sans.woff2') format('woff2');font-weight:400 700;font-display:swap;}

:root{
    --ink:#22304A; --volet:#3E5C8A; --volet-d:#2C4468; --jaune:#F0B429;
    --vert:#4A7C59; --rouge:#D64530; --brique:#C0532F; --violet:#7A5C9E;
    --cyan:#22B8CF; --gris:#5A6478; --muted:#9AA1AD; --bg:#F5F6F8;
    --t-bl:#E9EDF4; --t-ro:#F7E9E3; --t-ve:#E8F0EA; --t-vi:#EFE9F5; --t-ja:#FAF0D8;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;}
  img{max-width:100%;display:block;}
  a{color:var(--volet);}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
  h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.015em;line-height:1.15;}

  /* --- barre --- */
  header{position:sticky;top:0;z-index:20;background:rgba(245,246,248,.92);backdrop-filter:blur(8px);border-bottom:1px solid #E4E6EA;}
  .bar{display:flex;align-items:center;gap:14px;padding:13px 0;}
  .logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
  .logo i{font-style:normal;color:var(--cyan);}
  .bar .nav{margin-left:auto;display:flex;align-items:center;gap:18px;}
  .bar .nav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--gris);}
  .bar .nav a:hover{color:var(--ink);}
  .bar .nav a.btn, .bar .nav a.btn:hover{color:#fff;}
  .btn{display:inline-block;border:none;border-radius:99px;font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:700;padding:13px 24px;background:var(--volet);color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(62,92,138,.35);cursor:pointer;transition:transform .15s ease;}
  .btn:hover{transform:translateY(-1px);}
  .btn.acc{background:var(--brique);box-shadow:0 4px 14px rgba(192,83,47,.35);}
  .btn.ghost{background:#fff;color:var(--volet);box-shadow:0 1px 4px rgba(34,48,74,.14);}
  .btn.sm{font-size:14px;padding:10px 18px;}
  @media(max-width:720px){.bar .nav a{display:none;} .bar .nav .btn{display:inline-block;}}

  /* --- hero --- */
  .hero{padding:60px 0 20px;}
  .hero .in{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
  .pill{display:inline-flex;align-items:center;gap:8px;background:var(--jaune);color:#5C420B;font-size:13px;font-weight:700;border-radius:99px;padding:7px 16px;box-shadow:0 3px 10px rgba(240,180,41,.4);}
  h1{font-weight:800;font-size:clamp(34px,5vw,52px);margin:18px 0 0;}
  h1 .hl{color:var(--volet);}
  .lead{font-size:clamp(16px,2vw,18px);color:var(--gris);margin-top:16px;max-width:34em;}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
  .under{font-size:13.5px;color:var(--muted);margin-top:14px;}
  .heroimg{position:relative;}
  .heroimg img{margin:0 auto;max-height:520px;width:auto;filter:drop-shadow(0 20px 40px rgba(34,48,74,.22));}
  @media(max-width:860px){.hero .in{grid-template-columns:1fr;gap:26px;} .heroimg img{max-height:420px;}}

  /* --- sections --- */
  section{padding:56px 0;}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  h2{font-weight:700;font-size:clamp(25px,3.4vw,34px);margin-top:8px;}
  .sub{color:var(--gris);margin-top:10px;max-width:46em;font-size:16px;}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px;}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
  @media(max-width:860px){.grid3,.grid4{grid-template-columns:1fr 1fr;} .grid2{grid-template-columns:1fr;}}
  @media(max-width:560px){.grid3,.grid4{grid-template-columns:1fr;}}

  .card{background:#fff;border-radius:18px;padding:22px 22px;box-shadow:0 1px 3px rgba(34,48,74,.08);}
  .card h3{font-weight:700;font-size:18px;margin-bottom:7px;}
  .card p{font-size:14.5px;color:var(--gris);}
  .num{width:30px;height:30px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;margin-bottom:13px;}

  .pain{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 1px 3px rgba(34,48,74,.07);display:flex;gap:13px;align-items:flex-start;}
  .pain .e{font-size:22px;flex-shrink:0;line-height:1.2;}
  .pain b{display:block;font-size:15px;}
  .pain span{font-size:14px;color:var(--gris);}

  .feat{border-radius:18px;padding:20px;}
  .f-ro{background:var(--t-ro);} .f-ve{background:var(--t-ve);} .f-vi{background:var(--t-vi);} .f-bl{background:var(--t-bl);} .f-ja{background:var(--t-ja);} .f-wh{background:#fff;box-shadow:0 1px 3px rgba(34,48,74,.08);}
  .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:99px;padding:4px 11px;margin-bottom:11px;}
  .t-r{background:var(--rouge);} .t-v{background:var(--vert);} .t-p{background:var(--violet);} .t-b{background:var(--volet);} .t-k{background:var(--ink);} .t-j{background:var(--jaune);color:#5C420B;}
  .feat h3{font-weight:700;font-size:17px;margin-bottom:6px;}
  .feat p{font-size:14px;color:#3D4657;}

  /* tri-canal */
  .canaux{background:#fff;border-radius:20px;padding:26px 28px;box-shadow:0 1px 3px rgba(34,48,74,.08);display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:26px;align-items:center;margin-top:30px;}
  .canaux .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;line-height:1.25;}
  .canaux .t span{color:#1A97AB;}
  .chan{display:flex;gap:12px;align-items:flex-start;}
  .chan .ic{width:38px;height:38px;border-radius:50%;background:var(--t-bl);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
  .chan b{display:block;font-size:15px;}
  .chan span{font-size:13.5px;color:var(--gris);}
  @media(max-width:860px){.canaux{grid-template-columns:1fr;gap:18px;}}

  .shot{border-radius:18px;overflow:hidden;box-shadow:0 10px 34px rgba(34,48,74,.16);margin-top:28px;background:#fff;}
  .cap{font-size:13.5px;color:var(--muted);text-align:center;margin-top:12px;}

  /* pilotes */
  .pilote{background:var(--ink);border-radius:24px;padding:38px 40px;color:#fff;}
  .pilote h2{color:#fff;}
  .pilote h2 span{color:var(--jaune);}
  .pilote p{color:#C9D2E2;margin-top:12px;max-width:44em;font-size:16px;}
  .plist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
  .pit{background:rgba(255,255,255,.07);border-radius:14px;padding:16px 18px;}
  .pit b{display:block;color:var(--jaune);font-size:15px;margin-bottom:4px;}
  .pit span{font-size:14px;color:#C9D2E2;}
  @media(max-width:760px){.pilote{padding:28px 22px;} .plist{grid-template-columns:1fr;}}

  /* formulaire */
  .form{background:#fff;border-radius:24px;padding:34px 36px;box-shadow:0 2px 10px rgba(34,48,74,.09);}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:660px){.form{padding:24px 20px;} .frow{grid-template-columns:1fr;}}
  label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px;}
  label span{color:var(--muted);font-weight:600;}
  .field{width:100%;border:1.5px solid #E4E6EA;border-radius:12px;background:#fff;font-family:inherit;font-size:15.5px;padding:12px 14px;color:var(--ink);}
  .field:focus{outline:none;border-color:var(--volet);box-shadow:0 0 0 3px rgba(62,92,138,.14);}
  textarea.field{min-height:96px;resize:vertical;}
  .rgpd{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5;}
  .or{text-align:center;font-size:14px;color:var(--gris);margin-top:18px;}
  .or a{font-weight:700;}

  footer{border-top:1px solid #E4E6EA;margin-top:20px;padding:28px 0 40px;}
  .fin{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted);}
  .fin .logo{font-size:19px;}
  .fin .sp{margin-left:auto;}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* --- classes issues des anciens attributs style="" (CSP sans unsafe-inline) --- */
.c-pale{color:#9FB3D4;}
.btn-jaune{background:var(--jaune);color:#3A2B05;box-shadow:0 4px 14px rgba(240,180,41,.4);}
.mt22{margin-top:22px;}
.mt26{margin-top:26px;}
.piege{position:absolute;left:-9999px;}
.flinks{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;}
.flinks a{color:#5A6478;text-decoration:none;font-weight:600;}
.flinks a:hover{color:var(--ink);text-decoration:underline;}


/* --- lien vers l'espace association -------------------------------- */
/* Reste visible sur mobile, contrairement aux ancres de navigation :
   c'est une porte d'entrée, pas un repère de lecture. */
.bar .nav a.gestion{font-weight:700;color:var(--volet);}
.bar .nav a.gestion:hover{color:var(--volet-d);text-decoration:underline;}
@media(max-width:720px){
  .bar .nav a.gestion{display:inline-block;font-size:13.5px;}
}
@media(max-width:430px){
  .bar .nav a.gestion{display:none;}   /* trop serré : le pied de page prend le relais */
}


/* === Nouveaux blocs : les inserer AVANT le marqueur de fin, jamais ici. === */

/* --- seconde rangee de la vitrine --- */
.vau{display:flex;align-items:center;gap:10px;margin-top:12px;}
.vau .pl{width:30px;height:30px;border-radius:50%;background:var(--volet);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.vau .pl svg{width:12px;height:12px;margin-left:2px;}
.vau .wv{flex:1;display:flex;align-items:center;gap:2px;height:24px;}
.vau .wv i{flex:1;background:#BFCADB;border-radius:99px;display:block;}
.vau s{text-decoration:none;font-size:11.5px;color:var(--muted);flex-shrink:0;}
.vres{margin-top:11px;display:grid;gap:10px;}
.vres div{font-size:12px;color:#3D4657;}
.vres .b{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.75);margin-top:5px;margin-bottom:2px;overflow:hidden;}
.vres .b i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.vag{margin-top:11px;display:grid;gap:9px;}
.vag div{display:flex;gap:9px;align-items:baseline;font-size:12.5px;color:#3D4657;}
.vag u{text-decoration:none;font-weight:800;color:var(--ink);flex-shrink:0;font-size:12px;}
.vcards2{margin-top:14px;}


.cintro{font-size:15px;color:var(--gris);line-height:1.5;margin-bottom:22px;}
.cintro b{color:var(--ink);font-weight:700;}

.bar .nav{margin-left:auto;display:flex;align-items:center;gap:16px;}
.bar .nav a{white-space:nowrap;}

/* Les badges des boutiques passent dans la barre du haut, plus petits :
   ils suivent le lecteur au lieu de n'exister qu'en tete de page.
   Masques sous 1080 px, ou la barre n a plus la place. */
.stores.sm{margin-top:0;gap:7px;flex-wrap:nowrap;display:flex;}
.stores.sm .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.stores.sm .store b{font-size:11.5px;}
.stores.sm .mk svg{width:15px;height:15px;}
.stores.sm .mk.pl svg{width:14px;height:14px;}
@media(max-width:1120px){.stores.sm{display:none;}}

/* --- respiration entre les sections --- */
section.wrap{padding:25px 22px;}
section.wrap + section.wrap{border-top:1px solid #E7EAEF;}
/* Une suite n'est pas une nouvelle section : ni filet, ni retrait haut. */
section.wrap.suite{padding-top:0;}
section.wrap + section.wrap.suite{border-top:none;}
.sub{margin-top:12px;}
.grid3,.grid4,.grid2{margin-top:36px;}
.canaux,.cerc,.prix,.vitr,.bilan,.doc{margin-top:36px;}
.hero{padding:64px 0 76px;}
footer{margin-top:0;padding:34px 0 46px;}

/* Les sous-titres ne sont pas des paragraphes : ils tiennent sur une ligne. */
.sub{max-width:none;}

/* --- l'ecran de publication, a la place du schema des cercles --- */
.pub{background:var(--bg);border-radius:16px;padding:16px;}
.pub .lab{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.pub .champ{background:#fff;border:1.5px solid #E4E6EA;border-radius:11px;padding:11px 13px;margin-top:7px;
  font-size:15px;font-weight:600;color:var(--ink);}
.pub .champ s{display:block;text-decoration:none;font-weight:400;font-size:13px;color:var(--gris);margin-top:3px;}
.trio{display:grid;gap:8px;margin-top:8px;}
.tq{background:#fff;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:0 0 0 1.5px #E4E6EA inset;}
.tq i{display:flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.tq i svg{width:15px;height:15px;}
.tq b{flex:1;font-size:14px;line-height:1.2;}
.tq s{text-decoration:none;font-size:13px;color:var(--muted);}
.tq .ck{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.tq .ck svg{width:11px;height:11px;}
.tq.on .ck{display:flex;}
.tq.on{box-shadow:0 0 0 2.5px var(--ink) inset;background:#fff;}
.tq.on s{color:var(--ink);font-weight:700;}
.tq.g i{background:var(--volet);} .tq.a i{background:var(--ink);} .tq.b i{background:#0D1524;}
.pubn{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:13px;color:var(--gris);}
.pubn u{width:7px;height:7px;border-radius:50%;background:var(--vert);flex-shrink:0;text-decoration:none;}
.pubb{margin-top:12px;background:var(--brique);color:#fff;border-radius:99px;padding:13px 20px;text-align:center;
  font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(192,83,47,.32);}
.pubw{font-size:12.5px;color:var(--gris);margin-top:11px;padding-left:2px;}
.pubw b{color:var(--ink);}

/* --- les trois cercles --- */
.cerc{background:#fff;border-radius:20px;padding:26px 28px;box-shadow:0 1px 3px rgba(34,48,74,.08);margin-top:30px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start;}
.c1{background:var(--t-bl);border-radius:17px;padding:16px;}
.c2{background:var(--ink);border-radius:14px;padding:15px;margin-top:13px;}
.c3{background:#0D1524;border-radius:11px;padding:13px;margin-top:12px;}
.ct{display:flex;align-items:center;gap:8px;}
.ct em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;}
.c1 .ct em{background:var(--volet);color:#fff;}
.c2 .ct em{background:#fff;color:var(--ink);}
.c3 .ct em{background:var(--jaune);color:#5C420B;}
.ct s{margin-left:auto;text-decoration:none;font-size:12px;font-weight:700;}
.c1 .ct s{color:var(--volet);}
.c2 .ct s,.c3 .ct s{color:rgba(255,255,255,.72);}
.cx{font-size:13.5px;margin-top:8px;line-height:1.35;}
.c1 .cx{color:var(--ink);}
.c2 .cx,.c3 .cx{color:#D5DCE8;}
.cx b{font-weight:700;}
.c2 .cx b,.c3 .cx b{color:#fff;}
.cnote{font-size:13px;color:var(--gris);margin-top:14px;}
.cli{display:grid;gap:14px;}
.cli div{display:flex;gap:11px;align-items:flex-start;}
.cli u{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;text-decoration:none;}
.cli > div > span > b{display:block;font-size:14.5px;}
.cli span span b{display:inline;font-size:inherit;font-weight:700;color:var(--ink);}
.cli span{display:block;font-size:13px;color:var(--gris);line-height:1.45;margin-top:1px;}
@media(max-width:860px){.cerc{grid-template-columns:1fr;gap:24px;padding:22px 18px;}}

/* --- la vitrine, dessinee --- */
.vitr{background:#E6E9EF;padding:12px;border-radius:16px;box-shadow:0 10px 34px rgba(34,48,74,.16);margin-top:28px;}
.vbar{display:flex;align-items:center;gap:6px;padding:0 4px 10px;}
.vbar u{width:9px;height:9px;border-radius:50%;background:#C9CFD9;display:inline-block;}
.vbar i{flex:1;max-width:280px;height:20px;border-radius:99px;background:#fff;font-style:normal;font-size:11px;
  color:var(--gris);display:flex;align-items:center;padding:0 12px;margin-left:6px;}
.vpage{background:#F5F6F8;border-radius:10px;padding:16px;}
.vhead{background:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vhead .av3{width:40px;height:40px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;flex-shrink:0;}
.vhead .id{flex:1;min-width:0;}
.vhead .id b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.15;}
.vhead .id span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.vhead .b1,.vhead .b2{font-size:13px;font-weight:700;border-radius:99px;padding:9px 16px;white-space:nowrap;}
.vhead .b1{background:var(--volet);color:#fff;}
.vhead .b2{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.vtit{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;margin-top:18px;letter-spacing:-.015em;}
.vsub{font-size:13px;color:var(--gris);margin-top:3px;}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.vc{border-radius:14px;padding:14px;}
.vc .l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;}
.vc .l u{width:22px;height:22px;border-radius:50%;background:var(--volet);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.vc .l s{margin-left:auto;text-decoration:none;font-weight:500;font-size:11.5px;color:var(--muted);}
.vc em{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 9px;margin-top:10px;}
.vc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;margin-top:8px;line-height:1.2;}
.vc p{font-size:12.5px;color:#3D4657;margin-top:5px;line-height:1.4;}
.vc .bx{display:inline-block;margin-top:11px;background:#fff;border-radius:99px;padding:8px 14px;font-size:12.5px;
  font-weight:700;color:var(--volet);}
@media(max-width:760px){.vcards{grid-template-columns:1fr;}.vtit{font-size:21px;}}

/* --- quatre canaux, quatre silhouettes --- */
.canaux .lot{display:grid;grid-template-columns:repeat(3,minmax(0,286px));justify-content:center;gap:30px;align-items:start;}
.mini{height:184px;border-radius:13px;overflow:hidden;position:relative;}

/* 1. L'application : un grand telephone, coupe en bas par un fondu vers le
   blanc -- on devine qu'il continue. Un petit appareil entier ferait jouet. */
.m-app{background:transparent;display:flex;justify-content:center;align-items:flex-start;}
.m-app:after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 55%, #fff 100%);}
.ph{width:158px;height:252px;border-radius:26px;background:#141C2C;padding:6px;box-shadow:0 12px 26px rgba(20,28,44,.30);}
.ph .scr{height:100%;border-radius:21px;background:linear-gradient(168deg,#3E5C8A 0%,#22304A 46%,#141C2C 100%);
  padding:15px 9px 0;display:flex;flex-direction:column;align-items:center;}
.ph .hh{color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:200;font-size:38px;line-height:1;letter-spacing:-.035em;}
.ph .dd{color:rgba(255,255,255,.62);font-size:9px;margin-top:2px;letter-spacing:.02em;}
.ph .nc{margin-top:17px;width:100%;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 9px;
  box-shadow:0 5px 14px rgba(0,0,0,.28);}
.ph .nc em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:6.6px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);}
.ph .nc em u{width:12px;height:12px;border-radius:3.5px;background:var(--volet);color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-family:'Bricolage Grotesque',sans-serif;}
.ph .nc em s{margin-left:auto;text-decoration:none;font-weight:600;}
.ph .nc b{display:block;font-size:10.5px;line-height:1.24;margin-top:4px;}
.ph .nc span{display:block;font-size:8.6px;color:var(--gris);line-height:1.35;margin-top:2px;}
/* 2. Le navigateur : un bureau, une fenetre, une bulle qui apparait. */
.m-nav{background:#DFE3EA;padding:11px;}
.win{background:#fff;border-radius:7px;height:100%;overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.win .cb{height:17px;background:#F1F3F6;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid #E6E9EE;}
.win .cb u{width:5px;height:5px;border-radius:50%;background:#CDD3DC;}
.win .cb i{flex:1;height:9px;border-radius:99px;background:#fff;font-style:normal;font-size:6px;color:var(--muted);
  display:flex;align-items:center;padding:0 5px;margin-left:3px;}
.win .pg{padding:8px;display:grid;gap:5px;}
.win .pg i{height:5px;border-radius:99px;background:#E4E8EE;display:block;}
.bulle{position:absolute;right:8px;bottom:8px;width:calc(100% - 30px);background:#fff;border-radius:8px;
  padding:6px 7px;box-shadow:0 5px 16px rgba(34,48,74,.26);display:flex;gap:5px;align-items:flex-start;}
.bulle u{width:14px;height:14px;border-radius:4px;background:var(--volet);color:#fff;flex-shrink:0;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.bulle span{min-width:0;}
.bulle em{display:block;font-style:normal;font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.bulle b{display:block;font-size:8.5px;line-height:1.2;margin-top:1px;}

/* 3. L'e-mail : une liste plate et dense, pastilles d'expediteur, pas de cadre. */
.m-mail{background:#fff;box-shadow:0 2px 8px rgba(34,48,74,.13);}
.mh{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid #EDEFF3;}
.mh b{font-size:8px;letter-spacing:.03em;}
.mh span{font-size:7px;color:#fff;background:var(--volet);border-radius:99px;padding:1px 5px;font-weight:800;}
.mr{display:flex;gap:6px;padding:7px 9px;border-bottom:1px solid #F3F5F8;align-items:flex-start;line-height:1.25;height:47px;overflow:hidden;}
.mr.lu{height:33px;}
.mr u{width:16px;height:16px;border-radius:50%;flex-shrink:0;text-decoration:none;display:flex;align-items:center;
  justify-content:center;font-size:6.5px;font-weight:800;color:#fff;font-family:'Bricolage Grotesque',sans-serif;}
.mr .t{flex:1;min-width:0;}
.mr .t em{display:block;font-style:normal;font-size:7.5px;font-weight:800;}
.mr .t b{display:block;font-size:8.5px;line-height:1.25;margin-top:1px;}
.mr .t span{display:block;font-size:7px;color:var(--muted);margin-top:1px;}
.mr .h{font-size:6.5px;color:var(--muted);flex-shrink:0;}
.mr.lu u{background:#C9CFD9;}
.mr.lu .t em{font-weight:600;color:var(--muted);}
.mr.lu .t b{font-weight:600;color:var(--muted);}

/* 4. La page web : un onglet, une page, un bandeau aux couleurs de l'asso. */
.m-web{background:#E6E9EF;padding:0 8px 8px;}
.ong{height:15px;display:flex;align-items:flex-end;}
.ong i{background:#fff;border-radius:5px 5px 0 0;height:12px;padding:0 7px;font-style:normal;font-size:6px;
  color:var(--gris);display:flex;align-items:center;font-weight:600;}
.pge{background:#fff;border-radius:0 6px 6px 6px;height:calc(100% - 15px);overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.pge .bd2{background:var(--ink);padding:7px 8px;display:flex;align-items:center;gap:5px;}
.pge .bd2 u{width:15px;height:15px;border-radius:50%;background:var(--cyan);color:var(--ink);text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:6.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pge .bd2 b{color:#fff;font-size:9px;flex:1;}
.pge .bd2 span{font-size:6.5px;background:var(--brique);color:#fff;border-radius:99px;padding:2px 7px;font-weight:800;}
.pge .ct{padding:8px;}
.pge .ct em{display:inline-block;font-style:normal;font-size:6px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--rouge);border-radius:99px;padding:2px 6px;}
.pge .ct b{display:block;font-size:9.5px;line-height:1.25;margin-top:5px;}
.pge .ct span{display:block;font-size:7.5px;color:var(--gris);margin-top:2px;line-height:1.35;}
.pge .ct .sep{height:1px;background:#EDEFF3;margin:7px 0;}
.pge .ct .nx{font-size:7px;color:var(--muted);}

.cnom{margin-top:12px;}
.cnom > b{display:block;font-size:14.5px;}
.cnom > span{display:block;font-size:12.5px;color:var(--gris);margin-top:2px;line-height:1.4;}
.cnom span b{display:inline;font-size:inherit;color:var(--ink);font-weight:700;}
@media(max-width:900px){.canaux .lot{grid-template-columns:1fr 1fr;gap:20px;}}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}


/* --- le telephone de l'accroche, dessine plutot que photographie ---------
   Une capture d'ecran vieillit et ment ; un ecran dessine reste net a toutes
   les tailles, se corrige en une ligne, et pese 4 Ko au lieu de 180. */
.phone{width:292px;margin:0 auto;background:#1A2438;border-radius:46px;padding:11px;
  box-shadow:0 22px 46px rgba(34,48,74,.30), 0 0 0 1.5px #303C55 inset;}
.screen{border-radius:36px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;height:582px;}
.stat{position:relative;height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:#fff;font-size:11.5px;font-weight:700;color:var(--ink);}
.stat .isl{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:74px;height:20px;border-radius:99px;background:#1A2438;}
.stat .sg{display:flex;gap:4px;align-items:flex-end;}
.stat .sg i{display:inline-block;width:3px;border-radius:1px;background:var(--ink);}
.appbar{background:#fff;padding:9px 13px 11px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #EDEFF3;}
.av{width:34px;height:34px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;flex-shrink:0;}
.appbar .nm{flex:1;min-width:0;}
.appbar .nm b{display:block;font-size:14px;line-height:1.2;}
.appbar .nm span{display:block;font-size:10.5px;color:var(--muted);}
.appbar .cl{width:26px;height:26px;border-radius:50%;background:var(--t-bl);color:var(--volet);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appbar .cl svg{width:14px;height:14px;}
.feed{position:relative;flex:1;padding:10px;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
.feed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;pointer-events:none;background:linear-gradient(to bottom, rgba(245,246,248,0), var(--bg));}
.ac{background:#fff;border-radius:15px;padding:11px 12px;box-shadow:0 1px 2px rgba(34,48,74,.09);}
.ac .tg{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 8px;margin-bottom:7px;}
.ac h5{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;line-height:1.25;}
.ac p{font-size:11.5px;color:var(--gris);margin-top:4px;line-height:1.4;}
.ac .mt{font-size:10px;color:var(--muted);margin-top:7px;}
.ac .bt{display:flex;gap:7px;margin-top:9px;}
.ac .bt span{font-size:11px;font-weight:700;border-radius:99px;padding:6px 12px;}
.ac .bt .ou{background:var(--vert);color:#fff;}
.ac .bt .no{background:#fff;color:var(--gris);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.ac .op{margin-top:8px;display:grid;gap:6px;}
.ac .op div{font-size:10.5px;color:var(--gris);}
.ac .op .ba{height:6px;border-radius:99px;background:#EDEFF3;margin-top:3px;overflow:hidden;}
.ac .op .ba i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.tabs{background:#fff;border-top:1px solid #EDEFF3;height:54px;display:flex;align-items:center;justify-content:space-around;padding-bottom:4px;}
.tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted);font-weight:600;}
.tb svg{width:19px;height:19px;}
.tb.on{color:var(--volet);}
@media(max-width:860px){.phone{width:270px;}.screen{height:540px;}}

/* --- l'exemple de bilan annuel --- */
.doc{padding:30px 34px 26px;text-align:left;}
.dtop{border-bottom:2px solid var(--ink);padding-bottom:12px;}
.dtop b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.dtop .per{font-size:13px;color:var(--gris);margin-top:3px;}
.dstats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 24px;}
.st{background:var(--bg);border-radius:14px;padding:14px 16px;}
.st b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;line-height:1.1;color:var(--ink);}
.st span{display:block;font-size:12.5px;color:var(--gris);margin-top:3px;}
.st i{display:block;font-style:normal;font-size:12px;color:#2F6BB5;font-weight:700;margin-top:2px;}
.dgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;}
.dbloc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:10px;}
.dbloc h4.mt{margin-top:22px;}
.dbloc svg{width:100%;height:auto;overflow:visible;}
.dbloc .ax{font-size:10px;fill:var(--muted);font-family:'Instrument Sans',sans-serif;}
.dbloc .vl{font-size:11px;font-weight:700;fill:var(--ink);font-family:'Instrument Sans',sans-serif;}
.dleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);}
.lg i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.lg b{color:var(--ink);}
.dsec{width:100%;border-collapse:collapse;font-size:13px;}
.dsec td{padding:6px 4px;border-top:1px solid #EDEFF3;color:var(--gris);}
.dsec td.r{text-align:right;color:var(--ink);font-weight:700;}
.dtop5{margin-top:24px;}
.dtop5 ol{margin:0;padding-left:20px;}
.dtop5 li{font-size:13px;color:var(--gris);padding:6px 0;border-top:1px solid #EDEFF3;display:flex;justify-content:space-between;gap:16px;}
.dtop5 li b{color:var(--ink);}
.dpied{margin-top:20px;padding-top:12px;border-top:1px solid #EDEFF3;font-size:11.5px;color:var(--muted);}
@media(max-width:980px){.dstats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){.dstats{grid-template-columns:1fr 1fr;}.dgrid{grid-template-columns:1fr;}.doc{padding:22px 18px;}}

/* --- ajouts de la version de lancement --- */
/* Le gabarit d'origine (auto 1fr 1fr 1fr) avait ete dessine pour un titre et
   TROIS canaux. Avec quatre, le dernier retombait seul a la ligne et les
   colonnes s'etranglaient. Titre au-dessus, quatre colonnes egales dessous. */
.canaux{display:block;padding:28px 30px 30px;}
.canaux .t{font-size:20px;line-height:1.3;padding-bottom:20px;border-bottom:1px solid #EDEFF3;margin-bottom:24px;}
.chan .ic{color:var(--volet);}
.chan .ic svg{width:19px;height:19px;display:block;}
.chan b{margin-bottom:2px;}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}
/* Pictogrammes dessines plutot qu'emojis : un emoji depend de la police du
   systeme, il change d'un appareil a l'autre, il est colore la ou tout le
   reste est sobre, et sur certains postes il tombe en carre vide. */
.pain .e{font-size:0;line-height:0;color:var(--volet);margin-top:2px;}
.pain .e svg{width:21px;height:21px;display:block;}

.prix{background:#fff;border-radius:24px;padding:32px 34px;box-shadow:0 2px 10px rgba(34,48,74,.09);margin-top:30px;}
.ptab{width:100%;border-collapse:collapse;margin-top:6px;}
.ptab th{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 10px;}
.ptab th.r,.ptab td.r{text-align:right;}
.ptab td{padding:13px 10px;border-top:1px solid #EDEFF3;font-size:16px;}
.ptab tr.gr td{background:var(--t-ve);font-weight:700;}
.ptab tr.gr td:first-child{border-radius:12px 0 0 12px;}
.ptab tr.gr td:last-child{border-radius:0 12px 12px 0;}
.ptab .px{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;}
.ptab .dev{color:var(--gris);font-size:15px;}
.pnote{font-size:13.5px;color:var(--gris);margin-top:16px;}
.pnote b{color:var(--ink);}
.bilan{background:var(--ink);border-radius:24px;padding:38px 40px;color:#fff;margin-top:30px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;}
.bilan h2{color:#fff;margin-top:6px;}
.bilan h2 span{color:var(--jaune);}
.bilan p{color:#C9D2E2;margin-top:12px;font-size:16px;}
.blist{display:grid;gap:10px;}
.bit{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;font-size:14px;color:#C9D2E2;}
.bit b{display:block;color:#fff;font-size:15px;margin-bottom:3px;}
@media(max-width:860px){.bilan{grid-template-columns:1fr;padding:28px 22px;}}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;padding:9px 16px;font-size:13px;line-height:1.2;text-decoration:none;}
.store b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.store .mk{flex-shrink:0;color:#fff;line-height:0;}
.store .mk svg{width:22px;height:22px;display:block;}
.store .mk.pl svg{width:20px;height:20px;}






/* Egalisation, par la mesure : le bloc du bilan portait 36 px de marge
   haute en plus du retrait de section, et la suite du bilan n'avait aucun
   retrait haut. Les deux ecarts rejoignent les 159 px des autres. */
.bilan{margin-top:6px;}
section.wrap.suite{padding-top:0px;margin-top:-4px;}

/* --- l'agenda de la vitrine : une vue, pas une annonce --- */
.vag2{background:#fff;border-radius:14px;padding:18px 20px;margin-top:14px;box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vag2 .tt{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid #EDEFF3;}
.vag2 .tt b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.vag2 .tt s{text-decoration:none;font-size:12.5px;color:var(--muted);}
.vag2 .tt em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--volet);}
.ag{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #F3F5F8;}
.ag:last-child{border-bottom:none;padding-bottom:0;}
.ag .dt{width:46px;flex-shrink:0;text-align:center;background:#E30613;border-radius:9px;padding:6px 0;}
/* #E30613 = C0 M100 J100 N0 converti en offset europeen (FOGRA39). La
   conversion naive donnerait #FF0000, dont le blanc pose dessus ne
   ressort qu'a 4,00 contre 1 -- sous le seuil AA. Ici : 4,88. */
.ag .dt b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1;color:#fff;}
.ag .dt s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:2px;}
.ag .tx{flex:1;min-width:0;}
.ag .tx b{display:block;font-size:14px;}
.ag .tx span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.ag .sec{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border-radius:99px;padding:3px 9px;flex-shrink:0;}
.pj{display:flex;align-items:center;gap:9px;margin-top:12px;background:#fff;border-radius:10px;padding:9px 11px;}
.pj u{width:26px;height:26px;border-radius:7px;background:var(--rouge);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pj .tx b{display:block;font-size:12.5px;}
.pj .tx s{display:block;text-decoration:none;font-size:11px;color:var(--muted);}
/* Pastille de section sur les cartes de la vitrine. La charte l'exigeait deja
   -- « elle s'affiche partout : puce de la vitrine, pastille de la liste des
   annonces, ecran d'equipe » -- et elle manquait. La couleur du texte se
   calcule cote serveur : encre #22304A sur les sept teintes claires, blanc sur
   les sept foncees. Ici les trois sections utilisees sont foncees, d'ou le
   blanc ecrit en clair dans la maquette. Un evenement qui concerne toute
   l'association n'a pas de pastille : c'est le cas du vide-greniers et du mot
   du CEO avant l'AG. */
.vc .tt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;}
.vc .tt em{margin-top:0;}
.vc .vsec{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 9px;}
/* Saut de ligne entre les deux phrases de l'introduction des cercles.
   Un <br> ne fait qu'aller a la ligne ; ici il faut de l'air entre les deux,
   d'ou un bloc avec sa propre marge plutot qu'un second <br>. */
.cintro .l2{display:block;margin-top:14px;}
/* Les badges de stores quittent la barre du haut pour le canal
   « L'application ». En tete ils demandaient d'installer une appli a quelqu'un
   qui ne sait pas encore ce qu'est Assodio -- et ils disaient « Assodio est une
   appli », ce que la page passe justement a dementir : trois canaux, dont
   l'application n'est qu'un. Ici ils ne demandent plus rien, ils prouvent.
   Visibles a toutes les largeurs, contrairement a la variante .sm de la barre. */
.canaux .stores.ch{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.canaux .stores.ch .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.canaux .stores.ch .store b{font-size:11.5px;}
.canaux .stores.ch .mk svg{width:15px;height:15px;}
.canaux .stores.ch .mk.pl svg{width:14px;height:14px;}
/* ============ PIED DE PAGE SUR FOND BLEU (choix de Patrick, 08/08) ============
   Le degrade est celui du hero pris a son extremite sombre : la page s'ouvre sur
   le clair (l'ecran du telephone) et se referme sur le fonce. Ce n'est pas un
   effet de style -- sur le haut du degrade d'origine (#3E5C8A) le point cyan du
   logo ne rendait que 2,84 contre 1. Sur #1B2740 il rend 6,26.
   Le point est en var(--cyan) #22B8CF : couleur de marque de la charte, § 1 bis,
   « c'est le point final -- c'est dit, c'est transmis ». Jamais jaune, jamais
   brique : la valeur ne se recopie pas a la main, elle vient de la variable.
   Contrastes mesures sur ce fond : blanc 14,88 - descriptions #C3CCDB 9,20 -
   ligne legale #9AA1AD 6,55. Tous au-dessus du seuil AA. */
footer.bfin{background:linear-gradient(168deg,#1B2740 0%,#151E31 55%,#101725 100%);
  margin-top:0;padding:46px 0 30px;text-align:center;color:#fff;}
footer.bfin .logo{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;
  line-height:1;color:#fff;letter-spacing:-.025em;}
footer.bfin .logo i{color:var(--cyan);font-style:normal;}
footer.bfin .bl{font-size:15px;color:#E9EDF4;margin-top:11px;}
footer.bfin a{text-decoration:none;color:#C3CCDB;}
footer.bfin a:hover{color:#fff;}
/* 3 colonnes : la derniere porte le texte le plus long et retombait sur deux
   lignes quand les deux autres en faisaient une. D'ou le 1,22. */
footer.bfin .args{display:grid;grid-template-columns:1fr 1fr 1.22fr;gap:30px;
  text-align:left;margin-top:28px;padding:24px 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
footer.bfin .a{display:flex;gap:12px;align-items:flex-start;}
footer.bfin .a svg{width:19px;height:19px;color:var(--jaune);flex-shrink:0;margin-top:1px;}
footer.bfin .a b{display:block;font-size:14px;font-weight:700;line-height:1.3;color:#fff;}
footer.bfin .a>span>span{display:block;font-size:12.5px;color:#C3CCDB;margin-top:4px;line-height:1.5;}
footer.bfin .lk{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;}
footer.bfin .id{font-size:11.5px;color:#9AA1AD;line-height:1.7;margin-top:18px;}
@media(max-width:820px){footer.bfin .args{grid-template-columns:1fr;gap:17px;}}
/* Barre du haut : tout etait tasse a droite. Le logo restait seul a gauche,
   puis 300 px de vide, puis les quatre elements colles les uns aux autres.
   On passe a trois zones : logo a gauche, liens CENTRES, bouton a droite.
   Le bouton sort donc du <nav> par le style (margin-left:auto sur lui seul)
   et les liens se centrent dans l'espace restant. */
.bar{display:flex;align-items:center;gap:20px;}
.bar .nav{flex:1;display:flex;align-items:center;justify-content:center;gap:38px;
  margin-left:0;}
.bar .nav a{white-space:nowrap;}
@media(max-width:1000px){.bar .nav{gap:22px;}}

/* Piege a robots du formulaire : hors de l'ecran plutot que display:none,
   qu'une partie des robots sait reconnaitre et ignorer. Et le bouton
   d'envoi est desormais un <button> : il portait la classe .btn en etant
   un <span>, donc il ne soumettait rien. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
button.btn{border:0;font:inherit;cursor:pointer;}

/* Grille tarifaire : on est passe de trois colonnes (abonnes / 1 an / 3 ans)
   a deux (abonnes / par mois). Sur toute la largeur de la carte, deux colonnes
   laissent 400 px de vide au milieu et le prix se retrouve a l'autre bout de
   la page que sa ligne. Borner la seule table cree un vide a droite DANS la
   carte, et la caler a gauche deplace le vide sans le supprimer : c'est la
   CARTE qu'on retrecit, pas la table. La table reprend donc toute sa largeur
   et le prix se retrouve aligne sur le bord droit de la note. Le nombre de
   lignes passe de 6 a 11 : on resserre la hauteur de ligne pour que la carte
   ne devienne pas une colonne. */
.prix{max-width:720px;}
.ptab td{padding:10px 14px;}
.ptab th{padding:0 14px 9px;}
/* === FIN DES SURCHARGES === */

/* --- Les styles qui etaient ecrits dans la page, un par valeur --- */
.i-1{height:5px;}
.i-2{height:7px;}
.i-3{height:9px;}
.i-4{height:11px;}
.i-5{background:var(--rouge);}
.i-6{background:var(--vert);}
.i-7{background:var(--violet);}
.i-8{width:54%;}
.i-9{width:31%;}
.i-10{background:var(--volet);}
.i-11{width:72%;}
.i-12{width:94%;}
.i-13{width:58%;}
.i-14{width:86%;}
.i-15{width:40%;}
.i-16{margin-top:14px;}
.i-17{background:var(--ink);}
.i-18{background:var(--jaune);}
.i-19{background:#00739D;color:#fff;}
.i-20{background:#874197;color:#fff;}
.i-21{height:6px;}
.i-22{height:17px;}
.i-23{height:21px;}
.i-24{height:14px;}
.i-25{height:8px;}
.i-26{height:19px;}
.i-27{height:12px;}
.i-28{height:22px;}
.i-29{height:16px;}
.i-30{height:10px;}
.i-31{height:20px;}
.i-32{height:13px;}
.i-33{height:18px;}
.i-34{height:15px;}
.i-35{background:#4F56B7;color:#fff;}
.i-36{width:64%;}
.i-37{width:27%;}
.i-38{width:9%;}
.i-39{background:#874197;}
.i-40{background:#4F56B7;}
.i-41{background:#2F6BB5;}
.i-42{background:#149DA8;}
.i-43{background:#C0532F;}


/* === Nouveaux blocs : les inserer AVANT le marqueur de fin, jamais ici. === */

/* --- seconde rangee de la vitrine --- */
.vau{display:flex;align-items:center;gap:10px;margin-top:12px;}
.vau .pl{width:30px;height:30px;border-radius:50%;background:var(--volet);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.vau .pl svg{width:12px;height:12px;margin-left:2px;}
.vau .wv{flex:1;display:flex;align-items:center;gap:2px;height:24px;}
.vau .wv i{flex:1;background:#BFCADB;border-radius:99px;display:block;}
.vau s{text-decoration:none;font-size:11.5px;color:var(--muted);flex-shrink:0;}
.vres{margin-top:11px;display:grid;gap:10px;}
.vres div{font-size:12px;color:#3D4657;}
.vres .b{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.75);margin-top:5px;margin-bottom:2px;overflow:hidden;}
.vres .b i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.vag{margin-top:11px;display:grid;gap:9px;}
.vag div{display:flex;gap:9px;align-items:baseline;font-size:12.5px;color:#3D4657;}
.vag u{text-decoration:none;font-weight:800;color:var(--ink);flex-shrink:0;font-size:12px;}
.vcards2{margin-top:14px;}


.cintro{font-size:15px;color:var(--gris);line-height:1.5;margin-bottom:22px;}
.cintro b{color:var(--ink);font-weight:700;}

.bar .nav{margin-left:auto;display:flex;align-items:center;gap:16px;}
.bar .nav a{white-space:nowrap;}

/* Les badges des boutiques passent dans la barre du haut, plus petits :
   ils suivent le lecteur au lieu de n'exister qu'en tete de page.
   Masques sous 1080 px, ou la barre n a plus la place. */
.stores.sm{margin-top:0;gap:7px;flex-wrap:nowrap;display:flex;}
.stores.sm .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.stores.sm .store b{font-size:11.5px;}
.stores.sm .mk svg{width:15px;height:15px;}
.stores.sm .mk.pl svg{width:14px;height:14px;}
@media(max-width:1120px){.stores.sm{display:none;}}

/* --- respiration entre les sections --- */
section.wrap{padding:25px 22px;}
section.wrap + section.wrap{border-top:1px solid #E7EAEF;}
/* Une suite n'est pas une nouvelle section : ni filet, ni retrait haut. */
section.wrap.suite{padding-top:0;}
section.wrap + section.wrap.suite{border-top:none;}
.sub{margin-top:12px;}
.grid3,.grid4,.grid2{margin-top:36px;}
.canaux,.cerc,.prix,.vitr,.bilan,.doc{margin-top:36px;}
.hero{padding:64px 0 76px;}
footer{margin-top:0;padding:34px 0 46px;}

/* Les sous-titres ne sont pas des paragraphes : ils tiennent sur une ligne. */
.sub{max-width:none;}

/* --- l'ecran de publication, a la place du schema des cercles --- */
.pub{background:var(--bg);border-radius:16px;padding:16px;}
.pub .lab{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.pub .champ{background:#fff;border:1.5px solid #E4E6EA;border-radius:11px;padding:11px 13px;margin-top:7px;
  font-size:15px;font-weight:600;color:var(--ink);}
.pub .champ s{display:block;text-decoration:none;font-weight:400;font-size:13px;color:var(--gris);margin-top:3px;}
.trio{display:grid;gap:8px;margin-top:8px;}
.tq{background:#fff;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:0 0 0 1.5px #E4E6EA inset;}
.tq i{display:flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.tq i svg{width:15px;height:15px;}
.tq b{flex:1;font-size:14px;line-height:1.2;}
.tq s{text-decoration:none;font-size:13px;color:var(--muted);}
.tq .ck{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.tq .ck svg{width:11px;height:11px;}
.tq.on .ck{display:flex;}
.tq.on{box-shadow:0 0 0 2.5px var(--ink) inset;background:#fff;}
.tq.on s{color:var(--ink);font-weight:700;}
.tq.g i{background:var(--volet);} .tq.a i{background:var(--ink);} .tq.b i{background:#0D1524;}
.pubn{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:13px;color:var(--gris);}
.pubn u{width:7px;height:7px;border-radius:50%;background:var(--vert);flex-shrink:0;text-decoration:none;}
.pubb{margin-top:12px;background:var(--brique);color:#fff;border-radius:99px;padding:13px 20px;text-align:center;
  font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(192,83,47,.32);}
.pubw{font-size:12.5px;color:var(--gris);margin-top:11px;padding-left:2px;}
.pubw b{color:var(--ink);}

/* --- les trois cercles --- */
.cerc{background:#fff;border-radius:20px;padding:26px 28px;box-shadow:0 1px 3px rgba(34,48,74,.08);margin-top:30px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start;}
.c1{background:var(--t-bl);border-radius:17px;padding:16px;}
.c2{background:var(--ink);border-radius:14px;padding:15px;margin-top:13px;}
.c3{background:#0D1524;border-radius:11px;padding:13px;margin-top:12px;}
.ct{display:flex;align-items:center;gap:8px;}
.ct em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;}
.c1 .ct em{background:var(--volet);color:#fff;}
.c2 .ct em{background:#fff;color:var(--ink);}
.c3 .ct em{background:var(--jaune);color:#5C420B;}
.ct s{margin-left:auto;text-decoration:none;font-size:12px;font-weight:700;}
.c1 .ct s{color:var(--volet);}
.c2 .ct s,.c3 .ct s{color:rgba(255,255,255,.72);}
.cx{font-size:13.5px;margin-top:8px;line-height:1.35;}
.c1 .cx{color:var(--ink);}
.c2 .cx,.c3 .cx{color:#D5DCE8;}
.cx b{font-weight:700;}
.c2 .cx b,.c3 .cx b{color:#fff;}
.cnote{font-size:13px;color:var(--gris);margin-top:14px;}
.cli{display:grid;gap:14px;}
.cli div{display:flex;gap:11px;align-items:flex-start;}
.cli u{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;text-decoration:none;}
.cli > div > span > b{display:block;font-size:14.5px;}
.cli span span b{display:inline;font-size:inherit;font-weight:700;color:var(--ink);}
.cli span{display:block;font-size:13px;color:var(--gris);line-height:1.45;margin-top:1px;}
@media(max-width:860px){.cerc{grid-template-columns:1fr;gap:24px;padding:22px 18px;}}

/* --- la vitrine, dessinee --- */
.vitr{background:#E6E9EF;padding:12px;border-radius:16px;box-shadow:0 10px 34px rgba(34,48,74,.16);margin-top:28px;}
.vbar{display:flex;align-items:center;gap:6px;padding:0 4px 10px;}
.vbar u{width:9px;height:9px;border-radius:50%;background:#C9CFD9;display:inline-block;}
.vbar i{flex:1;max-width:280px;height:20px;border-radius:99px;background:#fff;font-style:normal;font-size:11px;
  color:var(--gris);display:flex;align-items:center;padding:0 12px;margin-left:6px;}
.vpage{background:#F5F6F8;border-radius:10px;padding:16px;}
.vhead{background:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vhead .av3{width:40px;height:40px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;flex-shrink:0;}
.vhead .id{flex:1;min-width:0;}
.vhead .id b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.15;}
.vhead .id span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.vhead .b1,.vhead .b2{font-size:13px;font-weight:700;border-radius:99px;padding:9px 16px;white-space:nowrap;}
.vhead .b1{background:var(--volet);color:#fff;}
.vhead .b2{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.vtit{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;margin-top:18px;letter-spacing:-.015em;}
.vsub{font-size:13px;color:var(--gris);margin-top:3px;}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.vc{border-radius:14px;padding:14px;}
.vc .l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;}
.vc .l u{width:22px;height:22px;border-radius:50%;background:var(--volet);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.vc .l s{margin-left:auto;text-decoration:none;font-weight:500;font-size:11.5px;color:var(--muted);}
.vc em{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 9px;margin-top:10px;}
.vc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;margin-top:8px;line-height:1.2;}
.vc p{font-size:12.5px;color:#3D4657;margin-top:5px;line-height:1.4;}
.vc .bx{display:inline-block;margin-top:11px;background:#fff;border-radius:99px;padding:8px 14px;font-size:12.5px;
  font-weight:700;color:var(--volet);}
@media(max-width:760px){.vcards{grid-template-columns:1fr;}.vtit{font-size:21px;}}

/* --- quatre canaux, quatre silhouettes --- */
.canaux .lot{display:grid;grid-template-columns:repeat(3,minmax(0,286px));justify-content:center;gap:30px;align-items:start;}
.mini{height:184px;border-radius:13px;overflow:hidden;position:relative;}

/* 1. L'application : un grand telephone, coupe en bas par un fondu vers le
   blanc -- on devine qu'il continue. Un petit appareil entier ferait jouet. */
.m-app{background:transparent;display:flex;justify-content:center;align-items:flex-start;}
.m-app:after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 55%, #fff 100%);}
.ph{width:158px;height:252px;border-radius:26px;background:#141C2C;padding:6px;box-shadow:0 12px 26px rgba(20,28,44,.30);}
.ph .scr{height:100%;border-radius:21px;background:linear-gradient(168deg,#3E5C8A 0%,#22304A 46%,#141C2C 100%);
  padding:15px 9px 0;display:flex;flex-direction:column;align-items:center;}
.ph .hh{color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:200;font-size:38px;line-height:1;letter-spacing:-.035em;}
.ph .dd{color:rgba(255,255,255,.62);font-size:9px;margin-top:2px;letter-spacing:.02em;}
.ph .nc{margin-top:17px;width:100%;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 9px;
  box-shadow:0 5px 14px rgba(0,0,0,.28);}
.ph .nc em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:6.6px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);}
.ph .nc em u{width:12px;height:12px;border-radius:3.5px;background:var(--volet);color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-family:'Bricolage Grotesque',sans-serif;}
.ph .nc em s{margin-left:auto;text-decoration:none;font-weight:600;}
.ph .nc b{display:block;font-size:10.5px;line-height:1.24;margin-top:4px;}
.ph .nc span{display:block;font-size:8.6px;color:var(--gris);line-height:1.35;margin-top:2px;}
/* 2. Le navigateur : un bureau, une fenetre, une bulle qui apparait. */
.m-nav{background:#DFE3EA;padding:11px;}
.win{background:#fff;border-radius:7px;height:100%;overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.win .cb{height:17px;background:#F1F3F6;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid #E6E9EE;}
.win .cb u{width:5px;height:5px;border-radius:50%;background:#CDD3DC;}
.win .cb i{flex:1;height:9px;border-radius:99px;background:#fff;font-style:normal;font-size:6px;color:var(--muted);
  display:flex;align-items:center;padding:0 5px;margin-left:3px;}
.win .pg{padding:8px;display:grid;gap:5px;}
.win .pg i{height:5px;border-radius:99px;background:#E4E8EE;display:block;}
.bulle{position:absolute;right:8px;bottom:8px;width:calc(100% - 30px);background:#fff;border-radius:8px;
  padding:6px 7px;box-shadow:0 5px 16px rgba(34,48,74,.26);display:flex;gap:5px;align-items:flex-start;}
.bulle u{width:14px;height:14px;border-radius:4px;background:var(--volet);color:#fff;flex-shrink:0;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.bulle span{min-width:0;}
.bulle em{display:block;font-style:normal;font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.bulle b{display:block;font-size:8.5px;line-height:1.2;margin-top:1px;}

/* 3. L'e-mail : une liste plate et dense, pastilles d'expediteur, pas de cadre. */
.m-mail{background:#fff;box-shadow:0 2px 8px rgba(34,48,74,.13);}
.mh{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid #EDEFF3;}
.mh b{font-size:8px;letter-spacing:.03em;}
.mh span{font-size:7px;color:#fff;background:var(--volet);border-radius:99px;padding:1px 5px;font-weight:800;}
.mr{display:flex;gap:6px;padding:7px 9px;border-bottom:1px solid #F3F5F8;align-items:flex-start;line-height:1.25;height:47px;overflow:hidden;}
.mr.lu{height:33px;}
.mr u{width:16px;height:16px;border-radius:50%;flex-shrink:0;text-decoration:none;display:flex;align-items:center;
  justify-content:center;font-size:6.5px;font-weight:800;color:#fff;font-family:'Bricolage Grotesque',sans-serif;}
.mr .t{flex:1;min-width:0;}
.mr .t em{display:block;font-style:normal;font-size:7.5px;font-weight:800;}
.mr .t b{display:block;font-size:8.5px;line-height:1.25;margin-top:1px;}
.mr .t span{display:block;font-size:7px;color:var(--muted);margin-top:1px;}
.mr .h{font-size:6.5px;color:var(--muted);flex-shrink:0;}
.mr.lu u{background:#C9CFD9;}
.mr.lu .t em{font-weight:600;color:var(--muted);}
.mr.lu .t b{font-weight:600;color:var(--muted);}

/* 4. La page web : un onglet, une page, un bandeau aux couleurs de l'asso. */
.m-web{background:#E6E9EF;padding:0 8px 8px;}
.ong{height:15px;display:flex;align-items:flex-end;}
.ong i{background:#fff;border-radius:5px 5px 0 0;height:12px;padding:0 7px;font-style:normal;font-size:6px;
  color:var(--gris);display:flex;align-items:center;font-weight:600;}
.pge{background:#fff;border-radius:0 6px 6px 6px;height:calc(100% - 15px);overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.pge .bd2{background:var(--ink);padding:7px 8px;display:flex;align-items:center;gap:5px;}
.pge .bd2 u{width:15px;height:15px;border-radius:50%;background:var(--cyan);color:var(--ink);text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:6.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pge .bd2 b{color:#fff;font-size:9px;flex:1;}
.pge .bd2 span{font-size:6.5px;background:var(--brique);color:#fff;border-radius:99px;padding:2px 7px;font-weight:800;}
.pge .ct{padding:8px;}
.pge .ct em{display:inline-block;font-style:normal;font-size:6px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--rouge);border-radius:99px;padding:2px 6px;}
.pge .ct b{display:block;font-size:9.5px;line-height:1.25;margin-top:5px;}
.pge .ct span{display:block;font-size:7.5px;color:var(--gris);margin-top:2px;line-height:1.35;}
.pge .ct .sep{height:1px;background:#EDEFF3;margin:7px 0;}
.pge .ct .nx{font-size:7px;color:var(--muted);}

.cnom{margin-top:12px;}
.cnom > b{display:block;font-size:14.5px;}
.cnom > span{display:block;font-size:12.5px;color:var(--gris);margin-top:2px;line-height:1.4;}
.cnom span b{display:inline;font-size:inherit;color:var(--ink);font-weight:700;}
@media(max-width:900px){.canaux .lot{grid-template-columns:1fr 1fr;gap:20px;}}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}


/* --- le telephone de l'accroche, dessine plutot que photographie ---------
   Une capture d'ecran vieillit et ment ; un ecran dessine reste net a toutes
   les tailles, se corrige en une ligne, et pese 4 Ko au lieu de 180. */
.phone{width:292px;margin:0 auto;background:#1A2438;border-radius:46px;padding:11px;
  box-shadow:0 22px 46px rgba(34,48,74,.30), 0 0 0 1.5px #303C55 inset;}
.screen{border-radius:36px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;height:582px;}
.stat{position:relative;height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:#fff;font-size:11.5px;font-weight:700;color:var(--ink);}
.stat .isl{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:74px;height:20px;border-radius:99px;background:#1A2438;}
.stat .sg{display:flex;gap:4px;align-items:flex-end;}
.stat .sg i{display:inline-block;width:3px;border-radius:1px;background:var(--ink);}
.appbar{background:#fff;padding:9px 13px 11px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #EDEFF3;}
.av{width:34px;height:34px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;flex-shrink:0;}
.appbar .nm{flex:1;min-width:0;}
.appbar .nm b{display:block;font-size:14px;line-height:1.2;}
.appbar .nm span{display:block;font-size:10.5px;color:var(--muted);}
.appbar .cl{width:26px;height:26px;border-radius:50%;background:var(--t-bl);color:var(--volet);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appbar .cl svg{width:14px;height:14px;}
.feed{position:relative;flex:1;padding:10px;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
.feed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;pointer-events:none;background:linear-gradient(to bottom, rgba(245,246,248,0), var(--bg));}
.ac{background:#fff;border-radius:15px;padding:11px 12px;box-shadow:0 1px 2px rgba(34,48,74,.09);}
.ac .tg{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 8px;margin-bottom:7px;}
.ac h5{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;line-height:1.25;}
.ac p{font-size:11.5px;color:var(--gris);margin-top:4px;line-height:1.4;}
.ac .mt{font-size:10px;color:var(--muted);margin-top:7px;}
.ac .bt{display:flex;gap:7px;margin-top:9px;}
.ac .bt span{font-size:11px;font-weight:700;border-radius:99px;padding:6px 12px;}
.ac .bt .ou{background:var(--vert);color:#fff;}
.ac .bt .no{background:#fff;color:var(--gris);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.ac .op{margin-top:8px;display:grid;gap:6px;}
.ac .op div{font-size:10.5px;color:var(--gris);}
.ac .op .ba{height:6px;border-radius:99px;background:#EDEFF3;margin-top:3px;overflow:hidden;}
.ac .op .ba i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.tabs{background:#fff;border-top:1px solid #EDEFF3;height:54px;display:flex;align-items:center;justify-content:space-around;padding-bottom:4px;}
.tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted);font-weight:600;}
.tb svg{width:19px;height:19px;}
.tb.on{color:var(--volet);}
@media(max-width:860px){.phone{width:270px;}.screen{height:540px;}}

/* --- l'exemple de bilan annuel --- */
.doc{padding:30px 34px 26px;text-align:left;}
.dtop{border-bottom:2px solid var(--ink);padding-bottom:12px;}
.dtop b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.dtop .per{font-size:13px;color:var(--gris);margin-top:3px;}
.dstats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 24px;}
.st{background:var(--bg);border-radius:14px;padding:14px 16px;}
.st b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;line-height:1.1;color:var(--ink);}
.st span{display:block;font-size:12.5px;color:var(--gris);margin-top:3px;}
.st i{display:block;font-style:normal;font-size:12px;color:#2F6BB5;font-weight:700;margin-top:2px;}
.dgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;}
.dbloc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:10px;}
.dbloc h4.mt{margin-top:22px;}
.dbloc svg{width:100%;height:auto;overflow:visible;}
.dbloc .ax{font-size:10px;fill:var(--muted);font-family:'Instrument Sans',sans-serif;}
.dbloc .vl{font-size:11px;font-weight:700;fill:var(--ink);font-family:'Instrument Sans',sans-serif;}
.dleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);}
.lg i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.lg b{color:var(--ink);}
.dsec{width:100%;border-collapse:collapse;font-size:13px;}
.dsec td{padding:6px 4px;border-top:1px solid #EDEFF3;color:var(--gris);}
.dsec td.r{text-align:right;color:var(--ink);font-weight:700;}
.dtop5{margin-top:24px;}
.dtop5 ol{margin:0;padding-left:20px;}
.dtop5 li{font-size:13px;color:var(--gris);padding:6px 0;border-top:1px solid #EDEFF3;display:flex;justify-content:space-between;gap:16px;}
.dtop5 li b{color:var(--ink);}
.dpied{margin-top:20px;padding-top:12px;border-top:1px solid #EDEFF3;font-size:11.5px;color:var(--muted);}
@media(max-width:980px){.dstats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){.dstats{grid-template-columns:1fr 1fr;}.dgrid{grid-template-columns:1fr;}.doc{padding:22px 18px;}}

/* --- ajouts de la version de lancement --- */
/* Le gabarit d'origine (auto 1fr 1fr 1fr) avait ete dessine pour un titre et
   TROIS canaux. Avec quatre, le dernier retombait seul a la ligne et les
   colonnes s'etranglaient. Titre au-dessus, quatre colonnes egales dessous. */
.canaux{display:block;padding:28px 30px 30px;}
.canaux .t{font-size:20px;line-height:1.3;padding-bottom:20px;border-bottom:1px solid #EDEFF3;margin-bottom:24px;}
.chan .ic{color:var(--volet);}
.chan .ic svg{width:19px;height:19px;display:block;}
.chan b{margin-bottom:2px;}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}
/* Pictogrammes dessines plutot qu'emojis : un emoji depend de la police du
   systeme, il change d'un appareil a l'autre, il est colore la ou tout le
   reste est sobre, et sur certains postes il tombe en carre vide. */
.pain .e{font-size:0;line-height:0;color:var(--volet);margin-top:2px;}
.pain .e svg{width:21px;height:21px;display:block;}

.prix{background:#fff;border-radius:24px;padding:32px 34px;box-shadow:0 2px 10px rgba(34,48,74,.09);margin-top:30px;}
.ptab{width:100%;border-collapse:collapse;margin-top:6px;}
.ptab th{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 10px;}
.ptab th.r,.ptab td.r{text-align:right;}
.ptab td{padding:13px 10px;border-top:1px solid #EDEFF3;font-size:16px;}
.ptab tr.gr td{background:var(--t-ve);font-weight:700;}
.ptab tr.gr td:first-child{border-radius:12px 0 0 12px;}
.ptab tr.gr td:last-child{border-radius:0 12px 12px 0;}
.ptab .px{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;}
.ptab .dev{color:var(--gris);font-size:15px;}
.pnote{font-size:13.5px;color:var(--gris);margin-top:16px;}
.pnote b{color:var(--ink);}
.bilan{background:var(--ink);border-radius:24px;padding:38px 40px;color:#fff;margin-top:30px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;}
.bilan h2{color:#fff;margin-top:6px;}
.bilan h2 span{color:var(--jaune);}
.bilan p{color:#C9D2E2;margin-top:12px;font-size:16px;}
.blist{display:grid;gap:10px;}
.bit{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;font-size:14px;color:#C9D2E2;}
.bit b{display:block;color:#fff;font-size:15px;margin-bottom:3px;}
@media(max-width:860px){.bilan{grid-template-columns:1fr;padding:28px 22px;}}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;padding:9px 16px;font-size:13px;line-height:1.2;text-decoration:none;}
.store b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.store .mk{flex-shrink:0;color:#fff;line-height:0;}
.store .mk svg{width:22px;height:22px;display:block;}
.store .mk.pl svg{width:20px;height:20px;}






/* Egalisation, par la mesure : le bloc du bilan portait 36 px de marge
   haute en plus du retrait de section, et la suite du bilan n'avait aucun
   retrait haut. Les deux ecarts rejoignent les 159 px des autres. */
.bilan{margin-top:6px;}
section.wrap.suite{padding-top:0px;margin-top:-4px;}

/* --- l'agenda de la vitrine : une vue, pas une annonce --- */
.vag2{background:#fff;border-radius:14px;padding:18px 20px;margin-top:14px;box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vag2 .tt{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid #EDEFF3;}
.vag2 .tt b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.vag2 .tt s{text-decoration:none;font-size:12.5px;color:var(--muted);}
.vag2 .tt em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--volet);}
.ag{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #F3F5F8;}
.ag:last-child{border-bottom:none;padding-bottom:0;}
.ag .dt{width:46px;flex-shrink:0;text-align:center;background:#E30613;border-radius:9px;padding:6px 0;}
/* #E30613 = C0 M100 J100 N0 converti en offset europeen (FOGRA39). La
   conversion naive donnerait #FF0000, dont le blanc pose dessus ne
   ressort qu'a 4,00 contre 1 -- sous le seuil AA. Ici : 4,88. */
.ag .dt b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1;color:#fff;}
.ag .dt s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:2px;}
.ag .tx{flex:1;min-width:0;}
.ag .tx b{display:block;font-size:14px;}
.ag .tx span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.ag .sec{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border-radius:99px;padding:3px 9px;flex-shrink:0;}
.pj{display:flex;align-items:center;gap:9px;margin-top:12px;background:#fff;border-radius:10px;padding:9px 11px;}
.pj u{width:26px;height:26px;border-radius:7px;background:var(--rouge);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pj .tx b{display:block;font-size:12.5px;}
.pj .tx s{display:block;text-decoration:none;font-size:11px;color:var(--muted);}
/* Pastille de section sur les cartes de la vitrine. La charte l'exigeait deja
   -- « elle s'affiche partout : puce de la vitrine, pastille de la liste des
   annonces, ecran d'equipe » -- et elle manquait. La couleur du texte se
   calcule cote serveur : encre #22304A sur les sept teintes claires, blanc sur
   les sept foncees. Ici les trois sections utilisees sont foncees, d'ou le
   blanc ecrit en clair dans la maquette. Un evenement qui concerne toute
   l'association n'a pas de pastille : c'est le cas du vide-greniers et du mot
   du CEO avant l'AG. */
.vc .tt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;}
.vc .tt em{margin-top:0;}
.vc .vsec{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 9px;}
/* Saut de ligne entre les deux phrases de l'introduction des cercles.
   Un <br> ne fait qu'aller a la ligne ; ici il faut de l'air entre les deux,
   d'ou un bloc avec sa propre marge plutot qu'un second <br>. */
.cintro .l2{display:block;margin-top:14px;}
/* Les badges de stores quittent la barre du haut pour le canal
   « L'application ». En tete ils demandaient d'installer une appli a quelqu'un
   qui ne sait pas encore ce qu'est Assodio -- et ils disaient « Assodio est une
   appli », ce que la page passe justement a dementir : trois canaux, dont
   l'application n'est qu'un. Ici ils ne demandent plus rien, ils prouvent.
   Visibles a toutes les largeurs, contrairement a la variante .sm de la barre. */
.canaux .stores.ch{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.canaux .stores.ch .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.canaux .stores.ch .store b{font-size:11.5px;}
.canaux .stores.ch .mk svg{width:15px;height:15px;}
.canaux .stores.ch .mk.pl svg{width:14px;height:14px;}
/* ============ PIED DE PAGE SUR FOND BLEU (choix de Patrick, 08/08) ============
   Le degrade est celui du hero pris a son extremite sombre : la page s'ouvre sur
   le clair (l'ecran du telephone) et se referme sur le fonce. Ce n'est pas un
   effet de style -- sur le haut du degrade d'origine (#3E5C8A) le point cyan du
   logo ne rendait que 2,84 contre 1. Sur #1B2740 il rend 6,26.
   Le point est en var(--cyan) #22B8CF : couleur de marque de la charte, § 1 bis,
   « c'est le point final -- c'est dit, c'est transmis ». Jamais jaune, jamais
   brique : la valeur ne se recopie pas a la main, elle vient de la variable.
   Contrastes mesures sur ce fond : blanc 14,88 - descriptions #C3CCDB 9,20 -
   ligne legale #9AA1AD 6,55. Tous au-dessus du seuil AA. */
footer.bfin{background:linear-gradient(168deg,#1B2740 0%,#151E31 55%,#101725 100%);
  margin-top:0;padding:46px 0 30px;text-align:center;color:#fff;}
footer.bfin .logo{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;
  line-height:1;color:#fff;letter-spacing:-.025em;}
footer.bfin .logo i{color:var(--cyan);font-style:normal;}
footer.bfin .bl{font-size:15px;color:#E9EDF4;margin-top:11px;}
footer.bfin a{text-decoration:none;color:#C3CCDB;}
footer.bfin a:hover{color:#fff;}
/* 3 colonnes : la derniere porte le texte le plus long et retombait sur deux
   lignes quand les deux autres en faisaient une. D'ou le 1,22. */
footer.bfin .args{display:grid;grid-template-columns:1fr 1fr 1.22fr;gap:30px;
  text-align:left;margin-top:28px;padding:24px 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
footer.bfin .a{display:flex;gap:12px;align-items:flex-start;}
footer.bfin .a svg{width:19px;height:19px;color:var(--jaune);flex-shrink:0;margin-top:1px;}
footer.bfin .a b{display:block;font-size:14px;font-weight:700;line-height:1.3;color:#fff;}
footer.bfin .a>span>span{display:block;font-size:12.5px;color:#C3CCDB;margin-top:4px;line-height:1.5;}
footer.bfin .lk{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;}
footer.bfin .id{font-size:11.5px;color:#9AA1AD;line-height:1.7;margin-top:18px;}
@media(max-width:820px){footer.bfin .args{grid-template-columns:1fr;gap:17px;}}
/* Barre du haut : tout etait tasse a droite. Le logo restait seul a gauche,
   puis 300 px de vide, puis les quatre elements colles les uns aux autres.
   On passe a trois zones : logo a gauche, liens CENTRES, bouton a droite.
   Le bouton sort donc du <nav> par le style (margin-left:auto sur lui seul)
   et les liens se centrent dans l'espace restant. */
.bar{display:flex;align-items:center;gap:20px;}
.bar .nav{flex:1;display:flex;align-items:center;justify-content:center;gap:38px;
  margin-left:0;}
.bar .nav a{white-space:nowrap;}
@media(max-width:1000px){.bar .nav{gap:22px;}}

/* Piege a robots du formulaire : hors de l'ecran plutot que display:none,
   qu'une partie des robots sait reconnaitre et ignorer. Et le bouton
   d'envoi est desormais un <button> : il portait la classe .btn en etant
   un <span>, donc il ne soumettait rien. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
button.btn{border:0;font:inherit;cursor:pointer;}

/* Grille tarifaire : on est passe de trois colonnes (abonnes / 1 an / 3 ans)
   a deux (abonnes / par mois). Sur toute la largeur de la carte, deux colonnes
   laissent 400 px de vide au milieu et le prix se retrouve a l'autre bout de
   la page que sa ligne. Borner la seule table cree un vide a droite DANS la
   carte, et la caler a gauche deplace le vide sans le supprimer : c'est la
   CARTE qu'on retrecit, pas la table. La table reprend donc toute sa largeur
   et le prix se retrouve aligne sur le bord droit de la note. Le nombre de
   lignes passe de 6 a 11 : on resserre la hauteur de ligne pour que la carte
   ne devienne pas une colonne. */
.prix{max-width:720px;}
.ptab td{padding:10px 14px;}
.ptab th{padding:0 14px 9px;}
/* === FIN DES SURCHARGES === */

/* --- Les styles qui etaient ecrits dans la page, un par valeur --- */
.i-1{height:5px;}
.i-2{height:7px;}
.i-3{height:9px;}
.i-4{height:11px;}
.i-5{background:var(--rouge);}
.i-6{background:var(--vert);}
.i-7{background:var(--violet);}
.i-8{width:54%;}
.i-9{width:31%;}
.i-10{background:var(--volet);}
.i-11{width:72%;}
.i-12{width:94%;}
.i-13{width:58%;}
.i-14{width:86%;}
.i-15{width:40%;}
.i-16{margin-top:14px;}
.i-17{background:var(--ink);}
.i-18{background:var(--jaune);}
.i-19{background:#00739D;color:#fff;}
.i-20{background:#874197;color:#fff;}
.i-21{height:6px;}
.i-22{height:17px;}
.i-23{height:21px;}
.i-24{height:14px;}
.i-25{height:8px;}
.i-26{height:19px;}
.i-27{height:12px;}
.i-28{height:22px;}
.i-29{height:16px;}
.i-30{height:10px;}
.i-31{height:20px;}
.i-32{height:13px;}
.i-33{height:18px;}
.i-34{height:15px;}
.i-35{background:#4F56B7;color:#fff;}
.i-36{width:64%;}
.i-37{width:27%;}
.i-38{width:9%;}
.i-39{background:#874197;}
.i-40{background:#4F56B7;}
.i-41{background:#2F6BB5;}
.i-42{background:#149DA8;}
.i-43{background:#C0532F;}


/* === Nouveaux blocs : les inserer AVANT le marqueur de fin, jamais ici. === */

/* --- seconde rangee de la vitrine --- */
.vau{display:flex;align-items:center;gap:10px;margin-top:12px;}
.vau .pl{width:30px;height:30px;border-radius:50%;background:var(--volet);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.vau .pl svg{width:12px;height:12px;margin-left:2px;}
.vau .wv{flex:1;display:flex;align-items:center;gap:2px;height:24px;}
.vau .wv i{flex:1;background:#BFCADB;border-radius:99px;display:block;}
.vau s{text-decoration:none;font-size:11.5px;color:var(--muted);flex-shrink:0;}
.vres{margin-top:11px;display:grid;gap:10px;}
.vres div{font-size:12px;color:#3D4657;}
.vres .b{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.75);margin-top:5px;margin-bottom:2px;overflow:hidden;}
.vres .b i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.vag{margin-top:11px;display:grid;gap:9px;}
.vag div{display:flex;gap:9px;align-items:baseline;font-size:12.5px;color:#3D4657;}
.vag u{text-decoration:none;font-weight:800;color:var(--ink);flex-shrink:0;font-size:12px;}
.vcards2{margin-top:14px;}


.cintro{font-size:15px;color:var(--gris);line-height:1.5;margin-bottom:22px;}
.cintro b{color:var(--ink);font-weight:700;}

.bar .nav{margin-left:auto;display:flex;align-items:center;gap:16px;}
.bar .nav a{white-space:nowrap;}

/* Les badges des boutiques passent dans la barre du haut, plus petits :
   ils suivent le lecteur au lieu de n'exister qu'en tete de page.
   Masques sous 1080 px, ou la barre n a plus la place. */
.stores.sm{margin-top:0;gap:7px;flex-wrap:nowrap;display:flex;}
.stores.sm .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.stores.sm .store b{font-size:11.5px;}
.stores.sm .mk svg{width:15px;height:15px;}
.stores.sm .mk.pl svg{width:14px;height:14px;}
@media(max-width:1120px){.stores.sm{display:none;}}

/* --- respiration entre les sections --- */
section.wrap{padding:25px 22px;}
section.wrap + section.wrap{border-top:1px solid #E7EAEF;}
/* Une suite n'est pas une nouvelle section : ni filet, ni retrait haut. */
section.wrap.suite{padding-top:0;}
section.wrap + section.wrap.suite{border-top:none;}
.sub{margin-top:12px;}
.grid3,.grid4,.grid2{margin-top:36px;}
.canaux,.cerc,.prix,.vitr,.bilan,.doc{margin-top:36px;}
.hero{padding:64px 0 76px;}
footer{margin-top:0;padding:34px 0 46px;}

/* Les sous-titres ne sont pas des paragraphes : ils tiennent sur une ligne. */
.sub{max-width:none;}

/* --- l'ecran de publication, a la place du schema des cercles --- */
.pub{background:var(--bg);border-radius:16px;padding:16px;}
.pub .lab{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.pub .champ{background:#fff;border:1.5px solid #E4E6EA;border-radius:11px;padding:11px 13px;margin-top:7px;
  font-size:15px;font-weight:600;color:var(--ink);}
.pub .champ s{display:block;text-decoration:none;font-weight:400;font-size:13px;color:var(--gris);margin-top:3px;}
.trio{display:grid;gap:8px;margin-top:8px;}
.tq{background:#fff;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:0 0 0 1.5px #E4E6EA inset;}
.tq i{display:flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.tq i svg{width:15px;height:15px;}
.tq b{flex:1;font-size:14px;line-height:1.2;}
.tq s{text-decoration:none;font-size:13px;color:var(--muted);}
.tq .ck{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.tq .ck svg{width:11px;height:11px;}
.tq.on .ck{display:flex;}
.tq.on{box-shadow:0 0 0 2.5px var(--ink) inset;background:#fff;}
.tq.on s{color:var(--ink);font-weight:700;}
.tq.g i{background:var(--volet);} .tq.a i{background:var(--ink);} .tq.b i{background:#0D1524;}
.pubn{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:13px;color:var(--gris);}
.pubn u{width:7px;height:7px;border-radius:50%;background:var(--vert);flex-shrink:0;text-decoration:none;}
.pubb{margin-top:12px;background:var(--brique);color:#fff;border-radius:99px;padding:13px 20px;text-align:center;
  font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(192,83,47,.32);}
.pubw{font-size:12.5px;color:var(--gris);margin-top:11px;padding-left:2px;}
.pubw b{color:var(--ink);}

/* --- les trois cercles --- */
.cerc{background:#fff;border-radius:20px;padding:26px 28px;box-shadow:0 1px 3px rgba(34,48,74,.08);margin-top:30px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start;}
.c1{background:var(--t-bl);border-radius:17px;padding:16px;}
.c2{background:var(--ink);border-radius:14px;padding:15px;margin-top:13px;}
.c3{background:#0D1524;border-radius:11px;padding:13px;margin-top:12px;}
.ct{display:flex;align-items:center;gap:8px;}
.ct em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;}
.c1 .ct em{background:var(--volet);color:#fff;}
.c2 .ct em{background:#fff;color:var(--ink);}
.c3 .ct em{background:var(--jaune);color:#5C420B;}
.ct s{margin-left:auto;text-decoration:none;font-size:12px;font-weight:700;}
.c1 .ct s{color:var(--volet);}
.c2 .ct s,.c3 .ct s{color:rgba(255,255,255,.72);}
.cx{font-size:13.5px;margin-top:8px;line-height:1.35;}
.c1 .cx{color:var(--ink);}
.c2 .cx,.c3 .cx{color:#D5DCE8;}
.cx b{font-weight:700;}
.c2 .cx b,.c3 .cx b{color:#fff;}
.cnote{font-size:13px;color:var(--gris);margin-top:14px;}
.cli{display:grid;gap:14px;}
.cli div{display:flex;gap:11px;align-items:flex-start;}
.cli u{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;text-decoration:none;}
.cli > div > span > b{display:block;font-size:14.5px;}
.cli span span b{display:inline;font-size:inherit;font-weight:700;color:var(--ink);}
.cli span{display:block;font-size:13px;color:var(--gris);line-height:1.45;margin-top:1px;}
@media(max-width:860px){.cerc{grid-template-columns:1fr;gap:24px;padding:22px 18px;}}

/* --- la vitrine, dessinee --- */
.vitr{background:#E6E9EF;padding:12px;border-radius:16px;box-shadow:0 10px 34px rgba(34,48,74,.16);margin-top:28px;}
.vbar{display:flex;align-items:center;gap:6px;padding:0 4px 10px;}
.vbar u{width:9px;height:9px;border-radius:50%;background:#C9CFD9;display:inline-block;}
.vbar i{flex:1;max-width:280px;height:20px;border-radius:99px;background:#fff;font-style:normal;font-size:11px;
  color:var(--gris);display:flex;align-items:center;padding:0 12px;margin-left:6px;}
.vpage{background:#F5F6F8;border-radius:10px;padding:16px;}
.vhead{background:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vhead .av3{width:40px;height:40px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;flex-shrink:0;}
.vhead .id{flex:1;min-width:0;}
.vhead .id b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.15;}
.vhead .id span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.vhead .b1,.vhead .b2{font-size:13px;font-weight:700;border-radius:99px;padding:9px 16px;white-space:nowrap;}
.vhead .b1{background:var(--volet);color:#fff;}
.vhead .b2{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.vtit{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;margin-top:18px;letter-spacing:-.015em;}
.vsub{font-size:13px;color:var(--gris);margin-top:3px;}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.vc{border-radius:14px;padding:14px;}
.vc .l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;}
.vc .l u{width:22px;height:22px;border-radius:50%;background:var(--volet);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.vc .l s{margin-left:auto;text-decoration:none;font-weight:500;font-size:11.5px;color:var(--muted);}
.vc em{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 9px;margin-top:10px;}
.vc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;margin-top:8px;line-height:1.2;}
.vc p{font-size:12.5px;color:#3D4657;margin-top:5px;line-height:1.4;}
.vc .bx{display:inline-block;margin-top:11px;background:#fff;border-radius:99px;padding:8px 14px;font-size:12.5px;
  font-weight:700;color:var(--volet);}
@media(max-width:760px){.vcards{grid-template-columns:1fr;}.vtit{font-size:21px;}}

/* --- quatre canaux, quatre silhouettes --- */
.canaux .lot{display:grid;grid-template-columns:repeat(3,minmax(0,286px));justify-content:center;gap:30px;align-items:start;}
.mini{height:184px;border-radius:13px;overflow:hidden;position:relative;}

/* 1. L'application : un grand telephone, coupe en bas par un fondu vers le
   blanc -- on devine qu'il continue. Un petit appareil entier ferait jouet. */
.m-app{background:transparent;display:flex;justify-content:center;align-items:flex-start;}
.m-app:after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 55%, #fff 100%);}
.ph{width:158px;height:252px;border-radius:26px;background:#141C2C;padding:6px;box-shadow:0 12px 26px rgba(20,28,44,.30);}
.ph .scr{height:100%;border-radius:21px;background:linear-gradient(168deg,#3E5C8A 0%,#22304A 46%,#141C2C 100%);
  padding:15px 9px 0;display:flex;flex-direction:column;align-items:center;}
.ph .hh{color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:200;font-size:38px;line-height:1;letter-spacing:-.035em;}
.ph .dd{color:rgba(255,255,255,.62);font-size:9px;margin-top:2px;letter-spacing:.02em;}
.ph .nc{margin-top:17px;width:100%;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 9px;
  box-shadow:0 5px 14px rgba(0,0,0,.28);}
.ph .nc em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:6.6px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);}
.ph .nc em u{width:12px;height:12px;border-radius:3.5px;background:var(--volet);color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-family:'Bricolage Grotesque',sans-serif;}
.ph .nc em s{margin-left:auto;text-decoration:none;font-weight:600;}
.ph .nc b{display:block;font-size:10.5px;line-height:1.24;margin-top:4px;}
.ph .nc span{display:block;font-size:8.6px;color:var(--gris);line-height:1.35;margin-top:2px;}
/* 2. Le navigateur : un bureau, une fenetre, une bulle qui apparait. */
.m-nav{background:#DFE3EA;padding:11px;}
.win{background:#fff;border-radius:7px;height:100%;overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.win .cb{height:17px;background:#F1F3F6;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid #E6E9EE;}
.win .cb u{width:5px;height:5px;border-radius:50%;background:#CDD3DC;}
.win .cb i{flex:1;height:9px;border-radius:99px;background:#fff;font-style:normal;font-size:6px;color:var(--muted);
  display:flex;align-items:center;padding:0 5px;margin-left:3px;}
.win .pg{padding:8px;display:grid;gap:5px;}
.win .pg i{height:5px;border-radius:99px;background:#E4E8EE;display:block;}
.bulle{position:absolute;right:8px;bottom:8px;width:calc(100% - 30px);background:#fff;border-radius:8px;
  padding:6px 7px;box-shadow:0 5px 16px rgba(34,48,74,.26);display:flex;gap:5px;align-items:flex-start;}
.bulle u{width:14px;height:14px;border-radius:4px;background:var(--volet);color:#fff;flex-shrink:0;text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.bulle span{min-width:0;}
.bulle em{display:block;font-style:normal;font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.bulle b{display:block;font-size:8.5px;line-height:1.2;margin-top:1px;}

/* 3. L'e-mail : une liste plate et dense, pastilles d'expediteur, pas de cadre. */
.m-mail{background:#fff;box-shadow:0 2px 8px rgba(34,48,74,.13);}
.mh{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid #EDEFF3;}
.mh b{font-size:8px;letter-spacing:.03em;}
.mh span{font-size:7px;color:#fff;background:var(--volet);border-radius:99px;padding:1px 5px;font-weight:800;}
.mr{display:flex;gap:6px;padding:7px 9px;border-bottom:1px solid #F3F5F8;align-items:flex-start;line-height:1.25;height:47px;overflow:hidden;}
.mr.lu{height:33px;}
.mr u{width:16px;height:16px;border-radius:50%;flex-shrink:0;text-decoration:none;display:flex;align-items:center;
  justify-content:center;font-size:6.5px;font-weight:800;color:#fff;font-family:'Bricolage Grotesque',sans-serif;}
.mr .t{flex:1;min-width:0;}
.mr .t em{display:block;font-style:normal;font-size:7.5px;font-weight:800;}
.mr .t b{display:block;font-size:8.5px;line-height:1.25;margin-top:1px;}
.mr .t span{display:block;font-size:7px;color:var(--muted);margin-top:1px;}
.mr .h{font-size:6.5px;color:var(--muted);flex-shrink:0;}
.mr.lu u{background:#C9CFD9;}
.mr.lu .t em{font-weight:600;color:var(--muted);}
.mr.lu .t b{font-weight:600;color:var(--muted);}

/* 4. La page web : un onglet, une page, un bandeau aux couleurs de l'asso. */
.m-web{background:#E6E9EF;padding:0 8px 8px;}
.ong{height:15px;display:flex;align-items:flex-end;}
.ong i{background:#fff;border-radius:5px 5px 0 0;height:12px;padding:0 7px;font-style:normal;font-size:6px;
  color:var(--gris);display:flex;align-items:center;font-weight:600;}
.pge{background:#fff;border-radius:0 6px 6px 6px;height:calc(100% - 15px);overflow:hidden;box-shadow:0 3px 10px rgba(34,48,74,.16);}
.pge .bd2{background:var(--ink);padding:7px 8px;display:flex;align-items:center;gap:5px;}
.pge .bd2 u{width:15px;height:15px;border-radius:50%;background:var(--cyan);color:var(--ink);text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:6.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pge .bd2 b{color:#fff;font-size:9px;flex:1;}
.pge .bd2 span{font-size:6.5px;background:var(--brique);color:#fff;border-radius:99px;padding:2px 7px;font-weight:800;}
.pge .ct{padding:8px;}
.pge .ct em{display:inline-block;font-style:normal;font-size:6px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--rouge);border-radius:99px;padding:2px 6px;}
.pge .ct b{display:block;font-size:9.5px;line-height:1.25;margin-top:5px;}
.pge .ct span{display:block;font-size:7.5px;color:var(--gris);margin-top:2px;line-height:1.35;}
.pge .ct .sep{height:1px;background:#EDEFF3;margin:7px 0;}
.pge .ct .nx{font-size:7px;color:var(--muted);}

.cnom{margin-top:12px;}
.cnom > b{display:block;font-size:14.5px;}
.cnom > span{display:block;font-size:12.5px;color:var(--gris);margin-top:2px;line-height:1.4;}
.cnom span b{display:inline;font-size:inherit;color:var(--ink);font-weight:700;}
@media(max-width:900px){.canaux .lot{grid-template-columns:1fr 1fr;gap:20px;}}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}


/* --- le telephone de l'accroche, dessine plutot que photographie ---------
   Une capture d'ecran vieillit et ment ; un ecran dessine reste net a toutes
   les tailles, se corrige en une ligne, et pese 4 Ko au lieu de 180. */
.phone{width:292px;margin:0 auto;background:#1A2438;border-radius:46px;padding:11px;
  box-shadow:0 22px 46px rgba(34,48,74,.30), 0 0 0 1.5px #303C55 inset;}
.screen{border-radius:36px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;height:582px;}
.stat{position:relative;height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:#fff;font-size:11.5px;font-weight:700;color:var(--ink);}
.stat .isl{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:74px;height:20px;border-radius:99px;background:#1A2438;}
.stat .sg{display:flex;gap:4px;align-items:flex-end;}
.stat .sg i{display:inline-block;width:3px;border-radius:1px;background:var(--ink);}
.appbar{background:#fff;padding:9px 13px 11px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #EDEFF3;}
.av{width:34px;height:34px;border-radius:50%;background:var(--volet);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;flex-shrink:0;}
.appbar .nm{flex:1;min-width:0;}
.appbar .nm b{display:block;font-size:14px;line-height:1.2;}
.appbar .nm span{display:block;font-size:10.5px;color:var(--muted);}
.appbar .cl{width:26px;height:26px;border-radius:50%;background:var(--t-bl);color:var(--volet);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appbar .cl svg{width:14px;height:14px;}
.feed{position:relative;flex:1;padding:10px;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
.feed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;pointer-events:none;background:linear-gradient(to bottom, rgba(245,246,248,0), var(--bg));}
.ac{background:#fff;border-radius:15px;padding:11px 12px;box-shadow:0 1px 2px rgba(34,48,74,.09);}
.ac .tg{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;border-radius:99px;padding:3px 8px;margin-bottom:7px;}
.ac h5{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;line-height:1.25;}
.ac p{font-size:11.5px;color:var(--gris);margin-top:4px;line-height:1.4;}
.ac .mt{font-size:10px;color:var(--muted);margin-top:7px;}
.ac .bt{display:flex;gap:7px;margin-top:9px;}
.ac .bt span{font-size:11px;font-weight:700;border-radius:99px;padding:6px 12px;}
.ac .bt .ou{background:var(--vert);color:#fff;}
.ac .bt .no{background:#fff;color:var(--gris);box-shadow:0 0 0 1.5px #E4E6EA inset;}
.ac .op{margin-top:8px;display:grid;gap:6px;}
.ac .op div{font-size:10.5px;color:var(--gris);}
.ac .op .ba{height:6px;border-radius:99px;background:#EDEFF3;margin-top:3px;overflow:hidden;}
.ac .op .ba i{display:block;height:100%;border-radius:99px;background:var(--violet);}
.tabs{background:#fff;border-top:1px solid #EDEFF3;height:54px;display:flex;align-items:center;justify-content:space-around;padding-bottom:4px;}
.tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted);font-weight:600;}
.tb svg{width:19px;height:19px;}
.tb.on{color:var(--volet);}
@media(max-width:860px){.phone{width:270px;}.screen{height:540px;}}

/* --- l'exemple de bilan annuel --- */
.doc{padding:30px 34px 26px;text-align:left;}
.dtop{border-bottom:2px solid var(--ink);padding-bottom:12px;}
.dtop b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.dtop .per{font-size:13px;color:var(--gris);margin-top:3px;}
.dstats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 24px;}
.st{background:var(--bg);border-radius:14px;padding:14px 16px;}
.st b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;line-height:1.1;color:var(--ink);}
.st span{display:block;font-size:12.5px;color:var(--gris);margin-top:3px;}
.st i{display:block;font-style:normal;font-size:12px;color:#2F6BB5;font-weight:700;margin-top:2px;}
.dgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;}
.dbloc h4{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:10px;}
.dbloc h4.mt{margin-top:22px;}
.dbloc svg{width:100%;height:auto;overflow:visible;}
.dbloc .ax{font-size:10px;fill:var(--muted);font-family:'Instrument Sans',sans-serif;}
.dbloc .vl{font-size:11px;font-weight:700;fill:var(--ink);font-family:'Instrument Sans',sans-serif;}
.dleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);}
.lg i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.lg b{color:var(--ink);}
.dsec{width:100%;border-collapse:collapse;font-size:13px;}
.dsec td{padding:6px 4px;border-top:1px solid #EDEFF3;color:var(--gris);}
.dsec td.r{text-align:right;color:var(--ink);font-weight:700;}
.dtop5{margin-top:24px;}
.dtop5 ol{margin:0;padding-left:20px;}
.dtop5 li{font-size:13px;color:var(--gris);padding:6px 0;border-top:1px solid #EDEFF3;display:flex;justify-content:space-between;gap:16px;}
.dtop5 li b{color:var(--ink);}
.dpied{margin-top:20px;padding-top:12px;border-top:1px solid #EDEFF3;font-size:11.5px;color:var(--muted);}
@media(max-width:980px){.dstats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){.dstats{grid-template-columns:1fr 1fr;}.dgrid{grid-template-columns:1fr;}.doc{padding:22px 18px;}}

/* --- ajouts de la version de lancement --- */
/* Le gabarit d'origine (auto 1fr 1fr 1fr) avait ete dessine pour un titre et
   TROIS canaux. Avec quatre, le dernier retombait seul a la ligne et les
   colonnes s'etranglaient. Titre au-dessus, quatre colonnes egales dessous. */
.canaux{display:block;padding:28px 30px 30px;}
.canaux .t{font-size:20px;line-height:1.3;padding-bottom:20px;border-bottom:1px solid #EDEFF3;margin-bottom:24px;}
.chan .ic{color:var(--volet);}
.chan .ic svg{width:19px;height:19px;display:block;}
.chan b{margin-bottom:2px;}
@media(max-width:560px){.canaux .lot{grid-template-columns:1fr;}}
/* Pictogrammes dessines plutot qu'emojis : un emoji depend de la police du
   systeme, il change d'un appareil a l'autre, il est colore la ou tout le
   reste est sobre, et sur certains postes il tombe en carre vide. */
.pain .e{font-size:0;line-height:0;color:var(--volet);margin-top:2px;}
.pain .e svg{width:21px;height:21px;display:block;}

.prix{background:#fff;border-radius:24px;padding:32px 34px;box-shadow:0 2px 10px rgba(34,48,74,.09);margin-top:30px;}
.ptab{width:100%;border-collapse:collapse;margin-top:6px;}
.ptab th{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 10px;}
.ptab th.r,.ptab td.r{text-align:right;}
.ptab td{padding:13px 10px;border-top:1px solid #EDEFF3;font-size:16px;}
.ptab tr.gr td{background:var(--t-ve);font-weight:700;}
.ptab tr.gr td:first-child{border-radius:12px 0 0 12px;}
.ptab tr.gr td:last-child{border-radius:0 12px 12px 0;}
.ptab .px{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;}
.ptab .dev{color:var(--gris);font-size:15px;}
.pnote{font-size:13.5px;color:var(--gris);margin-top:16px;}
.pnote b{color:var(--ink);}
.bilan{background:var(--ink);border-radius:24px;padding:38px 40px;color:#fff;margin-top:30px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;}
.bilan h2{color:#fff;margin-top:6px;}
.bilan h2 span{color:var(--jaune);}
.bilan p{color:#C9D2E2;margin-top:12px;font-size:16px;}
.blist{display:grid;gap:10px;}
.bit{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;font-size:14px;color:#C9D2E2;}
.bit b{display:block;color:#fff;font-size:15px;margin-bottom:3px;}
@media(max-width:860px){.bilan{grid-template-columns:1fr;padding:28px 22px;}}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;padding:9px 16px;font-size:13px;line-height:1.2;text-decoration:none;}
.store b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;}
.store .mk{flex-shrink:0;color:#fff;line-height:0;}
.store .mk svg{width:22px;height:22px;display:block;}
.store .mk.pl svg{width:20px;height:20px;}






/* Egalisation, par la mesure : le bloc du bilan portait 36 px de marge
   haute en plus du retrait de section, et la suite du bilan n'avait aucun
   retrait haut. Les deux ecarts rejoignent les 159 px des autres. */
.bilan{margin-top:6px;}
section.wrap.suite{padding-top:0px;margin-top:-4px;}

/* --- l'agenda de la vitrine : une vue, pas une annonce --- */
.vag2{background:#fff;border-radius:14px;padding:18px 20px;margin-top:14px;box-shadow:0 1px 3px rgba(34,48,74,.08);}
.vag2 .tt{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid #EDEFF3;}
.vag2 .tt b{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;}
.vag2 .tt s{text-decoration:none;font-size:12.5px;color:var(--muted);}
.vag2 .tt em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--volet);}
.ag{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #F3F5F8;}
.ag:last-child{border-bottom:none;padding-bottom:0;}
.ag .dt{width:46px;flex-shrink:0;text-align:center;background:#E30613;border-radius:9px;padding:6px 0;}
/* #E30613 = C0 M100 J100 N0 converti en offset europeen (FOGRA39). La
   conversion naive donnerait #FF0000, dont le blanc pose dessus ne
   ressort qu'a 4,00 contre 1 -- sous le seuil AA. Ici : 4,88. */
.ag .dt b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1;color:#fff;}
.ag .dt s{display:block;text-decoration:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:2px;}
.ag .tx{flex:1;min-width:0;}
.ag .tx b{display:block;font-size:14px;}
.ag .tx span{display:block;font-size:12.5px;color:var(--gris);margin-top:1px;}
.ag .sec{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border-radius:99px;padding:3px 9px;flex-shrink:0;}
.pj{display:flex;align-items:center;gap:9px;margin-top:12px;background:#fff;border-radius:10px;padding:9px 11px;}
.pj u{width:26px;height:26px;border-radius:7px;background:var(--rouge);color:#fff;text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;font-family:'Bricolage Grotesque',sans-serif;}
.pj .tx b{display:block;font-size:12.5px;}
.pj .tx s{display:block;text-decoration:none;font-size:11px;color:var(--muted);}
/* Pastille de section sur les cartes de la vitrine. La charte l'exigeait deja
   -- « elle s'affiche partout : puce de la vitrine, pastille de la liste des
   annonces, ecran d'equipe » -- et elle manquait. La couleur du texte se
   calcule cote serveur : encre #22304A sur les sept teintes claires, blanc sur
   les sept foncees. Ici les trois sections utilisees sont foncees, d'ou le
   blanc ecrit en clair dans la maquette. Un evenement qui concerne toute
   l'association n'a pas de pastille : c'est le cas du vide-greniers et du mot
   du CEO avant l'AG. */
.vc .tt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;}
.vc .tt em{margin-top:0;}
.vc .vsec{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 9px;}
/* Saut de ligne entre les deux phrases de l'introduction des cercles.
   Un <br> ne fait qu'aller a la ligne ; ici il faut de l'air entre les deux,
   d'ou un bloc avec sa propre marge plutot qu'un second <br>. */
.cintro .l2{display:block;margin-top:14px;}
/* Les badges de stores quittent la barre du haut pour le canal
   « L'application ». En tete ils demandaient d'installer une appli a quelqu'un
   qui ne sait pas encore ce qu'est Assodio -- et ils disaient « Assodio est une
   appli », ce que la page passe justement a dementir : trois canaux, dont
   l'application n'est qu'un. Ici ils ne demandent plus rien, ils prouvent.
   Visibles a toutes les largeurs, contrairement a la variante .sm de la barre. */
.canaux .stores.ch{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.canaux .stores.ch .store{padding:5px 10px;gap:7px;font-size:9px;border-radius:9px;line-height:1.15;}
.canaux .stores.ch .store b{font-size:11.5px;}
.canaux .stores.ch .mk svg{width:15px;height:15px;}
.canaux .stores.ch .mk.pl svg{width:14px;height:14px;}
/* ============ PIED DE PAGE SUR FOND BLEU (choix de Patrick, 08/08) ============
   Le degrade est celui du hero pris a son extremite sombre : la page s'ouvre sur
   le clair (l'ecran du telephone) et se referme sur le fonce. Ce n'est pas un
   effet de style -- sur le haut du degrade d'origine (#3E5C8A) le point cyan du
   logo ne rendait que 2,84 contre 1. Sur #1B2740 il rend 6,26.
   Le point est en var(--cyan) #22B8CF : couleur de marque de la charte, § 1 bis,
   « c'est le point final -- c'est dit, c'est transmis ». Jamais jaune, jamais
   brique : la valeur ne se recopie pas a la main, elle vient de la variable.
   Contrastes mesures sur ce fond : blanc 14,88 - descriptions #C3CCDB 9,20 -
   ligne legale #9AA1AD 6,55. Tous au-dessus du seuil AA. */
footer.bfin{background:linear-gradient(168deg,#1B2740 0%,#151E31 55%,#101725 100%);
  margin-top:0;padding:46px 0 30px;text-align:center;color:#fff;}
footer.bfin .logo{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;
  line-height:1;color:#fff;letter-spacing:-.025em;}
footer.bfin .logo i{color:var(--cyan);font-style:normal;}
footer.bfin .bl{font-size:15px;color:#E9EDF4;margin-top:11px;}
footer.bfin a{text-decoration:none;color:#C3CCDB;}
footer.bfin a:hover{color:#fff;}
/* 3 colonnes : la derniere porte le texte le plus long et retombait sur deux
   lignes quand les deux autres en faisaient une. D'ou le 1,22. */
footer.bfin .args{display:grid;grid-template-columns:1fr 1fr 1.22fr;gap:30px;
  text-align:left;margin-top:28px;padding:24px 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
footer.bfin .a{display:flex;gap:12px;align-items:flex-start;}
footer.bfin .a svg{width:19px;height:19px;color:var(--jaune);flex-shrink:0;margin-top:1px;}
footer.bfin .a b{display:block;font-size:14px;font-weight:700;line-height:1.3;color:#fff;}
footer.bfin .a>span>span{display:block;font-size:12.5px;color:#C3CCDB;margin-top:4px;line-height:1.5;}
footer.bfin .lk{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;}
footer.bfin .id{font-size:11.5px;color:#9AA1AD;line-height:1.7;margin-top:18px;}
@media(max-width:820px){footer.bfin .args{grid-template-columns:1fr;gap:17px;}}
/* Barre du haut : tout etait tasse a droite. Le logo restait seul a gauche,
   puis 300 px de vide, puis les quatre elements colles les uns aux autres.
   On passe a trois zones : logo a gauche, liens CENTRES, bouton a droite.
   Le bouton sort donc du <nav> par le style (margin-left:auto sur lui seul)
   et les liens se centrent dans l'espace restant. */
.bar{display:flex;align-items:center;gap:20px;}
.bar .nav{flex:1;display:flex;align-items:center;justify-content:center;gap:38px;
  margin-left:0;}
.bar .nav a{white-space:nowrap;}
@media(max-width:1000px){.bar .nav{gap:22px;}}

/* Piege a robots du formulaire : hors de l'ecran plutot que display:none,
   qu'une partie des robots sait reconnaitre et ignorer. Et le bouton
   d'envoi est desormais un <button> : il portait la classe .btn en etant
   un <span>, donc il ne soumettait rien. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
button.btn{border:0;font:inherit;cursor:pointer;}

/* Grille tarifaire : on est passe de trois colonnes (abonnes / 1 an / 3 ans)
   a deux (abonnes / par mois). Sur toute la largeur de la carte, deux colonnes
   laissent 400 px de vide au milieu et le prix se retrouve a l'autre bout de
   la page que sa ligne. Borner la seule table cree un vide a droite DANS la
   carte, et la caler a gauche deplace le vide sans le supprimer : c'est la
   CARTE qu'on retrecit, pas la table. La table reprend donc toute sa largeur
   et le prix se retrouve aligne sur le bord droit de la note. Le nombre de
   lignes passe de 6 a 11 : on resserre la hauteur de ligne pour que la carte
   ne devienne pas une colonne. */
.prix{max-width:720px;}
.ptab td{padding:10px 14px;}
.ptab th{padding:0 14px 9px;}
/* === FIN DES SURCHARGES === */

/* --- Les styles qui etaient ecrits dans la page, un par valeur --- */
.i-1{height:5px;}
.i-2{height:7px;}
.i-3{height:9px;}
.i-4{height:11px;}
.i-5{background:var(--rouge);}
.i-6{background:var(--vert);}
.i-7{background:var(--violet);}
.i-8{width:54%;}
.i-9{width:31%;}
.i-10{background:var(--volet);}
.i-11{width:72%;}
.i-12{width:94%;}
.i-13{width:58%;}
.i-14{width:86%;}
.i-15{width:40%;}
.i-16{margin-top:14px;}
.i-17{background:var(--ink);}
.i-18{background:var(--jaune);}
.i-19{background:#00739D;color:#fff;}
.i-20{background:#874197;color:#fff;}
.i-21{height:6px;}
.i-22{height:17px;}
.i-23{height:21px;}
.i-24{height:14px;}
.i-25{height:8px;}
.i-26{height:19px;}
.i-27{height:12px;}
.i-28{height:22px;}
.i-29{height:16px;}
.i-30{height:10px;}
.i-31{height:20px;}
.i-32{height:13px;}
.i-33{height:18px;}
.i-34{height:15px;}
.i-35{background:#4F56B7;color:#fff;}
.i-36{width:64%;}
.i-37{width:27%;}
.i-38{width:9%;}
.i-39{background:#874197;}
.i-40{background:#4F56B7;}
.i-41{background:#2F6BB5;}
.i-42{background:#149DA8;}
.i-43{background:#C0532F;}