/* SFI V10 — composants communs : maturité des modules, photos créditées, bandeau de veille, plateforme. */
.mat{display:inline-flex;align-items:center;gap:6px;font:600 .68rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:6px 10px;white-space:nowrap}
.mat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mat-ok{background:#E3F1E9;color:#1E6B48}
.mat-demo{background:#FFF3D6;color:#8A6410}
.mat-prep{background:#E7ECF5;color:#2B4A80}
.mat-ext{background:#F1E9F4;color:#6B3F7C}
.matlegend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:18px 0 6px;font:400 .86rem/1.4 var(--f-ui);color:var(--muted)}
.matlegend span{display:inline-flex;align-items:center;gap:8px}

.plat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plat-card{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px 22px;box-shadow:var(--sh-1)}
.plat-card::before{content:"";position:absolute;left:22px;top:0;width:44px;height:3px;background:var(--or)}
.plat-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.plat-card h3{font-size:1.2rem;font-weight:600;color:var(--nuit);line-height:1.2}
.plat-card .prom{font:500 1rem/1.4 var(--f-ed);color:var(--nuit)}
.plat-card dl{display:grid;gap:8px;margin:2px 0 4px}
.plat-card dt{font:600 .68rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.plat-card dd{font:400 .92rem/1.5 var(--f-ui);color:var(--ink);margin:0}
.plat-card .go{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){.plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plat-grid{grid-template-columns:1fr}}

.road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:rd}
.road li{list-style:none;position:relative;background:#fff;border:1px solid var(--line);border-top:3px solid var(--or);border-radius:var(--r-m,10px);padding:16px 16px 14px;font:400 .92rem/1.45 var(--f-ui)}
.road li b{display:block;font:600 1rem/1.25 var(--f-ed);color:var(--nuit);margin-bottom:4px}
@media (max-width:900px){.road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.road{grid-template-columns:1fr}}

/* photos : toujours créditées, repli sur l'illustration si le chargement échoue */
.ph{position:relative;margin:0;overflow:hidden;background:#0E2A5C}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;right:0;bottom:0;max-width:100%;padding:4px 9px;font:400 .62rem/1.3 var(--f-ui);color:rgba(255,255,255,.88);background:linear-gradient(90deg,rgba(11,37,69,0),rgba(11,37,69,.72));text-align:right}
.ph figcaption a{color:inherit;text-decoration:underline}
.ph-band{border-radius:var(--r-l);aspect-ratio:21/6;min-height:160px;box-shadow:var(--sh-1)}
@media (max-width:640px){.ph-band{aspect-ratio:16/9}}

/* bandeau de veille de l'accueil */
.newsstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ns-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 16px;box-shadow:var(--sh-1);color:inherit;transition:transform .2s,box-shadow .2s}
a.ns-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ns-card .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 .68rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ns-card .cc{background:var(--nuit);color:#fff;border-radius:4px;padding:4px 7px}
.ns-card .st{color:var(--or)}
.ns-card h3{font:600 1.02rem/1.3 var(--f-ed);color:var(--nuit)}
.ns-card p{font:400 .88rem/1.45 var(--f-ui);color:var(--muted)}
@media (max-width:900px){.newsstrip{grid-template-columns:1fr}}

/* pôles de l'accueil */
.pole-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pole{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:18px;color:inherit;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s}
a.pole:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pole i{flex:0 0 44px;height:44px;border-radius:12px;background:var(--nuit);display:grid;place-items:center}
.pole i svg{width:24px;height:24px;stroke:var(--or-clair);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pole b{display:block;font:600 1.02rem/1.25 var(--f-ed);color:var(--nuit);margin-bottom:3px}
.pole span{font:400 .88rem/1.45 var(--f-ui);color:var(--muted)}
@media (max-width:980px){.pole-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pole-grid{grid-template-columns:1fr}}

/* mosaïque photo des territoires */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
.mosaic a{position:relative;display:block;border-radius:var(--r-m,12px);overflow:hidden;background:#0E2A5C;color:#fff;box-shadow:var(--sh-1)}
.mosaic a.w2{grid-column:span 2}.mosaic a.w3{grid-column:span 3}.mosaic a.h2{grid-row:span 2}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mosaic a:hover img{transform:scale(1.04)}
.mosaic a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,0) 40%,rgba(11,37,69,.82))}
.mosaic b{position:absolute;left:14px;bottom:12px;z-index:1;font:500 1.15rem/1.1 var(--f-ed)}
.mosaic small{position:absolute;left:14px;bottom:34px;z-index:1;font:600 .62rem/1 var(--f-ui);letter-spacing:.16em;color:var(--or-clair)}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:120px}.mosaic a.w2,.mosaic a.w3{grid-column:span 1}.mosaic a.h2{grid-row:span 1}}

/* cartes de territoire avec scène illustrée */
.hm-ccard.has-scene{min-height:270px;background:#0B2545}
.hm-ccard.has-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hm-ccard.has-scene:hover>img{transform:scale(1.05)}
.hm-ccard.has-scene::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,26,50,.82) 0%,rgba(8,26,50,.35) 46%,rgba(8,26,50,0) 70%)}
.hm-ccard.has-scene .in{z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hm-ccard.has-scene.pri::after{z-index:3}
@media (prefers-reduced-motion:reduce){.hm-ccard.has-scene>img{transition:none}.hm-ccard.has-scene:hover>img{transform:none}}
