Initial commit — Diabetix V2

Application Laravel 12 + Inertia + Vue 3 + Tailwind.
Fonctionnalités : dashboard glycémique, saisie de mesures, courbe SVG,
statistiques (jour/semaine/mois/trimestre), défis & badges, chat coach IA
(Gemini), paramètres profil avec palette de couleurs, pages auth redessinées,
emails transactionnels via Resend avec thème Diabetix.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/resources/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/resources/js/Components/ApplicationLogo.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"
+        />
+    </svg>
+</template>

app/resources/js/Components/Checkbox.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:checked']);
+
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        required: true,
+    },
+    value: {
+        default: null,
+    },
+});
+
+const proxyChecked = computed({
+    get() {
+        return props.checked;
+    },
+
+    set(val) {
+        emit('update:checked', val);
+    },
+});
+</script>
+
+<template>
+    <input
+        type="checkbox"
+        :value="value"
+        v-model="proxyChecked"
+        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
+    />
+</template>

app/resources/js/Components/DangerButton.vue

@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-red-700 dark:focus:ring-offset-gray-800"
+    >
+        <slot />
+    </button>
+</template>

app/resources/js/Components/Diabetix/BadgeChip.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+    icon: String,
+    label: String,
+    unlocked: { type: Boolean, default: false },
+    tok: { type: Object, required: true },
+});
+</script>
+
+<template>
+    <div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
+        <div :style="{
+            width: '46px', height: '46px', borderRadius: '50%',
+            background: unlocked ? tok.light : tok.bgAlt,
+            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px',
+            filter: unlocked ? 'none' : 'grayscale(1) opacity(0.35)',
+            border: '2px solid ' + (unlocked ? tok.primary : tok.border),
+        }">{{ icon }}</div>
+        <span :style="{ fontSize: '9px', color: tok.muted, textAlign: 'center', lineHeight: 1.2, maxWidth: '52px' }">{{ label }}</span>
+    </div>
+</template>

app/resources/js/Components/Diabetix/CoachAvatar.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+    size: { type: Number, default: 36 },
+    tok: { type: Object, required: true },
+});
+</script>
+
+<template>
+    <div :style="{
+        width: size + 'px', height: size + 'px', borderRadius: '50%',
+        background: tok.light, flexShrink: 0,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        fontSize: (size * 0.44) + 'px', border: '2px solid ' + tok.primary,
+    }">🤖</div>
+</template>

app/resources/js/Components/Diabetix/GlucoseChart.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    data: { type: Array, default: () => [] },
+    tok: { type: Object, required: true },
+    width: { type: Number, default: 300 },
+    height: { type: Number, default: 110 },
+    targetMin: { type: Number, default: 70 },
+    targetMax: { type: Number, default: 180 },
+});
+
+const PAD = { t: 10, r: 18, b: 24, l: 28 };
+
+const computed_ = computed(() => {
+    const cW = props.width - PAD.l - PAD.r;
+    const cH = props.height - PAD.t - PAD.b;
+    const data = props.data.length ? props.data : [{ l: '–', v: props.targetMin }];
+    const values = data.map(d => d.v);
+    // Sensible mg/dL window with auto-extension when values exceed bounds.
+    const MIN_V = Math.min(50, Math.floor((Math.min(...values) - 10) / 10) * 10);
+    const MAX_V = Math.max(220, Math.ceil((Math.max(...values) + 10) / 10) * 10);
+    const yS = v => cH - ((v - MIN_V) / (MAX_V - MIN_V)) * cH;
+    const xS = i => (i / Math.max(data.length - 1, 1)) * cW;
+    const pts = data.map((d, i) => ({ x: xS(i), y: yS(d.v), v: d.v, l: d.l }));
+
+    let line = `M ${pts[0].x} ${pts[0].y}`;
+    for (let i = 1; i < pts.length; i++) {
+        const cx = (pts[i - 1].x + pts[i].x) / 2;
+        line += ` C ${cx} ${pts[i - 1].y} ${cx} ${pts[i].y} ${pts[i].x} ${pts[i].y}`;
+    }
+    const area = `${line} L ${pts[pts.length - 1].x} ${cH} L ${pts[0].x} ${cH} Z`;
+    return { cW, cH, pts, line, area, ty1: yS(props.targetMax), ty2: yS(props.targetMin), yS };
+});
+</script>
+
+<template>
+    <svg :width="width" :height="height" style="display:block;overflow:visible">
+        <g :transform="`translate(${PAD.l},${PAD.t})`">
+            <line v-for="v in [70,120,180,240]" :key="v" :x1="0" :y1="computed_.yS(v)" :x2="computed_.cW" :y2="computed_.yS(v)" :stroke="tok.border" stroke-width="0.8" stroke-dasharray="3,3" />
+            <rect :x="0" :y="computed_.ty1" :width="computed_.cW" :height="computed_.ty2 - computed_.ty1" :fill="tok.primary" opacity="0.13" rx="3" />
+            <text :x="computed_.cW + 3" :y="computed_.ty1 + 4" font-size="7" :fill="tok.primary">{{ targetMax }}</text>
+            <text :x="computed_.cW + 3" :y="computed_.ty2 + 4" font-size="7" :fill="tok.primary">{{ targetMin }}</text>
+            <path :d="computed_.area" :fill="tok.primary" opacity="0.09" />
+            <path :d="computed_.line" fill="none" :stroke="tok.primary" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+            <circle v-for="(p, i) in computed_.pts" :key="'c'+i" :cx="p.x" :cy="p.y" r="3.5"
+                :fill="p.v >= targetMin && p.v <= targetMax ? tok.primary : tok.amber"
+                :stroke="tok.white" stroke-width="1.5" />
+            <text v-for="(p, i) in computed_.pts" :key="'l'+i" :x="p.x" :y="computed_.cH + 14" text-anchor="middle" font-size="8" :fill="tok.muted">{{ p.l }}</text>
+            <text v-for="v in [70,180]" :key="'y'+v" :x="-4" :y="computed_.yS(v) + 3" text-anchor="end" font-size="8" :fill="tok.muted">{{ v }}</text>
+        </g>
+    </svg>
+</template>

app/resources/js/Components/Diabetix/InputModal.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { reactive } from 'vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    tok: { type: Object, required: true },
+    font: { type: Object, required: true },
+});
+
+const emit = defineEmits(['close']);
+
+const form = useForm({
+    value: '',
+    context: 'before_meal',
+    carbs_g: '',
+    insulin_units: '',
+});
+
+const contexts = [
+    { id: 'fasting', label: 'À jeun' },
+    { id: 'before_meal', label: 'Avant repas' },
+    { id: 'after_meal', label: 'Après repas' },
+    { id: 'bedtime', label: 'Coucher' },
+];
+
+function submit() {
+    form.post(route('measurements.store'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.reset();
+            emit('close');
+        },
+    });
+}
+
+function close(e) {
+    if (e.target === e.currentTarget) emit('close');
+}
+</script>
+
+<template>
+    <div @click="close" :style="{
+        position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,0.45)',
+        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
+    }">
+        <div :style="{ width: '100%', maxWidth: '440px', background: tok.white, borderRadius: '24px 24px 0 0', padding: '6px 20px 36px', boxShadow: '0 -8px 40px rgba(0,0,0,0.18)' }">
+            <div :style="{ width: '40px', height: '4px', borderRadius: '2px', background: tok.border, margin: '12px auto 20px' }" />
+            <div :style="{ fontFamily: font.title, fontSize: '20px', fontWeight: 600, color: tok.text, marginBottom: '20px' }">Saisir une mesure</div>
+
+            <div :style="{ background: tok.bg, borderRadius: '20px', padding: '16px 20px', marginBottom: '16px', textAlign: 'center' }">
+                <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.8px', fontWeight: 600 }">Glycémie (mg/dL)</div>
+                <input v-model="form.value" type="number" step="1" min="20" max="600" placeholder="105"
+                    :style="{ width: '100%', textAlign: 'center', fontSize: '52px', fontWeight: 800, color: tok.text, border: 'none', background: 'transparent', outline: 'none' }" />
+                <div v-if="form.errors.value" :style="{ color: '#c43', fontSize: '11px' }">{{ form.errors.value }}</div>
+            </div>
+
+            <div style="margin-bottom:16px;">
+                <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.8px', fontWeight: 600 }">Contexte</div>
+                <div style="display:flex;flex-wrap:wrap;gap:6px;">
+                    <button v-for="c in contexts" :key="c.id" @click="form.context = c.id" type="button"
+                        :style="{
+                            padding: '7px 14px', borderRadius: '20px',
+                            border: '1.5px solid ' + (form.context === c.id ? tok.primary : tok.border),
+                            background: form.context === c.id ? tok.light : tok.white,
+                            color: form.context === c.id ? tok.dark : tok.muted,
+                            fontSize: '12px', fontWeight: form.context === c.id ? 600 : 400, cursor: 'pointer',
+                        }">{{ c.label }}</button>
+                </div>
+            </div>
+
+            <div style="display:flex;gap:10px;margin-bottom:20px;">
+                <div style="flex:1;">
+                    <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '6px' }">Glucides (g) · optionnel</div>
+                    <input v-model="form.carbs_g" type="number" placeholder="45"
+                        :style="{ width: '100%', padding: '10px 12px', borderRadius: '12px', border: '1.5px solid ' + tok.border, background: tok.bg, fontSize: '14px', color: tok.text, outline: 'none', boxSizing: 'border-box' }" />
+                </div>
+                <div style="flex:1;">
+                    <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '6px' }">Insuline (u) · optionnel</div>
+                    <input v-model="form.insulin_units" type="number" step="0.5" placeholder="4"
+                        :style="{ width: '100%', padding: '10px 12px', borderRadius: '12px', border: '1.5px solid ' + tok.border, background: tok.bg, fontSize: '14px', color: tok.text, outline: 'none', boxSizing: 'border-box' }" />
+                </div>
+            </div>
+
+            <button @click="submit" :disabled="form.processing"
+                :style="{ width: '100%', padding: '16px', background: tok.primary, color: '#fff', borderRadius: '16px', border: 'none', fontSize: '16px', fontWeight: 600, cursor: 'pointer', opacity: form.processing ? 0.6 : 1 }">
+                Enregistrer la mesure ✓
+            </button>
+        </div>
+    </div>
+</template>

app/resources/js/Components/Diabetix/ProgressBar.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    color: { type: String, default: null },
+    height: { type: Number, default: 6 },
+    bg: { type: String, default: null },
+    tok: { type: Object, required: true },
+});
+
+const pct = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)));
+</script>
+
+<template>
+    <div :style="{ height: height + 'px', borderRadius: '999px', overflow: 'hidden', background: bg || tok.bgAlt }">
+        <div :style="{ height: '100%', width: pct + '%', background: color || tok.primary, borderRadius: '999px', transition: 'width .3s ease' }" />
+    </div>
+</template>

app/resources/js/Components/Diabetix/palette.js

@@ -0,0 +1,33 @@
+// Diabetix design tokens — recreated from the design bundle.
+export const PALETTES = {
+    mint: {
+        primary: '#7bbfb5', light: '#d4ede8', dark: '#5ca89d',
+        amber: '#f59e0b', amberLight: '#fef3c7',
+        alert: '#fde8e8', alertDark: '#fb9999',
+        bg: '#faf8f4', bgAlt: '#f0ede6',
+        text: '#2a3533', muted: '#7a9c97',
+        border: '#ddeae7', white: '#ffffff',
+    },
+    lilac: {
+        primary: '#9b8ec4', light: '#ede8f8', dark: '#7b6ea4',
+        amber: '#f59e0b', amberLight: '#fef3c7',
+        alert: '#f8e8fd', alertDark: '#e9a8e9',
+        bg: '#faf8fd', bgAlt: '#f0edf8',
+        text: '#2a2733', muted: '#7a7a9c',
+        border: '#dddaea', white: '#ffffff',
+    },
+    peach: {
+        primary: '#d4826a', light: '#fde8df', dark: '#b56650',
+        amber: '#6bbbaf', amberLight: '#d4ede8',
+        alert: '#fde8e8', alertDark: '#fb9999',
+        bg: '#fdf8f5', bgAlt: '#f5ede7',
+        text: '#332a27', muted: '#9c7a70',
+        border: '#eaddd7', white: '#ffffff',
+    },
+};
+
+export const FONT = { title: "'Lora', serif", body: "'Plus Jakarta Sans', sans-serif" };
+
+export function tokens(palette = 'mint') {
+    return PALETTES[palette] ?? PALETTES.mint;
+}

