/* La technique, l'hôpital et nous, côté patient — maquette B v2 (14/10/2026, angle hôpital) : SIGNALÉTIQUE D'HÔPITAL.
   Bandeau de services à lettres (A Imagerie, B À l'hôpital…), hall d'accueil avec panneau d'orientation, frise verticale des inventions,
   fiche prévention, « salle d'attente » en tickets numérotés, pied « plan des niveaux » ; article avec aparté latéral « En une phrase » + sommaire.
   Bleu signalétique / crème / jaune signal + une couleur par service. Sora + IBM Plex Sans + IBM Plex Mono (locales). */
@font-face{font-family:"Sora";src:url(polices/sora-normal-var.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(polices/plexsans-normal-var.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(polices/plexsans-italic-var.woff2) format("woff2");font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/plexmono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/plexmono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{--sign:#0d2b45;--sign2:#173c5c;--creme:#f5f1e8;--blanc:#fff;--encre:#14212d;--gris:#56616d;--trait:#dcd6c8;--jaune:#ffc72c;
 --c:#0d2b45;--s-imagerie:#1f6fd1;--s-hopital:#0f7d68;--s-objets:#7a4cc9;--s-humain:#c9531f;--s-prevention:#3b8a2c}
.s-imagerie{--c:var(--s-imagerie)}.s-hopital{--c:var(--s-hopital)}.s-objets{--c:var(--s-objets)}.s-humain{--c:var(--s-humain)}.s-prevention{--c:var(--s-prevention)}.s-accueil{--c:var(--sign)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 17px/1.65 "IBM Plex Sans",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--sign2);text-underline-offset:3px}
a:hover{color:var(--c)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.w{max-width:1200px;margin:0 auto;padding:0 22px}
.etroit{max-width:760px}
h1,h2,h3{font-family:"Sora",sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.4rem,2.5vw,1.9rem)}
h3{font-size:1.14rem}
.mini,.etiq{font:500 .74rem/1.3 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin:0 0 8px}
/* lettre de service (pictogramme de signalétique) */
.lettre{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:5px;background:var(--c);color:#fff;font:700 .9em/1 "Sora",sans-serif;margin-right:.55em;flex:none;vertical-align:middle}
/* en-tête */
.entete{background:var(--blanc);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:5}
.entete .haut{display:flex;align-items:center;gap:22px;min-height:62px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sign);font:700 1.25rem/1 "Sora",sans-serif;letter-spacing:-.03em;white-space:nowrap}
.logo .picto{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:7px;background:var(--sign);color:var(--jaune);font-size:1.15rem}
.logo i{font-style:normal;color:var(--gris);font-weight:400}
.logo .nom{display:flex;flex-direction:column;gap:4px;white-space:normal}
.logo .nom small{font:500 .62rem/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--gris)}
.pied .logo .nom small{color:var(--jaune)}
.devise{flex:1;margin:0;color:var(--gris);font-size:.9rem}
.entete .tout{font:500 .84rem "IBM Plex Mono",monospace;color:var(--sign);background:var(--jaune);padding:8px 13px;border-radius:4px;text-decoration:none;white-space:nowrap}
.services{background:var(--sign)}
.services ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.services a{display:flex;align-items:center;color:#e9eef3;text-decoration:none;font:600 .9rem "Sora",sans-serif;padding:10px 18px 10px 0;margin-right:10px}
.services a:hover,.services a[aria-current]{color:var(--jaune)}
/* boutons */
.btn{display:inline-block;background:var(--sign);color:#fff;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:6px;border:2px solid var(--sign)}
.btn:hover{background:var(--sign2);color:#fff}
.btn.trait{background:transparent;color:var(--sign)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* hall d'accueil */
.hall{background:var(--creme);padding:56px 0 64px;border-bottom:1px solid var(--trait)}
.hall-g{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hall-texte p{font-size:1.08rem;max-width:34em}
.hall .etiq{color:var(--sign)}
.panneau{background:var(--sign);color:#fff;border-radius:12px;padding:20px 22px 12px;box-shadow:0 18px 40px -26px rgba(13,43,69,.9);border-top:8px solid var(--jaune)}
.pan-t{font:500 .74rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--jaune);margin:0 0 6px}
.panneau ul{list-style:none;margin:0;padding:0}
.dir{display:grid;grid-template-columns:2.1em auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:4px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none}
.dir .fl{grid-row:span 2;font:700 1.5rem/1 "Sora",sans-serif;color:var(--jaune)}
.dir .lettre{grid-row:span 2;width:2.1em;height:2.1em;font-size:1rem}
.dir b{font:700 1.15rem/1.2 "Sora",sans-serif}
.dir i{font-style:normal;font-size:.88rem;color:#b9c6d3;grid-column:3}
.dir:hover b{color:var(--jaune)}
/* bande photo */
.bande{padding:40px 0 0}
.bande-f{margin:0 auto;position:relative}
.bande-f img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:12px}
.bande-f figcaption{position:absolute;left:36px;bottom:22px;max-width:470px;display:flex;align-items:center;background:#fff;color:var(--encre);padding:12px 16px;border-radius:8px;font-size:.94rem;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
/* blocs */
.bloc{padding:58px 0}
.creme{background:var(--creme)}
.sec-tete{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:28px;border-bottom:3px solid var(--sign);padding-bottom:10px}
.sec-tete h2{margin:0}
.sec-tete p{margin:0;color:var(--gris);font-size:.95rem}
/* frise des inventions */
.frise{list-style:none;margin:0;padding:0;position:relative}
.frise::before{content:"";position:absolute;left:118px;top:6px;bottom:6px;width:4px;background:var(--trait);border-radius:2px}
.frise li{display:grid;grid-template-columns:100px 1fr 200px;gap:0 44px;align-items:start;padding:16px 0;position:relative}
.frise li::before{content:"";position:absolute;left:111px;top:24px;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px #fff}
.frise .an{margin:0;text-align:right;font:700 1.25rem/1.2 "Sora",sans-serif;color:var(--c)}
.etape h3{margin:0 0 4px}
.etape p{margin:0;color:#3b4652}
.etape .vers{margin-top:6px;font:500 .86rem "IBM Plex Mono",monospace}
.etape .vers a{color:var(--c);text-decoration:none}
.frise .vign{width:200px;height:130px;object-fit:cover;border-radius:6px;background:#f3f1ec;border:1px solid var(--trait);filter:sepia(.15)}
/* fiche prévention à la une */
.fiche-une{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:#fff;border:1px solid var(--trait);border-left:10px solid var(--c);border-radius:12px;overflow:hidden}
.fiche-ph img{width:100%;height:100%;object-fit:cover;min-height:320px}
.fiche-txt{padding:30px 34px}
.fiche-txt .etiq{display:flex;align-items:center;color:var(--c)}
.en-une{background:var(--creme);border-radius:8px;padding:14px 18px;margin:12px 0 18px}
.en-une p:last-child{margin:0}
.som{margin:0;padding-left:1.3em;columns:2;column-gap:28px;font-size:.95rem}
.som li{margin-bottom:4px;break-inside:avoid}
/* salle d'attente : tickets */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ticket{display:flex;flex-direction:column;text-decoration:none;color:var(--encre);background:#fff;border:1px solid var(--trait);border-radius:10px;overflow:hidden;position:relative}
.ticket::after{content:"";position:absolute;left:0;right:0;top:54px;border-top:2px dashed var(--trait)}
.tk-haut{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;height:54px;background:var(--c);color:#fff}
.tk-haut .num{font:500 1.15rem "IBM Plex Mono",monospace;letter-spacing:.04em}
.tk-haut .lettre{background:#fff;color:var(--c);margin:0}
.tk-ph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tk-serv{padding:14px 16px 0;font:500 .74rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--c)}
.ticket b{padding:6px 16px 18px;font:700 1.08rem/1.3 "Sora",sans-serif}
.ticket:hover{border-color:var(--c)}
/* duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.duo .etiq{display:flex;align-items:center;color:var(--s-humain)}
.duo .etiq .lettre{--c:var(--s-humain)}
.cadre{margin:0}
.cadre img{border-radius:12px}
/* cartes (rubriques, index, « pour continuer ») */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.carte{display:flex;flex-direction:column;text-decoration:none;color:var(--encre);background:#fff;border:1px solid var(--trait);border-top:6px solid var(--c);border-radius:10px;overflow:hidden}
.carte:hover{border-color:var(--c)}
.carte .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}
.carte .corps{padding:14px 18px 20px}
.carte .meta{display:flex;align-items:center;font:500 .72rem "IBM Plex Mono",monospace;color:var(--c);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
.carte .meta .lettre{width:1.9em;height:1.9em}
.carte .meta .min{margin-left:auto;color:var(--gris)}
.carte h3{margin:0 0 8px}
.carte p{margin:0;font-size:.92rem;color:#46505b}
/* article */
.a-tete{background:var(--creme);border-bottom:6px solid var(--c);padding:30px 0 28px}
.fil{font-size:.84rem;color:var(--gris);margin:0 0 16px}
.fil a{color:var(--gris)}
.panneau-serv{display:inline-flex;align-items:center;background:var(--sign);color:#fff;font:600 .95rem "Sora",sans-serif;padding:8px 16px 8px 8px;border-radius:6px;margin:0 0 18px}
.a-tete h1{max-width:20em;margin:0}
.a-photo{margin:30px auto 34px}
.a-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:12px}
.a-g{display:grid;grid-template-columns:290px minmax(0,720px);gap:54px;justify-content:center;align-items:start}
.aparte{position:sticky;top:120px;font-size:.93rem}
.ap-bloc{border-left:5px solid var(--c);background:var(--creme);border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:16px}
.ap-bloc p:last-child{margin:0}
.ap-bloc ol{margin:0;padding-left:1.2em}
.ap-bloc li{margin-bottom:5px}
.ap-bloc a{text-decoration:none}
.ap-bloc a:hover{text-decoration:underline}
.ap-infos{margin:0;display:grid;gap:6px;font:400 .82rem "IBM Plex Mono",monospace}
.ap-infos div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--trait);padding-bottom:4px}
.ap-infos dt{color:var(--gris)}
.ap-infos dd{margin:0}
.texte{font-size:1.05rem}
.texte p{margin:0 0 1.05em}
.texte h2{margin-top:1.6em;font-size:1.5rem;scroll-margin-top:130px;display:flex;align-items:baseline;gap:12px}
.texte h2::before{content:"";flex:none;width:14px;height:14px;border-radius:3px;background:var(--c);transform:translateY(1px)}
.texte h3{margin-top:1.3em}
.texte ul,.texte ol{padding-left:1.25em}
.texte li{margin-bottom:.4em}
.texte a{text-decoration-color:var(--jaune);text-decoration-thickness:3px}
article{--c:var(--sign)}
figure.photo,figure.gravure{margin:34px auto}
figure.photo img{width:100%;border-radius:10px}
figure.gravure{background:#f3efe4;padding:16px 16px 10px;border-radius:6px;border:1px solid var(--trait)}
figure.gravure img{width:100%;mix-blend-mode:multiply}
figure.photo figcaption,figure.gravure figcaption{font-size:.86rem;line-height:1.45;color:var(--gris);margin-top:10px;padding-left:12px;border-left:3px solid var(--jaune)}
.tableau{margin:34px 0;border:2px solid var(--sign);border-radius:10px;overflow:hidden}
.tableau figcaption{font:600 .98rem "Sora",sans-serif;background:var(--sign);color:#fff;padding:12px 16px}
.defile{overflow-x:auto}
.tableau table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:540px}
.tableau th,.tableau td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--trait)}
.tableau thead th{font:500 .72rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);background:var(--creme)}
.tableau tbody th{font-family:"Sora",sans-serif;font-size:.9rem}
.tableau .source{font-size:.8rem;color:var(--gris);padding:10px 16px;margin:0}
.encadre{margin:40px 0 8px;border:2px solid var(--sign);border-radius:10px;padding:18px 22px;background:#fff}
.encadre ul{margin:0 0 12px;padding-left:1.1em;font-size:.93rem}
.encadre p{font-size:.9rem;color:var(--gris);margin:0}
/* pages de liste */
.c-tete{background:var(--creme);border-bottom:6px solid var(--c);padding:40px 0 34px;margin-bottom:36px}
.c-tete h1{display:flex;align-items:center}
.c-tete .lettre{width:1.3em;height:1.3em}
.intro{color:#3b4652;font-size:1.08rem;max-width:40em;margin:0}
.voisins{margin:40px 0 60px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:.9rem}
.voisins ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.voisins a{display:inline-block;padding:5px 12px;border:1px solid var(--trait);border-radius:4px;text-decoration:none}
/* pied : plan des niveaux */
.pied{background:var(--sign);color:#c9d4de;margin-top:30px;padding:46px 0 0}
.plan h2,.pied h2{font:500 .76rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--jaune);margin:0 0 14px}
.niveaux{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.niveaux li{display:flex;align-items:center;background:var(--sign2);border-radius:8px;padding:10px 14px}
.niveaux .niv{font:500 .8rem "IBM Plex Mono",monospace;color:#8fa3b6;width:2.4em}
.niveaux .niv::before{content:"Niv. "}
.niveaux .niv{width:auto;margin-right:12px}
.niveaux a{color:#fff;text-decoration:none;font:600 .98rem "Sora",sans-serif}
.niveaux .s-accueil .lettre{background:var(--jaune);color:var(--sign)}
.pied .g{display:grid;grid-template-columns:1.3fr 1.4fr 1fr;gap:40px;padding:28px 0;border-top:1px solid rgba(255,255,255,.14)}
.pied .logo{color:#fff}
.pied p{font-size:.92rem}
.pied ul,.pied ol{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 8px;font-size:.92rem}
.pied a{color:#e8eef4;text-decoration:none}
.pied a:hover{color:var(--jaune)}
.journal li{display:grid;grid-template-columns:76px 1fr;gap:10px}
.journal time{font:400 .78rem "IBM Plex Mono",monospace;color:var(--jaune);padding-top:2px}
.bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.14);margin:0;padding:16px 0 24px;font-size:.8rem}
/* responsive */
@media (max-width:980px){
 .hall-g,.duo,.fiche-une{grid-template-columns:1fr;gap:30px}
 .fiche-une{gap:0}
 .grille,.tickets{grid-template-columns:1fr 1fr}
 .pied .g{grid-template-columns:1fr 1fr}
 .niveaux{grid-template-columns:1fr 1fr}
 .devise{display:none}
 .entete .haut{justify-content:space-between}
 .a-g{grid-template-columns:minmax(0,1fr);gap:10px}
 .aparte{position:static}
 .frise li{grid-template-columns:80px 1fr;gap:0 40px}
 .frise::before{left:98px}.frise li::before{left:91px}
 .frise .vign{display:none}
}
@media (max-width:640px){
 body{font-size:16px}
 .w{padding:0 16px}
 .logo{font-size:.98rem;gap:8px;min-width:0}.logo .picto{width:30px;height:30px;flex:none}
 .entete .haut{gap:12px}
 .entete .tout{padding:7px 10px;font-size:.78rem}
 .services ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .services a{white-space:nowrap;font-size:.84rem}
 .hall{padding:34px 0 40px}
 .grille,.tickets,.pied .g,.niveaux{grid-template-columns:1fr}
 .bande-f img{aspect-ratio:4/3}
 .bande-f figcaption{position:static;max-width:none;margin-top:10px;box-shadow:none;border:1px solid var(--trait)}
 .bloc{padding:40px 0}
 .frise::before{left:6px}
 .frise li{grid-template-columns:1fr;padding:12px 0 12px 34px}
 .frise li::before{left:-1px;top:18px}
 .frise .an{text-align:left;margin-bottom:4px}
 .fiche-txt{padding:22px 20px}
 .fiche-ph img{min-height:0;aspect-ratio:3/2}
 .som{columns:1}
 .a-photo img{aspect-ratio:3/2}
 .dir b{font-size:1.02rem}
}