/* Avocats Ensemble — CNB 2026 · site statique. Jetons du design system ACE puis styles du site. */
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
/* Only an ITALIC regular was supplied; it is mapped to weight 400 italic. */
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
/* No upright Regular (400) file exists in the kit: 400 upright falls back to Light 300 metrics via the synthetic map below. */
@font-face{font-family:"Sailec";src:url("assets/fonts/Sailec-Light.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}


/* tokens/colors.css */
:root{
/* --- Brand primaries: the three pastel identity colours --- */
--cnb-yellow:#fcef8b;
--cnb-cyan:#a8eeff;
--cnb-pink:#f7bdff;
/* --- Ink & paper --- */
--cnb-ink:#1d1d1b;
--cnb-white:#ffffff;
/* --- Neutral ramp (derived from ink, for rules, muted copy and surfaces) --- */
--grey-900:#1d1d1b;
--grey-700:#4a4a48;
--grey-500:#7d7d7a;
--grey-300:#c9c9c6;
--grey-200:#e4e4e1;
--grey-100:#f3f3f1;
/* --- Tinted surfaces (10% brand over paper) --- */
--tint-yellow:#fefcec;
--tint-cyan:#f0fbff;
--tint-pink:#fef5ff;
/* --- Semantic aliases --- */
--text-body:var(--cnb-ink);
--text-muted:var(--grey-500);
--text-inverse:var(--cnb-white);
--text-link:var(--cnb-ink);
--surface-page:var(--cnb-white);
--surface-card:var(--cnb-white);
--surface-sunken:var(--grey-100);
--surface-inverse:var(--cnb-ink);
--border-hairline:var(--grey-200);
--border-strong:var(--cnb-ink);
--focus-ring:var(--cnb-ink);
/* --- Gradients: always a two-stop blend of two brand primaries --- */
--gradient-yellow-cyan:linear-gradient(90deg,var(--cnb-yellow) 0%,var(--cnb-cyan) 100%);
--gradient-yellow-pink:linear-gradient(90deg,var(--cnb-yellow) 0%,var(--cnb-pink) 100%);
--gradient-cyan-pink:linear-gradient(90deg,var(--cnb-cyan) 0%,var(--cnb-pink) 100%);
--gradient-tri:linear-gradient(120deg,var(--cnb-yellow) 0%,var(--cnb-cyan) 69%,var(--cnb-pink) 100%);
--gradient-diagonal-cyan-pink:linear-gradient(135deg,var(--cnb-cyan) 0%,var(--cnb-pink) 100%);
}


/* tokens/typography.css */
:root{
--font-core:"Sailec","Helvetica Neue",Arial,sans-serif;
--font-display:var(--font-core);
--font-body:var(--font-core);
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
/* weights actually available in the kit */
--weight-thin:100;
--weight-light:300;
--weight-medium:500;
--weight-bold:700;
/* type scale — 1.25 major third off a 16px base */
--text-3xs:11px;
--text-2xs:12px;
--text-xs:13px;
--text-sm:15px;
--text-md:17px;
--text-lg:21px;
--text-xl:26px;
--text-2xl:33px;
--text-3xl:42px;
--text-4xl:56px;
--text-5xl:76px;
--text-6xl:104px;
--leading-tight:0.98;
--leading-snug:1.14;
--leading-normal:1.45;
--leading-relaxed:1.6;
/* tracking: display is tightened, small caps-lock labels are opened up */
--tracking-display:-0.02em;
--tracking-normal:0;
--tracking-label:0.08em;
--tracking-button:0.05em;
/* semantic roles */
--type-display:var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h2:var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h3:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-display);
--type-lead:var(--weight-light) var(--text-lg)/var(--leading-normal) var(--font-body);
--type-body:var(--weight-light) var(--text-md)/var(--leading-normal) var(--font-body);
--type-small:var(--weight-light) var(--text-sm)/var(--leading-normal) var(--font-body);
--type-label:var(--weight-bold) var(--text-2xs)/1.2 var(--font-body);
--type-button:var(--weight-bold) var(--text-sm)/1 var(--font-body);
}


/* tokens/spacing.css */
:root{
/* The identity is drawn on a square module: 75px, halving to 37.5 and doubling to 150.
   Interface spacing is a 4px ramp inside that module. */
--module:75px;
--module-half:37.5px;
--module-2x:150px;
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:150px;
--gutter:24px;
--page-max:1200px;
--page-pad:32px;
/* Radii: the brand is hard-edged. Squares stay square; only pills are round. */
--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-pill:999px;
--radius-module:75px;
--border-width:1px;
--border-width-strong:2px;
}


/* tokens/effects.css */
:root{
/* Shadows are used sparingly — the identity relies on flat colour and hard edges.
   Only overlays (dialogs, menus) get a shadow. */
--shadow-none:none;
--shadow-raised:0 1px 0 0 var(--grey-200);
--shadow-overlay:0 24px 48px -12px rgba(29,29,27,0.22);
--shadow-focus:0 0 0 2px var(--cnb-white),0 0 0 4px var(--cnb-ink);
/* Motion: short, linear-ish, no bounce. */
--ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:400ms; /* @kind other */
--transition-base:all var(--duration-base) var(--ease-standard);
/* Frosted overlay used over gradient graphics */
--blur-overlay:blur(12px); /* @kind other */
--scrim-ink:rgba(29,29,27,0.55);
--scrim-paper:rgba(255,255,255,0.72);
}


/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);text-wrap:pretty}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2);letter-spacing:var(--tracking-display)}
h3{font:var(--type-h3)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--cnb-ink);transition:opacity var(--duration-fast) var(--ease-standard)}
a:hover{opacity:.6}
strong{font-weight:var(--weight-bold)}
em{font-style:italic;font-weight:400}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--cnb-cyan);color:var(--cnb-ink)}