app/resources/js/Components/Dropdown.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'right',
+    },
+    width: {
+        type: String,
+        default: '48',
+    },
+    contentClasses: {
+        type: String,
+        default: 'py-1 bg-white dark:bg-gray-700',
+    },
+});
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+    return {
+        48: 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'ltr:origin-top-left rtl:origin-top-right start-0';
+    } else if (props.align === 'right') {
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
+    } else {
+        return 'origin-top';
+    }
+});
+
+const open = ref(false);
+</script>
+
+<template>
+    <div class="relative">
+        <div @click="open = !open">
+            <slot name="trigger" />
+        </div>
+
+        <!-- Full Screen Dropdown Overlay -->
+        <div
+            v-show="open"
+            class="fixed inset-0 z-40"
+            @click="open = false"
+        ></div>
+
+        <Transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-show="open"
+                class="absolute z-50 mt-2 rounded-md shadow-lg"
+                :class="[widthClass, alignmentClasses]"
+                style="display: none"
+                @click="open = false"
+            >
+                <div
+                    class="rounded-md ring-1 ring-black ring-opacity-5"
+                    :class="contentClasses"
+                >
+                    <slot name="content" />
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>

app/resources/js/Components/DropdownLink.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <Link
+        :href="href"
+        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus:bg-gray-800"
+    >
+        <slot />
+    </Link>
+</template>

app/resources/js/Components/InputError.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+    message: {
+        type: String,
+    },
+});
+</script>
+
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600 dark:text-red-400">
+            {{ message }}
+        </p>
+    </div>
+</template>

app/resources/js/Components/InputLabel.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    value: {
+        type: String,
+    },
+});
+</script>
+
+<template>
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        <span v-if="value">{{ value }}</span>
+        <span v-else><slot /></span>
+    </label>
+</template>

app/resources/js/Components/Modal.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['close']);
+const dialog = ref();
+const showSlot = ref(props.show);
+
+watch(
+    () => props.show,
+    () => {
+        if (props.show) {
+            document.body.style.overflow = 'hidden';
+            showSlot.value = true;
+
+            dialog.value?.showModal();
+        } else {
+            document.body.style.overflow = '';
+
+            setTimeout(() => {
+                dialog.value?.close();
+                showSlot.value = false;
+            }, 200);
+        }
+    },
+);
+
+const close = () => {
+    if (props.closeable) {
+        emit('close');
+    }
+};
+
+const closeOnEscape = (e) => {
+    if (e.key === 'Escape') {
+        e.preventDefault();
+
+        if (props.show) {
+            close();
+        }
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+
+    document.body.style.overflow = '';
+});
+
+const maxWidthClass = computed(() => {
+    return {
+        sm: 'sm:max-w-sm',
+        md: 'sm:max-w-md',
+        lg: 'sm:max-w-lg',
+        xl: 'sm:max-w-xl',
+        '2xl': 'sm:max-w-2xl',
+    }[props.maxWidth];
+});
+</script>
+
+<template>
+    <dialog
+        class="z-50 m-0 min-h-full min-w-full overflow-y-auto bg-transparent backdrop:bg-transparent"
+        ref="dialog"
+    >
+        <div
+            class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0"
+            scroll-region
+        >
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-show="show"
+                    class="fixed inset-0 transform transition-all"
+                    @click="close"
+                >
+                    <div
+                        class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900"
+                    />
+                </div>
+            </Transition>
+
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+                <div
+                    v-show="show"
+                    class="mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:mx-auto sm:w-full dark:bg-gray-800"
+                    :class="maxWidthClass"
+                >
+                    <slot v-if="showSlot" />
+                </div>
+            </Transition>
+        </div>
+    </dialog>
+</template>

app/resources/js/Components/NavLink.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+    },
+});
+
+const classes = computed(() =>
+    props.active
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out',
+);
+</script>
+
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>

app/resources/js/Components/PrimaryButton.vue

@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+    >
+        <slot />
+    </button>
+</template>

app/resources/js/Components/ResponsiveNavLink.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+    },
+});
+
+const classes = computed(() =>
+    props.active
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out',
+);
+</script>
+
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>

app/resources/js/Components/SecondaryButton.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'button',
+    },
+});
+</script>
+
+<template>
+    <button
+        :type="type"
+        class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800"
+    >
+        <slot />
+    </button>
+</template>

app/resources/js/Components/TextInput.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const model = defineModel({
+    type: String,
+    required: true,
+});
+
+const input = ref(null);
+
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
+    }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
+<template>
+    <input
+        class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+        v-model="model"
+        ref="input"
+    />
+</template>

app/resources/js/Layouts/AuthenticatedLayout.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { ref } from 'vue';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import Dropdown from '@/Components/Dropdown.vue';
+import DropdownLink from '@/Components/DropdownLink.vue';
+import NavLink from '@/Components/NavLink.vue';
+import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+import { Link } from '@inertiajs/vue3';
+
+const showingNavigationDropdown = ref(false);
+</script>
+
+<template>
+    <div>
+        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
+            <nav
+                class="border-b border-gray-100 bg-white dark:border-gray-700 dark:bg-gray-800"
+            >
+                <!-- Primary Navigation Menu -->
+                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div class="flex h-16 justify-between">
+                        <div class="flex">
+                            <!-- Logo -->
+                            <div class="flex shrink-0 items-center">
+                                <Link :href="route('dashboard')">
+                                    <ApplicationLogo
+                                        class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200"
+                                    />
+                                </Link>
+                            </div>
+
+                            <!-- Navigation Links -->
+                            <div
+                                class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
+                            >
+                                <NavLink
+                                    :href="route('dashboard')"
+                                    :active="route().current('dashboard')"
+                                >
+                                    Dashboard
+                                </NavLink>
+                            </div>
+                        </div>
+
+                        <div class="hidden sm:ms-6 sm:flex sm:items-center">
+                            <!-- Settings Dropdown -->
+                            <div class="relative ms-3">
+                                <Dropdown align="right" width="48">
+                                    <template #trigger>
+                                        <span class="inline-flex rounded-md">
+                                            <button
+                                                type="button"
+                                                class="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+                                            >
+                                                {{ $page.props.auth.user.name }}
+
+                                                <svg
+                                                    class="-me-0.5 ms-2 h-4 w-4"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 20 20"
+                                                    fill="currentColor"
+                                                >
+                                                    <path
+                                                        fill-rule="evenodd"
+                                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                                        clip-rule="evenodd"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </span>
+                                    </template>
+
+                                    <template #content>
+                                        <DropdownLink
+                                            :href="route('profile.edit')"
+                                        >
+                                            Profile
+                                        </DropdownLink>
+                                        <DropdownLink
+                                            :href="route('logout')"
+                                            method="post"
+                                            as="button"
+                                        >
+                                            Log Out
+                                        </DropdownLink>
+                                    </template>
+                                </Dropdown>
+                            </div>
+                        </div>
+
+                        <!-- Hamburger -->
+                        <div class="-me-2 flex items-center sm:hidden">
+                            <button
+                                @click="
+                                    showingNavigationDropdown =
+                                        !showingNavigationDropdown
+                                "
+                                class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none dark:text-gray-500 dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:focus:bg-gray-900 dark:focus:text-gray-400"
+                            >
+                                <svg
+                                    class="h-6 w-6"
+                                    stroke="currentColor"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        :class="{
+                                            hidden: showingNavigationDropdown,
+                                            'inline-flex':
+                                                !showingNavigationDropdown,
+                                        }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M4 6h16M4 12h16M4 18h16"
+                                    />
+                                    <path
+                                        :class="{
+                                            hidden: !showingNavigationDropdown,
+                                            'inline-flex':
+                                                showingNavigationDropdown,
+                                        }"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M6 18L18 6M6 6l12 12"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Responsive Navigation Menu -->
+                <div
+                    :class="{
+                        block: showingNavigationDropdown,
+                        hidden: !showingNavigationDropdown,
+                    }"
+                    class="sm:hidden"
+                >
+                    <div class="space-y-1 pb-3 pt-2">
+                        <ResponsiveNavLink
+                            :href="route('dashboard')"
+                            :active="route().current('dashboard')"
+                        >
+                            Dashboard
+                        </ResponsiveNavLink>
+                    </div>
+
+                    <!-- Responsive Settings Options -->
+                    <div
+                        class="border-t border-gray-200 pb-1 pt-4 dark:border-gray-600"
+                    >
+                        <div class="px-4">
+                            <div
+                                class="text-base font-medium text-gray-800 dark:text-gray-200"
+                            >
+                                {{ $page.props.auth.user.name }}
+                            </div>
+                            <div class="text-sm font-medium text-gray-500">
+                                {{ $page.props.auth.user.email }}
+                            </div>
+                        </div>
+
+                        <div class="mt-3 space-y-1">
+                            <ResponsiveNavLink :href="route('profile.edit')">
+                                Profile
+                            </ResponsiveNavLink>
+                            <ResponsiveNavLink
+                                :href="route('logout')"
+                                method="post"
+                                as="button"
+                            >
+                                Log Out
+                            </ResponsiveNavLink>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- Page Heading -->
+            <header
+                class="bg-white shadow dark:bg-gray-800"
+                v-if="$slots.header"
+            >
+                <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+                    <slot name="header" />
+                </div>
+            </header>
+
+            <!-- Page Content -->
+            <main>
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>

app/resources/js/Layouts/DiabetixLayout.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { Link, router, usePage } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+import InputModal from '@/Components/Diabetix/InputModal.vue';
+
+const page = usePage();
+const palette = computed(() => page.props.auth.user?.palette ?? 'mint');
+const tok = computed(() => tokens(palette.value));
+const font = FONT;
+
+const inputOpen = ref(false);
+
+const items = [
+    { name: 'dashboard', label: 'Accueil', icon: '🏠' },
+    { name: 'stats', label: 'Stats', icon: '📊' },
+    { name: 'add', label: '', icon: '＋' },
+    { name: 'challenges', label: 'Défis', icon: '🏆' },
+    { name: 'chat', label: 'Coach', icon: '🤖' },
+];
+
+const user = computed(() => page.props.auth.user);
+
+function go(name) {
+    if (name === 'add') {
+        inputOpen.value = true;
+        return;
+    }
+    router.visit(route(name));
+}
+
+function active(name) {
+    return route().current(name);
+}
+</script>
+
+<template>
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, color: tok.text }">
+        <div :style="{ maxWidth: '440px', margin: '0 auto', minHeight: '100vh', background: tok.bg, position: 'relative', boxShadow: '0 0 60px rgba(0,0,0,0.04)', display: 'flex', flexDirection: 'column' }">
+            <main style="flex:1;padding-bottom:78px;">
+                <slot :tok="tok" :font="font" :open-input="() => inputOpen = true" />
+            </main>
+
+            <nav :style="{
+                position: 'fixed', bottom: 0, left: '50%', transform: 'translateX(-50%)',
+                width: '100%', maxWidth: '440px',
+                background: tok.white, borderTop: '1px solid ' + tok.border,
+                display: 'flex', justifyContent: 'space-around', alignItems: 'center',
+                padding: '8px 0 14px', zIndex: 30,
+            }">
+                <button v-for="it in items" :key="it.name" @click="go(it.name)"
+                    :style="{
+                        flex: 1, background: 'none', border: 'none', cursor: 'pointer',
+                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px',
+                        color: active(it.name) ? tok.primary : tok.muted,
+                    }">
+                    <span v-if="it.name !== 'add'" style="font-size:20px;line-height:1;">{{ it.icon }}</span>
+                    <span v-else :style="{
+                        width: '46px', height: '46px', borderRadius: '50%', background: tok.primary, color: '#fff',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '26px', marginTop: '-22px',
+                        boxShadow: '0 6px 18px rgba(123,191,181,0.45)', fontWeight: 600,
+                    }">＋</span>
+                    <span v-if="it.label" style="font-size:10px;font-weight:500;">{{ it.label }}</span>
+                </button>
+            </nav>
+
+            <InputModal v-if="inputOpen" :tok="tok" :font="font" @close="inputOpen = false" />
+        </div>
+    </div>
+</template>

app/resources/js/Layouts/GuestLayout.vue

@@ -0,0 +1,22 @@
+<script setup>
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import { Link } from '@inertiajs/vue3';
+</script>
+
+<template>
+    <div
+        class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0 dark:bg-gray-900"
+    >
+        <div>
+            <Link href="/">
+                <ApplicationLogo class="h-20 w-20 fill-current text-gray-500" />
+            </Link>
+        </div>
+
+        <div
+            class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg dark:bg-gray-800"
+        >
+            <slot />
+        </div>
+    </div>
+</template>

app/resources/js/Pages/Auth/ConfirmPassword.vue

