/* ============================================================================
   Page d'atterrissage (accueil) + onglet Recommandations
   Style « plein écran » moderne : sections successives sur fond crème,
   accents terreux de la palette DSDC, tout cerné de noir.
   ========================================================================== */

/* le conteneur accueil défile verticalement, section par section */
#view-accueil{--accent:#46747F;}
#view-accueil.active{display:block;}
.land{height:100%;overflow-y:auto;scroll-behavior:smooth;background:var(--cream);scroll-snap-type:y proximity;}
.land *{box-sizing:border-box;}

/* --- bandeau de section générique --- */
.land-sec{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;
  padding:64px clamp(24px,7vw,120px);scroll-snap-align:start;position:relative;border-bottom:2px solid var(--ink);}
.land-sec:last-child{border-bottom:0;}

/* --- héros --- */
.land-hero{align-items:flex-start;background:var(--cream);}
.land-hero h1{font-size:clamp(44px,8vw,104px);line-height:.98;font-weight:800;letter-spacing:-.03em;margin:0;max-width:15ch;}
.land-hero .accent-bar{display:flex;gap:0;margin:38px 0 0;width:min(520px,80%);height:18px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;}
.land-hero .accent-bar span{flex:1;}
/* Les cinq accents de la palette, dans l'ordre (auparavant en style="" inline). */
.land-hero .accent-bar span:nth-child(1){background:var(--sand);}
.land-hero .accent-bar span:nth-child(2){background:var(--orange);}
.land-hero .accent-bar span:nth-child(3){background:var(--red);}
.land-hero .accent-bar span:nth-child(4){background:var(--olive);}
.land-hero .accent-bar span:nth-child(5){background:var(--teal);}
.land-scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.75;}
.land-scroll-cue svg{width:22px;height:22px;animation:land-bob 1.8s ease-in-out infinite;}
@keyframes land-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* --- titre de section (sans surtitre : le titre est seul) --- */
.land-sec h2{font-size:clamp(30px,5vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.02em;margin:0 0 24px;max-width:20ch;}

/* --- bloc « développement social » --- */
.land-def{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start;}
@media (max-width:820px){.land-def{grid-template-columns:1fr;gap:28px;}}
.land-def .lead{font-size:clamp(18px,2vw,22px);line-height:1.5;margin:0 0 16px;font-weight:500;}
.land-def ul{margin:0 0 18px;padding:0 0 0 4px;list-style:none;}
.land-def ul li{position:relative;padding:6px 0 6px 26px;font-size:16px;line-height:1.5;}
.land-def ul li::before{content:"";position:absolute;left:0;top:13px;width:11px;height:11px;border:1.5px solid var(--ink);
  border-radius:3px;background:var(--teal);}
.land-def ul.actors li::before{background:var(--orange);}
.land-def .src{font-size:13px;margin:8px 0 0;}
.land-def .src a{color:var(--ink);}
.land-card-aside{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:30px;box-shadow:8px 8px 0 var(--ink);}
.land-card-aside h3{margin:0 0 10px;font-size:20px;font-weight:800;}
.land-card-aside p{margin:0 0 18px;font-size:15px;line-height:1.55;}

/* boutons */
.land-btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--ink);border-radius:999px;padding:11px 22px;background:var(--ink);color:var(--cream);
  text-decoration:none;transition:transform 120ms ease,background 120ms ease,color 120ms ease;}
.land-btn:hover{transform:translateY(-2px);}
/* Boutons empilés dans la carte latérale : l'espacement était assuré par une
   cale <div style="height:12px"> dans index.html. */
.land-card-aside .land-btn + .land-btn{margin-top:12px;}
.land-btn.ghost{background:var(--paper);color:var(--ink);}
.land-btn.ghost:hover{background:var(--sand);}
.land-btn svg{width:16px;height:16px;}

