/* c-h-v-a.fr : le bracelet et la signalétique (23 octobre 2026 ; bandeau de tête retiré, une ligne d’indépendance au pied). Fond blanc bleuté, bracelet de patient, panneaux de direction, une couleur par couloir. */
:root {
  --fond: #f6f9fc;
  --blanc: #ffffff;
  --encre: #1d2b3a;
  --gris: #5a6878;
  --filet: #d9e3ee;
  --bleu: #1f5d99;
  --bleu-pale: #e6eff8;
  --rose: #d0567f;
  --c-hopital: #c27a12;
  --c-chirurgie: #1f6fb2;
  --c-femmes: #b33f6e;
  --c-famille: #2f8559;
  --titre: 'Piazzolla', Georgia, serif;
  --texte: 'Proza Libre', 'Segoe UI', sans-serif;
  --mono: 'Reddit Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 17.5px/1.7 var(--texte); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 9; }
.fleche { width: 20px; height: 20px; fill: currentColor; flex: none; }
.couloir--hopital { --c: var(--c-hopital); }
.couloir--chirurgie { --c: var(--c-chirurgie); }
.couloir--femmes { --c: var(--c-femmes); }
.couloir--famille { --c: var(--c-famille); }
.panneau__pastille { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--c, var(--bleu)); flex: none; }

/* --- l'en-tête : le bracelet et les panneaux */
.entree { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.entree__in { max-width: 1180px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.bracelet { display: inline-grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 16px; text-decoration: none; background: var(--blanc); border: 2.5px solid var(--bleu); border-radius: 999px; padding: 10px 26px 10px 14px; box-shadow: 0 3px 0 var(--bleu-pale); max-width: 100%; }
.bracelet__fermoir { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: var(--rose); box-shadow: inset 0 0 0 7px #f3c3d3; }
.bracelet__nom { grid-column: 2; grid-row: 1; font: 600 42px/1 var(--titre); letter-spacing: .08em; color: var(--bleu); }
.bracelet__code { grid-column: 3; grid-row: 1 / 3; width: 70px; height: 38px; background: repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 5px, var(--encre) 5px 6px, transparent 6px 9px, var(--encre) 9px 12px, transparent 12px 14px); opacity: .75; }
.bracelet__sous { grid-column: 2; grid-row: 2; font: 400 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin-top: 4px; }
.bracelet--petit { padding: 6px 18px 6px 10px; column-gap: 12px; }
.bracelet--petit .bracelet__nom { font-size: 28px; }
.bracelet--petit .bracelet__fermoir { width: 24px; height: 24px; box-shadow: inset 0 0 0 5px #f3c3d3; }
.bracelet--petit .bracelet__code { width: 46px; height: 26px; }
.panneaux { display: flex; flex-wrap: wrap; gap: 8px; }
.panneau { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--blanc); border: 1.5px solid var(--filet); border-left: 6px solid var(--c, var(--bleu)); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16.5px; }
.panneau .fleche { color: var(--c, var(--bleu)); }
.panneau:hover, .panneau[aria-current] { background: var(--bleu-pale); }
.panneau[aria-current] { border-color: var(--c); }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.titre-section { font: 600 26px/1.2 var(--titre); margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--rose); }
.etiquette-mono { font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--bleu); margin: 0 0 14px; }

/* --- accueil : le livret d'accueil */
.livret { padding: 44px 0 34px; }
.livret h1 { font: 400 clamp(28px, 3.6vw, 44px)/1.2 var(--titre); margin: 0 0 16px; max-width: 900px; overflow-wrap: anywhere; }
.livret__mot { max-width: 760px; color: var(--gris); font-size: 18.5px; margin: 0 0 28px; }
.grands-panneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.grand-panneau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 18px 20px; background: var(--blanc); border: 1.5px solid var(--filet); border-top: 6px solid var(--c); border-radius: 8px; text-decoration: none; }
.grand-panneau:hover { background: var(--bleu-pale); }
.grand-panneau__nom { display: flex; align-items: center; gap: 10px; font: 600 22px/1.2 var(--titre); }
.grand-panneau__desc { grid-column: 1; color: var(--gris); font-size: 15.5px; line-height: 1.45; }
.grand-panneau .fleche { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; color: var(--c); }