@@ -0,0 +1,55 @@
+<script setup>
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { Head, useForm } from '@inertiajs/vue3';
+
+const form = useForm({
+    password: '',
+});
+
+const submit = () => {
+    form.post(route('password.confirm'), {
+        onFinish: () => form.reset(),
+    });
+};
+</script>
+
+<template>
+    <GuestLayout>
+        <Head title="Confirm Password" />
+
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+            This is a secure area of the application. Please confirm your
+            password before continuing.
+        </div>
+
+        <form @submit.prevent="submit">
+            <div>
+                <InputLabel for="password" value="Password" />
+                <TextInput
+                    id="password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    v-model="form.password"
+                    required
+                    autocomplete="current-password"
+                    autofocus
+                />
+                <InputError class="mt-2" :message="form.errors.password" />
+            </div>
+
+            <div class="mt-4 flex justify-end">
+                <PrimaryButton
+                    class="ms-4"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                >
+                    Confirm
+                </PrimaryButton>
+            </div>
+        </form>
+    </GuestLayout>
+</template>

app/resources/js/Pages/Auth/ForgotPassword.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+
+defineProps({ status: String });
+
+const tok = tokens('mint');
+const font = FONT;
+
+const form = useForm({ email: '' });
+
+function submit() {
+    form.post(route('password.email'));
+}
+</script>
+
+<template>
+    <Head title="Mot de passe oublié" />
+
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
+        <div :style="{ width: '100%', maxWidth: '400px' }">
+
+            <div style="text-align:center;margin-bottom:32px;">
+                <div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🔑</div>
+                <div :style="{ fontFamily: font.title, fontSize: '24px', fontWeight: 700, color: tok.text }">Mot de passe oublié</div>
+                <div :style="{ fontSize: '13px', color: tok.muted, marginTop: '6px', lineHeight: 1.5 }">Saisissez votre e-mail — nous vous enverrons un lien pour réinitialiser votre mot de passe.</div>
+            </div>
+
+            <div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">
+                <div v-if="status" :style="{ background: tok.light, borderRadius: '12px', padding: '10px 14px', fontSize: '13px', color: tok.dark, marginBottom: '20px' }">
+                    {{ status }}
+                </div>
+
+                <form @submit.prevent="submit">
+                    <div style="margin-bottom:24px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
+                        <input v-model="form.email" type="email" required autofocus autocomplete="username"
+                            :style="{ width: '100%', padding: '12px 14px', borderRadius: '14px', border: '1.5px solid ' + tok.border, background: tok.bg, fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box' }" />
+                        <span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
+                    </div>
+
+                    <button type="submit" :disabled="form.processing"
+                        :style="{
+                            width: '100%', padding: '15px', background: tok.primary, color: '#fff',
+                            borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
+                            cursor: form.processing ? 'not-allowed' : 'pointer',
+                            opacity: form.processing ? 0.6 : 1,
+                            boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
+                        }">
+                        {{ form.processing ? 'Envoi…' : 'Envoyer le lien' }}
+                    </button>
+                </form>
+            </div>
+
+            <div style="text-align:center;margin-top:20px;">
+                <Link :href="route('login')" :style="{ fontSize: '13px', color: tok.primary, fontWeight: 600, textDecoration: 'none' }">← Retour à la connexion</Link>
+            </div>
+        </div>
+    </div>
+</template>

app/resources/js/Pages/Auth/Login.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+
+defineProps({
+    canResetPassword: Boolean,
+    status: String,
+});
+
+const tok = tokens('mint');
+const font = FONT;
+
+const form = useForm({
+    email: '',
+    password: '',
+    remember: false,
+});
+
+function submit() {
+    form.post(route('login'), {
+        onFinish: () => form.reset('password'),
+    });
+}
+
+function inputStyle() {
+    return {
+        width: '100%', padding: '12px 14px', borderRadius: '14px',
+        border: '1.5px solid ' + tok.border, background: tok.bg,
+        fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box',
+    };
+}
+</script>
+
+<template>
+    <Head title="Connexion" />
+
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
+        <div :style="{ width: '100%', maxWidth: '400px' }">
+
+            <!-- Logo / titre -->
+            <div style="text-align:center;margin-bottom:32px;">
+                <div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🩺</div>
+                <div :style="{ fontFamily: font.title, fontSize: '26px', fontWeight: 700, color: tok.text }">Diabetix</div>
+                <div :style="{ fontSize: '13px', color: tok.muted, marginTop: '4px' }">Votre coach glycémique personnel</div>
+            </div>
+
+            <!-- Carte -->
+            <div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">
+
+                <div v-if="status" :style="{ background: tok.light, borderRadius: '12px', padding: '10px 14px', fontSize: '13px', color: tok.dark, marginBottom: '20px' }">
+                    {{ status }}
+                </div>
+
+                <form @submit.prevent="submit">
+                    <div style="margin-bottom:16px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
+                        <input v-model="form.email" type="email" required autofocus autocomplete="username"
+                            :style="inputStyle()"
+                            :class="form.errors.email ? 'border-red-400' : ''" />
+                        <span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
+                    </div>
+
+                    <div style="margin-bottom:20px;">
+                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
+                            <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.7px' }">Mot de passe</label>
+                            <Link v-if="canResetPassword" :href="route('password.request')"
+                                :style="{ fontSize: '11px', color: tok.primary, textDecoration: 'none' }">
+                                Mot de passe oublié ?
+                            </Link>
+                        </div>
+                        <input v-model="form.password" type="password" required autocomplete="current-password"
+                            :style="inputStyle()" />
+                        <span v-if="form.errors.password" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password }}</span>
+                    </div>
+
+                    <!-- Se souvenir -->
+                    <label style="display:flex;align-items:center;gap:10px;margin-bottom:24px;cursor:pointer;">
+                        <span :style="{
+                            width: '20px', height: '20px', borderRadius: '6px', flexShrink: 0,
+                            border: '1.5px solid ' + (form.remember ? tok.primary : tok.border),
+                            background: form.remember ? tok.primary : tok.white,
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }" @click="form.remember = !form.remember">
+                            <span v-if="form.remember" style="color:#fff;font-size:12px;font-weight:700;">✓</span>
+                        </span>
+                        <span :style="{ fontSize: '13px', color: tok.muted }">Se souvenir de moi</span>
+                    </label>
+
+                    <button type="submit" :disabled="form.processing"
+                        :style="{
+                            width: '100%', padding: '15px', background: tok.primary, color: '#fff',
+                            borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
+                            cursor: form.processing ? 'not-allowed' : 'pointer',
+                            opacity: form.processing ? 0.6 : 1,
+                            boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
+                        }">
+                        {{ form.processing ? 'Connexion…' : 'Se connecter' }}
+                    </button>
+                </form>
+            </div>
+
+            <!-- Lien inscription -->
+            <div style="text-align:center;margin-top:20px;">
+                <span :style="{ fontSize: '13px', color: tok.muted }">Pas encore de compte ? </span>
+                <Link :href="route('register')" :style="{ fontSize: '13px', color: tok.primary, fontWeight: 600, textDecoration: 'none' }">Créer un compte</Link>
+            </div>
+
+        </div>
+    </div>
+</template>

app/resources/js/Pages/Auth/Register.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+
+const tok = tokens('mint');
+const font = FONT;
+
+const form = useForm({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+});
+
+function submit() {
+    form.post(route('register'), {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+}
+
+function inputStyle() {
+    return {
+        width: '100%', padding: '12px 14px', borderRadius: '14px',
+        border: '1.5px solid ' + tok.border, background: tok.bg,
+        fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box',
+    };
+}
+</script>
+
+<template>
+    <Head title="Créer un compte" />
+
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
+        <div :style="{ width: '100%', maxWidth: '400px' }">
+
+            <!-- Logo -->
+            <div style="text-align:center;margin-bottom:32px;">
+                <div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🩺</div>
+                <div :style="{ fontFamily: font.title, fontSize: '26px', fontWeight: 700, color: tok.text }">Diabetix</div>
+                <div :style="{ fontSize: '13px', color: tok.muted, marginTop: '4px' }">Créez votre compte gratuitement</div>
+            </div>
+
+            <!-- Carte -->
+            <div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">
+                <form @submit.prevent="submit">
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Nom complet</label>
+                        <input v-model="form.name" type="text" required autofocus autocomplete="name" :style="inputStyle()" />
+                        <span v-if="form.errors.name" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.name }}</span>
+                    </div>
+
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
+                        <input v-model="form.email" type="email" required autocomplete="username" :style="inputStyle()" />
+                        <span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
+                    </div>
+
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Mot de passe</label>
+                        <input v-model="form.password" type="password" required autocomplete="new-password" :style="inputStyle()" />
+                        <span v-if="form.errors.password" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password }}</span>
+                    </div>
+
+                    <div style="margin-bottom:24px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Confirmer le mot de passe</label>
+                        <input v-model="form.password_confirmation" type="password" required autocomplete="new-password" :style="inputStyle()" />
+                        <span v-if="form.errors.password_confirmation" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password_confirmation }}</span>
+                    </div>
+
+                    <button type="submit" :disabled="form.processing"
+                        :style="{
+                            width: '100%', padding: '15px', background: tok.primary, color: '#fff',
+                            borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
+                            cursor: form.processing ? 'not-allowed' : 'pointer',
+                            opacity: form.processing ? 0.6 : 1,
+                            boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
+                        }">
+                        {{ form.processing ? 'Création…' : 'Créer mon compte' }}
+                    </button>
+                </form>
+            </div>
+
+            <!-- Lien connexion -->
+            <div style="text-align:center;margin-top:20px;">
+                <span :style="{ fontSize: '13px', color: tok.muted }">Déjà un compte ? </span>
+                <Link :href="route('login')" :style="{ fontSize: '13px', color: tok.primary, fontWeight: 600, textDecoration: 'none' }">Se connecter</Link>
+            </div>
+
+        </div>
+    </div>
+</template>

app/resources/js/Pages/Auth/ResetPassword.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { Head, useForm } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+
+const props = defineProps({
+    email: { type: String, required: true },
+    token: { type: String, required: true },
+});
+
+const tok = tokens('mint');
+const font = FONT;
+
+const form = useForm({
+    token: props.token,
+    email: props.email,
+    password: '',
+    password_confirmation: '',
+});
+
+function submit() {
+    form.post(route('password.store'), {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+}
+
+function inputStyle() {
+    return {
+        width: '100%', padding: '12px 14px', borderRadius: '14px',
+        border: '1.5px solid ' + tok.border, background: tok.bg,
+        fontSize: '15px', color: tok.text, outline: 'none', boxSizing: 'border-box',
+    };
+}
+</script>
+
+<template>
+    <Head title="Réinitialiser le mot de passe" />
+
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: font.body, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }">
+        <div :style="{ width: '100%', maxWidth: '400px' }">
+
+            <div style="text-align:center;margin-bottom:32px;">
+                <div :style="{ width: '64px', height: '64px', borderRadius: '50%', background: tok.light, border: '2px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', margin: '0 auto 14px' }">🔒</div>
+                <div :style="{ fontFamily: font.title, fontSize: '24px', fontWeight: 700, color: tok.text }">Nouveau mot de passe</div>
+                <div :style="{ fontSize: '13px', color: tok.muted, marginTop: '4px' }">Choisissez un mot de passe sécurisé.</div>
+            </div>
+
+            <div :style="{ background: tok.white, borderRadius: '24px', padding: '28px 24px', boxShadow: '0 4px 24px rgba(42,53,51,0.10)' }">
+                <form @submit.prevent="submit">
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Adresse e-mail</label>
+                        <input v-model="form.email" type="email" required autocomplete="username" :style="inputStyle()" />
+                        <span v-if="form.errors.email" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.email }}</span>
+                    </div>
+
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Nouveau mot de passe</label>
+                        <input v-model="form.password" type="password" required autofocus autocomplete="new-password" :style="inputStyle()" />
+                        <span v-if="form.errors.password" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password }}</span>
+                    </div>
+
+                    <div style="margin-bottom:24px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.7px' }">Confirmer le mot de passe</label>
+                        <input v-model="form.password_confirmation" type="password" required autocomplete="new-password" :style="inputStyle()" />
+                        <span v-if="form.errors.password_confirmation" :style="{ fontSize: '11px', color: '#c43', marginTop: '4px', display: 'block' }">{{ form.errors.password_confirmation }}</span>
+                    </div>
+
+                    <button type="submit" :disabled="form.processing"
+                        :style="{
+                            width: '100%', padding: '15px', background: tok.primary, color: '#fff',
+                            borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 700,
+                            cursor: form.processing ? 'not-allowed' : 'pointer',
+                            opacity: form.processing ? 0.6 : 1,
+                            boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
+                        }">
+                        {{ form.processing ? 'Enregistrement…' : 'Réinitialiser le mot de passe' }}
+                    </button>
+                </form>
+            </div>
+
+        </div>
+    </div>
+</template>