/* --- image de section (placeholder illustré) --- */
.land-figure{margin:0;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:8px 8px 0 var(--ink);}
.land-figure img{display:block;width:100%;height:auto;}
.land-figure .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:300px;
  padding:40px;text-align:center;background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 14px,#eae4d6 14px,#eae4d6 28px);}
.land-figure .ph svg{width:46px;height:46px;opacity:.6;}
.land-figure .ph .ph-t{font-size:14px;font-weight:700;}
.land-figure figcaption{padding:12px 18px;border-top:1.5px solid var(--ink);font-size:13px;background:var(--paper);}
.land-figure figcaption a{color:var(--ink);}
.land-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;}
@media (max-width:820px){.land-two{grid-template-columns:1fr;gap:28px;}}

/* --- grille « explorer les sections » --- */
.land-explore{background:var(--paper);}
.land-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:8px 0 0;}
@media (max-width:1000px){.land-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.land-grid{grid-template-columns:1fr;}}
.land-tile{appearance:none;text-align:left;font:inherit;cursor:pointer;background:var(--cream);border:2px solid var(--ink);
  border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;min-height:172px;
  transition:transform 130ms ease,box-shadow 130ms ease,background 130ms ease;box-shadow:5px 5px 0 var(--ink);}
.land-tile:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink);background:var(--tile-c,var(--sand));}
.land-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.land-tile .t-top{display:flex;align-items:center;justify-content:space-between;}
.land-tile .t-badge{width:40px;height:40px;border:1.5px solid var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--tile-c,var(--sand));}
.land-tile .t-badge svg{width:22px;height:22px;}
.land-tile .t-arrow{font-size:22px;line-height:1;}
.land-tile h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;}
.land-tile p{margin:0;font-size:13.5px;line-height:1.45;}

/* tile accent colours (rotation de la palette) */
.land-tile[data-goto="cartes"]{--tile-c:#46747F;}
.land-tile[data-goto="conc"]{--tile-c:#6C6F3F;}
.land-tile[data-goto="cadre"]{--tile-c:#D7B063;}
.land-tile[data-goto="indic"]{--tile-c:#D97A22;}
.land-tile[data-goto="reco"]{--tile-c:#C43E42;}
.land-tile[data-goto="ressources"]{--tile-c:#46747F;}
.land-tile[data-goto="gloss"]{--tile-c:#D7B063;}

/* ============================================================================
   Onglet « Recommandations » — même vocabulaire visuel que l'accueil
   ========================================================================== */
/* Colonne de gauche : même géométrie que .map-side (2/3 – 1/3) que les cartes. */
.reco-side{flex:0 0 66.666%;display:flex;flex-direction:column;min-width:0;
  border-right:1.5px solid var(--ink);background:var(--cream);overflow-y:auto;}
.reco-head{padding:44px clamp(24px,5vw,64px) 26px;border-bottom:2px solid var(--ink);flex:0 0 auto;}
.reco-head h1{font-size:clamp(32px,4.4vw,58px);line-height:1;font-weight:800;letter-spacing:-.02em;margin:0;}
.reco-list{padding:28px clamp(24px,5vw,64px) 10px;display:flex;flex-direction:column;gap:18px;}

/* Chaque piste est un bouton : elle ouvre sa ressource dans le panneau de droite. */
.reco-card{appearance:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;gap:9px;box-shadow:6px 6px 0 var(--ink);position:relative;overflow:hidden;
  transition:transform 120ms ease,box-shadow 120ms ease,background 120ms ease;}
.reco-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);}
.reco-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.reco-card.active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);
  background:color-mix(in srgb,var(--r-c,var(--sand)) 16%,var(--paper));}
.reco-card .r-num{position:absolute;top:-14px;right:6px;font-size:96px;font-weight:800;line-height:1;color:var(--r-c,var(--sand));opacity:.9;letter-spacing:-.04em;pointer-events:none;}
.reco-card h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.12;max-width:24ch;position:relative;}
.reco-card p{margin:0;font-size:14.5px;line-height:1.5;position:relative;font-weight:700;color:var(--r-c,var(--sand));max-width:62ch;}
.reco-card:nth-child(5n+1){--r-c:#C43E42;} .reco-card:nth-child(5n+2){--r-c:#46747F;}
.reco-card:nth-child(5n+3){--r-c:#D97A22;} .reco-card:nth-child(5n+4){--r-c:#6C6F3F;}
.reco-card:nth-child(5n+0){--r-c:#D7B063;}
.reco-note{padding:22px clamp(24px,5vw,64px) 48px;font-size:13px;line-height:1.6;max-width:80ch;}

/* Panneau de droite : fiche de la ressource associée à la piste sélectionnée. */
#reco-panel{background:var(--cream);}
#reco-panel .reco-p-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:2px solid var(--ink);border-radius:50%;background:var(--r-c,var(--sand));
  font-size:17px;font-weight:800;line-height:1;margin-bottom:12px;}
#reco-panel h2{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.15;}
#reco-panel .reco-p-sub{margin:0;font-size:14px;line-height:1.5;font-weight:700;color:var(--r-c,var(--sand));}
#reco-panel .reco-res{background:var(--paper);border:2px solid var(--ink);border-radius:14px;
  padding:20px 22px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;gap:10px;}
#reco-panel .reco-res h3{margin:0;font-size:17px;font-weight:800;line-height:1.25;}
#reco-panel .reco-res-meta{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
#reco-panel .reco-res-why{margin:0;font-size:13.5px;line-height:1.55;}
#reco-panel .reco-res-link{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--ink);border-radius:999px;padding:7px 15px;background:var(--r-c,var(--sand));
  font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);transition:transform 120ms ease;}
#reco-panel .reco-res-link:hover{transform:translate(-1px,-1px);}
#reco-panel .reco-res-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
#reco-panel .reco-empty{font-size:14px;line-height:1.6;max-width:34ch;}

@media (max-width:820px){
  .reco-side{flex:none;height:auto;border-right:0;border-bottom:1.5px solid var(--ink);overflow:visible;}
  #reco-panel{flex:none;}
}

/* ============================================================================
   Onglet « Ressources » — bibliothèque de sources sous forme de fiches
   ========================================================================== */
#view-ressources.active{display:block;}
.res-wrap{height:100%;overflow-y:auto;background:var(--cream);padding:0 0 70px;}
.res-hero{padding:44px clamp(24px,6vw,90px) 22px;border-bottom:2px solid var(--ink);}
.res-hero h1{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-.02em;margin:0;}
.res-tools{position:sticky;top:0;z-index:5;background:var(--cream);padding:18px clamp(24px,6vw,90px);
  border-bottom:1.5px solid var(--ink);display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.res-search{flex:1 1 260px;position:relative;}
.res-search input{width:100%;padding:10px 14px 10px 40px;border:1.5px solid var(--ink);border-radius:10px;font:inherit;
  font-size:15px;background:var(--paper);color:var(--ink);outline:none;}
.res-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;pointer-events:none;}
.res-filters{display:flex;flex-wrap:wrap;gap:8px;}
.res-chip{appearance:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid var(--ink);
  border-radius:999px;padding:7px 15px;background:var(--paper);color:var(--ink);transition:background 120ms ease;}
.res-chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);}
.res-sort{margin-left:auto;}
.res-sort select{font:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--ink);border-radius:10px;padding:8px 12px;background:var(--paper);color:var(--ink);cursor:pointer;}
.res-grid{padding:26px clamp(24px,6vw,90px);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px;}
.res-card{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform 130ms ease,box-shadow 130ms ease;}
.res-card:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink);}
.res-card:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.res-cover{aspect-ratio:3/4;border-bottom:2px solid var(--ink);background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.res-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.res-cover .res-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
  width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 12px,#eae4d6 12px,#eae4d6 24px);}
.res-cover .res-ph svg{width:34px;height:34px;opacity:.55;}
.res-cover .res-ph .rp-t{font-size:12px;font-weight:700;line-height:1.3;}
.res-cover .res-open{position:absolute;top:8px;right:8px;background:var(--paper);border:1.5px solid var(--ink);border-radius:7px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 120ms ease;}
.res-card:hover .res-open{opacity:1;}
.res-open svg{width:15px;height:15px;}
.res-meta{padding:13px 14px 16px;display:flex;flex-direction:column;gap:7px;}
.res-meta .res-tag{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:1.5px solid var(--ink);border-radius:999px;padding:3px 9px;background:var(--rt-c,var(--sand));}
.res-meta h3{margin:0;font-size:14.5px;font-weight:700;line-height:1.28;}
.res-meta .res-org{font-size:12.5px;font-weight:600;line-height:1.3;}
.res-meta .res-date{font-size:12.5px;font-weight:600;opacity:.72;}
.res-tag[data-tag="Contexte"]{background:var(--olive);color:var(--paper);}
.res-tag[data-tag="DS"]{background:var(--teal);color:var(--paper);}
.res-tag[data-tag="DC"]{background:var(--orange);}
.res-tag[data-tag="Montréal"]{background:var(--red);color:var(--paper);}
.res-tag[data-tag="Outils"]{background:var(--sand);}
.res-empty{padding:40px clamp(24px,6vw,90px);font-size:15px;}

/* ============================================================================
   Boîte-lumière (agrandir une image) + blocs « extras » des cartes
   ========================================================================== */
.lb-ov{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:30px;}
.lb-inner{position:relative;max-width:96vw;max-height:92vh;background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;padding:12px;box-shadow:10px 10px 0 rgba(0,0,0,.45);}
.lb-inner img{display:block;max-width:92vw;max-height:82vh;width:auto;height:auto;}
.lb-cap{margin:8px 2px 0;font-size:12.5px;font-weight:600;}
.lb-close{position:absolute;top:-18px;right:-18px;width:42px;height:42px;border:2px solid var(--ink);background:var(--cream);border-radius:50%;font-size:24px;line-height:1;cursor:pointer;font-weight:800;}
.lb-close:hover{background:var(--sand);}

/* blocs ajoutés dans les panneaux de carte (Santé Québec, Ville de Montréal…) */
.map-extra{margin:20px 0 4px;padding-top:16px;border-top:1.5px solid var(--ink);}
.map-extra .block-title{margin:0 0 10px;}
.mx-fig{margin:0 0 12px;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper);cursor:zoom-in;}
.mx-fig img{display:block;width:100%;height:auto;}
.mx-fig figcaption{padding:8px 12px;border-top:1.5px solid var(--ink);font-size:12px;background:var(--cream);}
.mx-fig figcaption a{color:var(--ink);}
.mx-fig.mx-missing .mx-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:22px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 12px,#eae4d6 12px,#eae4d6 24px);}
.mx-fig.mx-missing .mx-ph svg{width:32px;height:32px;opacity:.55;}
.mx-fig.mx-missing .mx-ph span{font-size:12.5px;font-weight:700;}
.mx-fig .mx-ph{display:none;}
.mx-btns{display:flex;flex-direction:column;gap:8px;}
.mx-btn{display:flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:9px;padding:10px 13px;background:var(--paper);transition:background 120ms ease;}
.mx-btn:hover{background:var(--sand);}
.mx-btn svg{width:15px;height:15px;flex:0 0 auto;}
.mx-btn .mx-lab{flex:1;}

/* intégration vidéo (Tables de quartier) */
.mx-video{margin:4px 0 14px;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9;}
.mx-video iframe{display:block;width:100%;height:100%;border:0;}

/* ---- Page introuvable (routage SPA : voir showNotFound dans app.js) ------ */
.notfound{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:var(--cream);padding:32px;}
.notfound .nf-box{max-width:56ch;text-align:center;}
.notfound h1{margin:0 0 14px;font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.02em;line-height:1.05;}
.notfound p{margin:0 0 26px;font-size:16px;line-height:1.6;}
.notfound code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:2px 8px;}