/* --- la ligne de bracelet (rubrique, date, durée) */
.ligne-bracelet { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; font: 400 13px/1.2 var(--mono); color: var(--gris); background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 999px; overflow: hidden; max-width: 100%; }
.ligne-bracelet > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; }
.ligne-bracelet > span + span { border-left: 1px dashed var(--filet); }
.ligne-bracelet > span:first-child { color: var(--encre); font-weight: 600; }
.ligne-bracelet .panneau__pastille { width: 10px; height: 10px; }
.ligne-bracelet a { color: var(--bleu); }

/* --- à la une */
.a-la-une { padding: 16px 0 34px; }
.une { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 10px; overflow: hidden; text-decoration: none; }
.une > * { min-width: 0; }
.une__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.une__c { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px; border-left: 6px solid var(--c); }
.une__t { font: 600 clamp(24px, 2.5vw, 32px)/1.22 var(--titre); overflow-wrap: anywhere; }
.une__d { color: var(--gris); }
.une__lire { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c); margin-top: auto; }
.une:hover .une__t { color: var(--bleu); }

/* --- les couloirs */
.couloirs { padding: 10px 0 34px; }
.couloirs__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.couloir { min-width: 0; border-top: 4px solid var(--c); padding-top: 12px; }
.couloir__tete { display: flex; align-items: center; gap: 10px; font: 600 21px/1.2 var(--titre); text-decoration: none; margin-bottom: 14px; }
.couloir__tete .fleche { color: var(--c); margin-left: auto; }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cartes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.carte { display: flex; flex-direction: column; gap: 8px; text-decoration: none; height: 100%; }
.carte__img { display: block; border-radius: 8px; overflow: hidden; background: var(--bleu-pale); border-bottom: 4px solid var(--c); }
.carte__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s; }
.carte:hover .carte__img img { transform: scale(1.03); }
.carte__t { font-weight: 600; font-size: 17.5px; line-height: 1.35; overflow-wrap: anywhere; }
.carte:hover .carte__t { color: var(--bleu); }
.carte__d { font: 400 13px/1.2 var(--mono); color: var(--gris); }

/* --- bon à savoir */
.bon-a-savoir { margin: 6px 0 20px; padding: 26px 28px; background: var(--blanc); border: 1.5px dashed var(--bleu); border-radius: 10px; }
.bon-a-savoir ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bon-a-savoir li { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 16px; }
.bon-a-savoir__n { font: 600 26px/1 var(--mono); color: var(--rose); }

/* --- rubrique : le panneau du couloir et ses rangées */
.signal { display: flex; gap: 18px; align-items: flex-start; margin: 34px 0 24px; padding: 24px 26px; background: var(--blanc); border: 1.5px solid var(--filet); border-left: 10px solid var(--c, var(--bleu)); border-radius: 8px; }
.signal .panneau__pastille { width: 22px; height: 22px; margin-top: 10px; }
.signal > div { min-width: 0; }
.signal h1 { font: 600 clamp(30px, 4vw, 44px)/1.1 var(--titre); margin: 0 0 6px; overflow-wrap: anywhere; }
.signal p { margin: 0; color: var(--gris); max-width: 780px; }
.signal a { color: var(--bleu); }
.rangees { list-style: none; margin: 0 0 30px; padding: 0; }
.rangees li + li { border-top: 1px solid var(--filet); }
.rangee { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px 0; text-decoration: none; }
.rangee__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.rangee__c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rangee__t { font: 600 22px/1.3 var(--titre); overflow-wrap: anywhere; }
.rangee:hover .rangee__t { color: var(--bleu); }
.rangee__d { color: var(--gris); font-size: 16px; }

