diff --git a/app/main.py b/app/main.py
index bd2abee..d590b5d 100644
--- a/app/main.py
+++ b/app/main.py
@@ -383,7 +383,7 @@ def _oob_time_cells(date, jour, plages):
     matin_cls = "td-fill cg" if matin_cg else ("td-fill warn" if matin_warn else "td-fill")
     aprem_cls = "td-fill cg" if aprem_cg else ("td-fill warn" if aprem_warn else "td-fill")
     matin_html = (
-        f'<div id="cg-matin-{_e(date)}" hx-swap-oob="true" class="{matin_cls}">'
+        f'<div id="cg-matin-{_e(date)}" hx-swap-oob="true" data-label="Matin" class="{matin_cls}">'
         f'<div class="time-pair">'
         f'<input class="time-input" type="time" name="matin_entree" data-date="{_e(date)}" value="{_e(jour["matin_entree"] or "")}">'
         f'<span class="time-sep">→</span>'
@@ -391,7 +391,7 @@ def _oob_time_cells(date, jour, plages):
         f'</div></div>'
     )
     aprem_html = (
-        f'<div id="cg-aprem-{_e(date)}" hx-swap-oob="true" class="{aprem_cls}">'
+        f'<div id="cg-aprem-{_e(date)}" hx-swap-oob="true" data-label="Après-midi" class="{aprem_cls}">'
         f'<div class="time-pair">'
         f'<input class="time-input" type="time" name="aprem_entree" data-date="{_e(date)}" value="{_e(jour["aprem_entree"] or "")}">'
         f'<span class="time-sep">→</span>'
diff --git a/app/templates/_ligne.html b/app/templates/_ligne.html
index 73b399d..69027bb 100644
--- a/app/templates/_ligne.html
+++ b/app/templates/_ligne.html
@@ -16,7 +16,7 @@
   </td>
 
   <td class="c-matin">
-    <div id="cg-matin-{{ j.date }}" class="td-fill{% if matin_cg %} cg{% elif matin_warn %} warn{% endif %}">
+    <div id="cg-matin-{{ j.date }}" data-label="Matin" class="td-fill{% if matin_cg %} cg{% elif matin_warn %} warn{% endif %}">
       <div class="time-pair">
         <input class="time-input" type="time" name="matin_entree"
                data-date="{{ j.date }}" value="{{ j.matin_entree or '' }}">
@@ -28,7 +28,7 @@
   </td>
 
   <td class="c-aprem">
-    <div id="cg-aprem-{{ j.date }}" class="td-fill{% if aprem_cg %} cg{% elif aprem_warn %} warn{% endif %}">
+    <div id="cg-aprem-{{ j.date }}" data-label="Après-midi" class="td-fill{% if aprem_cg %} cg{% elif aprem_warn %} warn{% endif %}">
       <div class="time-pair">
         <input class="time-input" type="time" name="aprem_entree"
                data-date="{{ j.date }}" value="{{ j.aprem_entree or '' }}">
@@ -39,13 +39,13 @@
     </div>
   </td>
 
-  <td class="col-calc">
+  <td class="col-calc" data-label="Travaillé">
     <span id="calc-{{ j.date }}-trav">
       <span class="calc-num">{{ j.travaille if j.travaille_min else '—' }}</span>
     </span>
   </td>
 
-  <td class="col-calc">
+  <td class="col-calc" data-label="Δ jour">
     <span id="calc-{{ j.date }}-delta">
       <span class="{% if j.travaille_min and j.delta_min > 0 %}delta-pos{% elif j.travaille_min and j.delta_min < 0 %}delta-neg{% else %}delta-zero{% endif %}">
         {%- if j.travaille_min -%}
@@ -55,7 +55,7 @@
     </span>
   </td>
 
-  <td class="col-cumul">
+  <td class="col-cumul" data-label="Δ sem.">
     <span id="calc-{{ j.date }}-cumul">
       {%- if j.cumul_visible -%}
         <span class="{% if j.delta_cumul_min > 0 %}delta-pos{% elif j.delta_cumul_min < 0 %}delta-neg{% else %}delta-zero{% endif %}">
@@ -67,7 +67,7 @@
     </span>
   </td>
 
-  <td class="col-cible">
+  <td class="col-cible" data-label="Cible">
     <span id="calc-{{ j.date }}-cible">
       {%- if j.cible_matin or j.cible_aprem -%}
         {%- if j.cible_matin -%}<span class="cible-num">M {{ j.cible_matin_entree }} → {{ j.cible_matin }}</span>{%- endif -%}
@@ -87,7 +87,7 @@
             title="Enregistrer">✓</button>
   </td>
 
-  <td class="col-conge">
+  <td class="col-conge" data-label="Congé">
     <div id="cg-btn-{{ j.date }}">
       <div class="conge-btns">
         <button hx-post="/conge/{{ j.date }}/matin"
diff --git a/app/templates/base.html b/app/templates/base.html
index 991a40a..c40ce58 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -44,11 +44,12 @@
     nav {
       background: var(--nav-bg);
       color: var(--ground);
-      height: 50px;
-      padding: 0 2rem;
+      min-height: 50px;
+      padding: .5rem 2rem;
       display: flex;
       align-items: center;
-      gap: 2rem;
+      flex-wrap: wrap;
+      gap: .6rem 2rem;
       border-bottom: 3px solid var(--accent-2);
     }
     .nav-brand {
@@ -87,6 +88,11 @@
     }
     .nav-logout { opacity: .6; font-size: 11px; }
 
+    @media (max-width: 700px) {
+      nav { padding: .5rem 1rem; gap: .5rem 1rem; }
+      nav .spacer { flex-basis: 100%; height: 0; }
+    }
+
     /* ── Layout ── */
     .container {
       max-width: 1100px;
@@ -96,15 +102,23 @@
       flex-direction: column;
       gap: 1.75rem;
     }
+    @media (max-width: 700px) {
+      .container { padding: 1rem .75rem; gap: 1.25rem; }
+    }
 
     /* ── Week header ── */
     .week-header {
       display: flex;
       align-items: center;
-      gap: 1rem;
+      flex-wrap: wrap;
+      gap: .6rem 1rem;
       border-bottom: 2px solid var(--text);
       padding-bottom: .75rem;
     }
+    @media (max-width: 700px) {
+      .week-header-spacer { display: none; }
+      .export-btn { order: 10; flex-basis: 100%; text-align: center; }
+    }
     .week-nav-arrows { display: flex; gap: .4rem; }
     .arrow-btn {
       width: 28px; height: 28px;
@@ -360,6 +374,69 @@
     .btn-cg.btn-jour { border-radius: 50%; width: 22px; height: 22px; font-size: 9px; }
     .btn-cg.jour-on  { background: var(--accent-2); border-color: #955505; color: #fff; }
 
+    /* ── Tableau hebdo en cartes empilées sous 700px (évite le scroll horizontal) ── */
+    @media (max-width: 700px) {
+      .pointage-table thead { display: none; }
+      .pointage-table, .pointage-table tbody, .pointage-table tr, .pointage-table td {
+        display: block;
+        width: 100%;
+      }
+      .pointage-table { border: none; background: none; }
+      .pointage-table tbody tr {
+        border: 1.5px solid var(--rule);
+        background: var(--surface);
+        margin-bottom: .75rem;
+      }
+      .pointage-table tbody tr:not(:last-child) td { border-bottom: none; }
+      .pointage-table td {
+        border-bottom: 1px solid var(--rule-l) !important;
+        padding: .55rem .75rem;
+      }
+      .pointage-table td:last-child { border-bottom: none !important; }
+
+      .pointage-table td.col-jour {
+        background: var(--ground);
+        border-bottom: 2px solid var(--text) !important;
+      }
+      .pointage-table .jour-nom, .pointage-table .jour-date { display: inline; }
+      .pointage-table .jour-date::before { content: ' · '; }
+
+      .pointage-table [data-label] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: .75rem;
+      }
+      .pointage-table [data-label]::before {
+        content: attr(data-label);
+        font-family: var(--mono);
+        font-size: 9px;
+        letter-spacing: .1em;
+        text-transform: uppercase;
+        color: var(--muted);
+        flex-shrink: 0;
+      }
+
+      .pointage-table td.c-matin, .pointage-table td.c-aprem { padding: 0; }
+      .pointage-table td.c-matin .td-fill, .pointage-table td.c-aprem .td-fill {
+        padding: .55rem .75rem;
+      }
+      .pointage-table .time-input { width: 84px; font-size: 14px; padding: .45rem .4rem; }
+
+      .pointage-table td.col-calc,
+      .pointage-table td.col-cumul,
+      .pointage-table td.col-cible {
+        text-align: left;
+        padding-left: .75rem;
+        min-width: 0;
+      }
+
+      .pointage-table td.col-save { text-align: right; }
+      .pointage-table .btn-valider { width: 40px; height: 40px; font-size: 16px; }
+      .pointage-table .btn-cg { width: 34px; height: 34px; font-size: 11px; }
+      .pointage-table .btn-cg.btn-jour { width: 32px; height: 32px; }
+    }
+
     /* ── Historique ── */
     .history {
       display: flex;
@@ -440,6 +517,7 @@
       box-shadow: 0 4px 20px rgba(28,23,18,.12);
       padding: .75rem;
       min-width: 260px;
+      max-width: calc(100vw - 2rem);
     }
     .cal-popup[hidden] { display: none; }
 
diff --git a/app/templates/semaine.html b/app/templates/semaine.html
index a498306..253b632 100644
--- a/app/templates/semaine.html
+++ b/app/templates/semaine.html
@@ -44,7 +44,7 @@
 
 <!-- Tableau -->
 <div class="table-section">
-  <table>
+  <table class="pointage-table">
     <thead>
       <tr class="th-group">
         <th class="g-jour" rowspan="2">Jour</th>
@@ -198,7 +198,26 @@
     const open  = popup.hidden;
     popup.hidden = !open;
     btn.setAttribute('aria-expanded', String(open));
-    if (open) renderCal();
+    if (open) {
+      renderCal();
+      // Sous ~700px, le popup est positionné en fixed pour ne jamais déborder
+      // du viewport (son ancrage absolu normal suit la position du trigger,
+      // qui n'est pas centré horizontalement sur mobile).
+      if (window.innerWidth <= 700) {
+        const rect = btn.getBoundingClientRect();
+        popup.style.position = 'fixed';
+        popup.style.top = (rect.bottom + 8) + 'px';
+        popup.style.left = '.75rem';
+        popup.style.right = '.75rem';
+        popup.style.width = 'auto';
+      } else {
+        popup.style.position = '';
+        popup.style.top = '';
+        popup.style.left = '';
+        popup.style.right = '';
+        popup.style.width = '';
+      }
+    }
   };
 
   // Close on outside click