{"id":9114,"date":"2026-03-05T15:03:37","date_gmt":"2026-03-05T20:03:37","guid":{"rendered":"https:\/\/blogphotographie.com\/?page_id=9114"},"modified":"2026-03-10T09:59:36","modified_gmt":"2026-03-10T13:59:36","slug":"assistant-posemetre","status":"publish","type":"page","link":"https:\/\/blogphotographie.com\/fr_fr\/assistant-posemetre\/","title":{"rendered":"Assistant Posem\u00e8tre"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Assistant Posem\u00e8tre<\/strong><\/h2>\n\n\n\n<p>Cet outil interactif t&rsquo;aide \u00e0 comprendre le triangle d&rsquo;exposition et les valeurs EV en pratique.<\/p>\n\n\n\n<p>Pour savoir comment l&rsquo;utiliser et comprendre d&rsquo;o\u00f9 viennent ces valeurs, lis l&rsquo;article complet : <a href=\"https:\/\/blogphotographie.com\/posemetre-en-photographie\/\">Posem\u00e8tre en photographie \u2013 apprendre \u00e0 lire la lumi\u00e8re et choisir ton exposition avec EV<\/a><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/blogphotographie.com\/posemetre-en-photographie\/\">Lire l&rsquo;article complet<\/a><\/div>\n<\/div>\n\n\n\n<div id=\"posemetre-sylvain\" style=\"max-width:750px;margin:2rem auto;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;\">\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600&family=Outfit:wght@300;400;500;600;700&display=swap');\n    \n    #posemetre-sylvain * { box-sizing:border-box; }\n    \n    #posemetre-sylvain {\n      --rouge: #e53935;\n      --rouge-clair: #ff6f60;\n      --rouge-sombre: #ab000d;\n      --fond: #0d0d0d;\n      --fond-carte: #141414;\n      --fond-input: #1a1a1a;\n      --bordure: #2a2a2a;\n      --texte: #f0f0f0;\n      --texte-secondaire: #a0a0a0;\n      --vert: #4caf50;\n      --jaune: #ffc107;\n    }\n    \n    #posemetre-sylvain .pm-card {\n      background: var(--fond-carte);\n      color: var(--texte);\n      border-radius: 20px;\n      padding: 1.75rem;\n      box-shadow: 0 25px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--bordure);\n      font-family: 'Outfit', sans-serif;\n    }\n    \n    #posemetre-sylvain .pm-header {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-logo {\n      width: 48px;\n      height: 48px;\n      background: linear-gradient(135deg, var(--rouge), var(--rouge-sombre));\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.5rem;\n      box-shadow: 0 4px 15px rgba(229,57,53,0.3);\n    }\n    \n    #posemetre-sylvain h2 {\n      margin: 0;\n      font-size: 1.4rem;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      color: var(--texte);\n    }\n    \n    #posemetre-sylvain .pm-sub {\n      font-size: 0.85rem;\n      color: var(--texte-secondaire);\n      margin: 0;\n    }\n    \n    \/* Onglets de mode *\/\n    #posemetre-sylvain .pm-mode-tabs {\n      display: flex;\n      gap: 0.5rem;\n      margin-bottom: 1.25rem;\n      flex-wrap: wrap;\n      background: var(--fond);\n      padding: 0.35rem;\n      border-radius: 12px;\n    }\n    \n    #posemetre-sylvain .pm-mode-btn {\n      flex: 1 1 100px;\n      text-align: center;\n      padding: 0.5rem 0.75rem;\n      border-radius: 8px;\n      border: none;\n      background: transparent;\n      color: var(--texte-secondaire);\n      font-size: 0.8rem;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      font-family: inherit;\n    }\n    \n    #posemetre-sylvain .pm-mode-btn:hover {\n      color: var(--texte);\n      background: var(--fond-input);\n    }\n    \n    #posemetre-sylvain .pm-mode-btn.pm-active {\n      background: var(--rouge);\n      color: white;\n      box-shadow: 0 4px 12px rgba(229,57,53,0.35);\n    }\n    \n    \/* Zone simulation de sc\u00e8ne *\/\n    #posemetre-sylvain .pm-scene-section {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 1rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-scene-title {\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      color: var(--rouge-clair);\n      margin-bottom: 0.75rem;\n      font-weight: 600;\n    }\n    \n    #posemetre-sylvain .pm-scene-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n      gap: 0.5rem;\n    }\n    \n    #posemetre-sylvain .pm-scene-btn {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.6rem 0.75rem;\n      border-radius: 8px;\n      border: 1px solid var(--bordure);\n      background: var(--fond-carte);\n      color: var(--texte);\n      font-size: 0.8rem;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n    \n    #posemetre-sylvain .pm-scene-btn:hover {\n      border-color: var(--rouge);\n      background: var(--fond-input);\n    }\n    \n    #posemetre-sylvain .pm-scene-btn.pm-scene-active {\n      border-color: var(--rouge);\n      background: rgba(229,57,53,0.15);\n      box-shadow: 0 0 0 1px var(--rouge);\n    }\n    \n    #posemetre-sylvain .pm-scene-icon {\n      font-size: 1.1rem;\n    }\n    \n    #posemetre-sylvain .pm-scene-info {\n      margin-top: 0.75rem;\n      padding: 0.75rem;\n      background: var(--fond-carte);\n      border-radius: 8px;\n      border-left: 3px solid var(--rouge);\n    }\n    \n    #posemetre-sylvain .pm-scene-info-title {\n      font-weight: 600;\n      font-size: 0.85rem;\n      margin-bottom: 0.25rem;\n    }\n    \n    #posemetre-sylvain .pm-scene-info-text {\n      font-size: 0.8rem;\n      color: var(--texte-secondaire);\n      line-height: 1.4;\n    }\n    \n    \/* R\u00e9glages principaux *\/\n    #posemetre-sylvain .pm-controls {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 0.75rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-control {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 0.75rem;\n      text-align: center;\n    }\n    \n    #posemetre-sylvain .pm-control-label {\n      font-size: 0.7rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--texte-secondaire);\n      margin-bottom: 0.5rem;\n      display: block;\n    }\n    \n    #posemetre-sylvain .pm-control-value {\n      font-family: 'JetBrains Mono', monospace;\n      font-size: 1.4rem;\n      font-weight: 600;\n      color: var(--texte);\n      margin-bottom: 0.5rem;\n    }\n    \n    #posemetre-sylvain .pm-control select {\n      width: 100%;\n      padding: 0.4rem;\n      border-radius: 6px;\n      border: 1px solid var(--bordure);\n      background: var(--fond-input);\n      color: var(--texte);\n      font-size: 0.85rem;\n      font-family: 'JetBrains Mono', monospace;\n      cursor: pointer;\n    }\n    \n    #posemetre-sylvain .pm-control select:focus {\n      outline: none;\n      border-color: var(--rouge);\n    }\n    \n    \/* Indicateur d'exposition *\/\n    #posemetre-sylvain .pm-exposure-display {\n      background: var(--fond);\n      border-radius: 16px;\n      padding: 1.25rem;\n      margin-bottom: 1rem;\n      text-align: center;\n    }\n    \n    #posemetre-sylvain .pm-ev-main {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 1rem;\n      margin-bottom: 0.75rem;\n    }\n    \n    #posemetre-sylvain .pm-ev-number {\n      font-family: 'JetBrains Mono', monospace;\n      font-size: 2.5rem;\n      font-weight: 700;\n      background: linear-gradient(135deg, var(--texte), var(--texte-secondaire));\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n    }\n    \n    #posemetre-sylvain .pm-ev-label {\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      color: var(--texte-secondaire);\n    }\n    \n    \/* Barre d'exposition visuelle *\/\n    #posemetre-sylvain .pm-exposure-bar {\n      height: 8px;\n      background: linear-gradient(to right, \n        #1a1a1a 0%, \n        #333 20%, \n        var(--vert) 45%, \n        var(--vert) 55%, \n        #333 80%, \n        #fff 100%\n      );\n      border-radius: 4px;\n      position: relative;\n      margin: 1rem 0;\n    }\n    \n    #posemetre-sylvain .pm-exposure-marker {\n      position: absolute;\n      top: -6px;\n      width: 20px;\n      height: 20px;\n      background: var(--texte);\n      border-radius: 50%;\n      transform: translateX(-50%);\n      box-shadow: 0 2px 8px rgba(0,0,0,0.5);\n      transition: left 0.3s ease;\n      border: 2px solid var(--fond);\n    }\n    \n    #posemetre-sylvain .pm-exposure-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 0.7rem;\n      color: var(--texte-secondaire);\n      margin-top: 0.5rem;\n    }\n    \n    \/* Status d'exposition *\/\n    #posemetre-sylvain .pm-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.5rem 1rem;\n      border-radius: 999px;\n      font-size: 0.85rem;\n      font-weight: 500;\n    }\n    \n    #posemetre-sylvain .pm-status.pm-under {\n      background: rgba(33,150,243,0.15);\n      color: #64b5f6;\n      border: 1px solid rgba(33,150,243,0.3);\n    }\n    \n    #posemetre-sylvain .pm-status.pm-correct {\n      background: rgba(76,175,80,0.15);\n      color: #81c784;\n      border: 1px solid rgba(76,175,80,0.3);\n    }\n    \n    #posemetre-sylvain .pm-status.pm-over {\n      background: rgba(255,193,7,0.15);\n      color: #ffd54f;\n      border: 1px solid rgba(255,193,7,0.3);\n    }\n    \n    \/* Compensation *\/\n    #posemetre-sylvain .pm-compensation {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 1rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-comp-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 0.5rem;\n    }\n    \n    #posemetre-sylvain .pm-comp-label {\n      font-size: 0.8rem;\n      color: var(--texte-secondaire);\n    }\n    \n    #posemetre-sylvain .pm-comp-value {\n      font-family: 'JetBrains Mono', monospace;\n      font-size: 1.1rem;\n      font-weight: 600;\n      color: var(--rouge-clair);\n    }\n    \n    #posemetre-sylvain input[type=\"range\"] {\n      width: 100%;\n      height: 6px;\n      -webkit-appearance: none;\n      background: var(--bordure);\n      border-radius: 3px;\n      outline: none;\n    }\n    \n    #posemetre-sylvain input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 20px;\n      height: 20px;\n      background: var(--rouge);\n      border-radius: 50%;\n      cursor: pointer;\n      box-shadow: 0 2px 8px rgba(229,57,53,0.4);\n    }\n    \n    #posemetre-sylvain input[type=\"range\"]::-moz-range-thumb {\n      width: 20px;\n      height: 20px;\n      background: var(--rouge);\n      border-radius: 50%;\n      cursor: pointer;\n      border: none;\n    }\n    \n    \/* Zone flash *\/\n    #posemetre-sylvain .pm-flash-section {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 1rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-flash-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n      gap: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-flash-field label {\n      display: block;\n      font-size: 0.75rem;\n      color: var(--texte-secondaire);\n      margin-bottom: 0.35rem;\n    }\n    \n    #posemetre-sylvain .pm-flash-field select,\n    #posemetre-sylvain .pm-flash-field input {\n      width: 100%;\n      padding: 0.5rem;\n      border-radius: 6px;\n      border: 1px solid var(--bordure);\n      background: var(--fond-input);\n      color: var(--texte);\n      font-size: 0.9rem;\n      font-family: 'JetBrains Mono', monospace;\n    }\n    \n    #posemetre-sylvain .pm-flash-result {\n      margin-top: 0.75rem;\n      padding: 0.75rem;\n      background: var(--fond-carte);\n      border-radius: 8px;\n      font-size: 0.85rem;\n      border-left: 3px solid var(--rouge);\n    }\n    \n    \/* Zone ratios *\/\n    #posemetre-sylvain .pm-ratio-section {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 1rem;\n      margin-bottom: 1rem;\n    }\n    \n    #posemetre-sylvain .pm-ratio-visual {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-top: 0.75rem;\n    }\n    \n    #posemetre-sylvain .pm-ratio-box {\n      flex: 1;\n      padding: 1rem;\n      border-radius: 8px;\n      text-align: center;\n      font-size: 0.8rem;\n    }\n    \n    #posemetre-sylvain .pm-ratio-main {\n      background: rgba(255,255,255,0.9);\n      color: #111;\n    }\n    \n    #posemetre-sylvain .pm-ratio-fill {\n      background: rgba(255,255,255,0.3);\n      color: var(--texte);\n    }\n    \n    \/* Notes p\u00e9dagogiques *\/\n    #posemetre-sylvain .pm-pedagogy {\n      background: linear-gradient(135deg, rgba(229,57,53,0.1), rgba(229,57,53,0.05));\n      border-radius: 12px;\n      padding: 1rem;\n      border: 1px solid rgba(229,57,53,0.2);\n    }\n    \n    #posemetre-sylvain .pm-pedagogy-title {\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      color: var(--rouge-clair);\n      margin-bottom: 0.5rem;\n      font-weight: 600;\n    }\n    \n    #posemetre-sylvain .pm-pedagogy-text {\n      font-size: 0.85rem;\n      color: var(--texte);\n      line-height: 1.5;\n    }\n    \n    #posemetre-sylvain .pm-pedagogy-text strong {\n      color: var(--rouge-clair);\n    }\n    \n    \/* Mode ambiante info *\/\n    #posemetre-sylvain .pm-ambient-info {\n      background: var(--fond);\n      border-radius: 12px;\n      padding: 1rem;\n      margin-bottom: 1rem;\n      border: 1px dashed var(--bordure);\n    }\n    \n    #posemetre-sylvain .pm-ambient-info p {\n      margin: 0;\n      font-size: 0.85rem;\n      color: var(--texte-secondaire);\n      line-height: 1.5;\n    }\n    \n    #posemetre-sylvain .pm-ev-input-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-top: 0.75rem;\n    }\n    \n    #posemetre-sylvain .pm-ev-input-row label {\n      font-size: 0.8rem;\n      color: var(--texte);\n    }\n    \n    #posemetre-sylvain .pm-ev-input-row input {\n      width: 80px;\n      padding: 0.4rem;\n      border-radius: 6px;\n      border: 1px solid var(--bordure);\n      background: var(--fond-input);\n      color: var(--texte);\n      font-family: 'JetBrains Mono', monospace;\n      font-size: 1rem;\n      text-align: center;\n    }\n    \n    \/* Footer *\/\n    #posemetre-sylvain .pm-footer {\n      margin-top: 1rem;\n      padding-top: 1rem;\n      border-top: 1px solid var(--bordure);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 0.5rem;\n    }\n    \n    #posemetre-sylvain .pm-footer-text {\n      font-size: 0.7rem;\n      color: var(--texte-secondaire);\n    }\n    \n    #posemetre-sylvain .pm-reset-btn {\n      padding: 0.4rem 0.8rem;\n      border-radius: 6px;\n      border: 1px solid var(--bordure);\n      background: transparent;\n      color: var(--texte-secondaire);\n      font-size: 0.75rem;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n    \n    #posemetre-sylvain .pm-reset-btn:hover {\n      border-color: var(--rouge);\n      color: var(--texte);\n    }\n    \n    @media (max-width: 500px) {\n      #posemetre-sylvain .pm-controls {\n        grid-template-columns: 1fr;\n      }\n      #posemetre-sylvain .pm-ev-number {\n        font-size: 2rem;\n      }\n      #posemetre-sylvain .pm-flash-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n\n  <div class=\"pm-card\">\n    <!-- Header -->\n    <div class=\"pm-header\">\n      <div class=\"pm-logo\">\ud83d\udcf7<\/div>\n      <div>\n        <h2>Assistant Posem\u00e8tre<\/h2>\n        <p class=\"pm-sub\">Comprends le triangle d&rsquo;exposition en pratique<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Onglets de mode -->\n    <div class=\"pm-mode-tabs\">\n      <button type=\"button\" class=\"pm-mode-btn pm-active\" data-mode=\"scene\">\ud83c\udfac Simulation<\/button>\n      <button type=\"button\" class=\"pm-mode-btn\" data-mode=\"ambient\">\u2600\ufe0f Ambiante<\/button>\n      <button type=\"button\" class=\"pm-mode-btn\" data-mode=\"flash\">\u26a1 Flash<\/button>\n      <button type=\"button\" class=\"pm-mode-btn\" data-mode=\"ratio\">\ud83d\udca1 Ratios<\/button>\n    <\/div>\n\n    <!-- Section simulation de sc\u00e8ne -->\n    <div class=\"pm-scene-section\" id=\"pm-scene-section\">\n      <div class=\"pm-scene-title\">Choisis ta situation de prise de vue<\/div>\n      <div class=\"pm-scene-grid\">\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"sun-bright\">\n          <span class=\"pm-scene-icon\">\u2600\ufe0f<\/span>\n          <span>Plein soleil<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"sun-light\">\n          <span class=\"pm-scene-icon\">\ud83c\udf24\ufe0f<\/span>\n          <span>Soleil voil\u00e9<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"cloudy\">\n          <span class=\"pm-scene-icon\">\u2601\ufe0f<\/span>\n          <span>Nuageux<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"shade\">\n          <span class=\"pm-scene-icon\">\ud83c\udf33<\/span>\n          <span>Ombre \/ for\u00eat<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"sunset\">\n          <span class=\"pm-scene-icon\">\ud83c\udf05<\/span>\n          <span>Coucher soleil<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"bluehour\">\n          <span class=\"pm-scene-icon\">\ud83c\udf06<\/span>\n          <span>Heure bleue<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"indoor-bright\">\n          <span class=\"pm-scene-icon\">\ud83d\udca1<\/span>\n          <span>Int\u00e9rieur lumineux<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"indoor-dim\">\n          <span class=\"pm-scene-icon\">\ud83c\udfe0<\/span>\n          <span>Int\u00e9rieur sombre<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"night-city\">\n          <span class=\"pm-scene-icon\">\ud83c\udf03<\/span>\n          <span>Nuit urbaine<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"night-dark\">\n          <span class=\"pm-scene-icon\">\ud83c\udf19<\/span>\n          <span>Nuit noire<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"snow\">\n          <span class=\"pm-scene-icon\">\u2744\ufe0f<\/span>\n          <span>Neige au soleil<\/span>\n        <\/button>\n        <button type=\"button\" class=\"pm-scene-btn\" data-scene=\"portrait-window\">\n          <span class=\"pm-scene-icon\">\ud83e\ude9f<\/span>\n          <span>Portrait fen\u00eatre<\/span>\n        <\/button>\n      <\/div>\n      <div class=\"pm-scene-info\" id=\"pm-scene-info\" style=\"display:none;\">\n        <div class=\"pm-scene-info-title\" id=\"pm-scene-info-title\"><\/div>\n        <div class=\"pm-scene-info-text\" id=\"pm-scene-info-text\"><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Section mode ambiante -->\n    <div class=\"pm-ambient-info\" id=\"pm-ambient-section\" style=\"display:none;\">\n      <p>En mode <strong>lumi\u00e8re ambiante libre<\/strong>, tu d\u00e9finis toi-m\u00eame l&rsquo;EV cible selon ta mesure ou ton estimation. Ajuste ensuite les r\u00e9glages pour atteindre cet EV.<\/p>\n      <div class=\"pm-ev-input-row\">\n        <label for=\"pm-target-ev-input\">EV cible :<\/label>\n        <input type=\"number\" id=\"pm-target-ev-input\" min=\"-4\" max=\"20\" step=\"1\" value=\"12\">\n      <\/div>\n    <\/div>\n\n    <!-- Contr\u00f4les principaux -->\n    <div class=\"pm-controls\">\n      <div class=\"pm-control\">\n        <span class=\"pm-control-label\">Ouverture<\/span>\n        <div class=\"pm-control-value\" id=\"pm-aperture-display\">f\/8<\/div>\n        <select id=\"pm-aperture\">\n          <option value=\"1\">f\/1<\/option>\n          <option value=\"1.4\">f\/1.4<\/option>\n          <option value=\"2\">f\/2<\/option>\n          <option value=\"2.8\">f\/2.8<\/option>\n          <option value=\"4\">f\/4<\/option>\n          <option value=\"5.6\">f\/5.6<\/option>\n          <option value=\"8\" selected>f\/8<\/option>\n          <option value=\"11\">f\/11<\/option>\n          <option value=\"16\">f\/16<\/option>\n          <option value=\"22\">f\/22<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"pm-control\">\n        <span class=\"pm-control-label\">Vitesse<\/span>\n        <div class=\"pm-control-value\" id=\"pm-shutter-display\">1\/250<\/div>\n        <select id=\"pm-shutter\">\n          <option value=\"30\">30s<\/option>\n          <option value=\"15\">15s<\/option>\n          <option value=\"8\">8s<\/option>\n          <option value=\"4\">4s<\/option>\n          <option value=\"2\">2s<\/option>\n          <option value=\"1\">1s<\/option>\n          <option value=\"0.5\">1\/2<\/option>\n          <option value=\"0.25\">1\/4<\/option>\n          <option value=\"0.125\">1\/8<\/option>\n          <option value=\"0.0667\">1\/15<\/option>\n          <option value=\"0.0333\">1\/30<\/option>\n          <option value=\"0.0167\">1\/60<\/option>\n          <option value=\"0.008\">1\/125<\/option>\n          <option value=\"0.004\" selected>1\/250<\/option>\n          <option value=\"0.002\">1\/500<\/option>\n          <option value=\"0.001\">1\/1000<\/option>\n          <option value=\"0.0005\">1\/2000<\/option>\n          <option value=\"0.00025\">1\/4000<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"pm-control\">\n        <span class=\"pm-control-label\">ISO<\/span>\n        <div class=\"pm-control-value\" id=\"pm-iso-display\">100<\/div>\n        <select id=\"pm-iso\">\n          <option value=\"50\">50<\/option>\n          <option value=\"100\" selected>100<\/option>\n          <option value=\"200\">200<\/option>\n          <option value=\"400\">400<\/option>\n          <option value=\"800\">800<\/option>\n          <option value=\"1600\">1600<\/option>\n          <option value=\"3200\">3200<\/option>\n          <option value=\"6400\">6400<\/option>\n          <option value=\"12800\">12800<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n\n    <!-- Affichage EV et exposition -->\n    <div class=\"pm-exposure-display\">\n      <div class=\"pm-ev-main\">\n        <div>\n          <div class=\"pm-ev-label\">Valeur d&rsquo;exposition de tes r\u00e9glages<\/div>\n          <div class=\"pm-ev-number\" id=\"pm-ev-display\">EV 14<\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"pm-exposure-bar\">\n        <div class=\"pm-exposure-marker\" id=\"pm-exposure-marker\" style=\"left:50%;\"><\/div>\n      <\/div>\n      <div class=\"pm-exposure-labels\">\n        <span>Sous-expos\u00e9<\/span>\n        <span>Correct<\/span>\n        <span>Surexpos\u00e9<\/span>\n      <\/div>\n      \n      <div class=\"pm-status pm-correct\" id=\"pm-status\">\n        <span>\u2713<\/span>\n        <span id=\"pm-status-text\">Exposition correcte pour cette sc\u00e8ne<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Compensation d'exposition -->\n    <div class=\"pm-compensation\">\n      <div class=\"pm-comp-header\">\n        <span class=\"pm-comp-label\">Compensation d&rsquo;exposition (intention cr\u00e9ative)<\/span>\n        <span class=\"pm-comp-value\" id=\"pm-comp-display\">0 IL<\/span>\n      <\/div>\n      <input type=\"range\" id=\"pm-comp\" min=\"-3\" max=\"3\" step=\"0.333\" value=\"0\">\n      <div style=\"display:flex;justify-content:space-between;font-size:0.7rem;color:var(--texte-secondaire);margin-top:0.25rem;\">\n        <span>-3 IL (sombre)<\/span>\n        <span>0<\/span>\n        <span>+3 IL (clair)<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Section Flash -->\n    <div class=\"pm-flash-section\" id=\"pm-flash-section\" style=\"display:none;\">\n      <div class=\"pm-scene-title\">Param\u00e8tres flash<\/div>\n      <div class=\"pm-flash-grid\">\n        <div class=\"pm-flash-field\">\n          <label>Nombre guide (NG \u00e0 ISO 100)<\/label>\n          <select id=\"pm-flash-gn\">\n            <option value=\"20\">20 (flash int\u00e9gr\u00e9)<\/option>\n            <option value=\"32\">32 (petit cobra)<\/option>\n            <option value=\"42\">42 (cobra moyen)<\/option>\n            <option value=\"58\" selected>58 (cobra puissant)<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"pm-flash-field\">\n          <label>Puissance<\/label>\n          <select id=\"pm-flash-power\">\n            <option value=\"1\">1\/1 (pleine puissance)<\/option>\n            <option value=\"2\">1\/2<\/option>\n            <option value=\"4\" selected>1\/4<\/option>\n            <option value=\"8\">1\/8<\/option>\n            <option value=\"16\">1\/16<\/option>\n            <option value=\"32\">1\/32<\/option>\n            <option value=\"64\">1\/64<\/option>\n            <option value=\"128\">1\/128<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"pm-flash-field\">\n          <label>Distance sujet (m)<\/label>\n          <input type=\"number\" id=\"pm-flash-distance\" min=\"0.5\" max=\"20\" step=\"0.5\" value=\"2.5\">\n        <\/div>\n        <div class=\"pm-flash-field\">\n          <label>ISO<\/label>\n          <select id=\"pm-flash-iso\">\n            <option value=\"100\" selected>100<\/option>\n            <option value=\"200\">200<\/option>\n            <option value=\"400\">400<\/option>\n            <option value=\"800\">800<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n      <div class=\"pm-flash-result\" id=\"pm-flash-result\">\n        <strong>Ouverture recommand\u00e9e :<\/strong> <span id=\"pm-flash-aperture\">f\/8<\/span><br>\n        <span style=\"font-size:0.8rem;color:var(--texte-secondaire);\" id=\"pm-flash-tip\">Le flash fige le mouvement \u2013 la vitesse (max synchro ~1\/200s) contr\u00f4le l&rsquo;ambiance de l&rsquo;arri\u00e8re-plan.<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Section Ratios -->\n    <div class=\"pm-ratio-section\" id=\"pm-ratio-section\" style=\"display:none;\">\n      <div class=\"pm-scene-title\">Ratios de lumi\u00e8re (portrait)<\/div>\n      <select id=\"pm-ratio\" style=\"width:100%;padding:0.5rem;border-radius:6px;border:1px solid var(--bordure);background:var(--fond-input);color:var(--texte);font-size:0.9rem;\">\n        <option value=\"1\">1:1 \u2013 Plat, tr\u00e8s doux (beaut\u00e9, mode)<\/option>\n        <option value=\"1.4\">1:1.4 \u2013 Subtil, presque \u00e9gal (\u00bd IL)<\/option>\n        <option value=\"2\" selected>1:2 \u2013 Classique portrait (1 IL)<\/option>\n        <option value=\"2.8\">1:2.8 \u2013 Plus model\u00e9 (1.5 IL)<\/option>\n        <option value=\"4\">1:4 \u2013 Dramatique (2 IL)<\/option>\n        <option value=\"8\">1:8 \u2013 Tr\u00e8s contrast\u00e9 (3 IL)<\/option>\n      <\/select>\n      <div class=\"pm-ratio-visual\" id=\"pm-ratio-visual\">\n        <div class=\"pm-ratio-box pm-ratio-main\">\n          <strong>Lumi\u00e8re principale<\/strong><br>100%\n        <\/div>\n        <div style=\"font-size:1.5rem;\">\u2192<\/div>\n        <div class=\"pm-ratio-box pm-ratio-fill\" id=\"pm-ratio-fill\">\n          <strong>Remplissage<\/strong><br>50%\n        <\/div>\n      <\/div>\n      <div class=\"pm-flash-result\" style=\"margin-top:0.75rem;\" id=\"pm-ratio-tip\">\n        <strong>Diff\u00e9rence :<\/strong> 1 IL entre les deux sources.<br>\n        <span style=\"font-size:0.8rem;color:var(--texte-secondaire);\">Id\u00e9al pour un portrait naturel avec du model\u00e9 sans ombres trop dures.<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Notes p\u00e9dagogiques -->\n    <div class=\"pm-pedagogy\">\n      <div class=\"pm-pedagogy-title\">\ud83d\udca1 Ce qu&rsquo;il faut retenir<\/div>\n      <div class=\"pm-pedagogy-text\" id=\"pm-pedagogy-text\">\n        Choisis une <strong>sc\u00e8ne<\/strong> pour voir les r\u00e9glages sugg\u00e9r\u00e9s. Les presets donnent une exposition correcte pour l&rsquo;EV indiqu\u00e9. Utilise la compensation pour ajuster selon ton intention cr\u00e9ative.\n      <\/div>\n    <\/div>\n\n    <!-- Footer -->\n    <div class=\"pm-footer\">\n      <span class=\"pm-footer-text\">Outil p\u00e9dagogique \u2013 Acad\u00e9mie Photographe Gatineau cr\u00e9er par Sylvain Perrier \u2013 v5<\/span>\n      <button type=\"button\" class=\"pm-reset-btn\" id=\"pm-reset\">R\u00e9initialiser<\/button>\n    <\/div>\n  <\/div>\n\n  <script>\n  (function() {\n    \/\/ ===== DONN\u00c9ES SC\u00c8NES (v\u00e9rifi\u00e9es math\u00e9matiquement) =====\n    const sceneData = {\n      'sun-bright': {\n        ev: 15,\n        title: 'Plein soleil \u2013 EV 15',\n        text: 'R\u00e8gle Sunny 16 : \u00e0 f\/16, vitesse = 1\/ISO. Lumi\u00e8re intense, ombres dures. Id\u00e9al pour les paysages contrast\u00e9s.',\n        settings: { aperture: '11', shutter: '0.004', iso: '100' }\n      },\n      'sun-light': {\n        ev: 14,\n        title: 'Soleil voil\u00e9 \/ l\u00e9g\u00e8rement nuageux \u2013 EV 14',\n        text: 'Lumi\u00e8re douce mais encore directionnelle. Tr\u00e8s bon pour les portraits en ext\u00e9rieur.',\n        settings: { aperture: '8', shutter: '0.004', iso: '100' }\n      },\n      'cloudy': {\n        ev: 12,\n        title: 'Ciel couvert \u2013 EV 12',\n        text: 'Lumi\u00e8re tr\u00e8s diffuse, pas d\\'ombres. Les couleurs sont satur\u00e9es. Parfait pour le portrait.',\n        settings: { aperture: '5.6', shutter: '0.004', iso: '200' }\n      },\n      'shade': {\n        ev: 11,\n        title: 'Ombre ouverte \/ for\u00eat \u2013 EV 11',\n        text: 'Zone ombrag\u00e9e mais avec du ciel visible. Monte l\\'ISO ou ouvre le diaphragme.',\n        settings: { aperture: '4', shutter: '0.002', iso: '400' }\n      },\n      'sunset': {\n        ev: 12,\n        title: 'Coucher de soleil (ciel) \u2013 EV 12',\n        text: 'Pour exposer le ciel color\u00e9, sous-expose de -1 IL. Pour un sujet au premier plan, ajoute du flash ou expose pour lui.',\n        settings: { aperture: '8', shutter: '0.0167', iso: '100' }\n      },\n      'bluehour': {\n        ev: 8,\n        title: 'Heure bleue \u2013 EV 8',\n        text: 'Entre jour et nuit, lumi\u00e8re magique. Tr\u00e9pied recommand\u00e9 si tu fermes au-del\u00e0 de f\/5.6.',\n        settings: { aperture: '5.6', shutter: '0.0167', iso: '800' }\n      },\n      'indoor-bright': {\n        ev: 8,\n        title: 'Int\u00e9rieur bien \u00e9clair\u00e9 \u2013 EV 8',\n        text: 'Pr\u00e8s des fen\u00eatres ou avec bon \u00e9clairage artificiel. L\\'ISO 400-800 devient souvent n\u00e9cessaire.',\n        settings: { aperture: '2.8', shutter: '0.004', iso: '800' }\n      },\n      'indoor-dim': {\n        ev: 5,\n        title: 'Int\u00e9rieur sombre \u2013 EV 5',\n        text: 'Restaurant, mus\u00e9e, \u00e9glise... Monte l\\'ISO et ouvre au maximum. Surveille ta vitesse minimale!',\n        settings: { aperture: '2', shutter: '0.008', iso: '1600' }\n      },\n      'night-city': {\n        ev: 4,\n        title: 'Nuit urbaine \u00e9clair\u00e9e \u2013 EV 4',\n        text: 'N\u00e9ons, vitrines, lampadaires. Tr\u00e9pied utile pour garder l\\'ISO raisonnable.',\n        settings: { aperture: '2.8', shutter: '0.0333', iso: '1600' }\n      },\n      'night-dark': {\n        ev: 0,\n        title: 'Nuit noire \/ \u00e9toiles \u2013 EV 0',\n        text: 'Tr\u00e8s peu de lumi\u00e8re. Tr\u00e9pied obligatoire, grandes ouvertures, ISO \u00e9lev\u00e9 et poses longues.',\n        settings: { aperture: '2.8', shutter: '0.25', iso: '3200' }\n      },\n      'snow': {\n        ev: 16,\n        title: 'Neige ou sable au soleil \u2013 EV 16',\n        text: 'Surface tr\u00e8s r\u00e9fl\u00e9chissante. Surexpose de +1 \u00e0 +2 IL pour garder le blanc blanc, sinon ta neige sera grise!',\n        settings: { aperture: '16', shutter: '0.004', iso: '100' }\n      },\n      'portrait-window': {\n        ev: 9,\n        title: 'Portrait pr\u00e8s d\\'une fen\u00eatre \u2013 EV 9',\n        text: 'Lumi\u00e8re naturelle douce et modelante. Positionne ton sujet \u00e0 45\u00b0 de la fen\u00eatre pour un beau model\u00e9.',\n        settings: { aperture: '2.8', shutter: '0.004', iso: '400' }\n      }\n    };\n\n    \/\/ Valeurs de r\u00e9f\u00e9rence\n    const apertureValues = ['1', '1.4', '2', '2.8', '4', '5.6', '8', '11', '16', '22'];\n    const shutterLabels = {\n      '30': '30s', '15': '15s', '8': '8s', '4': '4s', '2': '2s', '1': '1s',\n      '0.5': '1\/2', '0.25': '1\/4', '0.125': '1\/8', '0.0667': '1\/15',\n      '0.0333': '1\/30', '0.0167': '1\/60', '0.008': '1\/125', '0.004': '1\/250',\n      '0.002': '1\/500', '0.001': '1\/1000', '0.0005': '1\/2000', '0.00025': '1\/4000'\n    };\n\n    \/\/ ===== S\u00c9LECTEURS =====\n    const $ = id => document.getElementById(id);\n    const modeButtons = document.querySelectorAll('#posemetre-sylvain .pm-mode-btn');\n    const sceneButtons = document.querySelectorAll('#posemetre-sylvain .pm-scene-btn');\n    \n    let currentMode = 'scene';\n    let currentSceneKey = 'sun-light';\n    let targetEV = 14;\n\n    \/\/ ===== CALCULS =====\n    \n    function calculateEV() {\n      const aperture = parseFloat($('pm-aperture').value);\n      const shutter = parseFloat($('pm-shutter').value);\n      const iso = parseFloat($('pm-iso').value);\n      const comp = parseFloat($('pm-comp').value) || 0;\n      \n      \/\/ EV = log2(N\u00b2\/t) - log2(ISO\/100)\n      const ev = Math.log2((aperture * aperture) \/ shutter) - Math.log2(iso \/ 100);\n      \n      \/\/ +1 IL = image plus claire = on vise un EV plus bas\n      const desiredEV = targetEV - comp;\n      \n      return { ev, comp, desiredEV };\n    }\n\n    function updateDisplay() {\n      const { ev, comp, desiredEV } = calculateEV();\n      \n      $('pm-ev-display').textContent = 'EV ' + ev.toFixed(1);\n      \n      const compText = comp >= 0 ? '+' + comp.toFixed(1) : comp.toFixed(1);\n      $('pm-comp-display').textContent = compText + ' IL';\n      \n      $('pm-aperture-display').textContent = 'f\/' + $('pm-aperture').value;\n      $('pm-shutter-display').textContent = shutterLabels[$('pm-shutter').value] || $('pm-shutter').value + 's';\n      $('pm-iso-display').textContent = $('pm-iso').value;\n      \n      \/\/ diff positif = EV trop \u00e9lev\u00e9 = moins de lumi\u00e8re = SOUS-EXPOS\u00c9\n      const diff = ev - desiredEV;\n      \n      \/\/ Marqueur : centre = correct, gauche = sous-expos\u00e9, droite = surexpos\u00e9\n      const markerPos = Math.max(0, Math.min(100, 50 - (diff * 16)));\n      $('pm-exposure-marker').style.left = markerPos + '%';\n      \n      const statusEl = $('pm-status');\n      const statusText = $('pm-status-text');\n      statusEl.classList.remove('pm-under', 'pm-correct', 'pm-over');\n      \n      if (diff > 0.5) {\n        statusEl.classList.add('pm-under');\n        statusText.textContent = 'Sous-expos\u00e9 de ' + diff.toFixed(1) + ' IL \u2013 image trop sombre';\n      } else if (diff < -0.5) {\n        statusEl.classList.add('pm-over');\n        statusText.textContent = 'Surexpos\u00e9 de ' + Math.abs(diff).toFixed(1) + ' IL \u2013 image trop claire';\n      } else {\n        statusEl.classList.add('pm-correct');\n        statusText.textContent = 'Exposition correcte' + (comp !== 0 ? ' (avec compensation de ' + compText + ' IL)' : '');\n      }\n      \n      if (currentMode === 'flash') {\n        updateFlashCalculations();\n      }\n    }\n\n    \/\/ ===== MODES =====\n    \n    function setMode(mode) {\n      currentMode = mode;\n      \n      modeButtons.forEach(btn => {\n        btn.classList.toggle('pm-active', btn.dataset.mode === mode);\n      });\n      \n      $('pm-scene-section').style.display = mode === 'scene' ? 'block' : 'none';\n      $('pm-ambient-section').style.display = mode === 'ambient' ? 'block' : 'none';\n      $('pm-flash-section').style.display = mode === 'flash' ? 'block' : 'none';\n      $('pm-ratio-section').style.display = mode === 'ratio' ? 'block' : 'none';\n      \n      updatePedagogy(mode);\n      \n      if (mode === 'ambient') {\n        const val = parseFloat($('pm-target-ev-input').value);\n        targetEV = Number.isNaN(val) ? 12 : val;\n      }\n\n      if (mode === 'scene' && sceneData[currentSceneKey]) {\n        targetEV = sceneData[currentSceneKey].ev;\n      }\n      \n      if (mode === 'flash') {\n        updateFlashCalculations();\n      }\n      if (mode === 'ratio') {\n        updateRatioDisplay();\n      }\n      \n      updateDisplay();\n    }\n\n    function updatePedagogy(mode) {\n      const pedagogy = {\n        'scene': 'Choisis une <strong>sc\u00e8ne<\/strong> pour voir les r\u00e9glages sugg\u00e9r\u00e9s. Les presets donnent une exposition correcte pour l\\'EV indiqu\u00e9. Utilise la compensation pour ajuster selon ton intention cr\u00e9ative.',\n        'ambient': 'En mode <strong>ambiante<\/strong>, entre l\\'EV mesur\u00e9 par ton posem\u00e8tre ou estim\u00e9. L\\'outil te dira si tes r\u00e9glages correspondent. Rappel : EV 15 = plein soleil, EV 12 = nuageux, EV 8 = int\u00e9rieur lumineux, EV 0 = nuit noire.',\n        'flash': 'Avec un <strong>flash<\/strong>, la formule est simple : Ouverture = NG \u00f7 distance. L\\'ISO et la puissance modifient le NG effectif. La vitesse (max ~1\/200s synchro) g\u00e8re uniquement l\\'ambiance en arri\u00e8re-plan.',\n        'ratio': 'Les <strong>ratios de lumi\u00e8re<\/strong> d\u00e9finissent le contraste entre lumi\u00e8re principale et remplissage. 1:2 = 1 IL de diff\u00e9rence (portrait classique). 1:4 = 2 IL (dramatique). 1:8 = 3 IL (low-key).'\n      };\n      $('pm-pedagogy-text').innerHTML = pedagogy[mode];\n    }\n\n    \/\/ ===== SC\u00c8NES =====\n    \n    function selectScene(sceneKey) {\n      const scene = sceneData[sceneKey];\n      if (!scene) return;\n\n      currentSceneKey = sceneKey;\n      \n      sceneButtons.forEach(btn => {\n        btn.classList.toggle('pm-scene-active', btn.dataset.scene === sceneKey);\n      });\n      \n      $('pm-scene-info').style.display = 'block';\n      $('pm-scene-info-title').textContent = scene.title;\n      $('pm-scene-info-text').textContent = scene.text;\n      \n      $('pm-aperture').value = scene.settings.aperture;\n      $('pm-shutter').value = scene.settings.shutter;\n      $('pm-iso').value = scene.settings.iso;\n      $('pm-comp').value = 0;\n      \n      targetEV = scene.ev;\n      \n      updateDisplay();\n    }\n\n    \/\/ ===== FLASH =====\n    \n    function updateFlashCalculations() {\n      const gn = parseFloat($('pm-flash-gn').value);\n      const power = parseFloat($('pm-flash-power').value);\n      const distance = parseFloat($('pm-flash-distance').value);\n      const iso = parseFloat($('pm-flash-iso').value);\n\n      if (Number.isNaN(distance) || distance <= 0) {\n        $('pm-flash-aperture').textContent = '\u2014';\n        $('pm-flash-tip').textContent = 'Entre une distance valide sup\u00e9rieure \u00e0 0.';\n        return;\n      }\n      \n      const effectiveGN = gn * Math.sqrt(1 \/ power) * Math.sqrt(iso \/ 100);\n      const aperture = effectiveGN \/ distance;\n      \n      const closestAperture = apertureValues.reduce((prev, curr) => {\n        return Math.abs(parseFloat(curr) - aperture) < Math.abs(parseFloat(prev) - aperture) ? curr : prev;\n      });\n      \n      $('pm-flash-aperture').textContent = 'f\/' + closestAperture + ' (calcul exact : f\/' + aperture.toFixed(1) + ')';\n      \n      let tip = '';\n      if (aperture < 1.4) {\n        tip = '\u26a0\ufe0f Flash insuffisant pour cette distance. Rapproche-toi, augmente la puissance ou monte l\\'ISO.';\n      } else if (aperture > 22) {\n        tip = '\u26a0\ufe0f Flash trop puissant! Baisse la puissance, \u00e9loigne le flash, ou ajoute un diffuseur.';\n      } else {\n        tip = '\u2713 R\u00e9glage \u00e9quilibr\u00e9. Rappel : la vitesse (max synchro ~1\/200s) contr\u00f4le l\\'ambiance de l\\'arri\u00e8re-plan, pas l\\'exposition du flash.';\n      }\n      $('pm-flash-tip').textContent = tip;\n    }\n\n    \/\/ ===== RATIOS =====\n    \n    function updateRatioDisplay() {\n      const ratio = parseFloat($('pm-ratio').value);\n      const fillPercent = Math.round(100 \/ ratio);\n      const stops = Math.log2(ratio);\n      \n      $('pm-ratio-fill').innerHTML = '<strong>Remplissage<\/strong><br>' + fillPercent + '%';\n      $('pm-ratio-fill').style.background = 'rgba(255,255,255,' + (0.1 + fillPercent \/ 200) + ')';\n      \n      let tip = '';\n      if (ratio <= 1.4) {\n        tip = 'Lumi\u00e8re tr\u00e8s uniforme, id\u00e9ale pour la beaut\u00e9 et la mode o\u00f9 on veut minimiser les d\u00e9fauts et les ombres.';\n      } else if (ratio <= 2) {\n        tip = 'Ratio classique portrait. Model\u00e9 subtil, naturel et flatteur pour la plupart des sujets.';\n      } else if (ratio <= 4) {\n        tip = 'Plus de caract\u00e8re et de dimension. Bien pour les portraits masculins ou dramatiques.';\n      } else {\n        tip = 'Contraste fort, style low-key. Les ombres deviennent tr\u00e8s pr\u00e9sentes et d\u00e9finissent le sujet.';\n      }\n      \n      $('pm-ratio-tip').innerHTML = '<strong>Diff\u00e9rence :<\/strong> ' + stops.toFixed(1) + ' IL entre les deux sources.<br><span style=\"font-size:0.8rem;color:var(--texte-secondaire);\">' + tip + '<\/span>';\n    }\n\n    \/\/ ===== \u00c9V\u00c9NEMENTS =====\n    \n    modeButtons.forEach(btn => {\n      btn.addEventListener('click', () => setMode(btn.dataset.mode));\n    });\n    \n    sceneButtons.forEach(btn => {\n      btn.addEventListener('click', () => selectScene(btn.dataset.scene));\n    });\n    \n    ['pm-aperture', 'pm-shutter', 'pm-iso'].forEach(id => {\n      $(id).addEventListener('change', updateDisplay);\n    });\n    \n    $('pm-comp').addEventListener('input', updateDisplay);\n    \n    $('pm-target-ev-input').addEventListener('change', function() {\n      if (currentMode === 'ambient') {\n        const val = parseFloat(this.value);\n        targetEV = Number.isNaN(val) ? 12 : val;\n        updateDisplay();\n      }\n    });\n    \n    ['pm-flash-gn', 'pm-flash-power', 'pm-flash-iso'].forEach(id => {\n      $(id).addEventListener('change', updateFlashCalculations);\n    });\n    $('pm-flash-distance').addEventListener('input', updateFlashCalculations);\n    \n    $('pm-ratio').addEventListener('change', updateRatioDisplay);\n    \n    $('pm-reset').addEventListener('click', () => {\n      $('pm-comp').value = 0;\n      $('pm-target-ev-input').value = 12;\n      \n      setMode('scene');\n      selectScene('sun-light');\n    });\n\n    \/\/ ===== INITIALISATION =====\n    setMode('scene');\n    selectScene('sun-light');\n    \n  })();\n  <\/script>\n<\/div>\n\n\n\n<p><strong>\ud83d\udcf1 Note :<\/strong> Cet outil s&rsquo;affiche parfaitement sur ordinateur et tablette. Sur smartphone, l&rsquo;affichage peut \u00eatre l\u00e9g\u00e8rement r\u00e9duit. Si c&rsquo;est le cas, active l&rsquo;option \u00ab\u00a0Voir en mode ordinateur\u00a0\u00bb dans ton navigateur.<\/p>\n\n\n\n<div class=\"article-signature\">\n    \u2014 Sylvain Perrier \u00b7 Photographe &#038; formateur  \n    <a href=\"https:\/\/academiephotographegatineau.com\/\" target=\"_blank\">\n        Acad\u00e9mie Photographe Gatineau\n    <\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Assistant Posem\u00e8tre Cet outil interactif t&rsquo;aide \u00e0 comprendre le triangle d&rsquo;exposition et les valeurs EV en pratique. Pour savoir comment l&rsquo;utiliser et comprendre d&rsquo;o\u00f9 viennent ces valeurs, lis l&rsquo;article complet : Posem\u00e8tre en photographie \u2013 apprendre \u00e0 lire la lumi\u00e8re et choisir ton exposition avec EV \ud83d\udcf7 Assistant Posem\u00e8tre Comprends le triangle d&rsquo;exposition en pratique&#8230;<\/p>","protected":false},"author":1,"featured_media":9123,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"default","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-9114","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Assistant Posem\u00e8tre - Blog photographie<\/title>\n<meta name=\"description\" content=\"Outil interactif pour comprendre le triangle d&#039;exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogphotographie.com\/fr_fr\/assistant-posemetre\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Assistant Posem\u00e8tre - Blog photographie\" \/>\n<meta property=\"og:description\" content=\"Outil interactif pour comprendre le triangle d&#039;exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogphotographie.com\/fr_fr\/assistant-posemetre\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog photographie\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leblogphotographie\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T13:59:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogphotographie.com\/wp-content\/uploads\/Assistant-Posemetre.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1133\" \/>\n\t<meta property=\"og:image:height\" content=\"1809\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@sylvainxperrier\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/\",\"url\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/\",\"name\":\"Assistant Posem\u00e8tre - Blog photographie\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/Assistant-Posemetre.png\",\"datePublished\":\"2026-03-05T20:03:37+00:00\",\"dateModified\":\"2026-03-10T13:59:36+00:00\",\"description\":\"Outil interactif pour comprendre le triangle d'exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/Assistant-Posemetre.png\",\"contentUrl\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/Assistant-Posemetre.png\",\"width\":1133,\"height\":1809,\"caption\":\"Assistant Posem\u00e8tre\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/assistant-posemetre\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/blogphotographie.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Assistant Posem\u00e8tre\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/#website\",\"url\":\"https:\\\/\\\/blogphotographie.com\\\/\",\"name\":\"Blog photographie\",\"description\":\"Le Chemin Photographique \u2014 De l\u2019\u0152il \u00e0 l\u2019Image\",\"publisher\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/#\\\/schema\\\/person\\\/5059e59b1012006c7ca43b6330053a01\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogphotographie.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/#\\\/schema\\\/person\\\/5059e59b1012006c7ca43b6330053a01\",\"name\":\"Blog Photographie\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/logo.png\",\"url\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/logo.png\",\"width\":800,\"height\":800,\"caption\":\"Blog Photographie\"},\"logo\":{\"@id\":\"https:\\\/\\\/blogphotographie.com\\\/wp-content\\\/uploads\\\/logo.png\"},\"sameAs\":[\"https:\\\/\\\/blogphotographie.com\",\"https:\\\/\\\/www.facebook.com\\\/leblogphotographie\",\"https:\\\/\\\/www.instagram.com\\\/leblogphotographie\",\"https:\\\/\\\/www.pinterest.ca\\\/sylvain_perrier\",\"https:\\\/\\\/x.com\\\/sylvainxperrier\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/lencadreursylvain\",\"https:\\\/\\\/www.tumblr.com\\\/blog\\\/sylvainperrierfotografi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Assistant Posem\u00e8tre - Blog photographie","description":"Outil interactif pour comprendre le triangle d'exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogphotographie.com\/fr_fr\/assistant-posemetre\/","og_locale":"fr_FR","og_type":"article","og_title":"Assistant Posem\u00e8tre - Blog photographie","og_description":"Outil interactif pour comprendre le triangle d'exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.","og_url":"https:\/\/blogphotographie.com\/fr_fr\/assistant-posemetre\/","og_site_name":"Blog photographie","article_publisher":"https:\/\/www.facebook.com\/leblogphotographie","article_modified_time":"2026-03-10T13:59:36+00:00","og_image":[{"width":1133,"height":1809,"url":"https:\/\/blogphotographie.com\/wp-content\/uploads\/Assistant-Posemetre.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@sylvainxperrier","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/","url":"https:\/\/blogphotographie.com\/assistant-posemetre\/","name":"Assistant Posem\u00e8tre - Blog photographie","isPartOf":{"@id":"https:\/\/blogphotographie.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/#primaryimage"},"image":{"@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/#primaryimage"},"thumbnailUrl":"https:\/\/blogphotographie.com\/wp-content\/uploads\/Assistant-Posemetre.png","datePublished":"2026-03-05T20:03:37+00:00","dateModified":"2026-03-10T13:59:36+00:00","description":"Outil interactif pour comprendre le triangle d'exposition et les valeurs EV. Teste tes r\u00e9glages selon diff\u00e9rentes conditions de lumi\u00e8re.","breadcrumb":{"@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogphotographie.com\/assistant-posemetre\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/#primaryimage","url":"https:\/\/blogphotographie.com\/wp-content\/uploads\/Assistant-Posemetre.png","contentUrl":"https:\/\/blogphotographie.com\/wp-content\/uploads\/Assistant-Posemetre.png","width":1133,"height":1809,"caption":"Assistant Posem\u00e8tre"},{"@type":"BreadcrumbList","@id":"https:\/\/blogphotographie.com\/assistant-posemetre\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/blogphotographie.com\/"},{"@type":"ListItem","position":2,"name":"Assistant Posem\u00e8tre"}]},{"@type":"WebSite","@id":"https:\/\/blogphotographie.com\/#website","url":"https:\/\/blogphotographie.com\/","name":"Blog photographie","description":"Le Chemin Photographique \u2014 De l\u2019\u0152il \u00e0 l\u2019Image","publisher":{"@id":"https:\/\/blogphotographie.com\/#\/schema\/person\/5059e59b1012006c7ca43b6330053a01"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogphotographie.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/blogphotographie.com\/#\/schema\/person\/5059e59b1012006c7ca43b6330053a01","name":"Blog Photographie","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blogphotographie.com\/wp-content\/uploads\/logo.png","url":"https:\/\/blogphotographie.com\/wp-content\/uploads\/logo.png","contentUrl":"https:\/\/blogphotographie.com\/wp-content\/uploads\/logo.png","width":800,"height":800,"caption":"Blog Photographie"},"logo":{"@id":"https:\/\/blogphotographie.com\/wp-content\/uploads\/logo.png"},"sameAs":["https:\/\/blogphotographie.com","https:\/\/www.facebook.com\/leblogphotographie","https:\/\/www.instagram.com\/leblogphotographie","https:\/\/www.pinterest.ca\/sylvain_perrier","https:\/\/x.com\/sylvainxperrier","https:\/\/www.youtube.com\/user\/lencadreursylvain","https:\/\/www.tumblr.com\/blog\/sylvainperrierfotografi"]}]}},"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/pages\/9114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/comments?post=9114"}],"version-history":[{"count":3,"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/pages\/9114\/revisions"}],"predecessor-version":[{"id":9119,"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/pages\/9114\/revisions\/9119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/media\/9123"}],"wp:attachment":[{"href":"https:\/\/blogphotographie.com\/fr_fr\/wp-json\/wp\/v2\/media?parent=9114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}