app/resources/js/Pages/Auth/VerifyEmail.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    status: {
+        type: String,
+    },
+});
+
+const form = useForm({});
+
+const submit = () => {
+    form.post(route('verification.send'));
+};
+
+const verificationLinkSent = computed(
+    () => props.status === 'verification-link-sent',
+);
+</script>
+
+<template>
+    <GuestLayout>
+        <Head title="Email Verification" />
+
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+            Thanks for signing up! Before getting started, could you verify your
+            email address by clicking on the link we just emailed to you? If you
+            didn't receive the email, we will gladly send you another.
+        </div>
+
+        <div
+            class="mb-4 text-sm font-medium text-green-600 dark:text-green-400"
+            v-if="verificationLinkSent"
+        >
+            A new verification link has been sent to the email address you
+            provided during registration.
+        </div>
+
+        <form @submit.prevent="submit">
+            <div class="mt-4 flex items-center justify-between">
+                <PrimaryButton
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                >
+                    Resend Verification Email
+                </PrimaryButton>
+
+                <Link
+                    :href="route('logout')"
+                    method="post"
+                    as="button"
+                    class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
+                    >Log Out</Link
+                >
+            </div>
+        </form>
+    </GuestLayout>
+</template>

app/resources/js/Pages/Dashboard.vue

@@ -0,0 +1,30 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head } from '@inertiajs/vue3';
+</script>
+
+<template>
+    <Head title="Dashboard" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2
+                class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200"
+            >
+                Dashboard
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div
+                    class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+                >
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        You're logged in!
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>

app/resources/js/Pages/Diabetix/Challenges.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { Head } from '@inertiajs/vue3';
+import DiabetixLayout from '@/Layouts/DiabetixLayout.vue';
+import ProgressBar from '@/Components/Diabetix/ProgressBar.vue';
+import BadgeChip from '@/Components/Diabetix/BadgeChip.vue';
+
+const props = defineProps({
+    challenges: Array,
+    badges: Array,
+    level: Object,
+});
+
+const tab = ref('defis');
+
+const unlocked = computed(() => props.badges.filter(b => b.unlocked));
+const locked = computed(() => props.badges.filter(b => !b.unlocked));
+</script>
+
+<template>
+    <Head title="Défis & Badges" />
+    <DiabetixLayout v-slot="{ tok, font }">
+        <div :style="{ background: tok.white, padding: '14px 20px 18px', borderBottom: '1px solid ' + tok.border }">
+            <div :style="{ fontFamily: font.title, fontSize: '20px', fontWeight: 600, color: tok.text, marginBottom: '14px' }">Défis & Badges</div>
+
+            <div :style="{ background: tok.light, borderRadius: '18px', padding: '16px' }">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                    <div>
+                        <div :style="{ fontSize: '11px', color: tok.muted }">Niveau actuel</div>
+                        <div :style="{ fontFamily: font.title, fontSize: '17px', fontWeight: 600, color: tok.text }">{{ level.icon }} {{ level.label }}</div>
+                    </div>
+                    <div style="text-align:right;">
+                        <div :style="{ fontSize: '11px', color: tok.muted }">Points</div>
+                        <div :style="{ fontSize: '22px', fontWeight: 800, color: tok.amber }">{{ level.points.toLocaleString('fr-FR') }}</div>
+                    </div>
+                </div>
+                <ProgressBar :value="level.points" :max="level.next_at" :color="tok.amber" :tok="tok" :height="8" />
+                <div style="display:flex;justify-content:space-between;margin-top:5px;">
+                    <span :style="{ fontSize: '10px', color: tok.muted }">{{ level.icon }} {{ level.label }}</span>
+                    <span :style="{ fontSize: '10px', color: tok.amber }">{{ level.remaining }} pts → {{ level.next_icon }} {{ level.next_label }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div style="padding:14px 20px 0;">
+            <div :style="{ display: 'flex', gap: '4px', background: tok.bgAlt, borderRadius: '12px', padding: '4px' }">
+                <button v-for="t in [['defis','🎯 Défis actifs'],['badges','🏅 Badges']]" :key="t[0]"
+                    @click="tab = t[0]"
+                    :style="{
+                        flex: 1, padding: '8px', borderRadius: '9px', border: 'none',
+                        background: tab === t[0] ? tok.primary : 'transparent',
+                        color: tab === t[0] ? '#fff' : tok.muted,
+                        fontSize: '12px', fontWeight: tab === t[0] ? 600 : 400, cursor: 'pointer',
+                    }">{{ t[1] }}</button>
+            </div>
+        </div>
+
+        <div style="padding:14px 20px;display:flex;flex-direction:column;gap:14px;">
+            <template v-if="tab === 'defis'">
+                <div v-for="c in challenges" :key="c.id"
+                    :style="{ background: tok.white, borderRadius: '18px', padding: '16px', boxShadow: '0 2px 12px rgba(42,53,51,0.06)' }">
+                    <div style="display:flex;align-items:flex-start;gap:12px;">
+                        <div style="font-size:28px;">{{ c.icon }}</div>
+                        <div style="flex:1;">
+                            <div style="display:flex;justify-content:space-between;align-items:center;">
+                                <div :style="{ fontSize: '14px', fontWeight: 600, color: tok.text }">{{ c.title }}</div>
+                                <div :style="{ background: tok.amberLight, borderRadius: '20px', padding: '3px 8px', fontSize: '10px', color: tok.amber, fontWeight: 600 }">+{{ c.points }} pts</div>
+                            </div>
+                            <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '10px' }">{{ c.description }}</div>
+                            <ProgressBar :value="c.progress" :tok="tok" :height="7" />
+                            <div style="display:flex;justify-content:flex-end;margin-top:5px;">
+                                <span :style="{ fontSize: '11px', color: tok.primary }">{{ c.progress }}%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template v-else>
+                <template v-if="unlocked.length">
+                    <div :style="{ fontSize: '11px', color: tok.muted, fontWeight: 700, letterSpacing: '0.8px' }">DÉBLOQUÉS ({{ unlocked.length }})</div>
+                    <div v-for="b in unlocked" :key="b.id"
+                        :style="{ background: tok.white, borderRadius: '16px', padding: '14px 16px', boxShadow: '0 2px 10px rgba(42,53,51,0.06)', display: 'flex', alignItems: 'center', gap: '14px' }">
+                        <div :style="{
+                            width: '48px', height: '48px', borderRadius: '50%', flexShrink: 0,
+                            background: tok.light, border: '2px solid ' + tok.primary,
+                            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '22px',
+                        }">{{ b.icon }}</div>
+                        <div style="flex:1;min-width:0;">
+                            <div :style="{ fontSize: '13px', fontWeight: 700, color: tok.text }">{{ b.label }}</div>
+                            <div :style="{ fontSize: '11px', color: tok.muted, marginTop: '2px', lineHeight: 1.4 }">{{ b.criteria }}</div>
+                        </div>
+                        <div :style="{ fontSize: '16px', flexShrink: 0 }">✅</div>
+                    </div>
+                </template>
+
+                <template v-if="locked.length">
+                    <div :style="{ fontSize: '11px', color: tok.muted, fontWeight: 700, letterSpacing: '0.8px', marginTop: unlocked.length ? '4px' : 0 }">À DÉBLOQUER ({{ locked.length }})</div>
+                    <div v-for="b in locked" :key="b.id"
+                        :style="{ background: tok.white, borderRadius: '16px', padding: '14px 16px', boxShadow: '0 2px 10px rgba(42,53,51,0.04)', display: 'flex', alignItems: 'center', gap: '14px', opacity: 0.7 }">
+                        <div :style="{
+                            width: '48px', height: '48px', borderRadius: '50%', flexShrink: 0,
+                            background: tok.bgAlt, border: '2px solid ' + tok.border,
+                            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '22px',
+                            filter: 'grayscale(1)',
+                        }">{{ b.icon }}</div>
+                        <div style="flex:1;min-width:0;">
+                            <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.muted }">{{ b.label }}</div>
+                            <div :style="{ fontSize: '11px', color: tok.muted, marginTop: '2px', lineHeight: 1.4 }">{{ b.criteria }}</div>
+                        </div>
+                        <div :style="{ fontSize: '16px', flexShrink: 0 }">🔒</div>
+                    </div>
+                </template>
+            </template>
+        </div>
+    </DiabetixLayout>
+</template>

app/resources/js/Pages/Diabetix/Chat.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { Head, useForm } from '@inertiajs/vue3';
+import DiabetixLayout from '@/Layouts/DiabetixLayout.vue';
+import CoachAvatar from '@/Components/Diabetix/CoachAvatar.vue';
+
+const props = defineProps({
+    messages: Array,
+});
+
+const form = useForm({ body: '' });
+const listRef = ref(null);
+
+function send() {
+    if (!form.body.trim()) return;
+    form.post(route('chat.store'), {
+        preserveScroll: true,
+        onSuccess: () => form.reset('body'),
+    });
+}
+
+watch(() => props.messages.length, async () => {
+    await nextTick();
+    if (listRef.value) listRef.value.scrollTop = listRef.value.scrollHeight;
+}, { immediate: true });
+</script>
+
+<template>
+    <Head title="Coach IA" />
+    <DiabetixLayout v-slot="{ tok, font }">
+        <div :style="{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 78px)', background: tok.bg }">
+            <div :style="{ background: tok.white, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: '10px', borderBottom: '1px solid ' + tok.border, flexShrink: 0 }">
+                <CoachAvatar :size="36" :tok="tok" />
+                <div>
+                    <div :style="{ fontFamily: font.title, fontSize: '16px', fontWeight: 600, color: tok.text }">Coach IA</div>
+                    <div :style="{ fontSize: '11px', color: tok.primary }">🟢 En ligne · Répond en quelques secondes</div>
+                </div>
+            </div>
+
+            <div ref="listRef" style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;">
+                <div v-for="(msg, i) in messages" :key="msg.id ?? i"
+                    :style="{ display: 'flex', flexDirection: 'column', alignItems: msg.sender === 'coach' ? 'flex-start' : 'flex-end', gap: '5px' }">
+                    <div :style="{ display: 'flex', alignItems: 'flex-end', gap: '8px', flexDirection: msg.sender === 'coach' ? 'row' : 'row-reverse' }">
+                        <CoachAvatar v-if="msg.sender === 'coach'" :size="28" :tok="tok" />
+                        <div :style="{
+                            maxWidth: '78%',
+                            background: msg.sender === 'coach' ? tok.light : tok.primary,
+                            color: msg.sender === 'coach' ? tok.text : '#fff',
+                            borderRadius: msg.sender === 'coach' ? '14px 14px 14px 3px' : '14px 14px 3px 14px',
+                            padding: '10px 14px', fontSize: '13px', lineHeight: 1.5,
+                        }">{{ msg.body }}</div>
+                    </div>
+                    <div v-if="msg.actions && msg.actions.length" :style="{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginLeft: msg.sender === 'coach' ? '36px' : 0 }">
+                        <button v-for="(a, j) in msg.actions" :key="j" :style="{
+                            padding: '5px 13px', borderRadius: '20px', background: tok.white,
+                            border: '1.5px solid ' + tok.primary, fontSize: '11px',
+                            color: tok.primary, fontWeight: 500, cursor: 'pointer',
+                        }">{{ a }}</button>
+                    </div>
+                    <div :style="{ fontSize: '9px', color: tok.muted, paddingLeft: msg.sender === 'coach' ? '36px' : 0 }">{{ msg.time }}</div>
+                </div>
+            </div>
+
+            <div :style="{ padding: '10px 14px', background: tok.white, borderTop: '1px solid ' + tok.border, flexShrink: 0, display: 'flex', gap: '8px', alignItems: 'center' }">
+                <input v-model="form.body" @keydown.enter="send"
+                    placeholder="Écrire au coach..."
+                    :style="{ flex: 1, padding: '10px 14px', borderRadius: '20px', border: '1.5px solid ' + tok.border, background: tok.bg, fontSize: '13px', color: tok.text, outline: 'none' }" />
+                <button @click="send" :disabled="form.processing"
+                    :style="{ width: '38px', height: '38px', borderRadius: '50%', background: tok.primary, border: 'none', color: '#fff', fontSize: '17px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: form.processing ? 0.6 : 1 }">↑</button>
+            </div>
+        </div>
+    </DiabetixLayout>
+</template>

