/* ============================================================================
   PATCH IMMERSIF — surcouche. Ne touche à aucune structure, à aucune photo.
   Charte respectée : marine, doré, ivoire. Aucune autre teinte introduite.
   ========================================================================= */
:root{
  --or:#C59A3F; --or-clair:#D9B96C; --or-profond:#A87F2C; --or-creme:#F3E8CF;
  --nuit:#12233C; --marine:#1B355A; --marine-clair:#2C4A79; --brume:#E4EAF3;
  --ivoire:#FAF7F2; --ambre:#E8833A;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 1. Barre de progression dorée ---------- */
.px-progres{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--or-profond),var(--or-clair) 45%,var(--ambre));
  box-shadow:0 0 14px rgba(197,154,63,.65)}

/* ---------- 2. Curseur sur-mesure ---------- */
.px-curseur,.px-halo{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  border-radius:50%;mix-blend-mode:normal;will-change:transform}
.px-curseur{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--or);
  box-shadow:0 0 10px rgba(197,154,63,.9)}
.px-halo{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(197,154,63,.55);
  transition:width .28s var(--spring),height .28s var(--spring),margin .28s var(--spring),
             border-color .28s var(--ease),background .28s var(--ease)}
.px-halo.actif{width:64px;height:64px;margin:-32px 0 0 -32px;
  border-color:var(--or-clair);background:rgba(197,154,63,.10)}
@media(hover:none),(pointer:coarse){.px-curseur,.px-halo{display:none}}

/* ---------- 3. Révélation au défilement ---------- */
/* L'etat cache est conditionne a « html.px-actif », pose par patch.js JUSTE
   avant d'observer. Si le script pose les attributs puis echoue — erreur,
   coupure reseau, extension — le contenu reste VISIBLE au lieu de rester a
   opacite nulle. Constate le 21/08/2026 : axe signalait du texte a contraste
   nul, c'etait du texte en attente de revelation. */
/* PAS D'OPACITE NULLE. Un texte a opacite zero est un texte illisible : axe le
   signale a juste titre, et surtout un visiteur qui arrive par une recherche
   dans la page, un agrandisseur d'ecran ou un lecteur d'ecran atterrit sur du
   vide. On garde le GLISSEMENT — l'intention visuelle est preservee — on retire
   le fondu. Constate le 21/08/2026 : six pages en violation de contraste, et
   toutes portaient des elements simplement pas encore reveles. */
/* Glissement court : au-dela d'une demi-seconde, un bouton qui arrive a l'ecran
   est une cible mouvante et le clic d'un visiteur presse se perd. Constate le
   24/09/2026 par l'audit navigateur (trois clics perdus sur des appels a
   l'action de l'accueil). L'intention visuelle est conservee, la duree divisee. */
html.px-actif [data-px-rev]{transform:translate3d(0,34px,0) scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease);will-change:transform,opacity}
html.px-actif [data-px-rev].vu{transform:none}
/* Le focus clavier peut atteindre un element pas encore revele : il serait
   alors invisible pour qui navigue au clavier en zoomant. On le montre. */
html.px-actif [data-px-rev]:focus-within{transform:none!important;transition:none!important}
html.px-actif [data-px-rev="g"]{transform:translate3d(-40px,0,0)}
html.px-actif [data-px-rev="d"]{transform:translate3d(40px,0,0)}

/* ---------- 4. Titres : montée lettre par mot ---------- */
html.px-actif .px-mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
html.px-actif .px-mot > span{display:inline-block;transform:translateY(110%) rotate(4deg);opacity:0;
  transition:transform 1s var(--ease),opacity .8s var(--ease)}
html.px-actif .vu .px-mot > span,html.px-actif .px-mot.vu > span{transform:none;opacity:1}

/* ---------- 5. Cartes : profondeur 3D + reflet spéculaire ---------- */
.px-tilt{transform-style:preserve-3d;will-change:transform;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease)}
.px-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:var(--lum,0);transition:opacity .35s var(--ease);z-index:3;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.28),rgba(243,232,207,.10) 38%,transparent 62%)}
.px-tilt::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:var(--lum,0);transition:opacity .35s var(--ease);z-index:2;padding:1.5px;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),
    var(--or-clair),rgba(197,154,63,.25) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.px-tilt:hover{box-shadow:0 30px 70px -28px rgba(18,35,60,.55),0 0 0 1px rgba(197,154,63,.28)}
.px-tilt > *{transform:translateZ(28px)}
.px-tilt img{transform:none}

/* ---------- 6. Photos : zoom lent + voile doré ---------- */
[data-img-id]{overflow:hidden}
[data-img-id] img{transition:transform 1.4s var(--ease),filter 1s var(--ease);will-change:transform}
.px-tilt:hover [data-img-id] img,a:hover > [data-img-id] img{transform:scale(1.07)}
[data-img-id]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .8s var(--ease);
  background:linear-gradient(160deg,rgba(197,154,63,.22),transparent 55%)}
.px-tilt:hover [data-img-id]::after{opacity:1}

/* ---------- 7. Boutons : aimant, éclat, halo ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-130%) skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .85s var(--ease)}
.btn:hover::before{transform:translateX(130%) skewX(-22deg)}
.b1{box-shadow:0 10px 30px -10px rgba(232,131,58,.7),0 0 0 0 rgba(232,131,58,.5)}
.b1:hover{box-shadow:0 18px 44px -12px rgba(232,131,58,.85),0 0 0 6px rgba(232,131,58,.14)}
.b2:hover,.b3:hover{text-shadow:0 0 18px rgba(197,154,63,.45)}

/* ---------- 8. Liens de navigation : soulignement doré ---------- */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--or-profond),var(--or-clair));
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
header nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- 9. Sections marine : aurore + grain ---------- */
.marine{isolation:isolate}
/* Le canvas est un element remplace : sans width/height explicites il garde
   sa taille intrinseque (celle de ses attributs, calee sur le rapport de pixels)
   et deborde la page sur les petits ecrans. Constate sur iPhone SE : 2236 px. */
