/* ==========================================================================
   Section Crosses & consoles (/crosses-consoles/) — maquettes A (galerie), B (fiche), C (mobile)
   Pages générées par tools/build-crosses.py ; header/footer : css/site.css.
   Charte : navy #22303f, olive #5b7a1d, anis #a9c93b, fond #f4f5ef ; Hanken Grotesk + JetBrains Mono (@font-face ci-dessous, fichiers dans /fonts/).
   ========================================================================== */

/* Polices de la section Crosses & consoles (auto-hébergées, extraites de Google Fonts le 01/11/2026) :
   Hanken Grotesk 800 et JetBrains Mono 400/500 (SIL OFL), sous-ensembles latin + latin-ext. Aucune requête externe. */

/* Hanken Grotesk 800 · latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk 800 · latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 400 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 400 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 500 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 500 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cc{
  --cc-navy:#22303f;--cc-olive:#5b7a1d;--cc-anis:#a9c93b;--cc-bg:#f4f5ef;--cc-line:#d6dacb;--cc-line-2:#eef0e8;--cc-line-3:#e4e7dc;
  --cc-muted:#5f6874;--cc-text:#46525f;--cc-soft:#c9d2df;--cc-chip:#eef3dc;--cc-chip-ink:#3f5512;
  --cc-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cc-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  background:var(--cc-bg);color:var(--cc-navy);font-family:var(--cc-sans)
}
.cc main a{color:var(--cc-olive)}
.cc main a:hover{color:var(--cc-navy)}
.cc-wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}
.cc-sec{padding-top:64px}
.cc-tag{font-family:var(--cc-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cc-olive);margin:0 0 10px}
.cc-tag--anis{color:var(--cc-anis)}
.cc-h2{margin:0 0 28px;font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.cc-h2--tight{margin:0}
.cc-h3{margin:0;font-size:28px;font-weight:800;line-height:1.15}
.cc-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cc-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--cc-muted)}

/* boutons */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.2 var(--cc-sans);padding:15px 24px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cc main a.cc-btn--anis,.cc-btn--anis{background:var(--cc-anis);color:var(--cc-navy)}
.cc main a.cc-btn--anis:hover,.cc-btn--anis:hover{background:#bcd766;color:var(--cc-navy)}
.cc main a.cc-btn--line,.cc-btn--line{border-color:var(--cc-navy);color:var(--cc-navy);background:transparent;font-weight:600}
.cc main a.cc-btn--line:hover,.cc-btn--line:hover{background:var(--cc-navy);color:#fff}
.cc main a.cc-btn--line-dark{border-color:rgba(255,255,255,.5);color:#fff;font-weight:600}
.cc main a.cc-btn--line-dark:hover{background:rgba(255,255,255,.1);color:#fff}
.cc-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--cc-olive);text-decoration:underline;cursor:pointer}
.cc-badge{display:inline-block;background:var(--cc-chip);color:var(--cc-chip-ink);font-size:12px;font-weight:700;padding:5px 10px}

/* ---------- hero ---------- */
.cc-hero{position:relative;overflow:hidden;background:var(--cc-navy);color:#fff}
.cc-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.cc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cc-navy) 30%,rgba(34,48,63,.35))}
.cc-hero__inner{position:relative;z-index:1;padding-top:84px;padding-bottom:72px;display:flex;flex-direction:column;gap:20px}
.cc-hero__eyebrow{font-size:13px;letter-spacing:3px;margin:0}
.cc-hero h1{margin:0;font-size:60px;line-height:1.02;font-weight:800;max-width:820px;letter-spacing:-.015em;color:#fff}
.cc-hero h1 span{color:var(--cc-anis)}
.cc-hero__lead{margin:0;font-size:19px;line-height:1.55;color:var(--cc-soft);max-width:600px}
.cc-hero__stats{display:flex;flex-wrap:wrap;gap:36px;margin-top:10px}
.cc-stat{margin:0;font-size:38px;font-weight:800;color:var(--cc-anis);line-height:1}
.cc-stat__l{margin:4px 0 0;font-size:14px;color:var(--cc-soft)}

/* ---------- familles ---------- */
.cc-fam{position:relative;min-height:300px;display:flex;flex-direction:column;overflow:hidden;background:var(--cc-navy);text-decoration:none;transition:transform .2s,box-shadow .2s}
.cc main a.cc-fam,.cc main a.cc-fam:hover{color:#fff}
.cc-fam:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(34,48,63,.14)}
.cc-fam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cc-fam__body{position:relative;margin-top:auto;padding:26px;background:linear-gradient(180deg,transparent,rgba(34,48,63,.95))}
.cc-fam__body .cc-tag{margin:0 0 6px}
.cc-fam__title{margin:0;font-size:26px;font-weight:800}
.cc-fam__text{margin:6px 0 0;font-size:14px;color:var(--cc-soft)}

/* ---------- galerie ---------- */
.cc-gal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.cc-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--cc-line);padding:0 14px;min-width:300px}
.cc-search:focus-within{border-color:var(--cc-navy)}
.cc-search input{flex:1;border:0;outline:0;background:transparent;font:15px var(--cc-sans);color:var(--cc-navy);padding:12px 0;min-width:0}
.cc-search input::placeholder{color:var(--cc-muted)}
.cc-filters{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.cc-frow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cc-flabel{margin:0 6px 0 0}
.cc-flabel--gap{margin-left:18px}
.cc-fgroup{display:contents}
.cc-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--cc-line);background:#fff;font:600 14px var(--cc-sans);color:var(--cc-navy);cursor:pointer;white-space:nowrap}
.cc-chip:hover{border-color:var(--cc-navy)}
.cc-chip.on{background:var(--cc-navy);color:#fff;border-color:var(--cc-navy)}
.cc-gal-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cc-count{margin:0;font-size:14px;color:var(--cc-muted)}
.cc-sort{font-size:14px;color:var(--cc-muted);display:flex;align-items:center;gap:8px}
.cc-sort select{font:600 14px var(--cc-sans);color:var(--cc-navy);border:1px solid var(--cc-line);background:#fff;padding:8px 10px}
.cc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.js .cc-grid .cc-card.is-hidden{display:none}
.cc-card{background:#fff;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.cc main a.cc-card,.cc main a.cc-card:hover{color:var(--cc-navy)}
.cc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(34,48,63,.14)}
.cc-card__img{background:#fff;padding:14px;height:220px;display:flex;align-items:center;justify-content:center}
.cc-card__img img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}
/* Valmont : vignette d'origine fond ciel en plein cadre (maquette A) ; Ragni : rendu centré sur blanc */
.cc-card--ciel .cc-card__img{padding:0;background:#5b8fc7}
.cc-card--ciel .cc-card__img img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.cc-card__none{font-family:var(--cc-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cc-muted)}
.cc-card__body{padding:16px 18px 18px;border-top:1px solid var(--cc-line-2)}
.cc-card__body .cc-tag{margin:0 0 4px}
.cc-card__name{margin:0;font-size:20px;font-weight:800}
.cc-card__meta{margin:4px 0 0;font-size:13px;color:var(--cc-muted);line-height:1.45}
.cc-grid--sim .cc-card__img{height:180px}
.cc-grid--sim .cc-card__name{font-size:18px}
.cc-empty{padding:28px;background:#fff;text-align:center;color:var(--cc-text)}
.cc-more-wrap{display:flex;justify-content:center;margin-top:32px}
.cc-more-wrap[hidden]{display:none}

/* ---------- en situation ---------- */
.cc-situ{position:relative;height:320px;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;background:var(--cc-navy)}
.cc main a.cc-situ,.cc main a.cc-situ:hover{color:#fff}
.cc-situ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cc-situ:hover img{transform:scale(1.03)}
.cc-situ__cap{position:relative;margin-top:auto;padding:22px;background:linear-gradient(180deg,transparent,rgba(34,48,63,.9))}
.cc-situ__title{margin:0;font-size:18px;font-weight:800}
.cc-situ__sub{margin:3px 0 0;font-size:13px;color:var(--cc-soft)}

/* ---------- appel à l'étude ---------- */
.cc-cta-sec{padding-top:72px;padding-bottom:96px}
.cc-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--cc-navy);color:#fff}
.cc-cta__text{padding:48px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.cc-cta h2{margin:0;font-size:34px;font-weight:800;color:#fff}
.cc-cta p{margin:0;font-size:17px;line-height:1.6;color:var(--cc-soft)}
.cc-cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cc-cta p.cc-cta__mail{font-size:13px}
.cc main .cc-cta__mail a{color:var(--cc-anis)}
.cc-cta img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block;background:#2e3e50}
.cc-cta:not(:has(img)){grid-template-columns:1fr}

/* ---------- fiche ---------- */
.cc-fiche{padding-top:40px}
.cc-crumb{margin:0 0 18px;font-size:13px;color:var(--cc-muted)}
.cc main .cc-crumb a{color:var(--cc-muted);text-decoration:none}
.cc main .cc-crumb a:hover{color:var(--cc-navy);text-decoration:underline}
.cc-crumb [aria-current]{color:var(--cc-navy);font-weight:600}
.cc-fiche__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.cc-fiche__media{display:flex;flex-direction:column;gap:14px}
.cc-view{position:relative;background:#fff;height:520px;display:flex;align-items:center;justify-content:center;padding:40px;border:0;cursor:zoom-in;width:100%}
.cc-view img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cc-view.is-photo{padding:0}
.cc-view.is-ciel{padding:0;height:auto;aspect-ratio:4/3;background:#5b8fc7}
.cc-view.is-ciel img{width:100%;height:100%;max-height:none;object-fit:cover}
.cc-view.is-photo img{width:100%;height:100%;max-height:none;object-fit:cover}
.cc-view__badge{position:absolute;left:18px;top:18px}
.cc-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cc-thumb{height:96px;overflow:hidden;border:0;padding:0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cc-thumb img{width:100%;height:100%;object-fit:cover}
.cc-thumb--prod img{width:auto;max-height:80px;object-fit:contain}
.cc-thumb.is-on{outline:2px solid var(--cc-anis);outline-offset:-2px}
.cc-thumb--more{background:var(--cc-navy);color:#fff;font:700 15px var(--cc-sans)}
.cc-fiche__info{display:flex;flex-direction:column;gap:18px}
.cc-fiche__tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cc-fiche__tags .cc-tag{margin:0}
.cc-fiche h1{margin:0;font-size:56px;line-height:1;font-weight:800;letter-spacing:-.015em;color:var(--cc-navy)}
.cc-fiche__desc{margin:0;font-size:18px;line-height:1.55;color:var(--cc-text)}
.cc-quote{margin:0;padding:4px 0 4px 18px;border-left:3px solid var(--cc-anis)}
.cc-quote p{margin:0;font-size:15px;line-height:1.6;color:var(--cc-text)}
.cc-quote footer{margin-top:6px;font-family:var(--cc-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cc-muted)}
.cc-specs{background:#fff;padding:6px 22px 2px}
.cc-spec{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--cc-line-3);font-size:15px}
.cc-spec:last-child{border-bottom:0}
.cc-spec__k{color:var(--cc-muted);flex:none}
.cc-spec__v{font-weight:600;text-align:right}
.cc-spec__v--sd{color:var(--cc-muted);font-weight:500;font-style:italic}
.cc-spec__v--av{color:#8a5a00;font-weight:600}
.cc-fiche__actions{display:flex;flex-wrap:wrap;gap:12px}
.cc-fiche .cc-note{margin:0}
.cc-gtile{height:280px;overflow:hidden;border:0;padding:0;cursor:zoom-in;background:var(--cc-navy)}
.cc-gtile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cc-gtile:hover img{transform:scale(1.03)}
.cc-compo{background:#fff;padding:32px;display:flex;flex-direction:column;gap:18px}
.cc-compo .cc-tag{margin:0}
.cc-compo__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cc-compo__item{border:1px solid var(--cc-line-3);padding:18px;display:flex;flex-direction:column;gap:8px}
.cc-compo__item--on{border:2px solid var(--cc-anis)}
.cc-compo__v{margin:0;font-size:17px;font-weight:700}
.cc-compo__s{margin:0;font-size:13px;color:var(--cc-muted)}
.cc-compo__note{margin:0;font-size:14px;color:var(--cc-text)}

/* plein écran */
.cc-lb{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100vh;background:rgba(18,26,35,.96);color:#fff}
.cc-lb[open]{display:flex;align-items:center;justify-content:center}
.cc-lb::backdrop{background:rgba(18,26,35,.9)}
.cc-lb__img{max-width:calc(100vw - 160px);max-height:calc(100vh - 120px);object-fit:contain;background:#fff}
.cc-lb__img.is-photo{background:transparent}
.cc-lb__close,.cc-lb__nav{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;font:400 32px/1 var(--cc-sans);width:52px;height:52px;cursor:pointer}
.cc-lb__close{top:18px;right:18px}
.cc-lb__prev{left:18px;top:50%;transform:translateY(-50%)}
.cc-lb__next{right:18px;top:50%;transform:translateY(-50%)}
.cc-lb__cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;margin:0;font-size:14px;color:var(--cc-soft)}

/* ---------- encart « Choisir sa crosse » (pages Éclairage public, Mâts & supports : leur propre feuille) ---------- */

/* ---------- tablette ---------- */
@media (max-width:1100px){
  .cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-hero h1{font-size:48px}
  .cc-fiche h1{font-size:46px}
}
@media (max-width:900px){
  .cc-g3,.cc-grid,.cc-compo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-fiche__grid,.cc-cta{grid-template-columns:1fr}
  .cc-cta img{min-height:0;height:260px}
  .cc-view{height:420px}
}
/* ---------- mobile (maquette C) ---------- */
@media (max-width:640px){
  .cc-wrap{padding-left:18px;padding-right:18px}
  .cc-sec{padding-top:40px}
  .cc-h2{font-size:26px;margin-bottom:18px}
  .cc-hero__inner{padding-top:28px;padding-bottom:26px;gap:12px}
  .cc-hero__bg{opacity:.22}
  .cc-hero__eyebrow{font-size:10px;letter-spacing:1.5px}
  .cc-hero h1{font-size:34px;line-height:1.05}
  .cc-hero h1 br{display:none}
  .cc-hero__lead{font-size:14px;line-height:1.5}
  .cc-hero__stats{gap:18px}
  .cc-stat{font-size:28px}
  .cc-stat__l{font-size:12px}
  .cc-tag{font-size:10px}
  .cc-g3{grid-template-columns:1fr;gap:12px}
  .cc-fam{min-height:200px}
  .cc-fam__title{font-size:22px}
  .cc-gal-head{margin-bottom:10px}
  .cc-search{min-width:0;width:100%;padding:0 12px}
  .cc-filters{gap:0;margin:0 -18px 14px;padding:10px 18px 4px;flex-direction:row;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .cc-filters::-webkit-scrollbar{display:none}
  .cc-frow{flex-wrap:nowrap;gap:8px;padding-right:8px}
  .cc-flabel{margin:0 0 0 14px;font-size:10px;white-space:nowrap}
  .cc-frow:first-child .cc-flabel:first-child{margin-left:0}
  .cc-chip{padding:9px 13px;font-size:13px}
  .cc-grid{gap:12px}
  .cc-card__img{height:140px;padding:12px}
  .cc-card__body{padding:10px 12px}
  .cc-card__name{font-size:16px}
  .cc-card__meta{font-size:12px}
  .cc-card .cc-tag{font-size:10px}
  .cc-more-wrap{margin-top:16px}
  .cc-more-wrap .cc-btn{width:100%}
  .cc-situ{height:200px}
  .cc-cta-sec{padding-top:40px;padding-bottom:48px;padding-left:0;padding-right:0}
  .cc-cta__text{padding:24px 18px}
  .cc-cta h2{font-size:22px}
  .cc-cta p{font-size:14px}
  .cc-cta__actions .cc-btn{width:100%}
  .cc-cta img{display:none}
  .cc-fiche{padding-top:20px}
  .cc-fiche h1{font-size:38px}
  .cc-fiche__desc{font-size:16px}
  .cc-view{height:320px;padding:20px}
  .cc-thumb{height:72px}
  .cc-specs{padding:4px 16px 0}
  .cc-spec{font-size:14px}
  .cc-fiche__actions .cc-btn{width:100%}
  .cc-gtile{height:220px}
  .cc-compo{padding:20px}
  .cc-compo__grid{grid-template-columns:1fr}
  .cc-h3{font-size:22px}
  .cc-lb__img{max-width:100vw;max-height:calc(100vh - 140px)}
  .cc-lb__prev,.cc-lb__next{top:auto;bottom:50px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cc-card,.cc-fam,.cc-situ img,.cc-gtile img{transition:none}
}