/* ===== Gabarits « Réalisations » — liste /nos-realisations/ + fiches /pf/ =====
   Chargé sur tout le site (auto-enqueue assets/css/) → tout est scopé sur des
   classes propres (.fil-bar, .page-head, .rl…, .cas-…) pour ne rien écraser. */

/* fil d'Ariane en barre (maquettes réalisations / étude de cas) */
.fil-bar { border-bottom: 1px solid var(--ligne); background: var(--paper); }
.fil-bar .container { display: flex; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.fil-bar a { color: var(--muted); text-decoration: none; }
.fil-bar a:hover { color: var(--avmd); }
.fil-bar .sep { color: var(--avmd); font-family: 'Montserrat'; font-weight: 700; }
.fil-bar .ici { color: var(--marque); font-weight: 600; }

/* en-tête de page : H1 avec le chevron de marque + intro */
.page-head { padding: clamp(44px, 6vw, 64px) 0 0; }
.page-head .sec-t .chev { font-size: 34px; }
.page-head h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; }

/* barre de filtres par secteur — boutons statiques (maquette) */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.filtre { cursor: pointer; font: inherit; display: inline-block; padding: 9px 18px; border-radius: 8px; font-family: 'Montserrat'; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--marque); border: 1.5px solid var(--ligne); background: var(--paper); transition: all .3s; }
.filtre:hover { border-color: var(--avmd); color: var(--avmd); }
.filtre.actif { background: var(--cta); border-color: var(--cta); color: #fff; }

/* grille de réalisations + cartes (partagées liste / duo de la fiche) */
section.rl-section { padding-top: clamp(34px, 4vw, 48px); }
.rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rl { background: var(--paper); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.rl:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(36,70,95,.10); border-color: #BAD0DF; }
.rl .ph { display: block; aspect-ratio: 3/2; overflow: hidden; }
.rl .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rl:hover .ph img { transform: scale(1.04); }
.rl .bd { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.rl .tag { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--avmd); font-weight: 600; font-family: 'Montserrat'; }
.rl h2, .rl h3 { font-size: 19px; margin-top: 6px; }
.rl h2 a, .rl h3 a { color: inherit; text-decoration: none; }
.rl p { font-size: 14px; color: var(--muted); margin: 8px 0 14px; }
.rl .lien { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--avmd); text-decoration: none; font-family: 'Montserrat'; }

/* ===== fiche /pf/ — étude de cas ===== */

/* hero photo pleine largeur — même vocabulaire que le hero de la homepage */
.cas-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; background: #16283A; }
.cas-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cas-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,37,52,.15) 30%, rgba(20,37,52,.82) 100%); }
.cas-hero .container { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(30px, 4vw, 52px); padding-top: 120px; }
.cas-hero .avant { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #A8C6DB; margin-bottom: 14px; font-family: 'Montserrat'; }
.cas-hero h1 { color: #fff; font-size: clamp(28px, 3.8vw, 48px); font-weight: 700; max-width: 22ch; }

/* encadré « en bref » — carte bleu clair */
section.cas-bref { background: var(--fond); padding: clamp(34px, 4vw, 52px) 0; }
.enbref { border-radius: var(--r); background: #E8F0F6; border: 1px solid #CFE0EC; padding: clamp(24px, 3vw, 36px); }
.enbref .titre { display: flex; align-items: baseline; gap: 8px; font-family: 'Montserrat'; font-weight: 700; font-size: 18px; color: var(--marque); }
.enbref .titre .chev { color: var(--avmd); }
.enbref .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 18px; }
.enbref .lbl { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--avmd); font-weight: 600; font-family: 'Montserrat'; }
.enbref .val { font-size: 15px; font-weight: 600; color: var(--marque); margin-top: 4px; }

/* corps de la fiche — texte extrait proprement des shortcodes */
section.cas-corps { padding-top: clamp(40px, 5vw, 60px); }
.cas-prose { max-width: 860px; }
.cas-prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 38px 0 14px; }
.cas-prose h2:first-child { margin-top: 0; }
.cas-prose h2::before { content: '› '; color: var(--avmd); font-family: 'Montserrat'; font-weight: 700; }
.cas-prose h3 { font-size: 19px; margin: 26px 0 10px; }
.cas-prose p { margin: 12px 0; color: var(--ink); }
.cas-prose ul, .cas-prose ol { margin: 12px 0 12px 22px; }
.cas-prose li { margin: 6px 0; }
.cas-prose a { color: var(--avmd); }
.cas-prose blockquote { margin: 20px 0; padding: 18px 24px; border-left: 4px solid var(--avmd); background: var(--fond); border-radius: 0 10px 10px 0; font-style: italic; color: var(--muted); }
.cas-video { margin: 22px 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/9; max-width: 860px; background: #16283A; }
.cas-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* galerie — photos du projet (médiathèque) */
.cas-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.cas-galerie figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ligne); }
.cas-galerie img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* autres réalisations — 2 cartes */
section.cas-autres { background: var(--fond); }
.rl-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; }
.rl-duo .rl .ph { aspect-ratio: 16/8; }

@media (max-width: 900px) {
  .rl-grid { grid-template-columns: 1fr; }
  .rl-duo { grid-template-columns: 1fr; }
  .cas-galerie { grid-template-columns: repeat(2, 1fr); }
  .enbref .items { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .rl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* filtre secteur : l'attribut hidden doit gagner sur le display des cartes */
.rl[hidden] { display: none !important; }

/* alternance charte : la grille sur fond gris, les cartes blanches reprennent leur relief */
.rl-section { background: var(--fond); }
/* carte entièrement cliquable (stretched link sur « Voir l'étude de cas › ») */
.rl { position: relative; }
.rl .lien::after { content: ""; position: absolute; inset: 0; }
.rl .lien:focus-visible::after { outline: 2px solid var(--cta); outline-offset: -2px; border-radius: var(--r); }
/* cibles tactiles des filtres */
@media (max-width: 900px) { .filtre { padding: 12px 18px; } }