{"id":869,"date":"2026-05-17T18:14:42","date_gmt":"2026-05-17T16:14:42","guid":{"rendered":"https:\/\/www.site-e-work.fr\/shop\/?p=869"},"modified":"2026-05-19T11:00:55","modified_gmt":"2026-05-19T09:00:55","slug":"html-css-les-bases","status":"publish","type":"post","link":"https:\/\/www.site-e-work.fr\/shop\/2026\/05\/17\/html-css-les-bases\/","title":{"rendered":"HTML &amp; CSS &#8211; Les bases"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"869\" class=\"elementor elementor-869\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56af3f8 e-flex e-con-boxed e-con e-parent\" data-id=\"56af3f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d09b586 elementor-widget elementor-widget-html\" data-id=\"d09b586\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESET SCOPED \u2014 tout est limit\u00e9 \u00e0 #hcrs-root\r\n   Aucune r\u00e8gle ne s'\u00e9chappe vers le reste de WordPress\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');\r\n\r\n#hcrs-root *,\r\n#hcrs-root *::before,\r\n#hcrs-root *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  \/* Neutralise les h\u00e9ritages WordPress *\/\r\n  font-family: inherit;\r\n}\r\n\r\n\/* \u2500\u2500 Variables \u2500\u2500 *\/\r\n#hcrs-root {\r\n  --hcrs-bg:          #0A0C0E;\r\n  --hcrs-bg2:         #111416;\r\n  --hcrs-bg3:         #181C1F;\r\n  --hcrs-surface:     #1E2326;\r\n  --hcrs-surface2:    #252B2F;\r\n  --hcrs-text:        #EEE9E0;\r\n  --hcrs-mid:         #8A9099;\r\n  --hcrs-dim:         #505860;\r\n  --hcrs-accent:      #63AAE0;\r\n  --hcrs-accent-dim:  #63A0E01F;\r\n  --hcrs-accent-glow: #63B4E040;\r\n  --hcrs-border:      #63A0E01F;\r\n  --hcrs-border2:     #63B4E040;\r\n  --hcrs-green:       #4ade80;\r\n  --hcrs-green-dim:   #4ade8020;\r\n  --hcrs-amber:       #f59e0b;\r\n  --hcrs-amber-dim:   #f59e0b20;\r\n  --hcrs-red:         #f87171;\r\n  --hcrs-red-dim:     #f8717120;\r\n  --hcrs-purple:      #c586c0;\r\n  --hcrs-purple-dim:  #c586c020;\r\n  --hcrs-ff-display:  'Syne', sans-serif;\r\n  --hcrs-ff-body:     'Inter', sans-serif;\r\n  --hcrs-ff-mono:     'JetBrains Mono', monospace;\r\n\r\n  font-family: var(--hcrs-ff-body);\r\n  background: var(--hcrs-bg);\r\n  color: var(--hcrs-text);\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  \/* On laisse WordPress g\u00e9rer la largeur du widget *\/\r\n  width: 100%;\r\n  line-height: 1.5;\r\n  \/* Isolation compl\u00e8te du contexte de stacking *\/\r\n  isolation: isolate;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   TOPBAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__topbar {\r\n  background: var(--hcrs-bg2);\r\n  border-bottom: 1px solid var(--hcrs-border2);\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 1.5rem;\r\n  gap: 1rem;\r\n  height: 50px;\r\n  flex-shrink: 0;\r\n}\r\n#hcrs-root .hcrs__topbar-logo {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: var(--hcrs-accent);\r\n  letter-spacing: .04em;\r\n  text-decoration: none;\r\n}\r\n#hcrs-root .hcrs__topbar-sep {\r\n  width: 1px;\r\n  height: 20px;\r\n  background: var(--hcrs-border2);\r\n  flex-shrink: 0;\r\n}\r\n#hcrs-root .hcrs__topbar-subtitle {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  color: var(--hcrs-mid);\r\n}\r\n#hcrs-root .hcrs__topbar-right {\r\n  margin-left: auto;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .75rem;\r\n}\r\n#hcrs-root .hcrs__topbar-pill {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: .1em;\r\n  text-transform: uppercase;\r\n  padding: 3px 10px;\r\n  border-radius: 20px;\r\n  background: var(--hcrs-accent-dim);\r\n  color: var(--hcrs-accent);\r\n  border: 1px solid var(--hcrs-border2);\r\n}\r\n#hcrs-root .hcrs__topbar-counter {\r\n  font-size: 12px;\r\n  color: var(--hcrs-dim);\r\n  font-family: var(--hcrs-ff-display);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   BARRE DE PROGRESSION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__progress-track {\r\n  height: 3px;\r\n  background: var(--hcrs-surface);\r\n  flex-shrink: 0;\r\n}\r\n#hcrs-root .hcrs__progress-fill {\r\n  height: 3px;\r\n  background: linear-gradient(90deg, var(--hcrs-accent), #8fd4ff);\r\n  width: 12.5%;\r\n  transition: width .4s cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MISE EN PAGE PRINCIPALE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__body {\r\n  display: flex;\r\n  height: 620px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PANNEAU DE NAVIGATION LAT\u00c9RAL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__sidenav {\r\n  width: 220px;\r\n  flex-shrink: 0;\r\n  background: var(--hcrs-bg2);\r\n  border-right: 1px solid var(--hcrs-border2);\r\n  overflow-y: auto;\r\n  padding: 1.5rem 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n}\r\n#hcrs-root .hcrs__sidenav-label {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  letter-spacing: .14em;\r\n  text-transform: uppercase;\r\n  color: var(--hcrs-dim);\r\n  padding: 0 1.25rem .75rem;\r\n  display: block;\r\n}\r\n#hcrs-root .hcrs__navitem {\r\n  \/* On \u00e9vite <button> pour ne pas h\u00e9riter des styles WP\/Elementor *\/\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .6rem;\r\n  padding: .6rem 1.25rem;\r\n  background: transparent;\r\n  border: none;\r\n  border-left: 2px solid transparent;\r\n  color: var(--hcrs-mid);\r\n  font-family: var(--hcrs-ff-body);\r\n  font-size: 12.5px;\r\n  text-align: left;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  transition: all .15s ease;\r\n  \/* Neutralise les styles <button> de WordPress *\/\r\n  outline: none;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  border-radius: 0;\r\n  line-height: 1.4;\r\n}\r\n#hcrs-root .hcrs__navitem:hover {\r\n  color: var(--hcrs-text);\r\n  background: var(--hcrs-surface);\r\n}\r\n#hcrs-root .hcrs__navitem.hcrs--active {\r\n  color: var(--hcrs-accent);\r\n  background: var(--hcrs-accent-dim);\r\n  border-left-color: var(--hcrs-accent);\r\n}\r\n#hcrs-root .hcrs__navitem-num {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  color: var(--hcrs-dim);\r\n  min-width: 18px;\r\n  flex-shrink: 0;\r\n}\r\n#hcrs-root .hcrs__navitem.hcrs--active .hcrs__navitem-num {\r\n  color: var(--hcrs-accent);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ZONE DE CONTENU PRINCIPAL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__content-area {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding: 2.5rem 3rem;\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CHAPITRE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__chapter {\r\n  display: none;\r\n  max-width: 760px;\r\n}\r\n#hcrs-root .hcrs__chapter.hcrs--visible {\r\n  display: block;\r\n}\r\n\r\n\/* Badge de chapitre *\/\r\n#hcrs-root .hcrs__ch-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: .4rem;\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: .06em;\r\n  padding: 4px 14px;\r\n  border-radius: 20px;\r\n  margin-bottom: 1.1rem;\r\n}\r\n\r\n\/* Titre et intro *\/\r\n#hcrs-root .hcrs__ch-title {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 26px;\r\n  font-weight: 800;\r\n  color: var(--hcrs-text);\r\n  margin-bottom: .5rem;\r\n  line-height: 1.2;\r\n  \/* Neutralise les marges de titres WordPress *\/\r\n  margin-top: 0;\r\n}\r\n#hcrs-root .hcrs__ch-intro {\r\n  font-size: 14px;\r\n  color: var(--hcrs-mid);\r\n  line-height: 1.7;\r\n  padding-bottom: 1.75rem;\r\n  border-bottom: 1px solid var(--hcrs-border2);\r\n  margin-bottom: 1.75rem;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   TYPOGRAPHIE DE CONTENU\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__para {\r\n  font-size: 14px;\r\n  color: var(--hcrs-mid);\r\n  line-height: 1.8;\r\n  margin-bottom: 1rem;\r\n  \/* Override WordPress p styles *\/\r\n  font-weight: 400;\r\n}\r\n#hcrs-root .hcrs__para strong {\r\n  color: var(--hcrs-text);\r\n  font-weight: 500;\r\n}\r\n#hcrs-root .hcrs__para code,\r\n#hcrs-root .hcrs__inline-code {\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 12px;\r\n  color: var(--hcrs-accent);\r\n  background: var(--hcrs-accent-dim);\r\n  padding: 2px 6px;\r\n  border-radius: 4px;\r\n}\r\n\r\n#hcrs-root .hcrs__section-heading {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  color: var(--hcrs-accent);\r\n  text-transform: uppercase;\r\n  letter-spacing: .1em;\r\n  margin: 2rem 0 .85rem;\r\n  \/* Neutralise les marges WP *\/\r\n  margin-top: 2rem;\r\n  padding: 0;\r\n  border: none;\r\n  background: none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   BLOC DE CODE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__codeblock {\r\n  background: var(--hcrs-bg3);\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 10px;\r\n  margin: 1rem 0 1.5rem;\r\n  overflow: hidden;\r\n}\r\n#hcrs-root .hcrs__codeblock-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: .6rem 1.1rem;\r\n  background: var(--hcrs-surface);\r\n  border-bottom: 1px solid var(--hcrs-border2);\r\n}\r\n#hcrs-root .hcrs__codeblock-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .75rem;\r\n}\r\n#hcrs-root .hcrs__win-dots {\r\n  display: flex;\r\n  gap: 5px;\r\n}\r\n#hcrs-root .hcrs__win-dots span {\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 50%;\r\n  display: block;\r\n}\r\n#hcrs-root .hcrs__dot-r { background: #ff5f57; }\r\n#hcrs-root .hcrs__dot-y { background: #ffbd2e; }\r\n#hcrs-root .hcrs__dot-g { background: #28c840; }\r\n\r\n#hcrs-root .hcrs__codeblock-lang {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  color: var(--hcrs-dim);\r\n  text-transform: uppercase;\r\n  letter-spacing: .1em;\r\n}\r\n#hcrs-root .hcrs__copybtn {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .35rem;\r\n  font-family: var(--hcrs-ff-body);\r\n  font-size: 11px;\r\n  color: var(--hcrs-mid);\r\n  background: transparent;\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 6px;\r\n  padding: 4px 10px;\r\n  cursor: pointer;\r\n  transition: all .15s;\r\n  \/* Override WP button styles *\/\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  outline: none;\r\n  line-height: 1.4;\r\n  font-weight: 400;\r\n}\r\n#hcrs-root .hcrs__copybtn:hover {\r\n  color: var(--hcrs-accent);\r\n  border-color: var(--hcrs-accent-glow);\r\n  background: var(--hcrs-accent-dim);\r\n}\r\n#hcrs-root .hcrs__copybtn.hcrs--copied {\r\n  color: var(--hcrs-green);\r\n  border-color: var(--hcrs-green-dim);\r\n}\r\n\r\n\/* Le <pre> \u2014 important : override WP qui le stylise *\/\r\n#hcrs-root .hcrs__codeblock pre {\r\n  padding: 1.25rem 1.5rem;\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 13px;\r\n  line-height: 1.75;\r\n  color: var(--hcrs-text);\r\n  overflow-x: auto;\r\n  white-space: pre;\r\n  tab-size: 2;\r\n  \/* Override WP\/Elementor pre styles *\/\r\n  background: transparent;\r\n  border: none;\r\n  border-radius: 0;\r\n  margin: 0;\r\n  word-wrap: normal;\r\n}\r\n\r\n\/* \u2500\u2500 Coloration syntaxique \u2500\u2500 *\/\r\n#hcrs-root .hcrs__sk { color: #4ec9b0; }     \/* balise *\/\r\n#hcrs-root .hcrs__sa { color: #9cdcfe; }     \/* attribut *\/\r\n#hcrs-root .hcrs__ss { color: #ce9178; }     \/* string *\/\r\n#hcrs-root .hcrs__sc { color: #6a9955; font-style: italic; } \/* commentaire *\/\r\n#hcrs-root .hcrs__sf { color: #dcdcaa; }     \/* fonction\/valeur *\/\r\n#hcrs-root .hcrs__kw { color: #c586c0; }     \/* keyword CSS *\/\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   BO\u00ceTES CONTEXTUELLES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__infobox {\r\n  border-radius: 10px;\r\n  padding: 1rem 1.25rem;\r\n  margin: 1.1rem 0;\r\n  display: flex;\r\n  gap: .85rem;\r\n  align-items: flex-start;\r\n}\r\n#hcrs-root .hcrs__infobox-icon {\r\n  font-size: 18px;\r\n  margin-top: 1px;\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n#hcrs-root .hcrs__infobox-body {\r\n  font-size: 13.5px;\r\n  color: var(--hcrs-mid);\r\n  line-height: 1.7;\r\n  margin: 0;\r\n}\r\n#hcrs-root .hcrs__infobox-body strong { font-weight: 500; }\r\n#hcrs-root .hcrs__infobox-body code {\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 12px;\r\n  padding: 1px 5px;\r\n  border-radius: 4px;\r\n}\r\n\/* Variantes *\/\r\n#hcrs-root .hcrs__infobox.hcrs--info {\r\n  background: var(--hcrs-accent-dim);\r\n  border: 1px solid var(--hcrs-accent-glow);\r\n}\r\n#hcrs-root .hcrs__infobox.hcrs--info .hcrs__infobox-icon,\r\n#hcrs-root .hcrs__infobox.hcrs--info strong { color: var(--hcrs-accent); }\r\n#hcrs-root .hcrs__infobox.hcrs--info code { background: var(--hcrs-accent-glow); color: var(--hcrs-accent); }\r\n\r\n#hcrs-root .hcrs__infobox.hcrs--warn {\r\n  background: var(--hcrs-amber-dim);\r\n  border: 1px solid #f59e0b40;\r\n}\r\n#hcrs-root .hcrs__infobox.hcrs--warn .hcrs__infobox-icon,\r\n#hcrs-root .hcrs__infobox.hcrs--warn strong { color: var(--hcrs-amber); }\r\n#hcrs-root .hcrs__infobox.hcrs--warn code { background: #f59e0b15; color: var(--hcrs-amber); }\r\n\r\n#hcrs-root .hcrs__infobox.hcrs--ok {\r\n  background: var(--hcrs-green-dim);\r\n  border: 1px solid #4ade8040;\r\n}\r\n#hcrs-root .hcrs__infobox.hcrs--ok .hcrs__infobox-icon,\r\n#hcrs-root .hcrs__infobox.hcrs--ok strong { color: var(--hcrs-green); }\r\n\r\n#hcrs-root .hcrs__infobox.hcrs--danger {\r\n  background: var(--hcrs-red-dim);\r\n  border: 1px solid #f8717140;\r\n}\r\n#hcrs-root .hcrs__infobox.hcrs--danger .hcrs__infobox-icon,\r\n#hcrs-root .hcrs__infobox.hcrs--danger strong { color: var(--hcrs-red); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   TABLEAU DE R\u00c9F\u00c9RENCE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__reftable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  font-size: 13px;\r\n  margin: 1rem 0 1.5rem;\r\n  \/* Override WP table styles *\/\r\n  border-spacing: 0;\r\n}\r\n#hcrs-root .hcrs__reftable thead tr {\r\n  background: transparent;\r\n}\r\n#hcrs-root .hcrs__reftable th {\r\n  background: var(--hcrs-surface);\r\n  color: var(--hcrs-accent);\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: .08em;\r\n  text-transform: uppercase;\r\n  padding: .7rem 1rem;\r\n  text-align: left;\r\n  border-bottom: 1px solid var(--hcrs-border2);\r\n  \/* Override WP th styles *\/\r\n  border-top: none;\r\n  border-left: none;\r\n  border-right: none;\r\n}\r\n#hcrs-root .hcrs__reftable td {\r\n  padding: .7rem 1rem;\r\n  border-bottom: 1px solid var(--hcrs-border);\r\n  color: var(--hcrs-mid);\r\n  vertical-align: top;\r\n  line-height: 1.6;\r\n  \/* Override WP td styles *\/\r\n  border-top: none;\r\n  border-left: none;\r\n  border-right: none;\r\n  background: transparent;\r\n}\r\n#hcrs-root .hcrs__reftable td:first-child {\r\n  color: var(--hcrs-accent);\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 12px;\r\n  white-space: nowrap;\r\n}\r\n#hcrs-root .hcrs__reftable td strong { color: var(--hcrs-text); font-weight: 500; }\r\n#hcrs-root .hcrs__reftable tr:last-child td { border-bottom: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   GRILLE DE COMPARAISON\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__compare-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 1rem;\r\n  margin: 1rem 0 1.5rem;\r\n}\r\n#hcrs-root .hcrs__compare-panel {\r\n  border-radius: 10px;\r\n  padding: 1.1rem;\r\n  overflow: hidden;\r\n}\r\n#hcrs-root .hcrs__compare-panel.hcrs--bad  { background: #200a0a; border: 1px solid var(--hcrs-red); }\r\n#hcrs-root .hcrs__compare-panel.hcrs--good { background: #0d2218; border: 1px solid var(--hcrs-green); }\r\n#hcrs-root .hcrs__compare-label {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: .1em;\r\n  text-transform: uppercase;\r\n  margin-bottom: .85rem;\r\n  display: block;\r\n}\r\n#hcrs-root .hcrs__compare-panel.hcrs--bad  .hcrs__compare-label { color: var(--hcrs-red); }\r\n#hcrs-root .hcrs__compare-panel.hcrs--good .hcrs__compare-label { color: var(--hcrs-green); }\r\n#hcrs-root .hcrs__compare-panel pre {\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 11.5px;\r\n  line-height: 1.7;\r\n  color: var(--hcrs-mid);\r\n  white-space: pre;\r\n  overflow-x: auto;\r\n  \/* Override WP *\/\r\n  background: transparent;\r\n  border: none;\r\n  border-radius: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   GRILLE DE CARTES S\u00c9MANTIQUES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__semgrid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: .65rem;\r\n  margin: 1rem 0 1.5rem;\r\n}\r\n#hcrs-root .hcrs__semgrid.hcrs--three { grid-template-columns: 1fr 1fr 1fr; }\r\n#hcrs-root .hcrs__semcard {\r\n  background: var(--hcrs-surface);\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 8px;\r\n  padding: .9rem 1rem;\r\n}\r\n#hcrs-root .hcrs__semcard-tag {\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 12.5px;\r\n  color: var(--hcrs-accent);\r\n  font-weight: 600;\r\n  display: block;\r\n  margin-bottom: .35rem;\r\n}\r\n#hcrs-root .hcrs__semcard-desc {\r\n  font-size: 12px;\r\n  color: var(--hcrs-mid);\r\n  line-height: 1.55;\r\n  display: block;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   BOX MODEL VISUEL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__bm-wrap {\r\n  display: flex;\r\n  justify-content: center;\r\n  margin: 1.5rem 0;\r\n}\r\n#hcrs-root .hcrs__bm-margin {\r\n  padding: 22px;\r\n  background: #1a120a;\r\n  border: 2px dashed var(--hcrs-amber);\r\n  border-radius: 4px;\r\n  position: relative;\r\n}\r\n#hcrs-root .hcrs__bm-border {\r\n  padding: 18px;\r\n  background: #0a1a12;\r\n  border: 3px solid var(--hcrs-green);\r\n  position: relative;\r\n}\r\n#hcrs-root .hcrs__bm-padding {\r\n  padding: 20px;\r\n  background: #0a1220;\r\n  border: 2px dashed var(--hcrs-accent);\r\n  position: relative;\r\n}\r\n#hcrs-root .hcrs__bm-content {\r\n  background: var(--hcrs-surface2);\r\n  padding: 1.25rem 3rem;\r\n  text-align: center;\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  color: var(--hcrs-text);\r\n}\r\n#hcrs-root .hcrs__bm-lbl {\r\n  position: absolute;\r\n  top: 5px;\r\n  left: 9px;\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 9.5px;\r\n  font-weight: 700;\r\n  letter-spacing: .07em;\r\n  text-transform: uppercase;\r\n}\r\n#hcrs-root .hcrs__bm-margin  .hcrs__bm-lbl { color: var(--hcrs-amber); }\r\n#hcrs-root .hcrs__bm-border  .hcrs__bm-lbl { color: var(--hcrs-green); }\r\n#hcrs-root .hcrs__bm-padding .hcrs__bm-lbl { color: var(--hcrs-accent); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   D\u00c9MO FLEXBOX INTERACTIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__flexdemo {\r\n  background: var(--hcrs-bg3);\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 10px;\r\n  padding: 1.25rem;\r\n  margin: 1rem 0 1.5rem;\r\n}\r\n#hcrs-root .hcrs__flexdemo-label {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: .1em;\r\n  text-transform: uppercase;\r\n  color: var(--hcrs-dim);\r\n  margin-bottom: .75rem;\r\n  display: block;\r\n}\r\n#hcrs-root .hcrs__flexstage {\r\n  display: flex;\r\n  gap: 8px;\r\n  background: var(--hcrs-surface);\r\n  padding: 12px;\r\n  border-radius: 6px;\r\n  border: 1px dashed var(--hcrs-border2);\r\n  min-height: 60px;\r\n  align-items: center;\r\n  transition: all .3s ease;\r\n}\r\n#hcrs-root .hcrs__flexitem {\r\n  background: var(--hcrs-accent-dim);\r\n  border: 1px solid var(--hcrs-accent-glow);\r\n  color: var(--hcrs-accent);\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  padding: 8px 14px;\r\n  border-radius: 5px;\r\n  white-space: nowrap;\r\n}\r\n#hcrs-root .hcrs__flexcontrols {\r\n  display: flex;\r\n  gap: .5rem;\r\n  flex-wrap: wrap;\r\n  margin-top: .75rem;\r\n}\r\n#hcrs-root .hcrs__flexpill {\r\n  font-family: var(--hcrs-ff-mono);\r\n  font-size: 11px;\r\n  color: var(--hcrs-mid);\r\n  background: var(--hcrs-surface);\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 6px;\r\n  padding: 4px 10px;\r\n  cursor: pointer;\r\n  transition: all .15s;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  outline: none;\r\n  line-height: 1.4;\r\n}\r\n#hcrs-root .hcrs__flexpill:hover,\r\n#hcrs-root .hcrs__flexpill.hcrs--active {\r\n  color: var(--hcrs-accent);\r\n  border-color: var(--hcrs-accent-glow);\r\n  background: var(--hcrs-accent-dim);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   NAVIGATION PIED DE CHAPITRE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__footnav {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 3rem;\r\n  padding-top: 1.5rem;\r\n  border-top: 1px solid var(--hcrs-border2);\r\n}\r\n#hcrs-root .hcrs__footbtn {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .45rem;\r\n  background: var(--hcrs-surface);\r\n  border: 1px solid var(--hcrs-border2);\r\n  border-radius: 8px;\r\n  padding: .6rem 1.2rem;\r\n  color: var(--hcrs-mid);\r\n  font-family: var(--hcrs-ff-body);\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n  transition: all .15s;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  outline: none;\r\n  font-weight: 400;\r\n  line-height: 1.4;\r\n}\r\n#hcrs-root .hcrs__footbtn:hover:not(:disabled) {\r\n  background: var(--hcrs-accent-dim);\r\n  border-color: var(--hcrs-accent-glow);\r\n  color: var(--hcrs-accent);\r\n}\r\n#hcrs-root .hcrs__footbtn:disabled {\r\n  opacity: .25;\r\n  cursor: not-allowed;\r\n}\r\n#hcrs-root .hcrs__footcount {\r\n  font-family: var(--hcrs-ff-display);\r\n  font-size: 11px;\r\n  color: var(--hcrs-dim);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCROLLBAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hcrs-root .hcrs__content-area::-webkit-scrollbar,\r\n#hcrs-root .hcrs__sidenav::-webkit-scrollbar { width: 5px; }\r\n#hcrs-root .hcrs__content-area::-webkit-scrollbar-track,\r\n#hcrs-root .hcrs__sidenav::-webkit-scrollbar-track { background: transparent; }\r\n#hcrs-root .hcrs__content-area::-webkit-scrollbar-thumb,\r\n#hcrs-root .hcrs__sidenav::-webkit-scrollbar-thumb { background: var(--hcrs-surface2); border-radius: 3px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESPONSIVE \u2014 mobile WordPress\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 680px) {\r\n  #hcrs-root .hcrs__body { flex-direction: column; height: auto; }\r\n  #hcrs-root .hcrs__sidenav { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; padding: .5rem; border-right: none; border-bottom: 1px solid var(--hcrs-border2); gap: 4px; }\r\n  #hcrs-root .hcrs__sidenav-label { display: none; }\r\n  #hcrs-root .hcrs__navitem { width: auto; border-left: none; border-bottom: 2px solid transparent; padding: .45rem .75rem; font-size: 11px; border-radius: 6px; }\r\n  #hcrs-root .hcrs__navitem.hcrs--active { border-bottom-color: var(--hcrs-accent); border-left: none; }\r\n  #hcrs-root .hcrs__content-area { padding: 1.5rem 1.25rem; height: auto; max-height: none; }\r\n  #hcrs-root .hcrs__ch-title { font-size: 20px; }\r\n  #hcrs-root .hcrs__compare-grid { grid-template-columns: 1fr; }\r\n  #hcrs-root .hcrs__semgrid { grid-template-columns: 1fr; }\r\n  #hcrs-root .hcrs__semgrid.hcrs--three { grid-template-columns: 1fr; }\r\n  #hcrs-root .hcrs__bm-content { padding: 1rem 1.5rem; }\r\n  #hcrs-root .hcrs__topbar-subtitle { display: none; }\r\n  #hcrs-root .hcrs__topbar-sep { display: none; }\r\n}\r\n<\/style>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     STRUCTURE HTML DU COURS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div id=\"hcrs-root\" role=\"main\" aria-label=\"Cours interactif HTML et CSS\">\r\n\r\n  <!-- TOPBAR -->\r\n  <header class=\"hcrs__topbar\">\r\n    <span class=\"hcrs__topbar-logo\">\u25c8 BTS CDUI \/ SIO<\/span>\r\n    <span class=\"hcrs__topbar-sep\"><\/span>\r\n    <span class=\"hcrs__topbar-subtitle\">Introduction au HTML &amp; CSS<\/span>\r\n    <div class=\"hcrs__topbar-right\">\r\n      <span class=\"hcrs__topbar-pill\">Niveau d\u00e9butant<\/span>\r\n      <span class=\"hcrs__topbar-counter\" id=\"hcrs-counter\">Chapitre 1 \/ 8<\/span>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- BARRE DE PROGRESSION -->\r\n  <div class=\"hcrs__progress-track\" role=\"progressbar\" aria-valuenow=\"1\" aria-valuemin=\"1\" aria-valuemax=\"8\">\r\n    <div class=\"hcrs__progress-fill\" id=\"hcrs-prog\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"hcrs__body\">\r\n\r\n    <!-- NAVIGATION LAT\u00c9RALE -->\r\n    <nav class=\"hcrs__sidenav\" aria-label=\"Chapitres du cours\">\r\n      <span class=\"hcrs__sidenav-label\">Chapitres<\/span>\r\n      <button class=\"hcrs__navitem hcrs--active\" onclick=\"hcrsShow(0)\" aria-current=\"true\">\r\n        <span class=\"hcrs__navitem-num\">01<\/span>Introduction au Web\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(1)\">\r\n        <span class=\"hcrs__navitem-num\">02<\/span>DOCTYPE &amp; Structure\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(2)\">\r\n        <span class=\"hcrs__navitem-num\">03<\/span>Le &lt;head&gt; en d\u00e9tail\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(3)\">\r\n        <span class=\"hcrs__navitem-num\">04<\/span>S\u00e9mantique HTML\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(4)\">\r\n        <span class=\"hcrs__navitem-num\">05<\/span>Balises essentielles\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(5)\">\r\n        <span class=\"hcrs__navitem-num\">06<\/span>Introduction CSS\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(6)\">\r\n        <span class=\"hcrs__navitem-num\">07<\/span>Le Box Model\r\n      <\/button>\r\n      <button class=\"hcrs__navitem\" onclick=\"hcrsShow(7)\">\r\n        <span class=\"hcrs__navitem-num\">08<\/span>Flexbox\r\n      <\/button>\r\n    <\/nav>\r\n\r\n    <!-- CONTENU PRINCIPAL -->\r\n    <div class=\"hcrs__content-area\" id=\"hcrs-scroll\">\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 1 \u2014 INTRODUCTION\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter hcrs--visible\" id=\"hcrs-ch0\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#63A0E01F;color:#63AAE0;border:1px solid #63B4E040\">\ud83c\udf10 Introduction<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Comment fonctionne le Web ?<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Avant d'\u00e9crire la moindre ligne de code, comprendre ce qui se passe entre le navigateur et un fichier HTML \u2014 les bases de tout d\u00e9veloppeur web.<\/p>\r\n\r\n        <p class=\"hcrs__para\">Quand tu tapes une URL dans ton navigateur, il envoie une <strong>requ\u00eate HTTP<\/strong> \u00e0 un serveur distant. Ce serveur r\u00e9pond en renvoyant un fichier texte \u2014 ton code HTML. Le navigateur lit ce fichier ligne par ligne et construit la page visuellement : c'est le <strong>rendu<\/strong>.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Les trois langages du Web<\/p>\r\n        <div class=\"hcrs__semgrid hcrs--three\">\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\">HTML<\/span>\r\n            <span class=\"hcrs__semcard-desc\"><strong style=\"color:var(--hcrs-text)\">Structure &amp; contenu<\/strong><br>Le squelette \u2014 les balises organisent l'information<\/span>\r\n          <\/div>\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-purple)\">CSS<\/span>\r\n            <span class=\"hcrs__semcard-desc\"><strong style=\"color:var(--hcrs-text)\">Apparence &amp; mise en page<\/strong><br>Couleurs, polices, espacements, layout<\/span>\r\n          <\/div>\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-amber)\">JavaScript<\/span>\r\n            <span class=\"hcrs__semcard-desc\"><strong style=\"color:var(--hcrs-text)\">Comportement &amp; interactivit\u00e9<\/strong><br>Animations, formulaires, requ\u00eates dynamiques<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Structure d'un projet<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">Arborescence de projet<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre>mon-projet\/\r\n\u251c\u2500\u2500 index.html        \u2190 page principale (toujours ce nom)\r\n\u251c\u2500\u2500 style.css         \u2190 feuille de styles CSS\r\n\u251c\u2500\u2500 script.js         \u2190 JavaScript (optionnel au d\u00e9but)\r\n\u2514\u2500\u2500 images\/\r\n    \u2514\u2500\u2500 photo.jpg<\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--info\">\r\n          <span class=\"hcrs__infobox-icon\">\ud83d\udca1<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>Pour tester tes fichiers<\/strong> : ouvre <code>index.html<\/code> directement dans Chrome ou Firefox, ou installe l'extension <strong>Live Server<\/strong> dans VS Code pour un rechargement automatique \u00e0 chaque sauvegarde.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Comment le navigateur lit ton code<\/p>\r\n        <p class=\"hcrs__para\">Le navigateur lit le HTML <strong>de haut en bas<\/strong>, ligne par ligne. Quand il rencontre une balise <code>&lt;link&gt;<\/code> vers un CSS, il charge et applique les styles. Quand il rencontre un <code>&lt;script&gt;<\/code>, il stoppe le rendu, ex\u00e9cute le JS, puis reprend. C'est pourquoi l'ordre dans le <code>&lt;head&gt;<\/code> compte.<\/p>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" disabled>\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">1 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(1)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 2 \u2014 DOCTYPE & STRUCTURE\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch1\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#1a120a;color:#f59e0b;border:1px solid #f59e0b40\">\ud83d\udcc4 Structure<\/span>\r\n        <h2 class=\"hcrs__ch-title\">DOCTYPE &amp; structure de base<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Chaque fichier HTML commence par des lignes obligatoires. Voici ce que signifie exactement chaque ligne du gabarit de d\u00e9part \u2014 et pourquoi on ne peut pas les sauter.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Le gabarit minimal complet<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML \u2014 gabarit de d\u00e9part<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__kw\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;html<\/span> <span class=\"hcrs__sa\">lang<\/span>=<span class=\"hcrs__ss\">\"fr\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;head&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">charset<\/span>=<span class=\"hcrs__ss\">\"UTF-8\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">name<\/span>=<span class=\"hcrs__ss\">\"viewport\"<\/span> <span class=\"hcrs__sa\">content<\/span>=<span class=\"hcrs__ss\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;title&gt;<\/span>Ma premi\u00e8re page<span class=\"hcrs__sk\">&lt;\/title&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/head&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;body&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sk\">&lt;h1&gt;<\/span>Bonjour, monde !<span class=\"hcrs__sk\">&lt;\/h1&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;p&gt;<\/span>Ma toute premi\u00e8re page web.<span class=\"hcrs__sk\">&lt;\/p&gt;<\/span>\r\n\r\n<span class=\"hcrs__sk\">&lt;\/body&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/html&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Explication ligne par ligne<\/p>\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Ligne<\/th><th>R\u00f4le &amp; explication<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>&lt;!DOCTYPE html&gt;<\/td><td><strong>D\u00e9claration de type.<\/strong> Indique HTML5 au navigateur. Sans elle, le navigateur entre en \"quirks mode\" \u2014 un mode de compatibilit\u00e9 h\u00e9rit\u00e9 d'IE qui peut casser ton rendu de mani\u00e8re impr\u00e9visible.<\/td><\/tr>\r\n            <tr><td>&lt;html lang=\"fr\"&gt;<\/td><td><strong>\u00c9l\u00e9ment racine.<\/strong> Contient toute la page. L'attribut <code>lang<\/code> d\u00e9clare la langue : utilis\u00e9 par les lecteurs d'\u00e9cran et Google pour l'indexation g\u00e9ographique.<\/td><\/tr>\r\n            <tr><td>&lt;head&gt;<\/td><td><strong>En-t\u00eate invisible.<\/strong> M\u00e9tadonn\u00e9es, titre, liens CSS. Rien ici n'est directement affich\u00e9 dans la page.<\/td><\/tr>\r\n            <tr><td>&lt;body&gt;<\/td><td><strong>Corps visible.<\/strong> Tout le contenu vu par l'utilisateur se place ici.<\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <div class=\"hcrs__infobox hcrs--warn\">\r\n          <span class=\"hcrs__infobox-icon\">\u26a0\ufe0f<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>Un seul &lt;h1&gt; par page.<\/strong> La hi\u00e9rarchie fonctionne comme un plan de document : un titre principal unique (<code>&lt;h1&gt;<\/code>), des sections (<code>&lt;h2&gt;<\/code>), des sous-sections (<code>&lt;h3&gt;<\/code>). Ne saute jamais de niveau pour des raisons visuelles \u2014 utilise le CSS pour la taille.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Anatomie d'une balise HTML<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML \u2014 anatomie<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">&lt;!--    balise    attribut      valeur          --&gt;<\/span>\r\n        <span class=\"hcrs__sk\">&lt;a<\/span>       <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"https:\/\/exemple.com\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Cliquer<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n<span class=\"hcrs__sc\">&lt;!--    ouvrante                              fermante --&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Balises auto-fermantes (pas de contenu) --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;img<\/span> <span class=\"hcrs__sa\">src<\/span>=<span class=\"hcrs__ss\">\"photo.jpg\"<\/span> <span class=\"hcrs__sa\">alt<\/span>=<span class=\"hcrs__ss\">\"Description\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">charset<\/span>=<span class=\"hcrs__ss\">\"UTF-8\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;br&gt;<\/span>  <span class=\"hcrs__sc\">&lt;!-- retour \u00e0 la ligne --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;hr&gt;<\/span>  <span class=\"hcrs__sc\">&lt;!-- s\u00e9parateur th\u00e9matique --&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(0)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">2 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(2)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 3 \u2014 LE HEAD\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch2\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#0d2218;color:#4ade80;border:1px solid #4ade8040\">\ud83d\udd16 Le &lt;head&gt;<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Le &lt;head&gt; en d\u00e9tail<\/h2>\r\n        <p class=\"hcrs__ch-intro\">L'en-t\u00eate est invisible pour l'utilisateur, mais fondamental \u2014 il configure le navigateur, le SEO, les polices et les styles avant d'afficher la premi\u00e8re ligne de la page.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Le head complet et comment\u00e9<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML \u2014 head complet<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sk\">&lt;head&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 1. Encodage \u2014 TOUJOURS en premier --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">charset<\/span>=<span class=\"hcrs__ss\">\"UTF-8\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 2. Responsive mobile --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">name<\/span>=<span class=\"hcrs__ss\">\"viewport\"<\/span>\r\n        <span class=\"hcrs__sa\">content<\/span>=<span class=\"hcrs__ss\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 3. Description Google (max 155 caract\u00e8res) --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">name<\/span>=<span class=\"hcrs__ss\">\"description\"<\/span>\r\n        <span class=\"hcrs__sa\">content<\/span>=<span class=\"hcrs__ss\">\"R\u00e9sum\u00e9 affich\u00e9 dans les r\u00e9sultats Google\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 4. Auteur --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;meta<\/span> <span class=\"hcrs__sa\">name<\/span>=<span class=\"hcrs__ss\">\"author\"<\/span> <span class=\"hcrs__sa\">content<\/span>=<span class=\"hcrs__ss\">\"Votre Nom\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 5. Titre de l'onglet (max 60 caract\u00e8res) --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;title&gt;<\/span>Page \u2014 Nom du Site<span class=\"hcrs__sk\">&lt;\/title&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 6. Favicon --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;link<\/span> <span class=\"hcrs__sa\">rel<\/span>=<span class=\"hcrs__ss\">\"icon\"<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"favicon.ico\"<\/span> <span class=\"hcrs__sa\">type<\/span>=<span class=\"hcrs__ss\">\"image\/x-icon\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 7. Google Fonts \u2014 pr\u00e9connexion puis police --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;link<\/span> <span class=\"hcrs__sa\">rel<\/span>=<span class=\"hcrs__ss\">\"preconnect\"<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"https:\/\/fonts.googleapis.com\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;link<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"https:\/\/fonts.googleapis.com\/css2?family=Inter&display=swap\"<\/span>\r\n        <span class=\"hcrs__sa\">rel<\/span>=<span class=\"hcrs__ss\">\"stylesheet\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n  <span class=\"hcrs__sc\">&lt;!-- 8. Feuille de styles CSS \u2014 en dernier --&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;link<\/span> <span class=\"hcrs__sa\">rel<\/span>=<span class=\"hcrs__ss\">\"stylesheet\"<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"style.css\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n<span class=\"hcrs__sk\">&lt;\/head&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">R\u00e9f\u00e9rence compl\u00e8te<\/p>\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Balise \/ attribut<\/th><th>R\u00f4le &amp; impact<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>charset=\"UTF-8\"<\/td><td><strong>Encodage universel.<\/strong> G\u00e8re accents, emojis, caract\u00e8res sp\u00e9ciaux. \u00c0 placer <em>avant<\/em> le &lt;title&gt; \u2014 le navigateur doit conna\u00eetre l'encodage pour afficher le titre correctement.<\/td><\/tr>\r\n            <tr><td>name=\"viewport\"<\/td><td><strong>Responsive.<\/strong> Sans cette ligne, un mobile affiche la page \u00e0 980px et la r\u00e9duit \u2014 illisible. Indique d'utiliser la vraie largeur de l'\u00e9cran.<\/td><\/tr>\r\n            <tr><td>name=\"description\"<\/td><td><strong>SEO indirect.<\/strong> Texte visible dans les r\u00e9sultats Google sous le titre. Pas un facteur de ranking direct, mais am\u00e9liore le taux de clic. Max 155 caract\u00e8res.<\/td><\/tr>\r\n            <tr><td>&lt;title&gt;<\/td><td><strong>Onglet + Google.<\/strong> Le seul texte visible du &lt;head&gt; dans le navigateur. Format : <em>Page \u2014 Site<\/em>. Google affiche ~60 caract\u00e8res.<\/td><\/tr>\r\n            <tr><td>rel=\"preconnect\"<\/td><td><strong>Performance.<\/strong> Lance la connexion au serveur de polices en avance. R\u00e9duit le temps de chargement des Google Fonts.<\/td><\/tr>\r\n            <tr><td>rel=\"stylesheet\"<\/td><td><strong>CSS.<\/strong> Lie la feuille de style. Le navigateur bloque l'affichage jusqu'\u00e0 son chargement \u2014 \u00e9vite le flash de page non stylis\u00e9e (FOUC).<\/td><\/tr>\r\n            <tr><td>rel=\"icon\"<\/td><td><strong>Favicon.<\/strong> Ic\u00f4ne dans l'onglet et les favoris. Format <code>.ico<\/code> pour la compatibilit\u00e9 max, <code>.svg<\/code> pour la modernit\u00e9.<\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <div class=\"hcrs__infobox hcrs--info\">\r\n          <span class=\"hcrs__infobox-icon\">\u2139\ufe0f<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>Ordre des &lt;link&gt; CSS<\/strong> : quand plusieurs feuilles de styles sont li\u00e9es, la <em>derni\u00e8re<\/em> charg\u00e9e \u00e9crase les r\u00e8gles identiques des pr\u00e9c\u00e9dentes. C'est la cascade \u2014 le C de CSS.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(1)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">3 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(3)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 4 \u2014 S\u00c9MANTIQUE HTML\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch3\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#1a0d2e;color:#c586c0;border:1px solid #c586c040\">\ud83c\udfdb\ufe0f S\u00e9mantique<\/span>\r\n        <h2 class=\"hcrs__ch-title\">L'importance de la s\u00e9mantique HTML<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Choisir la bonne balise, c'est donner du <em>sens<\/em> au contenu \u2014 pas seulement le mettre en forme. C'est le fondement d'un code professionnel, accessible et bien r\u00e9f\u00e9renc\u00e9.<\/p>\r\n\r\n        <p class=\"hcrs__para\">Une balise <strong>s\u00e9mantique<\/strong> d\u00e9crit la <em>nature<\/em> de son contenu, pas son apparence. Par exemple, <code>&lt;nav&gt;<\/code> signifie \"zone de navigation\" \u2014 ce n'est pas juste un bloc qui contiendrait des liens. Le navigateur, Google et les technologies d'assistance <em>comprennent<\/em> cette information.<\/p>\r\n\r\n        <div class=\"hcrs__infobox hcrs--warn\">\r\n          <span class=\"hcrs__infobox-icon\">\u26a0\ufe0f<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>Le mauvais r\u00e9flexe du d\u00e9butant<\/strong> : utiliser <code>&lt;div&gt;<\/code> pour tout. Un <code>&lt;div&gt;<\/code> est un conteneur g\u00e9n\u00e9rique neutre \u2014 il ne signifie <em>rien<\/em>. \u00c0 utiliser seulement quand aucune balise s\u00e9mantique ne convient.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Comparaison : avec et sans s\u00e9mantique<\/p>\r\n        <div class=\"hcrs__compare-grid\">\r\n          <div class=\"hcrs__compare-panel hcrs--bad\">\r\n            <span class=\"hcrs__compare-label\">\u2717 Code non s\u00e9mantique<\/span>\r\n            <pre>&lt;div id=\"header\"&gt;\r\n  &lt;div id=\"logo\"&gt;...&lt;\/div&gt;\r\n  &lt;div id=\"menu\"&gt;\r\n    &lt;div&gt;&lt;a&gt;Accueil&lt;\/a&gt;&lt;\/div&gt;\r\n    &lt;div&gt;&lt;a&gt;Blog&lt;\/a&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"content\"&gt;\r\n  &lt;div class=\"article\"&gt;\r\n    &lt;div class=\"title\"&gt;Titre&lt;\/div&gt;\r\n    &lt;div class=\"text\"&gt;...&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"footer\"&gt;...&lt;\/div&gt;<\/pre>\r\n          <\/div>\r\n          <div class=\"hcrs__compare-panel hcrs--good\">\r\n            <span class=\"hcrs__compare-label\">\u2713 Code s\u00e9mantique<\/span>\r\n            <pre>&lt;header&gt;\r\n  &lt;img src=\"logo.svg\" alt=\"Logo\"&gt;\r\n  &lt;nav&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n&lt;\/header&gt;\r\n&lt;main&gt;\r\n  &lt;article&gt;\r\n    &lt;h1&gt;Titre&lt;\/h1&gt;\r\n    &lt;p&gt;Contenu...&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n&lt;\/main&gt;\r\n&lt;footer&gt;...&lt;\/footer&gt;<\/pre>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Pourquoi c'est crucial \u2014 4 raisons<\/p>\r\n        <div class=\"hcrs__semgrid\">\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-green)\">\u267f Accessibilit\u00e9<\/span>\r\n            <span class=\"hcrs__semcard-desc\">Les lecteurs d'\u00e9cran naviguent entre les zones par leur type : ils sautent directement au <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-green)\">&lt;main&gt;<\/code> ou listent tous les <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-green)\">&lt;nav&gt;<\/code>. Sans s\u00e9mantique, impossible.<\/span>\r\n          <\/div>\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-accent)\">\ud83d\udd0d SEO<\/span>\r\n            <span class=\"hcrs__semcard-desc\">Google comprend mieux le sujet et la hi\u00e9rarchie. Le contenu dans un <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-accent)\">&lt;article&gt;<\/code> est per\u00e7u comme plus important que dans un <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-accent)\">&lt;div&gt;<\/code> g\u00e9n\u00e9rique.<\/span>\r\n          <\/div>\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-amber)\">\ud83e\uddf9 Lisibilit\u00e9<\/span>\r\n            <span class=\"hcrs__semcard-desc\">Un coll\u00e8gue comprend imm\u00e9diatement la structure sans d\u00e9chiffrer des classes CSS arbitraires comme <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-amber)\">container-inner-wrap<\/code>.<\/span>\r\n          <\/div>\r\n          <div class=\"hcrs__semcard\">\r\n            <span class=\"hcrs__semcard-tag\" style=\"color:var(--hcrs-purple)\">\ud83d\udd27 Maintenabilit\u00e9<\/span>\r\n            <span class=\"hcrs__semcard-desc\"><code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-purple)\">querySelector('nav')<\/code> est plus robuste que <code style=\"font-family:var(--hcrs-ff-mono);font-size:11px;color:var(--hcrs-purple)\">'#menu-top-wrap'<\/code>. Moins de classes arbitraires.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Les balises s\u00e9mantiques HTML5 \u00e0 conna\u00eetre<\/p>\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Balise<\/th><th>R\u00f4le &amp; usage<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>&lt;header&gt;<\/td><td>En-t\u00eate du site ou d'une section \u2014 logo, titre, navigation principale. Peut appara\u00eetre plusieurs fois.<\/td><\/tr>\r\n            <tr><td>&lt;nav&gt;<\/td><td>Bloc de navigation principal. Contient des liens de menu. Un nav secondaire (fil d'Ariane) est aussi valide.<\/td><\/tr>\r\n            <tr><td>&lt;main&gt;<\/td><td><strong>Contenu principal et unique de la page.<\/strong> Un seul par page. Exclut header, nav, footer.<\/td><\/tr>\r\n            <tr><td>&lt;article&gt;<\/td><td>Contenu autonome et redistribuable : billet de blog, carte produit, commentaire. Peut fonctionner seul.<\/td><\/tr>\r\n            <tr><td>&lt;section&gt;<\/td><td>Groupe th\u00e9matique de contenu avec un titre. Plus sp\u00e9cifique que &lt;div&gt;, moins autonome qu'&lt;article&gt;.<\/td><\/tr>\r\n            <tr><td>&lt;aside&gt;<\/td><td>Contenu secondaire : encart, publicit\u00e9, liens connexes, biographie de l'auteur.<\/td><\/tr>\r\n            <tr><td>&lt;footer&gt;<\/td><td>Pied de page du site ou d'une section \u2014 copyright, liens l\u00e9gaux, contact.<\/td><\/tr>\r\n            <tr><td>&lt;figure&gt; + &lt;figcaption&gt;<\/td><td>Illustration autonome avec l\u00e9gende. L'image et sa description forment une unit\u00e9 ind\u00e9pendante.<\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(2)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">4 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(4)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 5 \u2014 BALISES ESSENTIELLES\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch4\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#63A0E01F;color:#63AAE0;border:1px solid #63B4E040\">\ud83c\udff7\ufe0f Balises<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Balises HTML essentielles<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Les briques de base pour structurer texte, liens, listes et images \u2014 avec le bon usage de chaque balise et les pi\u00e8ges courants \u00e0 \u00e9viter.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Titres &amp; paragraphes<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sk\">&lt;h1&gt;<\/span>Titre principal \u2014 un seul par page<span class=\"hcrs__sk\">&lt;\/h1&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;h2&gt;<\/span>Titre de section<span class=\"hcrs__sk\">&lt;\/h2&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;h3&gt;<\/span>Sous-section<span class=\"hcrs__sk\">&lt;\/h3&gt;<\/span>\r\n\r\n<span class=\"hcrs__sk\">&lt;p&gt;<\/span>Paragraphe de texte courant.<span class=\"hcrs__sk\">&lt;\/p&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Mise en valeur s\u00e9mantique --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;p&gt;<\/span>Utilisez <span class=\"hcrs__sk\">&lt;strong&gt;<\/span>gras important<span class=\"hcrs__sk\">&lt;\/strong&gt;<\/span>\r\net <span class=\"hcrs__sk\">&lt;em&gt;<\/span>italique emphase<span class=\"hcrs__sk\">&lt;\/em&gt;<\/span>\r\npour le sens, pas pour le style.<span class=\"hcrs__sk\">&lt;\/p&gt;<\/span>\r\n\r\n<span class=\"hcrs__sk\">&lt;hr&gt;<\/span> <span class=\"hcrs__sc\">&lt;!-- S\u00e9parateur th\u00e9matique --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;br&gt;<\/span> <span class=\"hcrs__sc\">&lt;!-- Retour \u00e0 la ligne (parcimonie) --&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Liens &lt;a&gt;<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">&lt;!-- Lien externe \u2014 nouvel onglet + s\u00e9curit\u00e9 --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"https:\/\/example.com\"<\/span>\r\n   <span class=\"hcrs__sa\">target<\/span>=<span class=\"hcrs__ss\">\"_blank\"<\/span>\r\n   <span class=\"hcrs__sa\">rel<\/span>=<span class=\"hcrs__ss\">\"noopener noreferrer\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Visiter<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Lien interne (m\u00eame site) --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"contact.html\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Page contact<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Ancre \u2014 lien vers une section de la page --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"#section-2\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Aller \u00e0 la section 2<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;section<\/span> <span class=\"hcrs__sa\">id<\/span>=<span class=\"hcrs__ss\">\"section-2\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>...<span class=\"hcrs__sk\">&lt;\/section&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Liens sp\u00e9ciaux --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"mailto:contact@exemple.fr\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>M'\u00e9crire<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"tel:+33612345678\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Appeler<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--danger\">\r\n          <span class=\"hcrs__infobox-icon\">\ud83d\udee1\ufe0f<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>S\u00e9curit\u00e9 obligatoire<\/strong> : tout lien avec <code>target=\"_blank\"<\/code> doit avoir <code>rel=\"noopener noreferrer\"<\/code>. Sans \u00e7a, la page ouverte peut acc\u00e9der \u00e0 ta fen\u00eatre via <code>window.opener<\/code> \u2014 une faille connue permettant le d\u00e9tournement de ta page.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Listes &lt;ul&gt; &lt;ol&gt; &lt;li&gt;<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">&lt;!-- Liste non ordonn\u00e9e (puces) \u2014 ordre non important --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;ul&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>HTML<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>CSS<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>JavaScript<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/ul&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Liste ordonn\u00e9e (num\u00e9rot\u00e9e) \u2014 ordre important --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;ol&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>Cr\u00e9er index.html<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>Lier style.css<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;li&gt;<\/span>Ouvrir dans le navigateur<span class=\"hcrs__sk\">&lt;\/li&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/ol&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Navigation = liste de liens (s\u00e9mantique correcte) --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;nav&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;ul&gt;<\/span>\r\n    <span class=\"hcrs__sk\">&lt;li&gt;&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Accueil<span class=\"hcrs__sk\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n    <span class=\"hcrs__sk\">&lt;li&gt;&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/blog\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Blog<span class=\"hcrs__sk\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;\/ul&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/nav&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Images &lt;img&gt; &lt;figure&gt;<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">&lt;!-- Image simple --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;img<\/span> <span class=\"hcrs__sa\">src<\/span>=<span class=\"hcrs__ss\">\"images\/photo.jpg\"<\/span>\r\n     <span class=\"hcrs__sa\">alt<\/span>=<span class=\"hcrs__ss\">\"Description pr\u00e9cise pour les lecteurs d'\u00e9cran\"<\/span>\r\n     <span class=\"hcrs__sa\">width<\/span>=<span class=\"hcrs__ss\">\"800\"<\/span> <span class=\"hcrs__sa\">height<\/span>=<span class=\"hcrs__ss\">\"450\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Image avec l\u00e9gende (s\u00e9mantique recommand\u00e9e) --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;figure&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;img<\/span> <span class=\"hcrs__sa\">src<\/span>=<span class=\"hcrs__ss\">\"schema.png\"<\/span>\r\n       <span class=\"hcrs__sa\">alt<\/span>=<span class=\"hcrs__ss\">\"Sch\u00e9ma de l'architecture r\u00e9seau\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;figcaption&gt;<\/span>Fig. 1 \u2014 Architecture du r\u00e9seau local<span class=\"hcrs__sk\">&lt;\/figcaption&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/figure&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">&lt;!-- Image d\u00e9corative : alt vide (ignor\u00e9e par les lecteurs d'\u00e9cran) --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;img<\/span> <span class=\"hcrs__sa\">src<\/span>=<span class=\"hcrs__ss\">\"decoration.png\"<\/span> <span class=\"hcrs__sa\">alt<\/span>=<span class=\"hcrs__ss\">\"\"<\/span><span class=\"hcrs__sk\">&gt;<\/span><\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--danger\">\r\n          <span class=\"hcrs__infobox-icon\">\u274c<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>L'attribut alt n'est pas optionnel.<\/strong> Une image sans <code>alt<\/code> est inaccessible aux malvoyants, p\u00e9nalis\u00e9e par Google et invalide W3C. Si l'image est purement d\u00e9corative, utilise <code>alt=\"\"<\/code> (vide) \u2014 les lecteurs d'\u00e9cran l'ignoreront.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(3)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">5 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(5)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 6 \u2014 INTRODUCTION CSS\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch5\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#0d2218;color:#4ade80;border:1px solid #4ade8040\">\ud83c\udfa8 CSS<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Introduction au CSS<\/h2>\r\n        <p class=\"hcrs__ch-intro\">CSS (Cascading Style Sheets) contr\u00f4le l'apparence de chaque \u00e9l\u00e9ment HTML \u2014 couleur, taille, police, espacement, mise en page. Sans CSS, une page ressemble \u00e0 un document texte brut.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Syntaxe de base<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">CSS \u2014 syntaxe fondamentale<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">\/* S\u00e9lecteur par balise \u2014 cible TOUS les h1 *\/<\/span>\r\n<span class=\"hcrs__kw\">h1<\/span> {\r\n  <span class=\"hcrs__sa\">color<\/span>: <span class=\"hcrs__ss\">#1a1a2e<\/span>;\r\n  <span class=\"hcrs__sa\">font-size<\/span>: <span class=\"hcrs__ss\">2rem<\/span>;       <span class=\"hcrs__sc\">\/* 1rem = 16px par d\u00e9faut *\/<\/span>\r\n  <span class=\"hcrs__sa\">font-weight<\/span>: <span class=\"hcrs__ss\">700<\/span>;      <span class=\"hcrs__sc\">\/* 400=normal, 700=gras *\/<\/span>\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* S\u00e9lecteur de classe \u2014 cible class=\"carte\" *\/<\/span>\r\n<span class=\"hcrs__kw\">.carte<\/span> {\r\n  <span class=\"hcrs__sa\">background<\/span>: <span class=\"hcrs__ss\">white<\/span>;\r\n  <span class=\"hcrs__sa\">border-radius<\/span>: <span class=\"hcrs__ss\">8px<\/span>;\r\n  <span class=\"hcrs__sa\">padding<\/span>: <span class=\"hcrs__ss\">1.5rem<\/span>;\r\n  <span class=\"hcrs__sa\">border<\/span>: <span class=\"hcrs__ss\">1px solid #eee<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* S\u00e9lecteur d'id \u2014 unique par page *\/<\/span>\r\n<span class=\"hcrs__kw\">#entete<\/span> {\r\n  <span class=\"hcrs__sa\">position<\/span>: <span class=\"hcrs__ss\">sticky<\/span>;\r\n  <span class=\"hcrs__sa\">top<\/span>: <span class=\"hcrs__ss\">0<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* Pseudo-classe \u2014 au survol *\/<\/span>\r\n<span class=\"hcrs__kw\">a:hover<\/span> {\r\n  <span class=\"hcrs__sa\">color<\/span>: <span class=\"hcrs__ss\">#0066cc<\/span>;\r\n  <span class=\"hcrs__sa\">text-decoration<\/span>: <span class=\"hcrs__ss\">underline<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* S\u00e9lecteur descendant \u2014 p dans article *\/<\/span>\r\n<span class=\"hcrs__kw\">article p<\/span> {\r\n  <span class=\"hcrs__sa\">line-height<\/span>: <span class=\"hcrs__ss\">1.8<\/span>;\r\n}<\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Variables CSS \u2014 bonne pratique absolue<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">CSS \u2014 custom properties<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">\/* D\u00e9finir les variables dans :root (port\u00e9e globale) *\/<\/span>\r\n<span class=\"hcrs__kw\">:root<\/span> {\r\n  <span class=\"hcrs__sa\">--couleur-principale<\/span>: <span class=\"hcrs__ss\">#0066cc<\/span>;\r\n  <span class=\"hcrs__sa\">--couleur-fond<\/span>:       <span class=\"hcrs__ss\">#f8fafc<\/span>;\r\n  <span class=\"hcrs__sa\">--couleur-texte<\/span>:      <span class=\"hcrs__ss\">#1e293b<\/span>;\r\n  <span class=\"hcrs__sa\">--police<\/span>:             <span class=\"hcrs__ss\">'Inter', sans-serif<\/span>;\r\n  <span class=\"hcrs__sa\">--rayon<\/span>:              <span class=\"hcrs__ss\">8px<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* Utiliser les variables avec var() *\/<\/span>\r\n<span class=\"hcrs__kw\">body<\/span> {\r\n  <span class=\"hcrs__sa\">background<\/span>: <span class=\"hcrs__sf\">var<\/span>(<span class=\"hcrs__ss\">--couleur-fond<\/span>);\r\n  <span class=\"hcrs__sa\">color<\/span>: <span class=\"hcrs__sf\">var<\/span>(<span class=\"hcrs__ss\">--couleur-texte<\/span>);\r\n  <span class=\"hcrs__sa\">font-family<\/span>: <span class=\"hcrs__sf\">var<\/span>(<span class=\"hcrs__ss\">--police<\/span>);\r\n}\r\n\r\n<span class=\"hcrs__kw\">.bouton<\/span> {\r\n  <span class=\"hcrs__sa\">background<\/span>: <span class=\"hcrs__sf\">var<\/span>(<span class=\"hcrs__ss\">--couleur-principale<\/span>);\r\n  <span class=\"hcrs__sa\">border-radius<\/span>: <span class=\"hcrs__sf\">var<\/span>(<span class=\"hcrs__ss\">--rayon<\/span>);\r\n}<\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--ok\">\r\n          <span class=\"hcrs__infobox-icon\">\u2705<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>D\u00e9finis toujours tes couleurs et polices dans des variables <code>:root<\/code>.<\/strong> Pour changer le th\u00e8me entier de ton site, tu modifies 3 lignes au lieu de faire un rechercher-remplacer dans tout le fichier.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">La cascade et la sp\u00e9cificit\u00e9<\/p>\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Priorit\u00e9<\/th><th>Type de r\u00e8gle<\/th><th>Exemple<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>1 (+ \u00e9lev\u00e9e)<\/td><td>Style inline<\/td><td><code>style=\"color:red\"<\/code><\/td><\/tr>\r\n            <tr><td>2<\/td><td>S\u00e9lecteur par id<\/td><td><code>#titre { color: blue }<\/code><\/td><\/tr>\r\n            <tr><td>3<\/td><td>S\u00e9lecteur par classe<\/td><td><code>.titre { color: green }<\/code><\/td><\/tr>\r\n            <tr><td>4 (- \u00e9lev\u00e9e)<\/td><td>S\u00e9lecteur par balise<\/td><td><code>h1 { color: gray }<\/code><\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(4)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">6 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(6)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 7 \u2014 BOX MODEL\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch6\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#1a120a;color:#f59e0b;border:1px solid #f59e0b40\">\ud83d\udce6 Box Model<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Le Box Model<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Chaque \u00e9l\u00e9ment HTML est une bo\u00eete compos\u00e9e de 4 couches concentriques. Comprendre ce mod\u00e8le est indispensable pour ma\u00eetriser tous les espacements et \u00e9viter les d\u00e9calages myst\u00e9rieux.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Repr\u00e9sentation visuelle<\/p>\r\n        <div class=\"hcrs__bm-wrap\">\r\n          <div class=\"hcrs__bm-margin\">\r\n            <span class=\"hcrs__bm-lbl\">MARGIN \u2014 espace ext\u00e9rieur transparent<\/span>\r\n            <div class=\"hcrs__bm-border\">\r\n              <span class=\"hcrs__bm-lbl\">BORDER \u2014 bordure visible<\/span>\r\n              <div class=\"hcrs__bm-padding\">\r\n                <span class=\"hcrs__bm-lbl\">PADDING \u2014 espace int\u00e9rieur (couleur fond)<\/span>\r\n                <div class=\"hcrs__bm-content\">\r\n                  CONTENT<br>\r\n                  <small style=\"font-weight:400;font-size:11px;color:var(--hcrs-mid)\">width \u00d7 height<\/small>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Couche<\/th><th>R\u00f4le<\/th><th>Exemple CSS<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>content<\/td><td>Le contenu r\u00e9el. <code>width<\/code> et <code>height<\/code> d\u00e9finissent cette couche par d\u00e9faut.<\/td><td><code>width: 300px<\/code><\/td><\/tr>\r\n            <tr><td>padding<\/td><td>Espace int\u00e9rieur entre contenu et bordure. <strong>Prend la couleur de fond de l'\u00e9l\u00e9ment.<\/strong><\/td><td><code>padding: 1.5rem<\/code><\/td><\/tr>\r\n            <tr><td>border<\/td><td>Bordure visible. Peut \u00eatre solide, pointill\u00e9e, en tirets, double\u2026<\/td><td><code>border: 2px solid #333<\/code><\/td><\/tr>\r\n            <tr><td>margin<\/td><td>Espace ext\u00e9rieur <strong>transparent<\/strong> entre cet \u00e9l\u00e9ment et ses voisins.<\/td><td><code>margin: 2rem 0<\/code><\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <p class=\"hcrs__section-heading\">Le pi\u00e8ge du box-sizing<\/p>\r\n        <div class=\"hcrs__compare-grid\">\r\n          <div class=\"hcrs__compare-panel hcrs--bad\">\r\n            <span class=\"hcrs__compare-label\">\u2717 D\u00e9faut (content-box)<\/span>\r\n            <pre>\/* width annonc\u00e9e = 300px\r\n   taille r\u00e9elle = 300+40+4\r\n               = 344px ! *\/\r\n\r\n.boite {\r\n  width: 300px;\r\n  padding: 20px;    \/* +40px *\/\r\n  border: 2px solid; \/* +4px *\/\r\n}\r\n\/* R\u00e9sultat : D\u00c9BORDE ! *\/<\/pre>\r\n          <\/div>\r\n          <div class=\"hcrs__compare-panel hcrs--good\">\r\n            <span class=\"hcrs__compare-label\">\u2713 Avec border-box<\/span>\r\n            <pre>\/* width = 300px tout compris.\r\n   padding et border sont\r\n   inclus dans cette valeur. *\/\r\n\r\n* { box-sizing: border-box; }\r\n\r\n.boite {\r\n  width: 300px; \/* = 300px r\u00e9els *\/\r\n  padding: 20px;\r\n  border: 2px solid;\r\n}<\/pre>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--ok\">\r\n          <span class=\"hcrs__infobox-icon\">\u2705<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>R\u00e8gle n\u00b01 de tout projet CSS<\/strong> : commence toujours ton <code>style.css<\/code> par <code>* &#123; box-sizing: border-box; &#125;<\/code>. Sans \u00e7a, tous tes calculs de largeur seront faux et tu passeras des heures \u00e0 chercher pourquoi les \u00e9l\u00e9ments d\u00e9bordent.<\/p>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">Raccourcis padding \/ margin<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">CSS<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">\/* 1 valeur : identique sur les 4 c\u00f4t\u00e9s *\/<\/span>\r\n<span class=\"hcrs__sa\">padding<\/span>: <span class=\"hcrs__ss\">1rem<\/span>;\r\n\r\n<span class=\"hcrs__sc\">\/* 2 valeurs : haut\/bas  gauche\/droite *\/<\/span>\r\n<span class=\"hcrs__sa\">padding<\/span>: <span class=\"hcrs__ss\">1rem 2rem<\/span>;\r\n\r\n<span class=\"hcrs__sc\">\/* 4 valeurs : haut droite bas gauche (sens horaire) *\/<\/span>\r\n<span class=\"hcrs__sa\">padding<\/span>: <span class=\"hcrs__ss\">10px 20px 10px 20px<\/span>;\r\n\r\n<span class=\"hcrs__sc\">\/* Centrer un bloc horizontalement *\/<\/span>\r\n<span class=\"hcrs__kw\">.conteneur<\/span> {\r\n  <span class=\"hcrs__sa\">width<\/span>: <span class=\"hcrs__ss\">800px<\/span>;\r\n  <span class=\"hcrs__sa\">margin<\/span>: <span class=\"hcrs__ss\">0 auto<\/span>;  <span class=\"hcrs__sc\">\/* gauche\/droite = automatique *\/<\/span>\r\n}<\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(5)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">7 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(7)\">Suivant \u2192<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           CH 8 \u2014 FLEXBOX\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <article class=\"hcrs__chapter\" id=\"hcrs-ch7\">\r\n        <span class=\"hcrs__ch-badge\" style=\"background:#1a0d2e;color:#c586c0;border:1px solid #c586c040\">\u2194\ufe0f Flexbox<\/span>\r\n        <h2 class=\"hcrs__ch-title\">Flexbox \u2014 mise en page moderne<\/h2>\r\n        <p class=\"hcrs__ch-intro\">Flexbox r\u00e9sout en quelques lignes ce qui demandait des hacks CSS pendant des ann\u00e9es. C'est le syst\u00e8me de mise en page le plus utilis\u00e9 aujourd'hui \u2014 indispensable pour tout d\u00e9veloppeur web.<\/p>\r\n\r\n        <p class=\"hcrs__section-heading\">Propri\u00e9t\u00e9s du conteneur flex<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">CSS \u2014 conteneur flex<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__kw\">.conteneur<\/span> {\r\n  <span class=\"hcrs__sa\">display<\/span>: <span class=\"hcrs__ss\">flex<\/span>;             <span class=\"hcrs__sc\">\/* active Flexbox *\/<\/span>\r\n  <span class=\"hcrs__sa\">flex-direction<\/span>: <span class=\"hcrs__ss\">row<\/span>;       <span class=\"hcrs__sc\">\/* row | column *\/<\/span>\r\n  <span class=\"hcrs__sa\">justify-content<\/span>: <span class=\"hcrs__ss\">center<\/span>;  <span class=\"hcrs__sc\">\/* axe principal *\/<\/span>\r\n  <span class=\"hcrs__sa\">align-items<\/span>: <span class=\"hcrs__ss\">center<\/span>;      <span class=\"hcrs__sc\">\/* axe secondaire *\/<\/span>\r\n  <span class=\"hcrs__sa\">gap<\/span>: <span class=\"hcrs__ss\">1rem<\/span>;                 <span class=\"hcrs__sc\">\/* espace entre enfants *\/<\/span>\r\n  <span class=\"hcrs__sa\">flex-wrap<\/span>: <span class=\"hcrs__ss\">wrap<\/span>;           <span class=\"hcrs__sc\">\/* retour \u00e0 la ligne *\/<\/span>\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* Propri\u00e9t\u00e9s sur les enfants *\/<\/span>\r\n<span class=\"hcrs__kw\">.enfant<\/span> {\r\n  <span class=\"hcrs__sa\">flex<\/span>: <span class=\"hcrs__ss\">1<\/span>;                   <span class=\"hcrs__sc\">\/* prend l'espace disponible *\/<\/span>\r\n  <span class=\"hcrs__sa\">flex<\/span>: <span class=\"hcrs__ss\">0 0 200px<\/span>;          <span class=\"hcrs__sc\">\/* largeur fixe *\/<\/span>\r\n  <span class=\"hcrs__sa\">align-self<\/span>: <span class=\"hcrs__ss\">flex-start<\/span>;  <span class=\"hcrs__sc\">\/* override align-items *\/<\/span>\r\n}<\/pre>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">D\u00e9mo interactive \u2014 justify-content<\/p>\r\n        <div class=\"hcrs__flexdemo\">\r\n          <span class=\"hcrs__flexdemo-label\">Clique sur une valeur pour voir le r\u00e9sultat en direct :<\/span>\r\n          <div class=\"hcrs__flexstage\" id=\"hcrs-flexstage\">\r\n            <div class=\"hcrs__flexitem\">Item A<\/div>\r\n            <div class=\"hcrs__flexitem\">Item B<\/div>\r\n            <div class=\"hcrs__flexitem\">Item C<\/div>\r\n          <\/div>\r\n          <div class=\"hcrs__flexcontrols\">\r\n            <button class=\"hcrs__flexpill hcrs--active\" onclick=\"hcrsSetFlex(this,'flex-start')\">flex-start<\/button>\r\n            <button class=\"hcrs__flexpill\" onclick=\"hcrsSetFlex(this,'flex-end')\">flex-end<\/button>\r\n            <button class=\"hcrs__flexpill\" onclick=\"hcrsSetFlex(this,'center')\">center<\/button>\r\n            <button class=\"hcrs__flexpill\" onclick=\"hcrsSetFlex(this,'space-between')\">space-between<\/button>\r\n            <button class=\"hcrs__flexpill\" onclick=\"hcrsSetFlex(this,'space-around')\">space-around<\/button>\r\n            <button class=\"hcrs__flexpill\" onclick=\"hcrsSetFlex(this,'space-evenly')\">space-evenly<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"hcrs__section-heading\">R\u00e9f\u00e9rence justify-content<\/p>\r\n        <table class=\"hcrs__reftable\">\r\n          <thead><tr><th>Valeur<\/th><th>Effet<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>flex-start<\/td><td>\u00c9l\u00e9ments regroup\u00e9s au d\u00e9but (gauche en row, haut en column)<\/td><\/tr>\r\n            <tr><td>flex-end<\/td><td>\u00c9l\u00e9ments regroup\u00e9s \u00e0 la fin<\/td><\/tr>\r\n            <tr><td>center<\/td><td>\u00c9l\u00e9ments centr\u00e9s sur l'axe<\/td><\/tr>\r\n            <tr><td>space-between<\/td><td>Premier \u00e0 gauche, dernier \u00e0 droite, espace \u00e9gal <em>entre<\/em><\/td><\/tr>\r\n            <tr><td>space-around<\/td><td>Espace \u00e9gal <em>autour<\/em> de chaque \u00e9l\u00e9ment (demi-espace aux extr\u00e9mit\u00e9s)<\/td><\/tr>\r\n            <tr><td>space-evenly<\/td><td>Espace parfaitement identique partout, y compris aux extr\u00e9mit\u00e9s<\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n\r\n        <p class=\"hcrs__section-heading\">Exemple : header responsive<\/p>\r\n        <div class=\"hcrs__codeblock\">\r\n          <div class=\"hcrs__codeblock-header\">\r\n            <div class=\"hcrs__codeblock-left\">\r\n              <div class=\"hcrs__win-dots\"><span class=\"hcrs__dot-r\"><\/span><span class=\"hcrs__dot-y\"><\/span><span class=\"hcrs__dot-g\"><\/span><\/div>\r\n              <span class=\"hcrs__codeblock-lang\">HTML + CSS \u2014 navigation responsive<\/span>\r\n            <\/div>\r\n            <button class=\"hcrs__copybtn\" onclick=\"hcrsCopy(this)\">\ud83d\udccb Copier<\/button>\r\n          <\/div>\r\n          <pre><span class=\"hcrs__sc\">&lt;!-- HTML --&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;header<\/span> <span class=\"hcrs__sa\">class<\/span>=<span class=\"hcrs__ss\">\"entete-site\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;a<\/span> <span class=\"hcrs__sa\">class<\/span>=<span class=\"hcrs__ss\">\"logo-site\"<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>MonSite<span class=\"hcrs__sk\">&lt;\/a&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;nav&gt;<\/span>\r\n    <span class=\"hcrs__sk\">&lt;ul<\/span> <span class=\"hcrs__sa\">class<\/span>=<span class=\"hcrs__ss\">\"liste-nav\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>\r\n      <span class=\"hcrs__sk\">&lt;li&gt;&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Accueil<span class=\"hcrs__sk\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n      <span class=\"hcrs__sk\">&lt;li&gt;&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/blog\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Blog<span class=\"hcrs__sk\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n      <span class=\"hcrs__sk\">&lt;li&gt;&lt;a<\/span> <span class=\"hcrs__sa\">href<\/span>=<span class=\"hcrs__ss\">\"\/contact\"<\/span><span class=\"hcrs__sk\">&gt;<\/span>Contact<span class=\"hcrs__sk\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n    <span class=\"hcrs__sk\">&lt;\/ul&gt;<\/span>\r\n  <span class=\"hcrs__sk\">&lt;\/nav&gt;<\/span>\r\n<span class=\"hcrs__sk\">&lt;\/header&gt;<\/span>\r\n\r\n<span class=\"hcrs__sc\">\/* CSS *\/<\/span>\r\n<span class=\"hcrs__kw\">.entete-site<\/span> {\r\n  <span class=\"hcrs__sa\">display<\/span>: <span class=\"hcrs__ss\">flex<\/span>;\r\n  <span class=\"hcrs__sa\">justify-content<\/span>: <span class=\"hcrs__ss\">space-between<\/span>;\r\n  <span class=\"hcrs__sa\">align-items<\/span>: <span class=\"hcrs__ss\">center<\/span>;\r\n  <span class=\"hcrs__sa\">padding<\/span>: <span class=\"hcrs__ss\">1rem 2rem<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__kw\">.liste-nav<\/span> {\r\n  <span class=\"hcrs__sa\">display<\/span>: <span class=\"hcrs__ss\">flex<\/span>;\r\n  <span class=\"hcrs__sa\">list-style<\/span>: <span class=\"hcrs__ss\">none<\/span>;\r\n  <span class=\"hcrs__sa\">gap<\/span>: <span class=\"hcrs__ss\">2rem<\/span>;\r\n}\r\n\r\n<span class=\"hcrs__sc\">\/* Mobile : passe en colonne sous 640px *\/<\/span>\r\n<span class=\"hcrs__kw\">@media<\/span> (<span class=\"hcrs__sa\">max-width<\/span>: <span class=\"hcrs__ss\">640px<\/span>) {\r\n  <span class=\"hcrs__kw\">.entete-site<\/span> { <span class=\"hcrs__sa\">flex-direction<\/span>: <span class=\"hcrs__ss\">column<\/span>; }\r\n  <span class=\"hcrs__kw\">.liste-nav<\/span>   { <span class=\"hcrs__sa\">gap<\/span>: <span class=\"hcrs__ss\">1rem<\/span>; }\r\n}<\/pre>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__infobox hcrs--ok\">\r\n          <span class=\"hcrs__infobox-icon\">\ud83c\udfc6<\/span>\r\n          <p class=\"hcrs__infobox-body\"><strong>Tu as maintenant les bases compl\u00e8tes du HTML &amp; CSS.<\/strong> Prochaines \u00e9tapes recommand\u00e9es : <strong>CSS Grid<\/strong> pour les mises en page 2D complexes, les <strong>Media Queries<\/strong> pour le responsive avanc\u00e9, et <strong>CSS Transitions<\/strong> pour les animations simples.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"hcrs__footnav\">\r\n          <button class=\"hcrs__footbtn\" onclick=\"hcrsShow(6)\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n          <span class=\"hcrs__footcount\">8 \/ 8<\/span>\r\n          <button class=\"hcrs__footbtn\" disabled>Fin du cours \ud83c\udf89<\/button>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div><!-- fin .hcrs__content-area -->\r\n  <\/div><!-- fin .hcrs__body -->\r\n<\/div><!-- fin #hcrs-root -->\r\n\r\n<script>\r\n(function() {\r\n  \/* Namespace isol\u00e9 \u2014 aucune variable globale ne fuite *\/\r\n  var hcrsCurrent = 0;\r\n  var hcrsTotal   = 8;\r\n\r\n  window.hcrsShow = function(idx) {\r\n    document.getElementById('hcrs-ch' + hcrsCurrent).classList.remove('hcrs--visible');\r\n    document.querySelectorAll('.hcrs__navitem')[hcrsCurrent].classList.remove('hcrs--active');\r\n    document.querySelectorAll('.hcrs__navitem')[hcrsCurrent].removeAttribute('aria-current');\r\n\r\n    hcrsCurrent = idx;\r\n\r\n    document.getElementById('hcrs-ch' + hcrsCurrent).classList.add('hcrs--visible');\r\n    var activeBtn = document.querySelectorAll('.hcrs__navitem')[hcrsCurrent];\r\n    activeBtn.classList.add('hcrs--active');\r\n    activeBtn.setAttribute('aria-current', 'true');\r\n\r\n    var pct = Math.round((hcrsCurrent + 1) \/ hcrsTotal * 100);\r\n    document.getElementById('hcrs-prog').style.width = pct + '%';\r\n    document.getElementById('hcrs-counter').textContent = 'Chapitre ' + (hcrsCurrent + 1) + ' \/ ' + hcrsTotal;\r\n\r\n    var progressTrack = document.querySelector('.hcrs__progress-track');\r\n    if (progressTrack) progressTrack.setAttribute('aria-valuenow', hcrsCurrent + 1);\r\n\r\n    \/* Scroll haut de la zone de contenu *\/\r\n    document.getElementById('hcrs-scroll').scrollTop = 0;\r\n  };\r\n\r\n  window.hcrsCopy = function(btn) {\r\n    var pre = btn.closest('.hcrs__codeblock').querySelector('pre');\r\n    var text = pre.innerText || pre.textContent;\r\n    navigator.clipboard.writeText(text).then(function() {\r\n      btn.classList.add('hcrs--copied');\r\n      btn.textContent = '\u2705 Copi\u00e9 !';\r\n      setTimeout(function() {\r\n        btn.classList.remove('hcrs--copied');\r\n        btn.textContent = '\ud83d\udccb Copier';\r\n      }, 2000);\r\n    }).catch(function() {\r\n      \/* Fallback pour navigateurs sans clipboard API *\/\r\n      var ta = document.createElement('textarea');\r\n      ta.value = text;\r\n      ta.style.position = 'fixed';\r\n      ta.style.opacity  = '0';\r\n      document.body.appendChild(ta);\r\n      ta.select();\r\n      document.execCommand('copy');\r\n      document.body.removeChild(ta);\r\n      btn.textContent = '\u2705 Copi\u00e9 !';\r\n      setTimeout(function() { btn.textContent = '\ud83d\udccb Copier'; }, 2000);\r\n    });\r\n  };\r\n\r\n  window.hcrsSetFlex = function(btn, val) {\r\n    document.getElementById('hcrs-flexstage').style.justifyContent = val;\r\n    document.querySelectorAll('.hcrs__flexpill').forEach(function(b) {\r\n      b.classList.remove('hcrs--active');\r\n    });\r\n    btn.classList.add('hcrs--active');\r\n  };\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u25c8 BTS CDUI \/ SIO Introduction au HTML &amp; CSS Niveau d\u00e9butant Chapitre 1 \/ 8 Chapitres 01Introduction au Web 02DOCTYPE &amp; Structure 03Le &lt;head&gt; en d\u00e9tail 04S\u00e9mantique HTML 05Balises essentielles 06Introduction CSS 07Le Box Model 08Flexbox \ud83c\udf10 Introduction Comment fonctionne le Web ? Avant d&rsquo;\u00e9crire la moindre ligne de code, comprendre ce qui se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-869","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/posts\/869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/comments?post=869"}],"version-history":[{"count":26,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/posts\/869\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/posts\/869\/revisions\/908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/media\/870"}],"wp:attachment":[{"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/media?parent=869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/categories?post=869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.site-e-work.fr\/shop\/wp-json\/wp\/v2\/tags?post=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}