app/resources/js/Pages/Diabetix/Home.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed } from 'vue';
+import { Head, Link, usePage } from '@inertiajs/vue3';
+import DiabetixLayout from '@/Layouts/DiabetixLayout.vue';
+import ProgressBar from '@/Components/Diabetix/ProgressBar.vue';
+import CoachAvatar from '@/Components/Diabetix/CoachAvatar.vue';
+import BadgeChip from '@/Components/Diabetix/BadgeChip.vue';
+import GlucoseChart from '@/Components/Diabetix/GlucoseChart.vue';
+
+const props = defineProps({
+    metrics: Object,
+    day_chart: Array,
+    challenges: Array,
+    badges: Array,
+});
+
+const page = usePage();
+const userName = computed(() => page.props.auth.user?.first_name ?? 'ami');
+
+const latest = computed(() => props.metrics.latest);
+const inRange = computed(() => latest.value?.in_range);
+</script>
+
+<template>
+    <Head title="Accueil" />
+    <DiabetixLayout v-slot="{ tok, font, openInput }">
+        <!-- Header -->
+        <div :style="{ background: tok.white, padding: '14px 20px 18px', borderBottom: '1px solid ' + tok.border }">
+            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
+                <CoachAvatar :size="42" :tok="tok" />
+                <div style="flex:1;">
+                    <div :style="{ fontFamily: font.title, fontSize: '19px', color: tok.text, fontWeight: 600 }">
+                        Bonjour <Link :href="route('profile.edit')" :style="{ color: tok.text, textDecoration: 'none', borderBottom: '1.5px dashed ' + tok.primary }">{{ userName }}</Link> ! 👋
+                    </div>
+                    <div :style="{ fontSize: '11px', color: tok.muted }">Coach IA · En ligne</div>
+                </div>
+                <div v-if="latest" :style="{
+                    background: inRange ? tok.light : tok.amberLight,
+                    borderRadius: '14px', padding: '8px 14px', textAlign: 'center',
+                    border: '2px solid ' + (inRange ? tok.primary : tok.amber),
+                }">
+                    <div :style="{ fontSize: '20px', fontWeight: 800, color: tok.text, lineHeight: 1 }">
+                        {{ latest.value }}
+                    </div>
+                    <div :style="{ fontSize: '9px', color: inRange ? tok.primary : tok.amber, marginTop: '2px' }">
+                        mg/dL {{ inRange ? '✓' : '⚠' }}
+                    </div>
+                </div>
+            </div>
+
+            <div :style="{ background: tok.light, borderRadius: '16px', padding: '12px 14px' }">
+                <div :style="{ fontSize: '12px', color: tok.text, lineHeight: 1.6 }">
+                    🤖 Votre glycémie actuelle est
+                    <strong>{{ inRange ? 'dans la cible' : 'à surveiller' }}</strong>.
+                    Essayez une marche de 10 min ce soir — je vous rappellerai à 19h30 !
+                </div>
+                <button :style="{
+                    marginTop: '10px', padding: '5px 14px', borderRadius: '20px',
+                    background: tok.white, border: '1.5px solid ' + tok.primary,
+                    fontSize: '11px', color: tok.primary, fontWeight: 600, cursor: 'pointer',
+                }">Ajouter ce défi ✓</button>
+            </div>
+        </div>
+
+        <div style="padding:14px 20px;display:flex;flex-direction:column;gap:14px;">
+            <!-- Stats row -->
+            <div style="display:flex;gap:14px;">
+                <div :style="{ flex: 1, background: tok.white, borderRadius: '16px', padding: '14px', textAlign: 'center', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div :style="{ fontSize: '26px', fontWeight: 800, color: tok.text }">🔥 {{ metrics.streak_days }}</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '3px' }">jours dans la cible</div>
+                </div>
+                <div :style="{ flex: 1, background: tok.white, borderRadius: '16px', padding: '14px', textAlign: 'center', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div :style="{ fontSize: '26px', fontWeight: 800, color: tok.primary }">{{ metrics.time_in_range }}%</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '3px' }">temps dans la cible</div>
+                </div>
+            </div>
+
+            <!-- Day chart -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '18px 18px 12px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+                    <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text }">Aujourd'hui</div>
+                    <Link :href="route('stats')" :style="{ fontSize: '11px', color: tok.primary, textDecoration: 'none' }">Détails →</Link>
+                </div>
+                <div v-if="day_chart.length === 0" :style="{ fontSize: '12px', color: tok.muted, textAlign: 'center', padding: '18px 0' }">
+                    Aucune mesure aujourd'hui — tapez ＋ pour en ajouter une.
+                </div>
+                <GlucoseChart v-else :data="day_chart" :tok="tok" :width="316" :height="120" :target-min="metrics.target_min" :target-max="metrics.target_max" />
+            </div>
+
+            <!-- Active challenges -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
+                    <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text }">Défis actifs</div>
+                    <Link :href="route('challenges')" :style="{ fontSize: '11px', color: tok.primary, textDecoration: 'none' }">Voir tout →</Link>
+                </div>
+                <div v-if="!challenges.length" :style="{ fontSize: '12px', color: tok.muted }">Aucun défi en cours.</div>
+                <div v-for="(c, i) in challenges" :key="c.id" :style="{ marginBottom: i < challenges.length - 1 ? '14px' : 0, display: 'flex', alignItems: 'center', gap: '10px' }">
+                    <div style="font-size:24px;">{{ c.icon }}</div>
+                    <div style="flex:1;">
+                        <div style="display:flex;justify-content:space-between;align-items:center;">
+                            <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text }">{{ c.title }}</div>
+                            <div :style="{ fontSize: '11px', color: tok.amber, fontWeight: 600 }">+{{ c.points }} pts</div>
+                        </div>
+                        <div :style="{ fontSize: '11px', color: tok.muted, marginBottom: '6px' }">{{ c.description }}</div>
+                        <ProgressBar :value="c.progress" :tok="tok" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Badges -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
+                    <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text }">Badges débloqués</div>
+                    <Link :href="route('challenges')" :style="{ fontSize: '11px', color: tok.primary, textDecoration: 'none' }">Voir tout →</Link>
+                </div>
+                <div style="display:flex;justify-content:space-around;">
+                    <BadgeChip v-for="(b, i) in badges.slice(0, 4)" :key="i" :icon="b.icon" :label="b.label" :unlocked="b.unlocked" :tok="tok" />
+                </div>
+            </div>
+
+            <button @click="openInput" :style="{
+                width: '100%', padding: '14px', background: tok.primary, color: '#fff',
+                borderRadius: '16px', border: 'none', fontSize: '15px', fontWeight: 600,
+                cursor: 'pointer', boxShadow: '0 6px 18px rgba(123,191,181,0.35)',
+            }">＋ Saisir une mesure</button>
+        </div>
+    </DiabetixLayout>
+</template>

