/* ================================================================
               VARIABLES GLOBALES
               Scopées sur #portfolio-home3 (et non :root) pour ne pas écraser
               les variables d'un autre shortcode sur la même page.
               ================================================================ */
            #portfolio-home3 {
                --font-me:    clamp(14px, 1.5vw, 28px);
                --font-title: clamp(14px, 1.5vw, 28px);
                --font-meta:  clamp(10px, 1vw, 20px);
                --font-brief: clamp(10px, 1vw, 20px);
                --font-tag:   clamp(9px, 1vw, 20px);

                --gap:        clamp(20px, 3vw, 56px);
                --pad-v:      clamp(20px, 3vh, 40px);
                --pad-h:      clamp(14px, 2vw, 24px);
                --tag-py:     8px;
                --tag-px:     12px;
                --arrow-offset: clamp(16px, 2.5vw, 32px);

                /* Hauteur commune de l'image ET de la colonne texte (desktop).
                   C'est LA variable qui pilote l'alignement haut/bas. */
                --slider-h:   86%;

                --accent: #008f72;

                --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
                --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
                --dur-fast: 240ms;
                --dur-med:  600ms;
                --dur-slow: 900ms;
            }

            /* =========================  BASE (DESKTOP)  ========================= */
            #portfolio-home3 {
                position: relative;
                height: 80vh;
                height: 80dvh;
                overflow: hidden;
                box-sizing: border-box;
            }
            #portfolio-home3 * { box-sizing: border-box; }

            /* ---------- LAYOUT : grille 2 colonnes 55/45 ----------
               grid-template-rows: 100% -> la ligne occupe toute la hauteur,
               ce qui rend les hauteurs en % des enfants fiables.
               align-items: center -> les deux colonnes (hauteur --slider-h)
               sont centrées verticalement => l'image est centrée dans l'écran. */
            #portfolio-home3 .ph-layout {
                position: relative;
                z-index: 1;
                width: 85%;
                max-width: 2400px;
                margin: 0 auto;
                padding: var(--pad-v) var(--pad-h);
                height: 100%;
                display: grid;
                grid-template-columns: 55% 45%;
                grid-template-rows: 100%;
                gap: var(--gap);
                align-items: center;
            }

            /* ---------- COLONNE IMAGE ---------- */
            /* Hauteur = --slider-h, centrée par le grid. position:relative
               sert d'ancre au compteur positionné en absolu dessous. */
            #portfolio-home3 .ph-left {
                position: relative;
                height: var(--slider-h);
                padding: 0;
                order: 1;
            }

            #portfolio-home3 .ph-imageWrap {
                position: relative;
                width: 100%;
                height: 100%;              /* remplit .ph-left */
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                cursor: none;              /* remplacé par .ph-cursor sur desktop */
                background: #1a1a1a;
            }

            /* Deux images superposées plein cadre (cross-fade) */
            #portfolio-home3 .ph-image {
                position: absolute;
                inset: 0;
                object-fit: cover;
                object-position: center;
                width: 100%;
                height: 100%;
                display: block;
                will-change: opacity, transform;
            }
            #portfolio-home3 .ph-image-current {
                opacity: 1;
                transform: scale(1.02);
                z-index: 2;
                transition: opacity 200ms ease, transform var(--dur-slow) var(--ease-out);
            }
            #portfolio-home3 .ph-image-next {
                opacity: 1;
                transform: scale(1.02);
                z-index: 1;
            }
            #portfolio-home3.is-morphing .ph-image-current { opacity: 0; }
            #portfolio-home3 .ph-imageWrap:hover .ph-image-current { transform: scale(1.04); }

            /* ---------- BARRE DE PROGRESSION AUTOPLAY ---------- */
            #portfolio-home3 .ph-progress {
                position: absolute;
                bottom: 0; left: 0; right: 0;
                height: 2px;
                background: rgba(255,255,255,0.2);
                z-index: 6;
                overflow: hidden;
            }
            #portfolio-home3 .ph-progress-bar {
                display: block;
                width: 0%;
                height: 100%;
                background: rgba(255,255,255,0.95);
                transition: background-color 0.3s ease;
            }
            #portfolio-home3.autoplay-active .ph-progress-bar {
                animation: ph3-progressFill 5s linear forwards;
            }
            #portfolio-home3 .ph-imageWrap:hover .ph-progress-bar {
                animation-play-state: paused;
                opacity: 0.5;
            }
            @keyframes ph3-progressFill {
                from { width: 0%; }
                to   { width: 100%; }
            }

            /* ---------- CURSEUR PERSONNALISÉ (desktop) ---------- */
            #portfolio-home3 .ph-cursor {
                position: fixed;
                top: 0; left: 0;
                width: 56px; height: 56px;
                border-radius: 50%;
                background: rgba(255,255,255,0.95);
                pointer-events: none;
                z-index: 100;
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.4);
                transition: opacity 200ms ease,
                            transform 200ms var(--ease-out),
                            background-color 200ms ease,
                            color 200ms ease,
                            width 250ms var(--ease-out),
                            height 250ms var(--ease-out);
                will-change: transform, opacity;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            #portfolio-home3 .ph-cursor-arrow {
                position: absolute;
                width: 24px; height: 24px;
                color: currentColor;
                opacity: 0;
                transform: rotate(0deg);
                transition: opacity 200ms ease, transform 300ms var(--ease-out);
            }
            #portfolio-home3 .ph-cursor-text {
                position: absolute;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.12em;
                color: currentColor;
                opacity: 0;
                transform: scale(0.8);
                transition: opacity 200ms ease, transform 250ms var(--ease-out);
                line-height: 1;
                white-space: nowrap;
            }
            #portfolio-home3 .ph-cursor.is-visible {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            #portfolio-home3 .ph-cursor.is-view { width: 64px; height: 64px; }

            /* Contraste auto selon la luminosité de l'image (classes posées en JS) */
            #portfolio-home3 .ph-cursor.on-dark-img {
                background-color: rgba(255, 255, 255, 0.95) !important;
                color: #000 !important;
            }
            #portfolio-home3 .ph-cursor.on-dark-img .ph-cursor-text,
            #portfolio-home3 .ph-cursor.on-dark-img .ph-cursor-arrow { color: #000 !important; stroke: #000 !important; }
            #portfolio-home3 .ph-cursor.on-light-img {
                background-color: rgba(0, 0, 0, 0.9) !important;
                color: #fff !important;
            }
            #portfolio-home3 .ph-cursor.on-light-img .ph-cursor-text,
            #portfolio-home3 .ph-cursor.on-light-img .ph-cursor-arrow { color: #fff !important; stroke: #fff !important; }

            /* États du curseur selon la zone survolée */
            #portfolio-home3 .ph-cursor.is-view .ph-cursor-text { opacity: 1; transform: scale(1); }
            #portfolio-home3 .ph-cursor.is-view .ph-cursor-arrow { opacity: 0; }
            #portfolio-home3 .ph-cursor.is-center { width: 20px; height: 20px; }
            #portfolio-home3 .ph-cursor.is-center .ph-cursor-arrow,
            #portfolio-home3 .ph-cursor.is-center .ph-cursor-text { opacity: 0; }
            #portfolio-home3 .ph-cursor.is-next .ph-cursor-arrow { opacity: 1; transform: rotate(0deg); }
            #portfolio-home3 .ph-cursor.is-next .ph-cursor-text { opacity: 0; }
            #portfolio-home3 .ph-cursor.is-prev .ph-cursor-arrow { opacity: 1; transform: rotate(180deg); }
            #portfolio-home3 .ph-cursor.is-prev .ph-cursor-text { opacity: 0; }
            #portfolio-home3 .ph-cursor.is-dragging { transform: translate(-50%, -50%) scale(0.85); }

            /* ---------- COMPTEUR 01 / 14 ---------- */
            /* En ABSOLU sous l'image : ne participe pas à la hauteur de .ph-left,
               donc ne casse pas l'alignement image/texte. */
            #portfolio-home3 .ph-pagination {
                position: absolute;
                top: calc(100% + 12px);
                left: 2px;
                display: flex;
                align-items: center;
            }
            #portfolio-home3 .ph-counter {
                display: flex;
                align-items: baseline;
                gap: 6px;
                font-size: clamp(11px, 0.9vw, 14px);
                font-weight: 500;
                color: rgba(0,0,0,0.85);
                font-variant-numeric: tabular-nums;
                letter-spacing: 0.04em;
            }
            #portfolio-home3 .ph-counter-current { transition: opacity 200ms ease; }
            #portfolio-home3 .ph-counter-sep   { opacity: 0.35; font-weight: 400; }
            #portfolio-home3 .ph-counter-total { opacity: 0.5;  font-weight: 400; }

            /* ---------- FLÈCHES (TACTILE UNIQUEMENT) ---------- */
            #portfolio-home3 .ph-arrow {
                position: absolute;
                top: 50%;
                background: transparent;
                border: 1px solid transparent;
                padding: 12px;
                width: 48px; height: 48px;
                line-height: 0;
                color: rgba(255,255,255,0.95);
                cursor: pointer;
                opacity: 0.55;
                transition: opacity 300ms var(--ease-out),
                            transform 350ms var(--ease-out);
                user-select: none;
                z-index: 10;
                display: none;             /* masquées sur desktop */
                align-items: center;
                justify-content: center;
            }
            @media (pointer: coarse) {
                #portfolio-home3 .ph-arrow { display: flex; }
            }
            #portfolio-home3 .ph-arrow svg { width: 22px; height: 22px; transition: transform 350ms var(--ease-out); }
            /* Caractère simple ‹ › : masqué partout sauf sur téléphone (voir media queries) */
            #portfolio-home3 .ph-arrow-simple { display: none; line-height: 1; }
            #portfolio-home3 .ph-prev { left: var(--arrow-offset); transform: translate(0, -50%); }
            #portfolio-home3 .ph-next { right: var(--arrow-offset); transform: translate(0, -50%); }
            #portfolio-home3 .ph-imageWrap:hover .ph-arrow { opacity: 0.95; }
            #portfolio-home3 .ph-arrow:hover { opacity: 1 !important; }
            #portfolio-home3 .ph-prev:hover svg { transform: translateX(-4px); }
            #portfolio-home3 .ph-next:hover svg { transform: translateX(4px); }

            /* ---------- COLONNE TEXTE ---------- */
            /* Même hauteur que l'image (--slider-h), centrée par le grid.
               Flex column : .ph-me colle en HAUT, .ph-project est poussé en BAS. */
            #portfolio-home3 .ph-right {
                position: relative;
                display: flex;
                flex-direction: column;
                height: var(--slider-h);
                min-height: 0;
                padding-left: clamp(4px, 0.8vw, 10px);
                order: 2;
                font-weight: 500;
                z-index: 5;
            }

            /* Pitch d'intro : margin-top 0 -> aligné sur le HAUT de l'image */
            #portfolio-home3 .ph-me {
                position: relative;
                flex: 0 0 auto;
                margin-top: 0;
                margin-right: 5vw;
                font-size: var(--font-me);
                line-height: 1.3;
                font-weight: 500;
                color: rgba(0,0,0,0.92);
                max-width: 680px;
                transition: opacity 0.5s ease;
            }
            /* Estompé après 10s (classe posée en JS), retour à 100% au survol */
            #portfolio-home3 .ph-me.opacity-reduced { opacity: 0.2; }
            #portfolio-home3 .ph-me.opacity-reduced:hover { opacity: 1; }

            /* Lien Contact */
            #portfolio-home3 .ph-contact-wrap {
                margin-top: clamp(12px, 1.6vh, 18px);
                margin-right: 5vw;
                transition: opacity 0.5s ease;
            }
            #portfolio-home3 .ph-me.opacity-reduced + .ph-contact-wrap { opacity: 0.2; }
            #portfolio-home3 .ph-me.opacity-reduced + .ph-contact-wrap:hover { opacity: 1; }

            #portfolio-home3 .ph-contact {
                position: relative;
                display: inline-block;
                font-size: var(--font-meta);
                font-weight: 500;
                color: rgba(0,0,0,0.85);
                text-decoration: none;
                padding-right: 1.4em;
                cursor: pointer;
                transition: color 250ms ease;
            }
            #portfolio-home3 .ph-contact:hover { color: var(--accent); }
            #portfolio-home3 .ph-contact::before {
                content: "→";
                position: absolute;
                right: 0; top: 50%;
                transform: translateY(-50%) translateX(0);
                opacity: 0.55;
                font-weight: 400;
                transition: opacity 300ms ease, transform 300ms var(--ease-in-out);
            }
            #portfolio-home3 .ph-contact:hover::before {
                opacity: 1;
                transform: translateY(-50%) translateX(4px);
            }

            /* ---------- RÉCOMPENSE (calque sur l'image, haut-gauche) ---------- */
            /* En absolu dans .ph-imageWrap. z-index entre l'image (2) et les flèches
               tactiles (10). Taille bornée, proportionnelle à la largeur de l'image. */
            #portfolio-home3 .ph-recompense {
                position: absolute;
                top: clamp(8px, 1.4vw, 18px);
                left: clamp(8px, 1.4vw, 18px);
                z-index: 5;
                height: auto;
                width: clamp(48px, 9vw, 96px);  /* largeur fluide, hauteur libre */
                max-height: 28%;                /* garde-fou : jamais plus du quart de l'image */
                object-fit: contain;
                pointer-events: none;           /* n'intercepte ni clic ni curseur custom */
                filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); /* lisible sur fond clair comme foncé */
                opacity: 1;
                transition: opacity 300ms var(--ease-out);
            }
            /* Fondu pendant la transition de slide (synchronisé avec le texte) */
            #portfolio-home3.is-text-out .ph-recompense { opacity: 0; }

            /* ---------- BLOC PROJET ---------- */
            /* margin-top:auto + margin-bottom:0 -> aligné sur le BAS de l'image */
            #portfolio-home3 .ph-project {
                margin-top: auto;
                margin-bottom: 0;
                flex: 0 0 auto;
                min-height: 0;
                margin-right: 5vw;
            }

            #portfolio-home3 .ph-title {
                margin: 0 0 clamp(8px, 1.2vh, 12px);
                font-size: var(--font-title);
                line-height: 1.1;
                font-weight: 550;
                overflow: hidden;
                position: relative;
            }
            #portfolio-home3 .ph-title-inner { display: inline-block; will-change: transform; }

            #portfolio-home3 .ph-title-link {
                position: relative;
                display: inline-block;
                color: inherit;
                text-decoration: none;
                padding-right: 1.4em;
                cursor: pointer;
                z-index: 2;
                transition: color 250ms ease;
            }
            #portfolio-home3 .ph-title-link:hover { color: var(--accent); }
            #portfolio-home3 .ph-title-link::before {
                content: "→";
                position: absolute;
                right: 0; top: 50%;
                transform: translateY(-50%) translateX(0);
                opacity: 0.55;
                font-weight: 400;
                transition: opacity 300ms ease, transform 300ms var(--ease-in-out);
            }
            #portfolio-home3 .ph-title-link:hover::before {
                opacity: 1;
                transform: translateY(-50%) translateX(4px);
            }

            #portfolio-home3 .ph-meta {
                font-size: var(--font-meta);
                color: rgba(0,0,0,0.78);
                margin-bottom: clamp(10px, 1.4vh, 14px);
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }
            #portfolio-home3 .ph-sep { opacity: 0.4; font-weight: 300; }

            /* ---------- LOGO CLIENT DANS LA MÉTA (PC + tablette) ---------- */
            /* Bascule logo / texte pilotée par la classe .ph-has-logo, posée en JS
               sur .ph-meta quand le projet courant a un logo_client.
               Hauteur calée sur la taille de police méta -> reste aligné au tiret. */
            #portfolio-home3 .ph-meta-logo-link {
                display: none;             /* caché par défaut, révélé si .ph-has-logo */
                align-items: center;
                line-height: 0;            /* pas d'espace fantôme sous l'image */
                transition: opacity 250ms ease, transform 300ms var(--ease-out);
            }
            #portfolio-home3 .ph-meta-logo {
                display: block;
                height: clamp(20px, 2vw, 34px); /* ~1.7x la hauteur du texte méta */
                width: auto;
                max-width: 180px;
                object-fit: contain;
            }
            /* Survol actif uniquement si le lien est cliquable (url_client renseigné) */
            #portfolio-home3 .ph-meta-logo-link[href] { cursor: pointer; }
            #portfolio-home3 .ph-meta-logo-link[href]:hover { opacity: 0.7; transform: translateY(-1px); }

            /* Quand un logo est dispo : on affiche le logo et on masque le nom texte */
            #portfolio-home3 .ph-meta.ph-has-logo .ph-meta-logo-link { display: inline-flex; }
            #portfolio-home3 .ph-meta.ph-has-logo .ph-client { display: none; }

            /* Tags pilule + fond vert qui monte au survol */
            #portfolio-home3 .ph-tags {
                display: flex;
                flex-wrap: wrap;
                gap: clamp(8px, 1vh, 12px);
                margin-bottom: clamp(10px, 1.4vh, 14px);
            }
            #portfolio-home3 .ph-tag {
                background: transparent;
                color: rgba(0,0,0,0.85);
                border: 1px solid rgba(0,0,0,0.35);
                border-radius: 999px;
                padding: var(--tag-py) var(--tag-px);
                font-size: var(--font-tag);
                line-height: 1;
                white-space: nowrap;
                text-decoration: none;
                position: relative;
                overflow: hidden;
                transition: color 300ms var(--ease-out),
                            border-color 300ms var(--ease-out),
                            transform 300ms var(--ease-out);
                isolation: isolate;
            }
            #portfolio-home3 .ph-tag::before {
                content: "";
                position: absolute;
                inset: 0;
                background: var(--accent);
                transform: scaleY(0);
                transform-origin: bottom;
                transition: transform 350ms var(--ease-out);
                z-index: -1;
            }
            #portfolio-home3 .ph-tag:hover {
                color: #fff;
                border-color: var(--accent);
                transform: translateY(-2px);
            }
            #portfolio-home3 .ph-tag:hover::before {
                transform: scaleY(1);
                transform-origin: top;
            }
            #portfolio-home3 .ph-tag-inner { position: relative; z-index: 1; }

            #portfolio-home3 .ph-brief-text {
                font-size: var(--font-brief);
                line-height: 1.6;
                color: rgba(0,0,0,0.78);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
            }

            /* ---------- ANIMATIONS DE TEXTE (cascade entrée/sortie) ---------- */
            /* NOTE : la classe is-text-out est posée sur la RACINE (#portfolio-home3),
               le sélecteur est donc accolé (#portfolio-home3.is-text-out) et non
               descendant. C'était un bug silencieux de portfolio_home2 : l'animation
               de sortie ne se déclenchait jamais. */
            #portfolio-home3.is-text-out .ph-title-inner,
            #portfolio-home3.is-text-out .ph-meta,
            #portfolio-home3.is-text-out .ph-tags,
            #portfolio-home3.is-text-out .ph-brief-text {
                opacity: 0;
                transform: translateY(12px);
            }
            #portfolio-home3 .ph-title-inner,
            #portfolio-home3 .ph-meta,
            #portfolio-home3 .ph-tags,
            #portfolio-home3 .ph-brief-text {
                opacity: 1;
                transform: translateY(0);
                transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
            }
            #portfolio-home3 .ph-meta       { transition-delay: 60ms; }
            #portfolio-home3 .ph-tags       { transition-delay: 120ms; }
            #portfolio-home3 .ph-brief-text { transition-delay: 180ms; }

            /* ==========================================================
               RESPONSIVE
               - Tablette : on CONSERVE barre + compteur + contact
               - Téléphone : on les MASQUE pour libérer la hauteur
               ========================================================== */

            /* ----- TABLETTE PORTRAIT (≤1025px, tactile, vertical) ----- */
            @media (max-width: 1025px) and (pointer: coarse) and (orientation: portrait) {
                #portfolio-home3 {
                    --gap: clamp(20px, 4vh, 30px);
                    --pad-v: clamp(20px, 4vh, 30px);
                    --pad-h: 14px;
                    --font-me: clamp(20px, 6vw, 30px);
                    --font-title: clamp(20px, 6vw, 30px);
                    --font-meta: clamp(12px, 4vw, 24px);
                    --font-brief: clamp(12px, 4vw, 24px);
                    --font-tag: clamp(10px, 4vw, 20px);
                    --arrow-offset: clamp(12px, 2.5vw, 18px);
                }
                #portfolio-home3 { height: 80vh; height: 80dvh; }

                #portfolio-home3 .ph-imageWrap { cursor: default; }
                #portfolio-home3 .ph-cursor { display: none; }

                /* Empilement vertical : me / contact / image / projet.
                   display:contents fait remonter les enfants de .ph-right
                   au niveau du flex pour pouvoir les ordonner librement. */
                #portfolio-home3 .ph-layout {
                    width: 90%;
                    padding: var(--pad-v) var(--pad-h);
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    gap: var(--gap);
                }
                #portfolio-home3 .ph-right { display: contents; }
                #portfolio-home3 .ph-me           { order: 1; margin: 0; line-height: 1.2; flex: 0 0 auto; }
                #portfolio-home3 .ph-contact-wrap { order: 2; margin: 0; flex: 0 0 auto; }
                #portfolio-home3 .ph-left         { order: 3; flex: 1 1 auto; width: 100%; height: auto; min-height: 0;
                                                    display: flex; flex-direction: column; justify-content: center; }
                #portfolio-home3 .ph-project      { order: 4; margin: 0; flex: 0 0 auto; }

                /* L'image reprend un ratio 3/2 basé sur la largeur */
                #portfolio-home3 .ph-imageWrap {
                    aspect-ratio: 3 / 2;
                    width: 100%;
                    height: auto;
                    max-height: 100%;
                    flex: 0 1 auto;
                }
                /* Le compteur revient dans le flux, juste sous l'image */
                #portfolio-home3 .ph-pagination {
                    position: static;
                    margin-top: 10px;
                }
                #portfolio-home3 .ph-arrow { opacity: 0.85; }
            }

            /* ----- TABLETTE PAYSAGE (tactile, horizontal) ----- */
            /* 2 colonnes comme sur desktop, alignement haut/bas conservé */
            @media (pointer: coarse) and (orientation: landscape) {
                #portfolio-home3 {
                    --gap: clamp(16px, 3vw, 32px);
                    --pad-v: clamp(12px, 3vh, 24px);
                    --pad-h: clamp(12px, 3vw, 20px);
                    --font-me: clamp(18px, 2.5vh, 24px);
                    --font-title: clamp(18px, 2.5vh, 24px);
                    --font-meta: clamp(14px, 2vh, 20px);
                    --font-brief: clamp(14px, 2vh, 18px);
                    --font-tag: clamp(12px, 2vh, 18px);
                    --arrow-offset: clamp(10px, 2vw, 18px);
                    --slider-h: 82%;       /* un peu plus court : place pour le compteur */
                }
                #portfolio-home3 .ph-imageWrap { cursor: default; }
                #portfolio-home3 .ph-cursor { display: none; }
                #portfolio-home3 .ph-layout {
                    width: 90%;
                    display: grid;
                    grid-template-columns: 55% 45%;
                    grid-template-rows: 100%;
                    gap: var(--gap);
                    align-items: center;
                    height: 100%;
                }
                #portfolio-home3 .ph-arrow { opacity: 0.85; }
            }

            /* ----- TÉLÉPHONE PORTRAIT (≤768px, tactile, vertical) ----- */
            /* Version ALLÉGÉE : barre, compteur et contact masqués
               -> il reste me / image 3:2 / projet, et l'image a la place de respirer */
            @media (max-width: 768px) and (pointer: coarse) and (orientation: portrait) {
                #portfolio-home3 {
                    --gap: clamp(12px, 1.5vh, 20px);
                    --pad-v: clamp(12px, 2vh, 18px);
                    --pad-h: 10px;
                    --font-me: clamp(14px, 5vw, 20px);
                    --font-title: clamp(16px, 6vw, 24px);
                    --font-meta: clamp(10px, 4vw, 20px);
                    --font-brief: clamp(10px, 4vw, 20px);
                    --font-tag: clamp(8px, 3vw, 18px);
                    --arrow-offset: clamp(8px, 3vw, 18px);
                }

                /* === MASQUAGE des options non essentielles sur téléphone === */
                /* La récompense (calque image) reste affichée : demandée sur tous supports */
                #portfolio-home3 .ph-cursor,
                #portfolio-home3 .ph-progress,
                #portfolio-home3 .ph-pagination,
                #portfolio-home3 .ph-contact-wrap { display: none; }

                /* Sur téléphone : on revient au NOM TEXTE, on masque le logo méta */
                #portfolio-home3 .ph-meta .ph-meta-logo-link { display: none !important; }
                #portfolio-home3 .ph-meta .ph-client { display: inline !important; }

                /* === Flèches SIMPLES ‹ › (style portfolio_home) === */
                #portfolio-home3 .ph-arrow {
                    background: none;
                    border: none;
                    padding: 0;
                    width: auto;
                    height: auto;
                    font-size: clamp(24px, 6vw, 30px);
                    opacity: 0.8;
                }
                #portfolio-home3 .ph-arrow svg { display: none; }
                #portfolio-home3 .ph-arrow-simple { display: block; }

                #portfolio-home3 .ph-imageWrap { cursor: default; }

                #portfolio-home3 .ph-layout {
                    width: 90%;
                    padding: var(--pad-v) var(--pad-h);
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    gap: var(--gap);
                }
                #portfolio-home3 .ph-right { display: contents; }
                #portfolio-home3 .ph-me      { order: 1; margin: 0; line-height: 1.15; flex: 0 0 auto; }
                #portfolio-home3 .ph-left    { order: 2; flex: 1 1 auto; width: 100%; height: auto; min-height: 0;
                                               display: flex; flex-direction: column; justify-content: center; }
                #portfolio-home3 .ph-project { order: 3; margin: 0 0 12px; flex: 0 0 auto; }

                /* L'image s'affiche en 3/2 plein largeur */
                #portfolio-home3 .ph-imageWrap {
                    aspect-ratio: 3 / 2;
                    width: 100%;
                    height: auto;
                    max-height: 100%;
                    flex: 0 1 auto;
                }
                #portfolio-home3 .ph-brief-text { -webkit-line-clamp: 3; }
            }

            /* ----- TÉLÉPHONE PAYSAGE (≤1023px, tactile, horizontal) ----- */
            /* Hauteur très limitée : mêmes masquages que portrait,
               2 colonnes 50/50, image 16/9 */
            @media (max-width: 1023px) and (pointer: coarse) and (orientation: landscape) {
                #portfolio-home3 {
                    --gap: clamp(12px, 1.5vh, 20px);
                    --pad-v: clamp(12px, 2vh, 18px);
                    --pad-h: 10px;
                    --font-me: clamp(8px, 2vw, 16px);
                    --font-title: clamp(8px, 2vw, 16px);
                    --font-meta: clamp(6px, 1vw, 14px);
                    --font-brief: clamp(6px, 1vw, 12px);
                    --font-tag: clamp(6px, 1vw, 12px);
                    --arrow-offset: clamp(8px, 3vw, 18px);
                    --slider-h: 90%;
                }

                /* === MASQUAGE identique au portrait (récompense conservée) === */
                #portfolio-home3 .ph-cursor,
                #portfolio-home3 .ph-progress,
                #portfolio-home3 .ph-pagination,
                #portfolio-home3 .ph-contact-wrap { display: none; }

                /* Sur téléphone : nom texte plutôt que logo */
                #portfolio-home3 .ph-meta .ph-meta-logo-link { display: none !important; }
                #portfolio-home3 .ph-meta .ph-client { display: inline !important; }

                /* === Flèches SIMPLES ‹ › (style portfolio_home) === */
                #portfolio-home3 .ph-arrow {
                    background: none;
                    border: none;
                    padding: 0;
                    width: auto;
                    height: auto;
                    font-size: clamp(24px, 6vw, 30px);
                    opacity: 0.8;
                }
                #portfolio-home3 .ph-arrow svg { display: none; }
                #portfolio-home3 .ph-arrow-simple { display: block; }

                #portfolio-home3 .ph-imageWrap { cursor: default; }

                #portfolio-home3 .ph-layout {
                    width: 90%;
                    display: grid;
                    grid-template-columns: 50% 50%;
                    grid-template-rows: 100%;
                    gap: var(--gap);
                    align-items: center;
                    height: 100%;
                }
            }

            /* ----- ACCESSIBILITÉ : "réduire les animations" ----- */
            @media (prefers-reduced-motion: reduce) {
                #portfolio-home3 *,
                #portfolio-home3 *::before,
                #portfolio-home3 *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }