1 2<!DOCTYPE html> 3<html lang="fr" > 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>CHU - Centre Hospitalier Universitaire Saint-Ãtienne - Coordonnées - Plans</title> 7 <link rel="stylesheet" href="/content/StylesDuSite.css" /> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 9<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=3" /> 10 11<!--[if lt IE 9]>--> 12
12<script src="/Scripts/html5shiv.js"></script>
12 13
13<script src="/Scripts/html5shiv-printshiv.js"></script>
13 14<!--[endif]--> 15 16<link rel="icon" type="image/png" href="/images/favicon.png"> 17 18<!-- chargement des différents scripts des pages internet --> 19
20<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
vendor: 2 bytes, line 20
20
21<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
vendor: 2 bytes, line 21
21
22<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
vendor: 2 bytes, line 22
22
23<script src="/Scripts/jquery-ui.js"></script>
vendor: 2 bytes, line 23
23
24<script src="/Scripts/jquery.cookie.js"></script>
vendor: 2 bytes, line 24
24
25<script src="/Scripts/DocumentGedHo.js"></script>
vendor: 2 bytes, line 25
25
26<script src="/Scripts/Bandeau.js?ladate=20260430"></script>
vendor: 2 bytes, line 26
26
27<script src="/Scripts/Navigation.js?ladate=2025"></script>
vendor: 2 bytes, line 27
27
28<script src="/Scripts/ValeursCHUSE.js?ladate=2023"></script>
vendor: 2 bytes, line 28
28
29<script src="/Scripts/ValeursCroma.js?ladate=2023"></script>
vendor: 2 bytes, line 29
29
30<script src="/Scripts/ContactsSeve.js?ladate=2023"></script>
vendor: 2 bytes, line 30
30
31<script src="/Scripts/CommunicationCHUSE.js?ladate=2023"></script>
vendor: 2 bytes, line 31
31
32<script src="/Scripts/MaterniteCHUSEPiedDePage.js?ladate=2023"></script>
vendor: 2 bytes, line 32
32
33<script src="/Scripts/PiedDePage.js?ladate=2023"></script>
vendor: 2 bytes, line 33
33
34<script src="/Scripts/natomo.js"></script>
vendor: 2 bytes, line 34
34
35<script src="/Scripts/PrintThis/printThis.js"></script>
vendor: 2 bytes, line 35
35
36<script src="/Scripts/flickity.pkgd.min.js"></script>
vendor: 2 bytes, line 36
36
37<script src="/Scripts/ExplorateurDeRepertoire.js"></script>
37 38 39 40 <style> 41 /* ========================================================= 42 CHU.map : tout est préfixé .chumap pour ne pas entrer 43 en conflit avec le CSS du reste du site 44 ========================================================= */ 45 .chumap { 46 --cm-navy: #004660; 47 --cm-orange: #e5871f; 48 --cm-white: #ffffff; 49 50 container-type: inline-size; /* les @container suivent la largeur de la colonne, pas de l'écran */ 51 font-family: "Poppins", system-ui, sans-serif; 52 color: var(--cm-navy); 53 background: var(--cm-cream); 54 border-radius: 1rem; 55 overflow: hidden; 56 line-height: 1.45; 57 } 58 .chumap *, .chumap *::before, .chumap *::after { box-sizing: border-box; } 59 .chumap h2, .chumap h3, .chumap p, .chumap ul, .chumap ol { margin: 0; padding: 0; } 60 .chumap strong, .chumap .cm-hl { color: var(--cm-orange); font-weight: 700; } 61 62 /* ---------- En-tête ---------- */ 63 /* Une seule image (biais + logo inclus), qui garde son ratio 1276 x 480 */ 64 65 .cm-head { 66 position: relative; 67 z-index: 1; 68 background-color: #004661; 69 display: flex; 70 align-items: center; 71 justify-content: center; 72 padding: 10px; 73 gap: 20px; 74 } 75 76 .cm-bandeau{ 77 display: block; 78 width: 10%; 79 height: auto; 80 background-color: #ffffff; 81 border-radius: 10px; 82 padding: 5px; 83 } 84 85 .cm-head h3, .cm-steps-title { 86 color: #ffffff; 87 } 88 89 .chumap .cm-badge { 90 position: absolute; 91 top: 3cqw; right: 3cqw; 92 transform: rotate(-6deg); 93 background: var(--cm-white); 94 color: var(--cm-navy); 95 border: 3px solid var(--cm-orange); 96 border-radius: .9rem; 97 padding: .25rem .8rem; 98 font-weight: 800; 99 font-size: clamp(.7rem, 3cqw, 1.25rem); 100 } 101 102 /* ---------- Corps ---------- */ 103 /* Mobile : la colonne orange passe AU-DESSUS du contenu */ 104 .chumap .cm-body { display: grid; grid-template-columns: 1fr; align-items: start; } 105 106 .chumap .cm-steps { 107 background: var(--cm-orange); 108 color: var(--cm-white); 109 padding: 1.25rem 1rem 1.5rem; 110 } 111 .chumap .cm-steps-title { text-align: center; font-size: .9rem; font-weight: 600; margin-bottom: 1.25rem; } 112 .chumap .cm-steps ol { 113 list-style: none; counter-reset: step; 114 display: grid; 115 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* étapes côte à côte */ 116 gap: 3rem 3rem; 117 } 118 .chumap .cm-step { 119 --picto: 90px; /* taille des pictos */ 120 counter-increment: step; 121 position: relative; 122 text-align: center; 123 font-size: .75rem; 124 font-weight: 600; 125 line-height: 1.3; 126 color: var(--cm-navy); 127 } 128 .chumap .cm-step img { width: var(--picto); margin: 0 auto .35rem; max-width: 100%; height: auto; display: block; } 129 .chumap .cm-step::before { /* pastille numérotée */ 130 content: counter(step); 131 position: absolute; 132 top: -2px; left: 50%; 133 margin-left: calc(var(--picto) / 2 - 8px); 134 width: 2rem; height: 2rem; 135 display: grid; place-items: center; 136 background: var(--cm-white); 137 color: var(--cm-navy); 138 border: 1px solid var(--cm-navy); 139 border-radius: 50%; 140 font-size: .7rem; font-weight: 700; 141 } 142 .chumap .cm-step b { color: var(--cm-white); font-weight: 700; } 143 144 /* Contenu principal */ 145 .chumap .cm-main { padding: 1.5rem 1.25rem 2rem; display: grid; gap: 1.5rem; min-width: 0; } 146 .chumap .cm-lead { font-size: 1rem; font-weight: 600; } 147 148 149 .chumap .cm-frame.is-orange { border-color: var(--cm-orange); } 150 .chumap .cm-frame img { width: 100%; } 151 152 .chumap .cm-block { display: grid; gap: 1rem; align-items: center; } 153 154 /* Liste d'atouts */ 155 .chumap .cm-benefits { list-style: none; display: grid; gap: 1rem; font-size: .9rem; font-weight: 500; } 156 .chumap .cm-benefits li { padding-left: 1.4rem; position: relative; } 157 .chumap .cm-benefits li::before { /* petit repère de carte */ 158 content: ""; position: absolute; left: 0; top: .35em; 159 width: .7rem; height: .7rem; 160 background: var(--cm-orange); 161 border-radius: 50% 50% 50% 0; 162 transform: rotate(-45deg); 163 } 164 165 /* Bas : texte + QR codes */ 166 .chumap .cm-cta { display: grid; gap: 1.25rem; align-items: center; } 167 .chumap .cm-cta p { font-size: .95rem; } 168 .chumap .cm-cta .cm-cta-title { font-weight: 700; margin-bottom: .5rem; } 169 .chumap .cm-qrs { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } 170 .chumap .cm-qr { 171 display: block; 172 width: 120px; 173 padding: 1rem; 174 border: 2px solid var(--cm-orange); 175 border-radius: .9rem; 176 background: var(--cm-white); 177 text-align: center; 178 font-size: .65rem; font-weight: 700; 179 color: var(--cm-navy); 180 text-decoration: none; 181 } 182 183 .chumap .cm-qr:hover { 184 background-color: #004661;
185 color: #ffffff; 186 } 187 188 .chumap .cm-qr:focus-visible { outline: 3px solid var(--cm-navy); outline-offset: 3px; } 189 190 .CHUMapFleche { 191 display: none; 192 } 193 194 195 /* ---------- Ãcrans larges (largeur de la colonne ⥠640px) ---------- */ 196 @container (min-width: 640px) { 197 .chumap .cm-body { grid-template-columns: clamp(170px, 27%, 260px) 1fr; } 198 .chumap .cm-steps { 199 margin-top: -1.5rem; /* se glisse sous le coin arrondi du bandeau */ 200 padding: 3rem 1.25rem 2.5rem; 201 border-radius: 0 0 2rem 0; 202 } 203 .chumap .cm-steps ol { grid-template-columns: 1fr; gap: 1.75rem; } 204 .chumap .cm-step { --picto: 70px; font-size: .8rem; } 205 .chumap .cm-main { padding: 1.5rem 1.5rem 2rem; } 206 .chumap .cm-block { grid-template-columns: 1fr 1fr; } 207 .chumap .cm-block.is-reverse .cm-frame { order: -1; } 208 .chumap .cm-cta { ; } 209 210 .CHUMapFleche { 211 display: block; 212 } 213 } 214 </style> 215 216 217 218</head> 219<body> 220<a name="debut"></a> 221 <form id="formulaire"> 222 <!--/////////////////////////////////////////////////////////////--> 223 <!-- bandeau entête de la page web --> 224 <!--/////////////////////////////////////////////////////////////--> 225 <header id="header"></header> 226 227 <section id="MaPage" class="container"> 228 <!--/////////////////////////////////////////////////////////////--> 229 <!-- titre de la page en cours --> 230 <!--/////////////////////////////////////////////////////////////--> 231 <div id="TitrePage"> 232 <!--<div><img src="../images/patient.png" class="img-responsive" style="height:100%;min-height:10rem;max-height:60vh;width:100%;object-fit:cover;border:1px solid #ff0000;" /></div>--> 233 </div> 234 235 <!--/////////////////////////////////////////////////////////////--> 236 <!-- partie corps de la page en cours --> 237 <!--/////////////////////////////////////////////////////////////--> 238 <section id="CorpsPage" class="row no gutter" style="background-color:none;"> 239 240 <!--/////////////////////////////////////////////////////////////--> 241 <!-- partie 1 navigation de la page en cours : 3 colonnes --> 242 <!--/////////////////////////////////////////////////////////////--> 243 <nav id="Colonne_1_3" class="col-md-3 order-2 order-md-1 pl-2 pr-2"> 244 <div id="navigation"></div> 245 246 247 <!--/////////////////////////////////////////////////////////////--> 248 <!-- texte colonne gauche --> 249 <!--/////////////////////////////////////////////////////////////--> 250 <!--<div style="text-align:center;"><img src="/Le_CHU/Images/Aerienne_Nord.JPG" title="Hôpital Nord" /></div> --> 251 <div> </div> 252 <!--<div class="blocMedia"> 253 <div class="TitreMedia"><i class="far fa-hand-point-right"></i> </div> 254 <div><strong></strong><br/></div> 255 <div> </div> 256 <div><a href="http://www.reseau-stas.fr/" target="_blank"><img src="../Images/Reseau_Stas_Gd.png" border="0" class="img-responsive"></a></div> 257 <div> </div> 258 <div>Sur la commune de Saint Priest en Jarez, l'hôpital <strong>Nord</strong> est desservi par <a href="http://www.reseau-stas.fr/" target="_blank">la STAS</a>, le réseau de transport en commun de la ville de Saint-Étienne.<br> 259 <br> 260 <strong><i class="fas fa-train"></i> Lignes de tramway :</strong><br> 261 T1 - Solaure / Hôpital Nord<br> 262 T2 - Chateaucreux / Hôptal Nord<br> 263 </div> 264 <div> </div> 265 <div align="center"><iframe width="95%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.fr/maps?q=chu++nord++saint+priest+en+jarez&hl=fr&cd=2&ei=H6W9S4vfM5me_Aaz25yNDA&sll=45.477498,4.372151&sspn=0.009528,0.015836&ie=UTF8&view=map&ved=0CBoQpQY&hq=chu++nord++saint+priest+en+jarez&hnear=&source=embed&ll=45.48216,4.362087&spn=0.018054,0.037766&t=h&output=embed"></iframe></div> 266 <div><a href="http://maps.google.fr/maps?q=chu++nord++saint+priest+en+jarez&hl=fr&cd=2&ei=H6W9S4vfM5me_Aaz25yNDA&sll=45.477498,4.372151&sspn=0.009528,0.015836&ie=UTF8&view=map&ved=0CBoQpQY&hq=chu++nord++saint+priest+en+jarez&hnear=&source=embed&ll=45.481077,4.364147&spn=0.011058,0.019248&t=h&z=16" target="_blank">Agrandir le plan</a></div> 267 <div>--> 268 </nav> 269 270 <!--/////////////////////////////////////////////////////////////--> 271 <!-- partie contenu de la page de la page en cours --> 272 <!--/////////////////////////////////////////////////////////////--> 273 274 <!--/////////////////////////////////////////////////////////////--> 275 <!-- partie 2 de la page en cours : 9 colonnes --> 276 <!--/////////////////////////////////////////////////////////////--> 277 278 <article id="Colonne_2_9" class="col-md-9 order-1 order-md-2 py-3"> 279 <!--<article id="Colonne_2_9" class="col-md-9 py-3" style="background-color:#FAFAFA;border-bottom:1px dotted #8cbb15;">--> 280 <div class="h1">Coordonnées - Plans</div> 281 282 <!--/////////////////////////////////////////////////////////////--> 283 <!-- texte colonne droite --> 284 <!--/////////////////////////////////////////////////////////////--> 285 <div class="chumap"> 286 287 <!-- En-tête --> 288 <div class="cm-head"> 289 <img class="cm-bandeau" src="/Le_CHU/Images/CHUMap/LogoCHUMap.png" width="auto" height="50" alt="CHU.map"> 290 <h3>CHU Map</h3> 291 </div> 292 <div class="cm-body"> 293 294 <!-- Colonne orange : 5 étapes --> 295 <aside class="cm-steps" aria-labelledby="cm-steps-title"> 296 <h3 class="cm-steps-title" id="cm-steps-title">Les 5 étapes à suivre</h3> 297 <ol> 298 <li class="cm-step"> 299 <img src="/Le_CHU/Images/CHUMap/picto-telephone.png" alt=""> 300 Munissez-vous de <b>votre téléphone</b> 301 </li> 302 <li class="cm-step"> 303 <img src="/Le_CHU/Images/CHUMap/picto-clic.png" alt=""> 304 Cliquez <b>sur l'un des boutons</b> en bas de page</b> 305 </li> 306 <li class="cm-step"> 307 <img src="/Le_CHU/Images/CHUMap/picto-globe.png" alt=""> 308 Choisissez de <b>rester sur le site</b><br>ou<br><b>télécharger</b> l'appli 309 </li> 310 <li class="cm-step"> 311 <img src="/Le_CHU/Images/CHUMap/picto-destination.png" alt=""> 312 Indiquez votre lieu de <b>destination</b> 313 </li> 314 <li class="cm-step"> 315 <img src="/Le_CHU/Images/CHUMap/picto-guide.png" alt=""> 316 Laissez-vous <b>guider !</b> 317 </li> 318 </ol> 319 </aside> 320 321 <!-- Contenu principal --> 322 <div class="cm-main"> 323 324 <div class="cm-block"> 325 <div> 326 <p class="cm-lead"> 327 Laissez-vous <span class="cm-hl">guider</span> sur les sites Nord et Bellevue 328 </p> 329 <img class ="CHUMapFleche" src="/Le_CHU/Images/CHUMap/flecheBleu.png" alt="Fleche"> 330 </div> 331 <figure class="cm-frame m-0"> 332 <img src="/Le_CHU/Images/CHUMap/photo-smartphone.png" alt="Application CHU.map sur un smartphone"> 333 </figure> 334 </div> 335 336 <div class="cm-block is-reverse"> 337 <div> 338 <p class="cm-lead">Préparez votre venue depuis la maison !</p> 339 <img class ="CHUMapFleche" src="/Le_CHU/Images/CHUMap/flecheOrange.png" alt="Fleche"> 340 </div> 341 <figure class="cm-frame is-orange m-0"> 342 <img src="/Le_CHU/Images/CHUMap/photo-ordinateur.png" alt="CHU.map sur un ordinateur portable"> 343 </figure> 344 </div> 345 <div> </div> 346 347 <ul class="cm-benefits"> 348 <li><strong>Trouvez</strong> rapidement votre service ou votre lieu de rendez-vous</li> 349 <li><strong>
349Suivez</strong> un parcours adapté à vos besoins</li> 350 <li><strong>Bénéficiez</strong> d'un guidage pensé pour faciliter les déplacements des personnes à mobilité réduite</li> 351 <li><strong>Gagnez</strong> en autonomie tout au long de votre parcours</li> 352 </ul> 353 354 355 356 </div> 357 358 <div> </div> 359 360 </div> 361 362 <div class="cm-cta"> 363 <div> 364 <p class="cm-cta-title">Trouvez facilement votre chemin et laissez-vous guider !</p> 365 <p> 366 Accessible sur votre <strong>smartphone</strong>, cette solution vous 367 <strong>accompagne</strong> avant et pendant votre visite à l'hôpital 368 pour vous <strong>orienter facilement</strong>. 369 </p> 370 </div> 371 372 <div class="cm-qrs"> 373 <a class="cm-qr" href="https://plan.hn.chuse.fr/hopital-nord/1866417180">Map Nord </a> 374 <a class="cm-qr" href="https://plan.bv.chuse.fr/chu-hopital-de-bellevue/1869596203">Map Bellevue</a> 375 </div> 376 </div> 377 </div> 378 <div> </div> 379 380 <!--/////////////////////////////////////////////////////////////--> 381 <!-- renvoi en haut de la page en cours --> 382 <!--/////////////////////////////////////////////////////////////--> 383 <nav id="hautdepage"> 384 <a href="#debut"><i class="fas fa-arrow-circle-up" title="Haut de la page"></i> </a> 385 </nav> 386 <!--/////////////////////////////////////////////////////////////--> 387 <!-- ne pas toucher le div en dessous --> 388 <!--/////////////////////////////////////////////////////////////--> 389 </article> 390 </section> 391 </section> 392 <!--/////////////////////////////////////////////////////////////--> 393 <!-- Valeurs CHUSE en bas de page en cours --> 394 <!--/////////////////////////////////////////////////////////////--> 395 <section id="valeursCHUSE"></section> 396 397 <!--/////////////////////////////////////////////////////////////--> 398 <!-- pied de la page en cours --> 399 <!--/////////////////////////////////////////////////////////////--> 400 <footer id="footer"></footer> 401 </form> 402</body> 403</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.