app/resources/js/Pages/Diabetix/Stats.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { Head, router } from '@inertiajs/vue3';
+import DiabetixLayout from '@/Layouts/DiabetixLayout.vue';
+import GlucoseChart from '@/Components/Diabetix/GlucoseChart.vue';
+
+const props = defineProps({
+    period: String,
+    points: Array,
+    stats: Object,
+    history: Array,
+    target: Object,
+});
+
+const tabs = [
+    { id: 'day', label: 'Auj.' },
+    { id: 'week', label: 'Sem.' },
+    { id: 'month', label: 'Mois' },
+    { id: 'quarter', label: 'Trim.' },
+];
+
+function setPeriod(p) {
+    router.get(route('stats'), { period: p }, { preserveState: false, preserveScroll: true });
+}
+
+function fmt(v) {
+    return v == null ? '–' : String(v);
+}
+</script>
+
+<template>
+    <Head title="Statistiques" />
+    <DiabetixLayout v-slot="{ tok, font }">
+        <div :style="{ background: tok.white, padding: '14px 20px', borderBottom: '1px solid ' + tok.border }">
+            <div :style="{ fontFamily: font.title, fontSize: '20px', fontWeight: 600, color: tok.text, marginBottom: '12px' }">Statistiques</div>
+            <div :style="{ display: 'flex', gap: '3px', background: tok.bgAlt, borderRadius: '12px', padding: '3px' }">
+                <button v-for="t in tabs" :key="t.id" @click="setPeriod(t.id)"
+                    :style="{
+                        flex: 1, padding: '7px 4px', borderRadius: '10px', border: 'none',
+                        background: period === t.id ? tok.primary : 'transparent',
+                        color: period === t.id ? '#fff' : tok.muted,
+                        fontSize: '12px', fontWeight: period === t.id ? 600 : 400, cursor: 'pointer',
+                    }">{{ t.label }}</button>
+            </div>
+        </div>
+
+        <div style="padding:14px 20px;display:flex;flex-direction:column;gap:14px;">
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 14px rgba(42,53,51,0.06)' }">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                    <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text }">Courbe glycémique</div>
+                    <div style="display:flex;gap:8px;">
+                        <span :style="{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '9px', color: tok.muted }">
+                            <span :style="{ width: '7px', height: '7px', borderRadius: '2px', background: tok.primary, display: 'inline-block' }" />Dans la cible
+                        </span>
+                        <span :style="{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '9px', color: tok.muted }">
+                            <span :style="{ width: '7px', height: '7px', borderRadius: '2px', background: tok.amber, display: 'inline-block' }" />Hors cible
+                        </span>
+                    </div>
+                </div>
+                <GlucoseChart :data="points" :tok="tok" :width="316" :height="120" :target-min="target.min" :target-max="target.max" />
+            </div>
+
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+                <div :style="{ background: tok.white, borderRadius: '16px', padding: '14px', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div style="font-size:16px;margin-bottom:4px;">📊</div>
+                    <div :style="{ fontSize: '22px', fontWeight: 800, color: tok.text }">{{ fmt(stats.avg) }}</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '2px' }">Moyenne · mg/dL</div>
+                </div>
+                <div :style="{ background: tok.white, borderRadius: '16px', padding: '14px', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div style="font-size:16px;margin-bottom:4px;">🎯</div>
+                    <div :style="{ fontSize: '22px', fontWeight: 800, color: tok.primary }">{{ stats.in_range_pct }}%</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '2px' }">Dans la cible</div>
+                </div>
+                <div :style="{ background: tok.white, borderRadius: '16px', padding: '14px', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div style="font-size:16px;margin-bottom:4px;">⬇️</div>
+                    <div :style="{ fontSize: '22px', fontWeight: 800, color: tok.amber }">{{ fmt(stats.min) }}</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '2px' }">Minimum · mg/dL</div>
+                </div>
+                <div :style="{ background: tok.white, borderRadius: '16px', padding: '14px', boxShadow: '0 2px 10px rgba(42,53,51,0.05)' }">
+                    <div style="font-size:16px;margin-bottom:4px;">⬆️</div>
+                    <div :style="{ fontSize: '22px', fontWeight: 800, color: '#d4826a' }">{{ fmt(stats.max) }}</div>
+                    <div :style="{ fontSize: '10px', color: tok.muted, marginTop: '2px' }">Maximum · mg/dL</div>
+                </div>
+            </div>
+
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 14px rgba(42,53,51,0.06)' }">
+                <div :style="{ fontSize: '13px', fontWeight: 600, color: tok.text, marginBottom: '14px' }">Historique</div>
+                <div v-for="(e, i) in history" :key="e.id"
+                    :style="{
+                        display: 'flex', alignItems: 'center', gap: '12px',
+                        paddingBottom: i < history.length - 1 ? '12px' : 0,
+                        borderBottom: i < history.length - 1 ? '1px solid ' + tok.border : 'none',
+                        marginBottom: i < history.length - 1 ? '12px' : 0,
+                    }">
+                    <div style="display:flex;flex-direction:column;align-items:center;width:12px;">
+                        <div :style="{ width: '10px', height: '10px', borderRadius: '50%', background: e.in_range ? tok.primary : tok.amber }" />
+                        <div v-if="i < history.length - 1" :style="{ width: '1px', height: '24px', background: tok.border, marginTop: '2px' }" />
+                    </div>
+                    <div style="flex:1;">
+                        <div style="display:flex;justify-content:space-between;align-items:center;">
+                            <div>
+                                <span :style="{ fontSize: '14px', fontWeight: 700, color: tok.text }">{{ fmt(e.value) }} </span>
+                                <span :style="{ fontSize: '11px', color: tok.muted }">mg/dL </span>
+                                <span v-if="!e.in_range" :style="{ fontSize: '11px', color: tok.amber, fontWeight: 600 }">⚠️</span>
+                            </div>
+                            <span :style="{ fontSize: '11px', color: tok.muted }">{{ e.time }}</span>
+                        </div>
+                        <div :style="{ fontSize: '11px', color: tok.muted }">{{ e.context }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </DiabetixLayout>
+</template>

app/resources/js/Pages/Profile/Edit.vue

@@ -0,0 +1,279 @@
+<script setup>
+import { ref, nextTick } from 'vue';
+import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import DiabetixLayout from '@/Layouts/DiabetixLayout.vue';
+
+defineProps({
+    mustVerifyEmail: Boolean,
+    status: String,
+});
+
+const user = usePage().props.auth.user;
+
+// Formulaire infos compte
+const accountForm = useForm({
+    name: user.name,
+    email: user.email,
+});
+
+// Formulaire préférences Diabetix
+const diabetixForm = useForm({
+    first_name: user.first_name ?? '',
+    diabetes_type: user.diabetes_type ?? 'type2',
+    target_min: user.target_min ?? 70,
+    target_max: user.target_max ?? 180,
+    palette: user.palette ?? 'mint',
+});
+
+// Formulaire mot de passe
+const passwordForm = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+});
+
+const passwordRef = ref(null);
+const currentPasswordRef = ref(null);
+
+function updatePassword() {
+    passwordForm.put(route('password.update'), {
+        preserveScroll: true,
+        onSuccess: () => passwordForm.reset(),
+        onError: () => {
+            if (passwordForm.errors.password) {
+                passwordForm.reset('password', 'password_confirmation');
+                passwordRef.value?.focus();
+            }
+            if (passwordForm.errors.current_password) {
+                passwordForm.reset('current_password');
+                currentPasswordRef.value?.focus();
+            }
+        },
+    });
+}
+
+// Suppression compte
+const deleteOpen = ref(false);
+const deletePasswordRef = ref(null);
+const deleteForm = useForm({ password: '' });
+
+function openDelete() {
+    deleteOpen.value = true;
+    nextTick(() => deletePasswordRef.value?.focus());
+}
+
+function confirmDelete() {
+    deleteForm.delete(route('profile.destroy'), {
+        preserveScroll: true,
+        onError: () => deletePasswordRef.value?.focus(),
+        onFinish: () => deleteForm.reset(),
+    });
+}
+
+const palettes = [
+    { id: 'mint',  label: 'Menthe', swatch: '#7bbfb5' },
+    { id: 'lilac', label: 'Lilas',  swatch: '#9b8ec4' },
+    { id: 'peach', label: 'Pêche',  swatch: '#d4826a' },
+];
+
+const diabetesTypes = [
+    { id: 'type1',        label: 'Type 1' },
+    { id: 'type2',        label: 'Type 2' },
+    { id: 'gestational',  label: 'Gestationnel' },
+    { id: 'other',        label: 'Autre' },
+];
+
+function inputStyle(tok) {
+    return {
+        width: '100%', padding: '11px 14px', borderRadius: '12px',
+        border: '1.5px solid ' + tok.border, background: tok.bg,
+        fontSize: '14px', color: tok.text, outline: 'none', boxSizing: 'border-box',
+    };
+}
+
+function chipStyle(active, tok) {
+    return {
+        padding: '7px 14px', borderRadius: '20px',
+        border: '1.5px solid ' + (active ? tok.primary : tok.border),
+        background: active ? tok.light : tok.white,
+        color: active ? tok.dark : tok.muted,
+        fontSize: '12px', fontWeight: active ? 600 : 400, cursor: 'pointer',
+    };
+}
+
+function btnPrimary(tok, disabled) {
+    return {
+        padding: '13px 20px', background: tok.primary, color: '#fff',
+        borderRadius: '14px', border: 'none', fontSize: '13px', fontWeight: 600,
+        cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1,
+    };
+}
+</script>
+
+<template>
+    <Head title="Paramètres" />
+    <DiabetixLayout v-slot="{ tok, font }">
+
+        <!-- Header -->
+        <div :style="{ background: tok.white, padding: '14px 20px 18px', borderBottom: '1px solid ' + tok.border }">
+            <div style="display:flex;align-items:center;gap:10px;">
+                <Link :href="route('dashboard')" :style="{ color: tok.muted, fontSize: '20px', textDecoration: 'none', lineHeight: 1 }">←</Link>
+                <div :style="{ fontFamily: font.title, fontSize: '20px', fontWeight: 600, color: tok.text }">Paramètres</div>
+            </div>
+        </div>
+
+        <div style="padding:14px 20px;display:flex;flex-direction:column;gap:14px;">
+
+            <!-- Préférences Diabetix -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div :style="{ fontSize: '11px', fontWeight: 700, color: tok.muted, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '16px' }">Mes préférences</div>
+
+                <form @submit.prevent="diabetixForm.patch(route('profile.diabetix'), { preserveScroll: true })">
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Prénom</label>
+                        <input v-model="diabetixForm.first_name" type="text" :style="inputStyle(tok)" placeholder="Marie" />
+                        <span v-if="diabetixForm.errors.first_name" :style="{ fontSize: '11px', color: '#c43' }">{{ diabetixForm.errors.first_name }}</span>
+                    </div>
+
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '8px' }">Type de diabète</label>
+                        <div style="display:flex;flex-wrap:wrap;gap:6px;">
+                            <button v-for="t in diabetesTypes" :key="t.id" type="button" @click="diabetixForm.diabetes_type = t.id" :style="chipStyle(diabetixForm.diabetes_type === t.id, tok)">{{ t.label }}</button>
+                        </div>
+                    </div>
+
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '8px' }">Plage cible glycémique (mg/dL)</label>
+                        <div style="display:flex;gap:10px;align-items:center;">
+                            <input v-model.number="diabetixForm.target_min" type="number" min="50" max="140" :style="{ ...inputStyle(tok), textAlign: 'center', width: '80px' }" />
+                            <span :style="{ color: tok.muted, fontSize: '13px' }">–</span>
+                            <input v-model.number="diabetixForm.target_max" type="number" min="120" max="300" :style="{ ...inputStyle(tok), textAlign: 'center', width: '80px' }" />
+                            <span :style="{ color: tok.muted, fontSize: '11px' }">mg/dL</span>
+                        </div>
+                        <span v-if="diabetixForm.errors.target_min || diabetixForm.errors.target_max" :style="{ fontSize: '11px', color: '#c43' }">{{ diabetixForm.errors.target_min || diabetixForm.errors.target_max }}</span>
+                    </div>
+
+                    <div style="margin-bottom:20px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '8px' }">Thème de couleur</label>
+                        <div style="display:flex;gap:8px;flex-wrap:wrap;">
+                            <button v-for="p in palettes" :key="p.id" type="button" @click="diabetixForm.palette = p.id"
+                                :style="{
+                                    display: 'flex', alignItems: 'center', gap: '7px',
+                                    padding: '8px 14px', borderRadius: '20px',
+                                    border: '1.5px solid ' + (diabetixForm.palette === p.id ? tok.text : tok.border),
+                                    background: diabetixForm.palette === p.id ? tok.light : tok.white,
+                                    fontSize: '12px', fontWeight: diabetixForm.palette === p.id ? 600 : 400,
+                                    color: tok.text, cursor: 'pointer',
+                                }">
+                                <span :style="{ width: '12px', height: '12px', borderRadius: '50%', background: p.swatch, display: 'inline-block' }" />
+                                {{ p.label }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div style="display:flex;align-items:center;gap:12px;">
+                        <button type="submit" :disabled="diabetixForm.processing" :style="btnPrimary(tok, diabetixForm.processing)">
+                            {{ diabetixForm.processing ? '…' : 'Enregistrer' }}
+                        </button>
+                        <span v-if="diabetixForm.recentlySuccessful" :style="{ fontSize: '12px', color: tok.primary }">✓ Enregistré</span>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Infos compte -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div :style="{ fontSize: '11px', fontWeight: 700, color: tok.muted, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '16px' }">Mon compte</div>
+
+                <form @submit.prevent="accountForm.patch(route('profile.update'), { preserveScroll: true })">
+                    <div style="margin-bottom:14px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Nom complet</label>
+                        <input v-model="accountForm.name" type="text" required :style="inputStyle(tok)" />
+                        <span v-if="accountForm.errors.name" :style="{ fontSize: '11px', color: '#c43' }">{{ accountForm.errors.name }}</span>
+                    </div>
+                    <div style="margin-bottom:20px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Adresse e-mail</label>
+                        <input v-model="accountForm.email" type="email" required :style="inputStyle(tok)" />
+                        <span v-if="accountForm.errors.email" :style="{ fontSize: '11px', color: '#c43' }">{{ accountForm.errors.email }}</span>
+                    </div>
+                    <div style="display:flex;align-items:center;gap:12px;">
+                        <button type="submit" :disabled="accountForm.processing" :style="btnPrimary(tok, accountForm.processing)">
+                            {{ accountForm.processing ? '…' : 'Mettre à jour' }}
+                        </button>
+                        <span v-if="accountForm.recentlySuccessful" :style="{ fontSize: '12px', color: tok.primary }">✓ Enregistré</span>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Mot de passe -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div :style="{ fontSize: '11px', fontWeight: 700, color: tok.muted, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '16px' }">Mot de passe</div>
+
+                <form @submit.prevent="updatePassword">
+                    <div style="margin-bottom:12px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Mot de passe actuel</label>
+                        <input ref="currentPasswordRef" v-model="passwordForm.current_password" type="password" autocomplete="current-password" :style="inputStyle(tok)" />
+                        <span v-if="passwordForm.errors.current_password" :style="{ fontSize: '11px', color: '#c43' }">{{ passwordForm.errors.current_password }}</span>
+                    </div>
+                    <div style="margin-bottom:12px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Nouveau mot de passe</label>
+                        <input ref="passwordRef" v-model="passwordForm.password" type="password" autocomplete="new-password" :style="inputStyle(tok)" />
+                        <span v-if="passwordForm.errors.password" :style="{ fontSize: '11px', color: '#c43' }">{{ passwordForm.errors.password }}</span>
+                    </div>
+                    <div style="margin-bottom:20px;">
+                        <label :style="{ fontSize: '11px', color: tok.muted, fontWeight: 600, display: 'block', marginBottom: '6px' }">Confirmer le nouveau mot de passe</label>
+                        <input v-model="passwordForm.password_confirmation" type="password" autocomplete="new-password" :style="inputStyle(tok)" />
+                        <span v-if="passwordForm.errors.password_confirmation" :style="{ fontSize: '11px', color: '#c43' }">{{ passwordForm.errors.password_confirmation }}</span>
+                    </div>
+                    <div style="display:flex;align-items:center;gap:12px;">
+                        <button type="submit" :disabled="passwordForm.processing" :style="btnPrimary(tok, passwordForm.processing)">
+                            {{ passwordForm.processing ? '…' : 'Changer le mot de passe' }}
+                        </button>
+                        <span v-if="passwordForm.recentlySuccessful" :style="{ fontSize: '12px', color: tok.primary }">✓ Modifié</span>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Session -->
+            <div :style="{ background: tok.white, borderRadius: '20px', padding: '20px', boxShadow: '0 2px 16px rgba(42,53,51,0.06)' }">
+                <div :style="{ fontSize: '11px', fontWeight: 700, color: tok.muted, letterSpacing: '0.8px', textTransform: 'uppercase', marginBottom: '16px' }">Session</div>
+
+                <Link :href="route('logout')" method="post" as="button"
+                    :style="{ ...btnPrimary(tok, false), background: tok.bgAlt, color: tok.text, boxShadow: 'none', width: '100%', marginBottom: '10px', display: 'block', textAlign: 'center', textDecoration: 'none' }">
+                    Se déconnecter
+                </Link>
+
+                <button @click="openDelete"
+                    :style="{ width: '100%', padding: '13px', background: 'transparent', border: '1.5px solid #fb9999', borderRadius: '14px', color: '#c43', fontSize: '13px', fontWeight: 600, cursor: 'pointer' }">
+                    Supprimer mon compte
+                </button>
+            </div>
+
+        </div>
+
+        <!-- Modal suppression -->
+        <div v-if="deleteOpen" @click.self="deleteOpen = false"
+            :style="{ position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }">
+            <div :style="{ width: '100%', maxWidth: '440px', background: tok.white, borderRadius: '24px 24px 0 0', padding: '6px 20px 36px', boxShadow: '0 -8px 40px rgba(0,0,0,0.18)' }">
+                <div :style="{ width: '40px', height: '4px', borderRadius: '2px', background: tok.border, margin: '12px auto 20px' }" />
+                <div :style="{ fontFamily: font.title, fontSize: '18px', fontWeight: 600, color: tok.text, marginBottom: '8px' }">Supprimer mon compte</div>
+                <p :style="{ fontSize: '13px', color: tok.muted, marginBottom: '20px', lineHeight: 1.5 }">
+                    Cette action est irréversible. Toutes vos données (mesures, défis, badges) seront définitivement supprimées. Confirmez votre mot de passe pour continuer.
+                </p>
+                <input ref="deletePasswordRef" v-model="deleteForm.password" type="password" placeholder="Mot de passe"
+                    :style="{ ...inputStyle(tok), marginBottom: '8px' }" @keyup.enter="confirmDelete" />
+                <span v-if="deleteForm.errors.password" :style="{ fontSize: '11px', color: '#c43', display: 'block', marginBottom: '10px' }">{{ deleteForm.errors.password }}</span>
+                <div style="display:flex;gap:10px;margin-top:12px;">
+                    <button @click="deleteOpen = false"
+                        :style="{ flex: 1, padding: '13px', background: tok.bgAlt, border: 'none', borderRadius: '14px', fontSize: '13px', color: tok.text, fontWeight: 600, cursor: 'pointer' }">
+                        Annuler
+                    </button>
+                    <button @click="confirmDelete" :disabled="deleteForm.processing"
+                        :style="{ flex: 1, padding: '13px', background: '#c43', border: 'none', borderRadius: '14px', fontSize: '13px', color: '#fff', fontWeight: 600, cursor: 'pointer', opacity: deleteForm.processing ? 0.6 : 1 }">
+                        Supprimer
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </DiabetixLayout>
+</template>

app/resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -0,0 +1,108 @@
+<script setup>
+import DangerButton from '@/Components/DangerButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import Modal from '@/Components/Modal.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { useForm } from '@inertiajs/vue3';
+import { nextTick, ref } from 'vue';
+
+const confirmingUserDeletion = ref(false);
+const passwordInput = ref(null);
+
+const form = useForm({
+    password: '',
+});
+
+const confirmUserDeletion = () => {
+    confirmingUserDeletion.value = true;
+
+    nextTick(() => passwordInput.value.focus());
+};
+
+const deleteUser = () => {
+    form.delete(route('profile.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => closeModal(),
+        onError: () => passwordInput.value.focus(),
+        onFinish: () => form.reset(),
+    });
+};
+
+const closeModal = () => {
+    confirmingUserDeletion.value = false;
+
+    form.clearErrors();
+    form.reset();
+};
+</script>
+
+<template>
+    <section class="space-y-6">
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                Delete Account
+            </h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Once your account is deleted, all of its resources and data will
+                be permanently deleted. Before deleting your account, please
+                download any data or information that you wish to retain.
+            </p>
+        </header>
+
+        <DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
+
+        <Modal :show="confirmingUserDeletion" @close="closeModal">
+            <div class="p-6">
+                <h2
+                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
+                >
+                    Are you sure you want to delete your account?
+                </h2>
+
+                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                    Once your account is deleted, all of its resources and data
+                    will be permanently deleted. Please enter your password to
+                    confirm you would like to permanently delete your account.
+                </p>
+
+                <div class="mt-6">
+                    <InputLabel
+                        for="password"
+                        value="Password"
+                        class="sr-only"
+                    />
+
+                    <TextInput
+                        id="password"
+                        ref="passwordInput"
+                        v-model="form.password"
+                        type="password"
+                        class="mt-1 block w-3/4"
+                        placeholder="Password"
+                        @keyup.enter="deleteUser"
+                    />
+
+                    <InputError :message="form.errors.password" class="mt-2" />
+                </div>
+
+                <div class="mt-6 flex justify-end">
+                    <SecondaryButton @click="closeModal">
+                        Cancel
+                    </SecondaryButton>
+
+                    <DangerButton
+                        class="ms-3"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                        @click="deleteUser"
+                    >
+                        Delete Account
+                    </DangerButton>
+                </div>
+            </div>
+        </Modal>
+    </section>
+</template>

app/resources/js/Pages/Profile/Partials/DiabetixPreferencesForm.vue

@@ -0,0 +1,104 @@
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { Link, useForm, usePage } from '@inertiajs/vue3';
+
+const user = usePage().props.auth.user;
+
+const form = useForm({
+    first_name: user.first_name ?? '',
+    diabetes_type: user.diabetes_type ?? 'type2',
+    target_min: user.target_min ?? 70,
+    target_max: user.target_max ?? 180,
+    palette: user.palette ?? 'mint',
+});
+
+const palettes = [
+    { id: 'mint', label: 'Menthe', swatch: '#7bbfb5' },
+    { id: 'lilac', label: 'Lilas', swatch: '#9b8ec4' },
+    { id: 'peach', label: 'Pêche', swatch: '#d4826a' },
+];
+
+const types = [
+    { id: 'type1', label: 'Type 1' },
+    { id: 'type2', label: 'Type 2' },
+    { id: 'gestational', label: 'Gestationnel' },
+    { id: 'other', label: 'Autre' },
+];
+</script>
+
+<template>
+    <section>
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Préférences Diabetix</h2>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Personnalisez votre prénom, votre type de diabète, votre plage cible (mg/dL) et le thème de l'application.
+            </p>
+        </header>
+
+        <form @submit.prevent="form.patch(route('profile.diabetix'), { preserveScroll: true })" class="mt-6 space-y-6">
+            <div>
+                <InputLabel for="first_name" value="Prénom" />
+                <TextInput id="first_name" v-model="form.first_name" type="text" class="mt-1 block w-full" autocomplete="given-name" />
+                <InputError :message="form.errors.first_name" class="mt-2" />
+            </div>
+
+            <div>
+                <InputLabel value="Type de diabète" />
+                <div class="mt-2 flex flex-wrap gap-2">
+                    <button v-for="t in types" :key="t.id" type="button" @click="form.diabetes_type = t.id"
+                        :class="[
+                            'rounded-full border px-4 py-1.5 text-sm transition',
+                            form.diabetes_type === t.id
+                                ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200'
+                                : 'border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700',
+                        ]">{{ t.label }}</button>
+                </div>
+                <InputError :message="form.errors.diabetes_type" class="mt-2" />
+            </div>
+
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <InputLabel for="target_min" value="Cible min (mg/dL)" />
+                    <TextInput id="target_min" v-model.number="form.target_min" type="number" min="50" max="140" class="mt-1 block w-full" />
+                    <InputError :message="form.errors.target_min" class="mt-2" />
+                </div>
+                <div>
+                    <InputLabel for="target_max" value="Cible max (mg/dL)" />
+                    <TextInput id="target_max" v-model.number="form.target_max" type="number" min="120" max="300" class="mt-1 block w-full" />
+                    <InputError :message="form.errors.target_max" class="mt-2" />
+                </div>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-400">
+                Valeurs par défaut OMS / consensus international : 70–180 mg/dL.
+            </p>
+
+            <div>
+                <InputLabel value="Thème de couleur" />
+                <div class="mt-2 flex gap-3">
+                    <button v-for="p in palettes" :key="p.id" type="button" @click="form.palette = p.id"
+                        :class="[
+                            'flex items-center gap-2 rounded-full border px-4 py-2 text-sm transition',
+                            form.palette === p.id
+                                ? 'border-gray-900 dark:border-gray-100'
+                                : 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700',
+                        ]">
+                        <span class="block h-4 w-4 rounded-full" :style="{ background: p.swatch }" />
+                        <span>{{ p.label }}</span>
+                    </button>
+                </div>
+                <InputError :message="form.errors.palette" class="mt-2" />
+            </div>
+
+            <div class="flex items-center gap-4">
+                <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
+                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Préférences enregistrées.</p>
+                </Transition>
+                <Link :href="route('dashboard')" class="ml-auto text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100">← Retour à l'app</Link>
+            </div>
+        </form>
+    </section>
+</template>

