/* inspiration.css — page « Inspiration », 1er oct. 2026.
 * Gabarit de https://www.comenza.com/fr/inspiration/ (Jeremy : « la page
 * inspiration plutôt comme cela ») ; valeurs relevées dans leurs feuilles
 * (blocks/marquee et blocks/projects-grid) et adaptées à la charte : bleu foncé
 * du logo #001d6d, Poppins, marges du site. Avant : gabarit Solutions (sauvegarde
 * FTP « avant-inspiration-comenza »). */

/* Bandeau de titre des autres pages (Fiches d'installation : section .cp-sec .cp-os,
   .cp-h2 ; titres communs de menu.css) — 1er oct. 2026, remplace le mot défilant. */
.in-bandeau{background:var(--bone);padding:clamp(72px,9vw,110px) 0 clamp(36px,5vw,56px)}
.in-titre-page{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(2rem,4.2vw,3.2rem);color:var(--ink);margin:14px 0 0;text-wrap:balance}
.in-titre-page em{font-style:normal;font-weight:300}
.in-page{background:#fff;padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px)}
.in-h1,.in-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Filtres — 1er oct. 2026 (Jeremy : « comme tu l'as fait dans gamme ») : pastilles
   des pages gamme (gamme.css .gm-filtre : gris clair, noir quand coché), une rangée
   par question avec son intitulé, alignées à gauche, filet dessous. */
.in-filtres{display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--line-soft);margin:0 0 clamp(28px,3.5vw,44px)}
.in-filtre-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.in-filtre-titre{font-size:.92rem;font-weight:600;color:var(--ink);margin-right:6px;min-width:9.5em}
.in-pastille{position:relative;display:inline-flex;cursor:pointer}
.in-pastille input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.in-pastille span{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:#f2f4f5;
  border:1px solid transparent;font-size:.92rem;line-height:1.2;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.in-pastille:hover span{background:#e7ebee}
.in-pastille input:checked + span{background:var(--ink);color:#fff}
.in-pastille input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){ .in-filtre-titre{width:100%;min-width:0} }
/* Grille : 4 colonnes, motif lg/sm (lg = 2 colonnes), cartes arrondies 24 px
   (Comenza .projects-grid__grid / .project-card). Hauteur proportionnée à la
   largeur des colonnes du site. */
/* 15 oct. 2026 (Jeremy : « mets 2/3 1/3 et en dessous 1/3 2/3 ») : 3 colonnes, rangées
   alternées lg sm / sm lg (motif dans inspiration.js et la vue). Avant : 4 colonnes. */
.in-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.in-carte{position:relative;display:block;overflow:hidden;border-radius:24px;height:clamp(22rem,30vw,33.4375rem);
  background:#eef1f3;text-decoration:none;color:#fff}
.in-carte[hidden]{display:none}
.in-carte--sm{grid-column:span 1}
.in-carte--lg{grid-column:span 2}
.in-carte img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform .35s ease}
.in-carte:hover img,.in-carte:focus-visible img{transform:scale(1.04)}
.in-carte:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Cartouche (Comenza .project-card__badge). 1er oct. 2026 (Jeremy : « mets-le en
   background blanc et le texte en noir ») : fond blanc plein, texte et flèche noirs.
   Avant : fond noir 22 % flouté, texte blanc. */
.in-badge{position:absolute;left:1.5rem;bottom:1.5rem;z-index:2;max-width:min(420px,calc(100% - 3rem));padding:1.25rem 1.4rem;
  border-radius:24px;background:#fff;color:#0f161b;box-shadow:0 12px 30px -16px rgba(0,0,0,.45)}
.in-lieu{display:block;font-size:.84rem;color:#5b6670;margin-bottom:6px}
.in-titre{display:flex;align-items:flex-start;gap:1.2rem;font-family:"Poppins",-apple-system,sans-serif;font-weight:500;
  font-size:clamp(1.02rem,1.25vw,1.3rem);line-height:1.25;letter-spacing:-.01em;color:#0f161b}
.in-titre svg{flex:none;width:24px;height:24px;fill:none;stroke:#0f161b;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease}
.in-carte:hover .in-titre svg{transform:translate(2px,-2px)}

.in-vide{text-align:center;padding:40px 0;color:var(--ink-soft)}
.in-vide[hidden]{display:none}

/* Pagination ronde (Comenza .projects-grid__pagination) */
.in-pages{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.in-pages:empty{display:none}
.in-pages button{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid transparent;background:none;color:#001d6d;
  font:500 .9rem "Hanken Grotesk",sans-serif;opacity:.6;cursor:pointer;transition:opacity .2s ease,border-color .2s ease}
.in-pages button:hover{opacity:1;border-color:#c9d2db}
.in-pages button.actif{opacity:1;border-color:#001d6d}
.in-pages .in-pages-sep{color:#001d6d;opacity:.5;padding:0 2px}

/* Bouton « Voir 10 de plus » (2 oct. 2026) — remplace la pagination ronde ci-dessus,
   dont les règles restent sans effet (plus de nav#inPages dans la vue). */
.in-plus{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.in-plus[hidden]{display:none}
.in-plus .btn{padding:14px 30px}

/* Bloc contact final (« Un projet en tête ? » de l'accueil ; mots défilants retirés le 1er oct.) */
.in-contact{background:#f5f7f9;padding:clamp(56px,7vw,96px) 0}
.in-contact-in{text-align:center}
.in-contact h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(2rem,4vw,3.4rem);
  letter-spacing:-.02em;line-height:1.1;color:#001d6d;margin:0 0 14px}
.in-contact h2 em{font-style:normal;font-weight:300}
.in-contact p{color:var(--ink-soft);max-width:60ch;margin:0 auto 26px}
.in-contact-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Écrans moyens : 2 colonnes, toutes les cartes sur une colonne (Comenza : lg span 1) */
@media (max-width:1099px){
  .in-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .in-carte--lg{grid-column:span 1}
}
@media (max-width:640px){
  .in-grille{grid-template-columns:1fr}
  .in-carte{height:25rem}
  .in-badge{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;padding:1rem 1.1rem}
}

/* Visionneuse — un <dialog> n'est rendu que s'il est ouvert. */
.in-visio:not([open]){display:none}
.in-visio[open]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100vw;height:100vh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.in-visio::backdrop{background:rgba(6,12,16,.9)}
.in-visio figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:calc(100vw - 180px)}
.in-visio img{max-width:100%;max-height:calc(100vh - 150px);border-radius:24px;object-fit:contain;background:#111}
.in-visio figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;color:rgba(255,255,255,.9);
  font-size:.92rem;text-align:center;max-width:80ch}
.in-visio figcaption a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.in-visio-fermer,.in-visio-fl{position:fixed;z-index:2;width:50px;height:50px;border-radius:50%;border:0;background:#fff;color:#0f161b;
  cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.in-visio-fermer{top:18px;right:18px}
.in-visio-fl{top:50%;margin-top:-25px}
.in-visio-fl[data-in-sens="-1"]{left:18px}
.in-visio-fl[data-in-sens="1"]{right:18px}
.in-visio.seule .in-visio-fl{display:none}
.in-visio svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.in-visio-ouvert{overflow:hidden}
@media (max-width:700px){
  .in-visio figure{max-width:100vw;padding:0 10px}
  .in-visio-fl{top:auto;bottom:18px;margin-top:0}
  .in-visio img{max-height:calc(100vh - 200px)}
}
@media (prefers-reduced-motion:reduce){ .in-carte img,.in-titre svg{transition:none} }
/* Pastille sans résultat avec les autres choix (1er oct. 2026) : grisée, inactive. */
.in-pastille.vide{cursor:default}
.in-pastille input:disabled + span{background:#f7f8f9;color:#b9c1c8;border-color:transparent}
.in-pastille.vide:hover span{background:#f7f8f9}