/* --- article : le dossier */
.dossier { max-width: 800px; margin: 0 auto; padding: 34px 0 10px; }
.panneau--seul { font-size: 15px; padding: 8px 14px; }
.dossier__tete h1 { font: 600 clamp(29px, 3.6vw, 42px)/1.2 var(--titre); margin: 18px 0 16px; overflow-wrap: anywhere; }
.ligne-bracelet--meta { margin: 0 0 24px; }
.dossier__img { margin: 0 0 28px; }
.dossier__img img { border-radius: 10px; }
.texte { overflow-wrap: anywhere; }
.texte h2 { font: 600 27px/1.25 var(--titre); margin: 1.7em 0 .5em; }
.texte h2::before { content: ''; display: block; width: 44px; height: 4px; background: var(--rose); border-radius: 2px; margin-bottom: 10px; }
.texte h3 { font: 600 20px/1.3 var(--texte); margin: 1.4em 0 .4em; color: var(--bleu); }
.texte a { color: var(--bleu); text-underline-offset: 3px; }
.texte a:hover { color: var(--rose); }
.texte img { border-radius: 8px; margin: 1em 0; }
.texte blockquote { margin: 1.4em 0; padding: 12px 18px; background: var(--blanc); border-left: 4px solid var(--bleu); }
.texte table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.texte th, .texte td { border: 1px solid var(--filet); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte th { background: var(--bleu-pale); }
.consigne { margin-top: 32px; padding: 16px 20px; background: var(--blanc); border: 1.5px solid var(--filet); border-left: 6px solid var(--rose); border-radius: 8px; font-size: 16px; }
.consigne p { margin: 0 0 8px; }
.appel { font: 600 15px/1.3 var(--mono); color: var(--encre); }
.appel strong { color: var(--rose); font-size: 19px; }
.couloirs--suite { border-top: 1px solid var(--filet); margin-top: 20px; padding-top: 30px; }

/* --- formulaire */
.formulaire { margin-top: 26px; background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 10px; padding: 20px 22px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1.5px solid var(--filet); border-radius: 6px; background: #fff; }
.formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.formulaire button { font: 600 17px/1 var(--texte); background: var(--bleu); color: #fff; border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; }
.formulaire button:hover { background: var(--rose); }
.formulaire__ok { background: var(--bleu-pale); padding: 10px 14px; border-radius: 6px; }
.formulaire__piege { position: absolute; left: -9999px; }

/* --- la fiche de sortie */
.fiche-sortie { margin-top: 44px; background: var(--blanc); border-top: 3px dashed var(--filet); }
.fiche-sortie__in { max-width: 1180px; margin: 0 auto; padding: 22px 24px 30px; }
.fiche-sortie__pages { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 18px; border-bottom: 1px solid var(--filet); font-size: 15.5px; }
.fiche-sortie__pages a { text-decoration: none; color: var(--bleu); }
.fiche-sortie__pages a:hover { text-decoration: underline; }
.fiche-sortie__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; padding-top: 22px; }
.fiche-sortie__corps > * { min-width: 0; }
.fiche-sortie__corps p { font-size: 15.5px; color: var(--gris); }
.fiche-sortie__rub { display: grid; gap: 12px; }
.fiche-sortie__rub a { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; font-size: 15px; }
.fiche-sortie__rub a .panneau__pastille { margin-top: 5px; }
.fiche-sortie__rub strong { display: block; font-size: 16.5px; }
.fiche-sortie__rub span span { color: var(--gris); }
.fiche-sortie__note { background: var(--fond); border-radius: 8px; padding: 14px 16px; }
.fiche-sortie__note p { margin: 0 0 8px; }
.fiche-sortie__independant { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 13.5px; color: var(--gris); overflow-wrap: anywhere; }
.fiche-sortie__independant a { color: var(--gris); }

@media (max-width: 1000px) {
  .une { grid-template-columns: minmax(0, 1fr); }
  .une__img img { min-height: 0; aspect-ratio: 16 / 9; }
  .une__c { border-left: 0; border-top: 6px solid var(--c); }
  .cartes--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bon-a-savoir ul { grid-template-columns: minmax(0, 1fr); }
  .fiche-sortie__corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fiche-sortie__corps > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .entree__in, main, .fiche-sortie__in { padding-left: 16px; padding-right: 16px; }
  .bracelet { padding: 8px 18px 8px 10px; column-gap: 10px; }
  .bracelet__nom { font-size: 34px; }
  .bracelet__code { width: 44px; }
  .bracelet__sous { font-size: 11.5px; letter-spacing: .06em; }
  .panneaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .panneau { justify-content: space-between; padding: 10px 12px; min-width: 0; }
  .grands-panneaux, .couloirs__grille, .cartes--trois { grid-template-columns: minmax(0, 1fr); }
  .une__c { padding: 20px 18px; }
  .rangee { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .signal { padding: 18px 16px; }
  .bon-a-savoir { padding: 20px 16px; }
  .fiche-sortie__corps { grid-template-columns: minmax(0, 1fr); }
}