app/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue

@@ -0,0 +1,122 @@
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const passwordInput = ref(null);
+const currentPasswordInput = ref(null);
+
+const form = useForm({
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+});
+
+const updatePassword = () => {
+    form.put(route('password.update'), {
+        preserveScroll: true,
+        onSuccess: () => form.reset(),
+        onError: () => {
+            if (form.errors.password) {
+                form.reset('password', 'password_confirmation');
+                passwordInput.value.focus();
+            }
+            if (form.errors.current_password) {
+                form.reset('current_password');
+                currentPasswordInput.value.focus();
+            }
+        },
+    });
+};
+</script>
+
+<template>
+    <section>
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                Update Password
+            </h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Ensure your account is using a long, random password to stay
+                secure.
+            </p>
+        </header>
+
+        <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
+            <div>
+                <InputLabel for="current_password" value="Current Password" />
+
+                <TextInput
+                    id="current_password"
+                    ref="currentPasswordInput"
+                    v-model="form.current_password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="current-password"
+                />
+
+                <InputError
+                    :message="form.errors.current_password"
+                    class="mt-2"
+                />
+            </div>
+
+            <div>
+                <InputLabel for="password" value="New Password" />
+
+                <TextInput
+                    id="password"
+                    ref="passwordInput"
+                    v-model="form.password"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+
+                <InputError :message="form.errors.password" class="mt-2" />
+            </div>
+
+            <div>
+                <InputLabel
+                    for="password_confirmation"
+                    value="Confirm Password"
+                />
+
+                <TextInput
+                    id="password_confirmation"
+                    v-model="form.password_confirmation"
+                    type="password"
+                    class="mt-1 block w-full"
+                    autocomplete="new-password"
+                />
+
+                <InputError
+                    :message="form.errors.password_confirmation"
+                    class="mt-2"
+                />
+            </div>
+
+            <div class="flex items-center gap-4">
+                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
+                    <p
+                        v-if="form.recentlySuccessful"
+                        class="text-sm text-gray-600 dark:text-gray-400"
+                    >
+                        Saved.
+                    </p>
+                </Transition>
+            </div>
+        </form>
+    </section>
+</template>

app/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -0,0 +1,112 @@
+<script setup>
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { Link, useForm, usePage } from '@inertiajs/vue3';
+
+defineProps({
+    mustVerifyEmail: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
+});
+
+const user = usePage().props.auth.user;
+
+const form = useForm({
+    name: user.name,
+    email: user.email,
+});
+</script>
+
+<template>
+    <section>
+        <header>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                Profile Information
+            </h2>
+
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                Update your account's profile information and email address.
+            </p>
+        </header>
+
+        <form
+            @submit.prevent="form.patch(route('profile.update'))"
+            class="mt-6 space-y-6"
+        >
+            <div>
+                <InputLabel for="name" value="Name" />
+
+                <TextInput
+                    id="name"
+                    type="text"
+                    class="mt-1 block w-full"
+                    v-model="form.name"
+                    required
+                    autofocus
+                    autocomplete="name"
+                />
+
+                <InputError class="mt-2" :message="form.errors.name" />
+            </div>
+
+            <div>
+                <InputLabel for="email" value="Email" />
+
+                <TextInput
+                    id="email"
+                    type="email"
+                    class="mt-1 block w-full"
+                    v-model="form.email"
+                    required
+                    autocomplete="username"
+                />
+
+                <InputError class="mt-2" :message="form.errors.email" />
+            </div>
+
+            <div v-if="mustVerifyEmail && user.email_verified_at === null">
+                <p class="mt-2 text-sm text-gray-800 dark:text-gray-200">
+                    Your email address is unverified.
+                    <Link
+                        :href="route('verification.send')"
+                        method="post"
+                        as="button"
+                        class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
+                    >
+                        Click here to re-send the verification email.
+                    </Link>
+                </p>
+
+                <div
+                    v-show="status === 'verification-link-sent'"
+                    class="mt-2 text-sm font-medium text-green-600 dark:text-green-400"
+                >
+                    A new verification link has been sent to your email address.
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+
+                <Transition
+                    enter-active-class="transition ease-in-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition ease-in-out"
+                    leave-to-class="opacity-0"
+                >
+                    <p
+                        v-if="form.recentlySuccessful"
+                        class="text-sm text-gray-600 dark:text-gray-400"
+                    >
+                        Saved.
+                    </p>
+                </Transition>
+            </div>
+        </form>
+    </section>
+</template>