/* ====================================================================
   Avocats Ensemble — CNB 2026 · feuille de style du site statique
   Écrite par-dessus les jetons du design system ACE (voir le début du
   fichier site.css généré). Aucun JavaScript : les états (menu mobile,
   fenêtre « Je vote », sous-menu, apparitions au défilement) sont
   obtenus en CSS seul.
   ==================================================================== */

/* --- Base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--cnb-white);color:var(--cnb-ink);font:var(--type-body);font-family:var(--font-core);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--cnb-ink);text-decoration:none;border-bottom:none}
a:hover{opacity:.6}
a.cnb-plain:hover,a:has(.btn):hover,label:hover{opacity:1}
:focus-visible{outline:2px solid var(--cnb-ink);outline-offset:2px}
.cnb-page{min-height:100vh;width:100%;display:flex;flex-direction:column;font-family:var(--font-core)}
.cnb-main{flex:1}
.cnb-sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.cnb-eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

/* --- Apparitions au défilement (CSS seul) -------------------------- */
@keyframes cnbReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cnbWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-reveal]{animation:cnbReveal 1ms linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    [data-wipe]{animation:cnbWipe 1ms linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
  }
}

/* --- Boutons (design system ACE) ----------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:0;border-radius:var(--radius-pill);font:var(--type-button);letter-spacing:var(--tracking-button);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:opacity var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.btn-sm{padding:8px 20px;font-size:var(--text-2xs);min-height:32px}
.btn-md{padding:13px 32px;font-size:var(--text-sm);min-height:44px}
.btn-lg{padding:20px 44px;font-size:var(--text-md);min-height:60px}
.btn-full{width:100%}
.btn-nowrap{white-space:nowrap}
.btn-grad-yellow-cyan{background:var(--gradient-yellow-cyan);color:var(--cnb-ink)}
.btn-grad-yellow-pink{background:var(--gradient-yellow-pink);color:var(--cnb-ink)}
.btn-grad-cyan-pink{background:var(--gradient-cyan-pink);color:var(--cnb-ink)}
.btn-grad-yellow-cyan:hover,.btn-grad-yellow-pink:hover,.btn-grad-cyan-pink:hover{opacity:.75}
.btn-grad-yellow-cyan:active,.btn-grad-yellow-pink:active,.btn-grad-cyan-pink:active{opacity:.6;transform:translateY(1px)}
.btn-outline{background:transparent;color:var(--cnb-ink);box-shadow:inset 0 0 0 var(--border-width-strong) var(--cnb-ink)}
.btn-outline:hover{background:var(--cnb-ink);color:var(--text-inverse)}
.btn-outline:active{transform:translateY(1px)}
.btn-solid{background:var(--cnb-ink);color:var(--text-inverse)}
.btn-solid:hover{background:var(--grey-700)}
.btn-solid:active{background:var(--grey-900)}
@media (max-width:420px){.btn-lg{padding:18px 28px}.btn-md{padding:13px 24px}}

/* --- Champs de formulaire ------------------------------------------ */
.cnb-field{display:flex;flex-direction:column;gap:var(--space-2)}
.cnb-field-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.cnb-field-input{width:100%;background:var(--cnb-white);border:var(--border-width) solid var(--grey-300);border-radius:var(--radius-none);padding:12px 14px;font:var(--type-body);font-family:var(--font-core);color:var(--text-body);outline:none;transition:border-color var(--duration-fast) var(--ease-standard);min-height:44px}
.cnb-field-input:focus{border-color:var(--cnb-ink);box-shadow:inset 0 0 0 1px var(--cnb-ink)}
.cnb-field-hint{font:var(--type-small);font-size:var(--text-2xs);color:var(--text-muted)}
.cnb-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;min-height:44px}
.cnb-check input{position:absolute;opacity:0;width:0;height:0}
.cnb-check-box{flex:0 0 auto;width:22px;height:22px;margin-top:2px;background:var(--cnb-white);border:var(--border-width-strong) solid var(--cnb-ink);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-standard)}
.cnb-check-box::after{content:"";width:11px;height:6px;border-left:2px solid var(--cnb-white);border-bottom:2px solid var(--cnb-white);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.cnb-check input:checked+.cnb-check-box{background:var(--cnb-ink)}
.cnb-check input:checked+.cnb-check-box::after{opacity:1}
.cnb-check-label{font:var(--type-body);font-size:var(--text-sm);color:var(--text-body);padding-top:3px}

/* --- En-tête -------------------------------------------------------- */
.cnb-header-slot{position:sticky;top:0;z-index:40;min-height:142px}
.cnb-site-header{position:relative;background:var(--cnb-white);border-bottom:1px solid var(--border-hairline);font-family:var(--font-core)}
.cnb-bar{max-width:1200px;margin:0 auto;padding:16px clamp(16px,4vw,32px);height:109px;box-sizing:content-box;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap}
.cnb-logo-mark{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;min-width:0;text-decoration:none}
.cnb-logo-img{width:135px;height:auto;display:block}
.cnb-logo-text{font-family:var(--font-core);font-weight:var(--weight-medium);font-size:20px;line-height:25px;color:var(--cnb-ink);white-space:nowrap}
.cnb-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap;flex:0 0 auto}
.cnb-navtext-group{display:flex;align-items:center;gap:2px}
.cnb-nav-item{position:relative}
.cnb-navlink{font-family:var(--font-core);font-size:19px;font-weight:300;letter-spacing:0;padding:10px 14px;color:var(--cnb-ink);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;white-space:nowrap;flex:none}
.cnb-navlink:hover{opacity:.6}
body[data-page="programme"] .cnb-nav-programme,
body[data-page="candidats"] .cnb-nav-candidats,
body[data-page="contact"] .cnb-nav-contact{border-bottom-color:var(--cnb-ink);font-weight:700}
.cnb-nav-gap{width:20px;flex:none}
.cnb-nav-gap-sm{width:10px}