.px-aurore{position:absolute;inset:0;width:100%;height:100%;max-width:100%;
z-index:0;pointer-events:none;opacity:.85}
.marine > *:not(.px-aurore):not(.px-grain){position:relative;z-index:1}
.px-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 10. Chiffres : lueur ---------- */
.nb{text-shadow:0 0 26px rgba(217,185,108,.35);letter-spacing:-.02em}

/* ---------- 11. Étiquettes : verre + liseré ---------- */
.et{backdrop-filter:blur(10px) saturate(1.2);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .3s var(--ease)}
a.et:hover,button.et:hover{transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 22px -8px rgba(168,127,44,.6)}

/* ---------- 12. En-tête : verre profond ---------- */
header[style]{backdrop-filter:blur(16px) saturate(1.35)!important}

/* ---------- 13. Voile de transition entre pages ---------- */
.px-voile{position:fixed;inset:0;z-index:9997;pointer-events:none;transform:scaleY(0);
  transform-origin:50% 100%;background:linear-gradient(180deg,var(--nuit),var(--marine));
  transition:transform .5s var(--ease)}
.px-voile.actif{transform:scaleY(1);transform-origin:50% 0%}

/* ---------- 14. Filet doré séparateur ---------- */
.sec + .sec::before{content:"";display:block;height:1px;margin:0 auto;max-width:1240px;
  background:linear-gradient(90deg,transparent,rgba(197,154,63,.35),transparent)}

/* ---------- 15. Respect absolu du mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .px-progres,.px-curseur,.px-halo,.px-aurore,.px-grain,.px-voile{display:none!important}
  [data-px-rev],[data-px-rev].vu{transform:none!important;transition:none!important}
  .px-mot > span{transform:none!important;opacity:1!important;transition:none!important}
  .px-tilt{transform:none!important}
  .px-tilt::after,.px-tilt::before{display:none}
  [data-img-id] img{transition:none!important;transform:none!important}
  .btn::before{display:none}
}

/* ============================================================================
   CORRECTIFS D'AUDIT — 7 août 2026
   ========================================================================= */

/* A. Cibles tactiles : WCAG 2.2 AA impose 24 x 24 px. Le pied de page était à
   22 px et la barre de sécurité à 23 px. On passe à 32 px, sans changer
   l'apparence : c'est la zone cliquable qui grandit, pas le texte. */
footer li a{display:inline-flex;align-items:center;min-height:32px}
footer a{min-height:24px}
.px-barre-sec a,[style*="safety-500"] a{display:inline-flex;align-items:center;min-height:32px}
nav[aria-label="Navigation mobile"] a{min-height:48px}
.et{min-height:32px}
@media(pointer:coarse){
  footer li a{min-height:40px}
  header nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* B. La barre de sécurité doit rester la cible la plus sûre du site. */
header + div a,
div[style*="27568F"] a{padding-block:6px}

/* C. Dossiers : fil d'Ariane, sommaire latéral et signature de l'autrice.
   Le texte ne bouge pas, seule la zone de contact grandit. */
.sec nav a{display:inline-flex;align-items:center;min-height:26px}
@media(pointer:coarse){ .sec nav a{min-height:32px} }

/* Filet : les couches decoratives ne creent jamais de defilement horizontal. */
html{overflow-x:clip}
.px-voile,.px-halo,.px-progres,.px-curseur{max-width:100vw}

/* Très petits écrans (iPhone SE, 320 px).
   Le nom du site occupait 268 px et poussait le bouton Menu hors de l'écran :
   débordement horizontal de 18 px, mesuré au pixel. Le nom se rétrécit
   avec des points de suspension, le bouton garde sa cible de 44 px. */
@media (max-width: 380px){
  header .env{gap:10px!important;justify-content:space-between!important}
  header .env>a:first-child{
    flex:1 1 auto!important;min-width:0!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px!important}
  header .env>.nav-p{flex:0 0 auto!important}
}

/* Salons sensibles et écran de sécurité : la promesse « aucune animation »
   doit être tenue par le CSS aussi, pas seulement par le JavaScript.
   La page pose data-sobre sur son conteneur ; tout ce qui bouge s'arrête. */
[data-sobre],[data-sobre] *{animation:none!important;transition:none!important;
transform:none!important}
[data-sobre] .px-aurore,[data-sobre] .px-grain,[data-sobre] .px-halo,
[data-sobre] .px-curseur,[data-sobre] .px-progres{display:none!important}


/* ── 8. Un conteneur qui porte des commandes ne se déplace jamais ──────────
   8 septembre 2026. Mesuré en production : entre le mousedown et le mouseup
   d'un même clic, la révélation de « .mur-deux-colonnes » déplaçait le bouton
   « Agrandir » de 37,62 px. Cible du mousedown ≠ cible du mouseup, donc le
   navigateur réattribue le clic à l'ancêtre commun : le bouton ne recevait
   rien. Le zoom de la carte était inutilisable pour qui cliquait en arrivant.
   Une transform sur un ancêtre casse aussi le référentiel d'un enfant
   « position: sticky ». Le fondu est conservé ; seule la translation part. */
html.px-actif [data-px-rev]:has(.carte-commandes),
html.px-actif [data-px-rev]:has(.mur-carte-collante),
html.px-actif .mur-deux-colonnes[data-px-rev],
html.px-actif .mur-deux-colonnes[data-px-rev].vu{
  transform:none!important;
}