app/resources/js/Pages/Welcome.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { Head, Link } from '@inertiajs/vue3';
+import { tokens, FONT } from '@/Components/Diabetix/palette.js';
+
+defineProps({
+    canLogin: Boolean,
+    canRegister: Boolean,
+});
+
+const tok = tokens('mint');
+</script>
+
+<template>
+    <Head title="Diabetix — Coach glycémique IA" />
+    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: FONT.body, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '24px' }">
+        <div :style="{ maxWidth: '440px', width: '100%', background: tok.bg, borderRadius: '32px', padding: '40px 28px', boxShadow: '0 12px 60px rgba(42,53,51,0.10)' }">
+            <div :style="{ width: '72px', height: '72px', borderRadius: '50%', background: tok.light, border: '3px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '36px', margin: '0 auto 20px' }">🤖</div>
+            <h1 :style="{ fontFamily: FONT.title, fontSize: '32px', fontWeight: 700, color: tok.text, textAlign: 'center', marginBottom: '8px' }">Diabetix</h1>
+            <p :style="{ textAlign: 'center', color: tok.muted, fontSize: '14px', marginBottom: '28px', lineHeight: 1.6 }">
+                Votre coach glycémique IA, pensé pour vous accompagner au quotidien dans la gestion de votre diabète.
+            </p>
+
+            <div style="display:flex;flex-direction:column;gap:10px;">
+                <Link v-if="canLogin" :href="route('login')"
+                    :style="{ display: 'block', textAlign: 'center', padding: '14px', background: tok.primary, color: '#fff', borderRadius: '16px', textDecoration: 'none', fontWeight: 600, fontSize: '15px' }">
+                    Se connecter
+                </Link>
+                <Link v-if="canRegister" :href="route('register')"
+                    :style="{ display: 'block', textAlign: 'center', padding: '14px', background: tok.white, color: tok.primary, border: '1.5px solid ' + tok.primary, borderRadius: '16px', textDecoration: 'none', fontWeight: 600, fontSize: '15px' }">
+                    Créer un compte
+                </Link>
+            </div>
+
+            <div :style="{ marginTop: '28px', fontSize: '11px', color: tok.muted, textAlign: 'center' }">
+                Suivi des glycémies · Défis · Coach IA · Statistiques
+            </div>
+        </div>
+    </div>
+</template>

app/resources/js/app.js

@@ -0,0 +1,27 @@
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/vue3';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createApp, h } from 'vue';
+import { ZiggyVue } from '../../vendor/tightenco/ziggy';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.vue`,
+            import.meta.glob('./Pages/**/*.vue'),
+        ),
+    setup({ el, App, props, plugin }) {
+        return createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(ZiggyVue)
+            .mount(el);
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});

app/resources/js/bootstrap.js

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

app/resources/views/app.blade.php

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title inertia>{{ config('app.name', 'Diabetix') }}</title>
+
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+        @routes
+        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
+        @inertiaHead
+    </head>
+    <body style="background:#eeece8;font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;margin:0;">
+        @inertia
+    </body>
+</html>

app/resources/views/vendor/mail/html/button.blade.php

@@ -0,0 +1,24 @@
+@props([
+    'url',
+    'color' => 'primary',
+    'align' => 'center',
+])
+<table class="action" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="{{ $align }}">
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="{{ $align }}">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener">{!! $slot !!}</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>

app/resources/views/vendor/mail/html/footer.blade.php

@@ -0,0 +1,12 @@
+<tr>
+<td>
+<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="content-cell" align="center" style="padding:24px 40px 32px;">
+    <p style="color:#7a9c97;font-size:12px;margin:0 0 4px;">© {{ date('Y') }} {{ config('app.name') }} · Tous droits réservés</p>
+    <p style="color:#7a9c97;font-size:12px;margin:0;">Cet e-mail a été envoyé depuis une adresse de notification automatique.</p>
+</td>
+</tr>
+</table>
+</td>
+</tr>

app/resources/views/vendor/mail/html/header.blade.php

@@ -0,0 +1,16 @@
+@props(['url'])
+<tr>
+<td>
+<table class="header" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td style="text-align:center;padding:32px 0 16px;">
+    <a href="{{ $url }}" style="text-decoration:none;">
+        <div style="display:inline-block;width:52px;height:52px;border-radius:50%;background:#d4ede8;border:2px solid #7bbfb5;text-align:center;line-height:50px;font-size:24px;margin-bottom:10px;">🩺</div>
+        <div style="font-size:20px;font-weight:700;color:#2a3533;letter-spacing:-0.3px;">{{ config('app.name') }}</div>
+        <div style="font-size:12px;color:#7a9c97;margin-top:2px;">Votre coach glycémique personnel</div>
+    </a>
+</td>
+</tr>
+</table>
+</td>
+</tr>

app/resources/views/vendor/mail/html/layout.blade.php

@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+<title>{{ config('app.name') }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="color-scheme" content="light">
+<meta name="supported-color-schemes" content="light">
+<style>
+@media only screen and (max-width: 600px) {
+.inner-body {
+width: 100% !important;
+}
+
+.footer {
+width: 100% !important;
+}
+}
+
+@media only screen and (max-width: 500px) {
+.button {
+width: 100% !important;
+}
+}
+</style>
+{!! $head ?? '' !!}
+</head>
+<body>
+
+<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="center">
+<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+{!! $header ?? '' !!}
+
+<!-- Email Body -->
+<tr>
+<td class="body" width="100%" cellpadding="0" cellspacing="0" style="border: hidden !important;">
+<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<!-- Body content -->
+<tr>
+<td class="content-cell">
+{!! Illuminate\Mail\Markdown::parse($slot) !!}
+
+{!! $subcopy ?? '' !!}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+
+{!! $footer ?? '' !!}
+</table>
+</td>
+</tr>
+</table>
+</body>
+</html>

app/resources/views/vendor/mail/html/message.blade.php

@@ -0,0 +1,27 @@
+<x-mail::layout>
+{{-- Header --}}
+<x-slot:header>
+<x-mail::header :url="config('app.url')">
+{{ config('app.name') }}
+</x-mail::header>
+</x-slot:header>
+
+{{-- Body --}}
+{!! $slot !!}
+
+{{-- Subcopy --}}
+@isset($subcopy)
+<x-slot:subcopy>
+<x-mail::subcopy>
+{!! $subcopy !!}
+</x-mail::subcopy>
+</x-slot:subcopy>
+@endisset
+
+{{-- Footer --}}
+<x-slot:footer>
+<x-mail::footer>
+© {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}
+</x-mail::footer>
+</x-slot:footer>
+</x-mail::layout>

app/resources/views/vendor/mail/html/panel.blade.php

@@ -0,0 +1,14 @@
+<table class="panel" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-content">
+<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-item">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+

app/resources/views/vendor/mail/html/subcopy.blade.php

@@ -0,0 +1,7 @@
+<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>

app/resources/views/vendor/mail/html/table.blade.php

@@ -0,0 +1,3 @@
+<div class="table">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</div>

app/resources/views/vendor/mail/html/themes/default.css

@@ -0,0 +1,272 @@
+/* Diabetix email theme — palette mint */
+
+body,
+body *:not(html):not(style):not(br):not(tr):not(code) {
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    position: relative;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+    background-color: #eeece8;
+    color: #2a3533;
+    height: 100%;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    width: 100% !important;
+}
+
+p, ul, ol, blockquote {
+    line-height: 1.5;
+    text-align: start;
+}
+
+a { color: #7bbfb5; }
+a img { border: none; }
+
+h1 {
+    color: #2a3533;
+    font-size: 22px;
+    font-weight: 700;
+    margin-top: 0;
+    text-align: start;
+}
+
+h2 {
+    color: #2a3533;
+    font-size: 17px;
+    font-weight: 600;
+    margin-top: 0;
+}
+
+h3 {
+    color: #2a3533;
+    font-size: 14px;
+    font-weight: 600;
+    margin-top: 0;
+}
+
+p {
+    font-size: 15px;
+    line-height: 1.6;
+    margin-top: 0;
+    color: #2a3533;
+}
+
+p.sub { font-size: 12px; color: #7a9c97; }
+
+img { max-width: 100%; }
+
+/* Layout */
+
+.wrapper {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #eeece8;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.content {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+/* Header */
+
+.header {
+    padding: 32px 0 20px;
+    text-align: center;
+}
+
+.header a {
+    color: #2a3533;
+    font-size: 20px;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+/* Body */
+
+.body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #eeece8;
+    border-bottom: 1px solid #eeece8;
+    border-top: 1px solid #eeece8;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.inner-body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    background-color: #ffffff;
+    border-color: #ddeae7;
+    border-radius: 20px;
+    border-width: 1px;
+    box-shadow: 0 4px 24px rgba(42, 53, 51, 0.08);
+    margin: 0 auto;
+    padding: 0;
+    width: 570px;
+}
+
+.inner-body a { word-break: break-all; }
+
+/* Subcopy */
+
+.subcopy {
+    border-top: 1px solid #ddeae7;
+    margin-top: 25px;
+    padding-top: 25px;
+}
+
+.subcopy p {
+    font-size: 13px;
+    color: #7a9c97;
+}
+
+/* Footer */
+
+.footer {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+    width: 570px;
+}
+
+.footer p {
+    color: #7a9c97;
+    font-size: 12px;
+    text-align: center;
+}
+
+.footer a {
+    color: #7a9c97;
+    text-decoration: underline;
+}
+
+/* Tables */
+
+.table table {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    width: 100%;
+}
+
+.table th {
+    border-bottom: 1px solid #ddeae7;
+    margin: 0;
+    padding-bottom: 8px;
+    color: #7a9c97;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+}
+
+.table td {
+    color: #2a3533;
+    font-size: 15px;
+    line-height: 18px;
+    margin: 0;
+    padding: 10px 0;
+    border-bottom: 1px solid #f0ede6;
+}
+
+.content-cell {
+    max-width: 100vw;
+    padding: 36px 40px;
+}
+
+/* Buttons */
+
+.action {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+    float: unset;
+}
+
+.button {
+    -webkit-text-size-adjust: none;
+    border-radius: 14px;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.button-blue,
+.button-primary {
+    background-color: #7bbfb5;
+    border-bottom: 10px solid #7bbfb5;
+    border-left: 22px solid #7bbfb5;
+    border-right: 22px solid #7bbfb5;
+    border-top: 10px solid #7bbfb5;
+}
+
+.button-green,
+.button-success {
+    background-color: #5ca89d;
+    border-bottom: 10px solid #5ca89d;
+    border-left: 22px solid #5ca89d;
+    border-right: 22px solid #5ca89d;
+    border-top: 10px solid #5ca89d;
+}
+
+.button-red,
+.button-error {
+    background-color: #d4826a;
+    border-bottom: 10px solid #d4826a;
+    border-left: 22px solid #d4826a;
+    border-right: 22px solid #d4826a;
+    border-top: 10px solid #d4826a;
+}
+
+/* Panels */
+
+.panel {
+    border-left: #7bbfb5 solid 4px;
+    margin: 21px 0;
+    border-radius: 0 8px 8px 0;
+}
+
+.panel-content {
+    background-color: #d4ede8;
+    color: #2a3533;
+    padding: 16px 20px;
+    border-radius: 0 8px 8px 0;
+}
+
+.panel-content p { color: #2a3533; }
+
+.panel-item { padding: 0; }
+
+.panel-item p:last-of-type {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+/* Utilities */
+.break-all { word-break: break-all; }

app/resources/views/vendor/mail/text/button.blade.php

@@ -0,0 +1 @@
+{{ $slot }}: {{ $url }}

app/resources/views/vendor/mail/text/footer.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

app/resources/views/vendor/mail/text/header.blade.php

@@ -0,0 +1 @@
+{{ $slot }}: {{ $url }}

app/resources/views/vendor/mail/text/layout.blade.php

@@ -0,0 +1,9 @@
+{!! strip_tags($header ?? '') !!}
+
+{!! strip_tags($slot) !!}
+@isset($subcopy)
+
+{!! strip_tags($subcopy) !!}
+@endisset
+
+{!! strip_tags($footer ?? '') !!}

app/resources/views/vendor/mail/text/message.blade.php

@@ -0,0 +1,27 @@
+<x-mail::layout>
+    {{-- Header --}}
+    <x-slot:header>
+        <x-mail::header :url="config('app.url')">
+            {{ config('app.name') }}
+        </x-mail::header>
+    </x-slot:header>
+
+    {{-- Body --}}
+    {{ $slot }}
+
+    {{-- Subcopy --}}
+    @isset($subcopy)
+        <x-slot:subcopy>
+            <x-mail::subcopy>
+                {{ $subcopy }}
+            </x-mail::subcopy>
+        </x-slot:subcopy>
+    @endisset
+
+    {{-- Footer --}}
+    <x-slot:footer>
+        <x-mail::footer>
+            © {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
+        </x-mail::footer>
+    </x-slot:footer>
+</x-mail::layout>

app/resources/views/vendor/mail/text/panel.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

app/resources/views/vendor/mail/text/subcopy.blade.php

@@ -0,0 +1 @@
+{{ $slot }}

app/resources/views/vendor/mail/text/table.blade.php

@@ -0,0 +1 @@
+{{ $slot }}