.cnb-submenu{position:absolute;top:100%;left:0;min-width:280px;background:var(--cnb-white);border:1px solid var(--border-hairline);box-shadow:var(--shadow-overlay);z-index:50;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 200ms var(--ease-standard),transform 200ms var(--ease-standard)}
.cnb-nav-item:hover .cnb-submenu,.cnb-nav-item:focus-within .cnb-submenu{opacity:1;visibility:visible;transform:none}
.cnb-sub-link{display:block;padding:16px 20px;border-bottom:1px solid var(--border-hairline);text-decoration:none}
.cnb-sub-link:hover{background:var(--grey-100);opacity:1}
.cnb-sub-last{border-bottom:0}
.cnb-sub-eyebrow{display:block;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.cnb-sub-title{display:block;font:var(--weight-medium) 15px/1.3 var(--font-core);color:var(--cnb-ink)}

.cnb-burger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;flex:none}
.cnb-burger span{display:block;width:24px;height:2px;background:var(--cnb-ink);transition:transform 200ms var(--ease-standard),opacity 150ms linear}
#cnb-nav:checked ~ .cnb-bar .cnb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#cnb-nav:checked ~ .cnb-bar .cnb-burger span:nth-child(2){opacity:0}
#cnb-nav:checked ~ .cnb-bar .cnb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.cnb-mobile-panel{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cnb-white);box-shadow:var(--shadow-overlay);z-index:39;max-height:calc(100vh - 112px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 200ms var(--ease-standard),transform 200ms var(--ease-standard)}
#cnb-nav:checked ~ .cnb-mobile-panel{opacity:1;visibility:visible;transform:none}
.cnb-mob-link{display:block;padding:18px clamp(16px,4vw,32px);border-top:1px solid var(--border-hairline);font:var(--weight-bold) 18px/1.2 var(--font-core)}
.cnb-mob-sub{display:block;padding:14px clamp(16px,4vw,32px) 14px calc(clamp(16px,4vw,32px) + 18px);border-top:1px solid var(--border-hairline)}
.cnb-mob-sub .cnb-sub-title{font-weight:var(--weight-medium)}
.cnb-mob-ctas{display:flex;flex-direction:column;gap:12px;padding:20px clamp(16px,4vw,32px) 24px;border-top:1px solid var(--border-hairline)}
.cnb-mob-vote{display:block;cursor:pointer}

.cnb-vote-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,32px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms var(--ease-standard)}
#cnb-vote:checked ~ .cnb-vote-modal{opacity:1;visibility:visible;pointer-events:auto}
.cnb-vote-scrim{position:absolute;inset:0;background:var(--scrim-ink,rgba(29,29,27,.55));cursor:pointer}
.cnb-vote-panel{position:relative;width:100%;max-width:520px;background:var(--cnb-white);border:1px solid var(--border-hairline);box-shadow:var(--shadow-overlay);text-align:left;transform:translateY(8px);transition:transform 200ms var(--ease-standard);max-height:calc(100vh - 2*clamp(16px,4vw,32px));overflow-y:auto}
#cnb-vote:checked ~ .cnb-vote-modal .cnb-vote-panel{transform:none}
.cnb-vote-rule{height:8px;background:var(--gradient-tri)}
.cnb-vote-close{position:absolute;top:18px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font:var(--weight-light) 26px/1 var(--font-core);color:var(--cnb-ink)}
.cnb-vote-close:hover{opacity:.6}
.cnb-vote-body{padding:clamp(28px,4vw,40px)}
.cnb-vote-title{font:var(--weight-bold) clamp(24px,3.2vw,32px)/1.1 var(--font-core);letter-spacing:var(--tracking-display);margin:16px 0 14px;max-width:24ch;text-wrap:pretty}
.cnb-vote-text{font:var(--type-body);color:var(--text-muted);margin:0;max-width:44ch;text-wrap:pretty}
.cnb-vote-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Paliers de l'en-tête : la barre garde une seule ligne à toutes les largeurs. */
@media (max-width:1180px){.cnb-cta-duplicate{display:none}}
@media (max-width:1010px){.cnb-navlink{font-size:16px;padding:8px 9px}}
@media (max-width:840px){.cnb-navlink{font-size:14px;padding:6px 6px}}
@media (max-width:700px){
  .cnb-header-slot{min-height:112px}
  .cnb-bar{height:95px;padding-top:8px;padding-bottom:8px}
  .cnb-navtext-group{display:none}
  .cnb-burger{display:inline-flex}
  .cnb-mobile-panel{display:block}
  .cnb-logo-text{font-size:16px;line-height:20px}
  .cnb-logo-img{width:120px}
  .cnb-submenu{left:auto;right:0;min-width:min(88vw,320px)}
}
@media (max-width:480px){.cnb-bar{gap:8px}}
@media (max-width:420px){.cnb-logo-text{font-size:14px;line-height:18px}.cnb-logo-img{width:104px}}

/* --- Pied de page --------------------------------------------------- */
.cnb-site-footer{background:var(--cnb-ink);color:var(--cnb-white);font-family:var(--font-core)}
.cnb-footer-rule{height:8px;background:var(--gradient-tri)}
.cnb-footer-grid{max-width:1200px;margin:0 auto;padding:72px clamp(16px,4vw,32px) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(32px,5vw,56px)}
.cnb-footer-logo{width:120px;height:auto;display:block;filter:invert(1)}
.cnb-footer-baseline{font:var(--type-small);opacity:.6;max-width:34ch;margin:24px 0 0;text-wrap:pretty}
.cnb-footer-col{display:flex;flex-direction:column;gap:14px}
.cnb-footer-head{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.5}
.cnb-footer-link{color:var(--cnb-white);font:var(--type-small);text-decoration:none}
.cnb-footer-info{font:var(--type-small);opacity:.75}
.cnb-footer-legal{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 48px;display:flex;flex-wrap:wrap;gap:8px;font:var(--type-small);font-size:var(--text-2xs);opacity:.45}
.cnb-footer-legal-link{color:var(--cnb-white)}

/* --- Réglages responsive des pages --------------------------------- */
@media (max-width:730px){.cnb-portrait{position:static!important;top:auto!important}.cnb-portrait-first{order:-1}}
@media (max-width:700px){.cnb-stats{grid-template-columns:1fr 1fr!important}.cnb-stats>div{padding:36px 12px!important}}

/* --- Sommaire (index.html) ----------------------------------------- */
.idx-wrap{max-width:1000px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(16px,4vw,32px) clamp(64px,9vw,104px)}
.idx-title{font:var(--weight-bold) clamp(32px,5vw,56px)/1 var(--font-core);letter-spacing:var(--tracking-display);margin:28px 0 12px}
.idx-lead{font:var(--type-lead);color:var(--text-muted);margin:0 0 48px;max-width:60ch;text-wrap:pretty}
.idx-group{margin:0 0 40px}
.idx-group-head{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px;border-bottom:1px solid var(--border-hairline)}
.idx-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--border-hairline)}
.idx-row:hover{opacity:1;background:var(--grey-100)}
.idx-name{font:var(--weight-medium) 19px/1.3 var(--font-core)}
.idx-file{font:var(--type-small);font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap}
.idx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 32px}