/* ===== Section Sites Internet — Vitrine & Shop ===== */
.web-wrap{ max-width:1100px; margin:0 auto; padding:28px 20px; position:relative; z-index:1 }
.web-hero{ padding-top:120px }

/* ===== Titre animé — dégradé riche bleu ⇄ violet ⇄ rose/rouge ===== */
.web-hero-head.centered{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; margin-bottom:40px;
}
.web-hero-head h1{
  font-size:clamp(36px, 5vw, 56px); line-height:1.1; margin:0;

  --r1:#ff176b; --r2:#ff6ab5;
  --v1:#b08cff; --v2:#8aa0ff;
  --b1:#6aa4ff; --b2:#22d3ee;

  background:
    linear-gradient(90deg,
      var(--b1) 0%,
      var(--b2) 16%,
      var(--v2) 34%,
      var(--v1) 50%,
      var(--r2) 72%,
      var(--r1) 100%
    ),
    linear-gradient(90deg,
      var(--r1) 0%,
      var(--r2) 22%,
      var(--v1) 48%,
      var(--v2) 66%,
      var(--b2) 84%,
      var(--b1) 100%
    );
  background-size: 220% 100%, 240% 100%;
  background-position: 0% 50%, 100% 50%;
  animation: titleSweep 14s linear infinite;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.web-hero-head .lead{ color:#5B6A7E }

@keyframes titleSweep{
  0%   { background-position: 0% 50%, 100% 50%; }
  100% { background-position: -220% 50%, 320% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .web-hero-head h1, .web-hero-head h1 span{ animation:none }
}

/* ===== Pile verticale (1 colonne, centré) ===== */
.web-wrap{ max-width:980px; margin:0 auto; padding:28px 20px }
.web-grid{ display:block }
.web-grid > .web-card{ margin:28px 0 }

/* ===== Cartouches sombres (variante “native”) ===== */
:root{
  --web-card-bg: #0f1a2acc;    /* bleu nuit translucide */
  --web-card-fg: #e6eefc;      /* texte principal */
  --web-card-muted:#b8c7e3;    /* texte secondaire */
  --web-card-stroke: rgba(255,255,255,.04);
  --web-card-shadow: 0 16px 44px rgba(0,0,0,.35);
}

.web-card{
  position:relative;
  background: var(--web-card-bg);
  color: var(--web-card-fg);
  border:1px solid var(--web-card-stroke);
  border-radius:18px;
  padding:28px;
  box-shadow: var(--web-card-shadow);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.web-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0,0,0,.42);
  background: color-mix(in oklab, var(--web-card-bg) 92%, black 8%);
}

/* Titres & séparateur fin (sobres) */
.web-card h2{
  text-transform:uppercase;
  font-size:1rem; letter-spacing:.04em;
  margin:0 0 .75rem;
  color: #dbe6ff;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:.4rem;
  border-image: linear-gradient(90deg,
                      color-mix(in oklab, var(--card-accent,#7aa2ff), white 40%),
                      transparent) 1;
  border-bottom: 1px solid transparent;
}

/* Paragraphes lisibles en sombre */
.web-card p{ color:var(--web-card-muted); margin:.6rem 0 }

/* Bouton + (reprend ton style global mais adapté sombre) */
.web-card .card-plus{
  right:14px; bottom:14px;
  border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.80);
  color:#0f172a;
}

/* Contenu du popup (inchangé, juste sombre par défaut) */
.detail-grid article{
  background:#0b1424; color:#e6eefc;
  border:1px solid rgba(255,255,255,.06);
}

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(14px) scale(.985); filter:blur(6px);
  transition:opacity .7s, transform .7s cubic-bezier(.22,.61,.36,1), filter .7s;
}
.reveal.reveal-visible{ opacity:1; transform:none; filter:none }

/* ===== Envol Apple-like pour .web-card ===== */
.web-grid, .web-wrap { perspective: 1400px; perspective-origin: 50% 35%; }

.web-card{
  --lift: -26px;           /* hauteur de décollage */
  --scale: 1.035;          /* grossissement au survol */
  --rx: 0deg; --ry: 0deg;  /* rotations pilotées au pointeur */
  --shadow: 0 18px 40px rgba(0,0,0,.18);
  --shadow-fly: 0 46px 120px rgba(0,0,0,.28);
  --ring: color-mix(in oklab, var(--card-accent,#7aa2ff), white 30%);
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    background .35s ease, border-color .35s ease, filter .35s ease;
  box-shadow: var(--shadow);
  /* micro flottement au repos (comme Apple) */
  animation: cardFloat 6s ease-in-out infinite alternate;
}

.web-card {
  cursor: default; /* état normal */
}

.web-card:hover {
  cursor: pointer; /* main en hover */
}

/* ===== Envol pour .web-card ===== */
/* Laisse respirer la carte agrandie */
.web-wrap, .web-grid{
	perspective: 1400px;
	perspective-origin: 50% 35%;
	overflow: visible;
	max-width: 700px !important;
	margin: auto;
}

/* Carte : base + transitions soyeuses */
.web-card{
  position: relative;
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    background .30s ease,
    border-color .30s ease,
    filter .30s ease;
  will-change: transform, box-shadow, filter;
  cursor: pointer;                /* main au survol */
  z-index: 0;                     /* montera au hover */
  contain: paint;                 /* évite les reflows pendant l’anim */
}

/* Décollage + grossissement (hover et focus clavier) */
.web-card:hover,
.web-card:focus-within{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 36px 120px rgba(0,0,0,.10);
  background: color-mix(in oklab, var(--web-card-bg, #0f1a2acc) 88%, black 12%);
  border-color: rgba(255,255,255,.80);
  z-index: 5;
}

/* Ombre ovale étirée sous la carte (profondeur) */
.web-card::before{
  content:"";
  position:absolute; left:10%; right:10%; bottom:-24px; height:36px;
  border-radius:999px; pointer-events:none; z-index:-1;
  background: radial-gradient(60% 120% at 50% 40%, rgba(0,0,0,.28), transparent 70%);
  filter: blur(12px);
  transform: translateY(0) scale(1);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .3s ease, opacity .3s ease;
  opacity:.8;
}
.web-card:hover::before,
.web-card:focus-within::before{
  transform: translateY(16px) scale(1.15);
  filter: blur(18px); opacity:.95;
}

/* Halo/lueur qui “prend la lumière” en haut de carte */
.web-card::after{
  /*content:"";
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(260px 180px at 50% 28%,
      color-mix(in oklab, var(--card-accent, #7aa2ff), white 35%) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: 0; filter: blur(18px);
  transition: opacity .28s ease, filter .28s ease;*/
}
.web-card:hover::after,
.web-card:focus-within::after{ opacity:.55; filter: blur(14px) }

/* Titre : trait lumineux au survol (subtil) */
.web-card h2{
  transition: border-image .3s ease, color .2s ease;
  border-bottom:1px solid transparent;
}
.web-card:hover h2,
.web-card:focus-within h2{
  border-image: linear-gradient(90deg,
                color-mix(in oklab, var(--card-accent,#7aa2ff), white 25%),
                transparent) 1;
  border-bottom:1px solid transparent;
}

/* Bouton + existant : pastille ronde qui “monte” avec la carte */
.web-card .card-plus{
  position:absolute; right:14px; bottom:14px;
  width:35px; height:35px; display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.85);
  color:#0f172a; font-weight:700; line-height:1;
  box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateZ(40px);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.web-card:hover .card-plus,
.web-card:focus-within .card-plus{
  transform: translateZ(60px) scale(1.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
  background:#fff; border-color:#fff;
}

/* Parallaxe très léger si une image est présente */
.web-card .detail-hero img{
  transform: translateZ(0) scale(1);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.web-card:hover .detail-hero img,
.web-card:focus-within .detail-hero img{
  transform: translateZ(50px) scale(1.04);
}

/* “Dim” des cartes voisines quand l’une décolle (support :has) */
/*@supports(selector(:has(*))){
  .web-grid:has(.web-card:hover) .web-card:not(:hover),
  .web-grid:has(.web-card:focus-within) .web-card:not(:focus-within){
    transform: translateY(0) scale(.97);
    filter: saturate(.9) brightness(.98);
    opacity:.85;
    z-index: 0;
  }
}*/

/* Motion-friendly */
@media (prefers-reduced-motion: reduce){
  .web-card{ transition: transform .18s ease, box-shadow .18s ease }
  .web-card::before, .web-card::after{ display:none }
}
/* ===== Envol pour .web-card ===== */

/* ====== LIVRABLES — grille premium (Apple/Dyson vibe) ====== */
.detail-intro { margin: 16px 0 28px; color: var(--muted, #5B6A7E); font-size: 1.025rem; line-height: 1.6; }
.detail-intro h3 { margin: 0 0 8px; color: var(--ink, #0F172A); font-size: 1.25rem; letter-spacing: .2px; }

.deliverables-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 18px 0 8px;
}
@media (max-width: 1024px){ .deliverables-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .deliverables-grid{ grid-template-columns: 1fr; } }

.deliverable{
  position: relative;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.74));
  border: 1px solid color-mix(in oklab, var(--stroke, rgba(0,0,0,.08)) 80%, transparent);
  border-radius: calc(var(--radius, 24px) - 8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 6px 20px rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  will-change: transform;
}
.deliverable:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
  border-color: color-mix(in oklab, var(--card-accent, var(--brand, #FF168B)) 30%, var(--stroke, rgba(0,0,0,.08)));
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
}

.deliverable .ico{
  display:block;
  width: 28px; height: 28px;
  margin-bottom: 10px;
  color: color-mix(in oklab, var(--card-accent, var(--brand, #FF168B)) 78%, #000);
  opacity:.95;
}
.deliverable h4 {
  color: var(--ink, #0F172A) !important;
  border-left: 3px solid var(--card-accent, var(--brand, #FF168B)) !important;
  padding-left: 8px !important;
}
.web-card .native-detail .deliverables-grid .deliverable{
  color: var(--muted, #5B6A7E) !important;
}
.web-card .native-detail .deliverables-grid .deliverable h4{
  color: var(--ink, #0F172A) !important;
}

/* remet une couleur de base correcte dans ces cartes */
.detail-grid.deliverables-grid article{
  color: var(--muted, #5B6A7E) !important;
}

/* titres lisibles + accent éventuel */
.detail-grid.deliverables-grid article h4{
  color: var(--ink, #0F172A) !important;
  font-weight: 700;
  border-left: 3px solid var(--card-accent, var(--brand, #FF168B));
  padding-left: 8px;
}

/* texte */
.detail-grid.deliverables-grid article p{
  color: var(--muted, #5B6A7E) !important;
}

.deliverable p{
  margin: 0;
  color: var(--muted, #5B6A7E);
  font-size: .98rem;
  line-height: 1.5;
}

/* Petits raffinements autour du bloc */
.detail-hero{
  margin: 8px 0 18px;
  border-radius: calc(var(--radius, 24px));
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
}
.detail-hero img{ display:block; width:100%; height:auto; }
.detail-hero figcaption{
  padding: 8px 12px;
  font-size:.92rem;
  color: var(--muted, #5B6A7E);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(247,249,252,.85));
  border-top: 1px solid color-mix(in oklab, var(--stroke, rgba(0,0,0,.08)) 80%, transparent);
}

.detail-quote{
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid color-mix(in oklab, var(--card-accent, var(--brand, #FF168B)) 70%, #999);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
  color: var(--ink, #0F172A);
  border-radius: 10px;
  font-style: italic;
}

/* Intégration douce sur la carte (face fermée) */
.web-card p strong{
  color: color-mix(in oklab, var(--card-accent, var(--brand, #FF168B)) 75%, var(--ink, #0F172A));
}

/* Neutralise la couleur imposée par .detail-grid article pour ce composant */
.detail-grid.deliverables-grid article { color: var(--muted, #5B6A7E) !important; }
.detail-grid.deliverables-grid article h4 { 
  color: var(--ink, #0F172A) !important;
  font-weight: 700;
  border-left: 3px solid var(--card-accent, var(--brand, #FF168B)) !important;
  padding-left: 8px;
}

.web-card{ --accent: var(--card-accent, var(--brand, #FF168B)); }

.web-card .native-detail .deliverables-grid .deliverable .ico{
  color: var(--accent) !important;
}
.web-card .native-detail .deliverables-grid .deliverable h4{
  color: var(--ink, #0F172A) !important;
  font-weight: 700;
  border-left: 3px solid var(--accent) !important;
  padding-left: 8px;
}



/* =============================
   Bandes génériques (réutilisées plus bas si besoin)
   ============================= */
.band{
  position:relative;
  width:100vw; left:50%; margin-left:-50vw;
  padding:clamp(28px,5vw,68px) 0;
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,.04);
}
.band .wrap{ position:relative; z-index:1; }
.band .band-title{ margin:0 0 .65rem; font-size:clamp(20px,3vw,26px); font-weight:700; letter-spacing:.01em; }
.band p{ color:var(--muted); max-width:72ch }

/* Variantes pâles si vous enchaînez d’autres cartouches */
.band--intro.paint::before,
.band--vitrine.paint::before,
.band--boutique.paint::before{
  content:""; position:absolute; left:calc(50% - 50vw); top:-200px; width:100vw; height:1200px;
  pointer-events:none; z-index:0; filter:blur(70px) saturate(135%); opacity:.9;
  animation: paintFlow 22s ease-in-out infinite;
}
.band--intro.paint::before{
  background:
    radial-gradient(70% 50% at 50% 0,  rgba(122,168,255,.14), transparent 70%),
    radial-gradient(40% 26% at 20% 80%, rgba(255,22,139,.10), transparent 70%);
}
.band--vitrine.paint::before{
  background:
    radial-gradient(70% 60% at 15% 0,  rgba(120,160,255,.16), transparent 70%),
    radial-gradient(60% 50% at 85% 80%, rgba(160,120,255,.14), transparent 70%);
}
.band--boutique.paint::before{
  background:
    radial-gradient(70% 60% at 85% 0,  rgba(255,120,180,.16), transparent 70%),
    radial-gradient(60% 50% at 20% 85%, rgba(200,120,255,.14), transparent 70%);
}
@keyframes paintFlow{
  0%{ transform:translateY(0) scaleY(.2); opacity:.85 }
  50%{ transform:translateY(160px) scaleY(1.25); opacity:1 }
  100%{ transform:translateY(0) scaleY(.2); opacity:.85 }
}

/* Accessibilité */
@media (prefers-reduced-motion:reduce){
  .page-web-hero.paint::before,
  .band--intro.paint::before,
  .band--vitrine.paint::before,
  .band--boutique.paint::before{ animation:none }
  .laptop-float{ transition:none; opacity:1; --lift:0px; --bob:0px }
}

/* Pile interne */
.hero-stack{ max-width:1180px; margin:0 auto; padding:0 20px; position:relative; }
.web-hero-head.centered{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin:0 0 clamp(8px,1.6vw,14px); }
.web-hero-head .lead{ margin:0; color:#5B6A7E }

/* ----- VISUEL : ne plus forcer de hauteur ----- */
.band-visual{
  position:relative;
  display:block;             /* hauteur suit le contenu */
  text-align:center;
  margin-bottom: var(--hero-gap); /* espace sûr avant l’intro */
}
.laptop-float{
  display:inline-block;
  width:clamp(520px,72vw,980px);
  height:auto;
  opacity:0;
  --lift: 38px; --bob: 0px;
  transform: translateY(calc(var(--lift) + var(--bob)));
  transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 24px 54px rgba(15,23,42,.18));
  will-change: transform, opacity;
  z-index:1;
}
.laptop-float.is-in{ opacity:1; --lift:0px; }



/* Visuel : AUCUNE hauteur forcée → pas de recouvrement */
.band-visual{
  position:relative;
  display:block; text-align:center;
  margin-bottom: var(--hero-gap);
}

/* Laptop : fade + slide-up; scroll piloté par --bob */
.laptop-float{
  display:inline-block;
  width:clamp(520px,72vw,980px); height:auto;
  opacity:0;
  --lift: 38px;                 /* départ sous le texte */
  --bob: 0px;                   /* petit offset dynamique */
  transform: translateY(calc(var(--lift) + var(--bob)));
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 24px 54px rgba(15,23,42,.18));
  will-change: transform, opacity;
  z-index:1;
}
.laptop-float.is-in{ opacity:1; --lift: 0px; }

@media (prefers-reduced-motion:reduce){
  body[data-page="offres/sites-internet"] .page-web-hero.paint::before{ animation:none }
  .laptop-float{ transition:none; opacity:1; --lift:0px; --bob:0px }
}

.hero-intro.center-intro{
	text-align: center;
}


/**/
/*
.gracyl-hero::before{
  content:""; position:absolute; top:-200px; left:calc(50% - 50vw);
  width:100vw; height:1400px; pointer-events:none; z-index:0;
  background: radial-gradient(
    90% 70% at 50% 0,
    rgba(80,200,255,.40),
    rgba(120,180,255,.35) 35%,
    rgba(160,120,255,.28) 70%,
    transparent 100%
  );
  filter: blur(80px) saturate(140%);
  transform-origin: top center;
  animation: paintSpread 24s ease-in-out infinite;
}
@keyframes paintSpread{
  0%   { transform: translateY(0) scaleY(0.18); opacity:.85 }
  25%  { transform: translateY(0) scaleY(1);    opacity:1   }
  50%  { transform: translateY(220px) scaleY(1.35); opacity:.95 }
  75%  { transform: translateY(0) scaleY(1);    opacity:1   }
  100% { transform: translateY(0) scaleY(0.18); opacity:.85 }
}

*/
/**/

/* ===== HALO GRACYL — descente et repos en bas ===== */
.gracyl-hero::before{
  content:"";
  position:absolute;
  top:-220px;                           /* reste accroché en haut */
  left:calc(50% - 50vw);
  width:100vw;
  height:1600px;                        /* couvre largement */
  pointer-events:none;
  z-index:0;

  /* couleurs enrichies */
  background: radial-gradient(
    90% 70% at 50% 0,
    rgba(70,220,255,.45),       /* cyan vif */
    rgba(120,140,255,.38) 35%,  /* violet doux */
    rgba(80,220,180,.30) 70%,   /* turquoise/vert d’eau */
    transparent 100%
  );

  filter: blur(82px) saturate(150%);
  transform-origin: top center;
  animation: paintFall 32s ease-out forwards; /* descend et reste */
}



/* ===== HALO GRACYL — descente et repos en bas, puis miroitement ===== */
.gracyl-hero{
  position:relative;
  isolation:isolate;
  overflow:visible;
}

/* 1) Masse principale : descend puis RESTE en bas */
.gracyl-hero::before{
  content:"";
  position:absolute;
  top:-220px;                           /* accroché en haut */
  left:calc(50% - 50vw);
  width:100vw;
  height:1600px;                        /* couvre largement */
  pointer-events:none;
  z-index:0;

  /* couleurs enrichies (cyan/violet/turquoise) */
  background: radial-gradient(
    90% 70% at 50% 0,
    rgba(70,220,255,.45),       /* cyan vif */
    rgba(120,140,255,.38) 35%,  /* violet doux */
    rgba(80,220,180,.30) 70%,   /* turquoise/vert d’eau */
    transparent 100%
  );

  filter: blur(82px) saturate(150%);
  transform-origin: top center;

  /* Descente unique + stop en bas */
  animation: paintFall 32s ease-out forwards;
}

/* Descente => repos */
@keyframes paintFall{
  0%   { transform: scaleY(.18); opacity:.85 }                   /* compact en haut */
  20%  { transform: scaleY(1); opacity:1 }                       /* expansion */
  45%  { transform: translateY(280px) scaleY(1.42); opacity:.97 }/* descente */
  100% { transform: translateY(280px) scaleY(1.45); opacity:.95 }/* RESTE en bas */
}

/* 2) Reflets miroitants : démarrent SEULEMENT quand la descente est finie */
.gracyl-hero::after{
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - 50vw);
  width:100vw;
  height:1600px;
  pointer-events:none;
  z-index:-1;                            /* sous la masse principale */

  /* nappes de reflets (plus légères) */
  background:
    radial-gradient(40% 28% at 60% 8%,  rgba(70,220,255,.25), transparent 60%),
    radial-gradient(32% 26% at 28% 76%, rgba(120,140,255,.22), transparent 65%),
    radial-gradient(34% 26% at 78% 68%, rgba(80,220,180,.22), transparent 65%);

  filter: blur(90px) saturate(155%);
  mix-blend-mode: screen;
  opacity:0;                              /* invisible tant que ça descend */

  /* On déclenche APRÈS 32s (fin de paintFall) :
     - mirrorFadeIn allume doucement les reflets,
     - waterFlow ondule (eau),
     - hueShift fait dériver subtilement la teinte. */
  animation:
    mirrorFadeIn 300ms ease-out forwards 32s,
    waterFlow 14s ease-in-out infinite alternate 32s,
    hueShift 36s ease-in-out infinite 32s;
}

/* Fade-in des reflets après la descente */
@keyframes mirrorFadeIn{
  from { opacity:0 }
  to   { opacity:.85 }
}

/* Ondulation douce (effet eau) via déplacement des foyers radiaux */
@keyframes waterFlow{
  0%   { background-position: 55% 6%, 26% 74%, 80% 64% }
  50%  { background-position: 58% 10%, 24% 78%, 76% 68% }
  100% { background-position: 52% 8%, 30% 72%, 82% 62% }
}

/* Légère dérive de teinte/saturation pour un miroitement vivant */
@keyframes hueShift{
  0%   { filter: blur(90px) saturate(155%) hue-rotate(0deg) }
  50%  { filter: blur(92px) saturate(172%) hue-rotate(12deg) }
  100% { filter: blur(90px) saturate(155%) hue-rotate(0deg) }
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion:reduce){
  .gracyl-hero::before{ animation: none; transform: translateY(280px) scaleY(1.45); }
  .gracyl-hero::after{ animation: none; opacity:.85; }
}

/* === Centrage des blocs "Vitrine" et "Boutique" === */
.band .wrap{
  max-width: 1100px;       /* largeur contenue */
  margin: 0 auto;
  padding: 0 20px;
}

.band--vitrine .band-split,
.band--boutique .band-split{
  display: flex;
  justify-content: center; /* centre le contenu dans la bande */
}

.band--vitrine .col.text,
.band--boutique .col.text{
  flex: 0 1 820px;         /* largeur idéale du bloc texte */
  margin: 0 auto;          /* centre le bloc */
  text-align: center;      /* texte centré */
}

.band--vitrine .band-title,
.band--boutique .band-title{
  text-align: center;      /* titre centré */
}

/* optionnel : assure que les paragraphes ne dépassent pas et sont centrés */
.band--vitrine p,
.band--boutique p{
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}


section.page-web-hero{
	padding-bottom: 68px;
}


/* ===== Duo de blocs vitrines / boutique ===== */
.web-duo{ padding: clamp(30px,5vw,60px) 0 }
.web-duo .duo{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px,2vw,28px);
}

/* Cartes avec deux blancs différents (aucun noir) */
/* =======================
   Duo cards (vitrine / shop)
   ======================= */
.duo-card{
  position: relative;
  padding: clamp(18px,2.2vw,24px);
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.06);
  background-clip: padding-box;
  box-shadow: 0 16px 34px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  filter: blur(6px);
}

/* deux tons de blanc (pas de #000) */
.duo-card.tone--a{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); }
.duo-card.tone--b{ background: linear-gradient(180deg, #FCFEFF, rgba(252,254,255,.84)); }

/* léger lift de la carte au hover (les images ne zooment pas) */
.duo-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Titre + visuel + texte */
.duo-card .band-title{
  margin: 2px 0 12px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: .01em;
}

.duo-media{
  margin: 0 0 12px;
  padding: clamp(16px, 4vw, 28px);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.15) 40%,
      rgba(255,255,255,.05) 100%);
}

/* Visuels : fade + slide-up, pas de zoom au hover.
   --bob est pilotée en JS pour le léger flottement directionnel. */
.offer-illus{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  --lift: 22px;           /* départ un peu plus bas */
  --bob: 0px;             /* offset dynamique scroll */
  transform: translateY(calc(var(--lift) + var(--bob)));
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 18px 42px rgba(15,23,42,.14));
  will-change: transform, opacity;
}

/* apparition au scroll */
.offer-illus.is-in{ opacity: 1; --lift: 0px; }

/* sécurité : aucun zoom héritée */
.offer-illus:hover{ transform: translateY(var(--bob)) !important; }

/* texte */
.duo-text p{ margin: .55rem 0; color: var(--muted, #5B6A7E); }

/* Reveal (même logique que tes cards) */
.duo-card.reveal{
  animation: duoIn .8s cubic-bezier(.25,.8,.25,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes duoIn{
  to { opacity: 1; transform: none; filter: none; }
}

/* Responsive : empilement */
@media (max-width: 920px){
  .web-duo .duo{ grid-template-columns: 1fr; }
}

/* Hard reset au cas où d’anciens styles ciblent encore l’image dans la carte */
.duo-card:hover .duo-media img,
.duo-card:focus-within .duo-media img{ transform: none !important; opacity: 1 !important; }

.offer-illus:hover{ transform: translateY(var(--bob)) !important; }


/* ===== Portrait gallery — ajustements ===== */

/* ===== Galerie portrait ===== */
.portrait-gallery{ display:flex; align-items:center; gap:12px; position:relative; overflow:hidden; }
.portrait-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 0 22px; scroll-behavior:smooth; }
.portrait-card{
  position:relative; flex:0 0 304px; height:610px; /* ratio portrait Apple-like */
  border-radius:22px; overflow:hidden; scroll-snap-align:start;
  background:#fff; box-shadow:0 14px 32px rgba(0,0,0,.10);
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  transition:transform .28s ease, box-shadow .28s ease;
}
.portrait-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.16); }
.portrait-card .portrait-bg{ position:absolute; inset:0; z-index:-1; }
.portrait-card .portrait-bg img{ width:100%; height:100%; object-fit:cover; }
.portrait-topic{ font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; color:var(--card-accent,#666); }
.portrait-headline{ font-size:1.35rem; font-weight:800; line-height:1.15; margin:0 0 8px; color:#111; text-wrap:balance; }

/* Bouton + (en bas à droite) */
.portrait-plus{
  position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.92); color:#0f172a; font-weight:700;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.portrait-plus:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.20); }

/* Flèches */
.portrait-nav{
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08);
  width:38px;height:38px;border-radius:50%; display:grid;place-items:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.portrait-nav.prev{ margin-left:-2px } .portrait-nav.next{ margin-right:-2px }

/* ===== Modal ===== */
.portrait-modal{ position:fixed; inset:0; display:none; z-index:4000; }
.portrait-modal[aria-hidden="false"]{ display:block; }
.portrait-modal__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(6px); }
.portrait-modal__dialog{
  position:relative; max-width:min(920px, 92vw); max-height:min(84vh, 900px); margin:6vh auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid rgba(0,0,0,.08); border-radius:22px; box-shadow:0 24px 64px rgba(0,0,0,.25);
  overflow:auto;
}
.portrait-modal__close{
  position:sticky; top:0; margin-left:auto; margin-right:6px; margin-top:6px;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.08);
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); cursor:pointer; z-index:2;
}
.portrait-modal__content{ padding:16px 18px 22px; }
.portrait-modal__content .detail-hero{ margin: 8px 0 18px; border-radius: 18px; overflow:hidden; }
.portrait-modal__content .detail-hero img{ width:100%; height:auto; display:block; }
.portrait-modal__content .detail-hero figcaption{
  padding:8px 12px; font-size:.92rem; color:#5B6A7E; background:rgba(247,249,252,.9); border-top:1px solid rgba(0,0,0,.06);
}

/* Scroll lock quand modal ouverte */
body.portrait-lock{ overflow:hidden; }

/* 1) La galerie ne déborde pas, on garde le scroll horizontal */
.portrait-gallery{
  position: relative;
  overflow: hidden;                 /* évite un débordement visuel */
  padding-bottom: 42px;             /* espace pour les flèches en bas */
}

/* 2) Rail : pas de coupe, marges internes pour respirer */
.portrait-track{
  display: flex;
  gap: 20px;
  overflow-x: auto;                 /* scroll horizontal uniquement */
  overflow-y: hidden;               /* aucune coupe verticale */
  scroll-snap-type: x mandatory;
  padding: 14px 24px 22px;          /* de l’air aux bords */
  scroll-behavior: smooth;
}

/* 3) Cartes : taille responsive qui reste ENTIEREMENT visible */
.portrait-card{
  flex: 0 0 clamp(260px, 26vw, 304px);  /* n’élargit jamais la page */
  height: clamp(460px, 66vh, 610px);    /* ratio portrait Apple-like */
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  scroll-snap-align: start;
  transition: transform .28s ease, box-shadow .28s ease;
}

/* 4) Image de fond : SANS RECADRAGE (contain) */
.portrait-card .portrait-bg{ position:absolute; inset:0; z-index:-1; display:grid; place-items:center; }
.portrait-card .portrait-bg img{
  width: 100%;
  height: 100%;
  object-fit: contain;               /* clef : pas de coupe */
  background: #f3f6fb;               /* liseré propre dans les bandes vides */
}

/* 5) Textes */
.portrait-topic{
  font-size: .86rem; text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 6px; color: var(--card-accent,#666);
}
.portrait-headline{ font-size: 1.35rem; font-weight: 800; line-height: 1.15; margin: 0 40px 8px 0; color: #111; }

/* 6) Bouton “+” en bas à droite */
.portrait-plus{
  position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.92); color:#0f172a; font-weight:700;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.portrait-plus:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.20); }

/* 7) Flèches centrées en bas (look Apple) */
.portrait-nav{
  position: absolute; bottom: 6px; left: 50%;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  color: #111;
}
.portrait-nav:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.20); }
.portrait-nav.prev{ transform: translate(calc(-50% - 28px), 0); } /* bouton gauche */
.portrait-nav.next{ transform: translate(calc(-50% + 28px), 0); } /* bouton droit */

/* petits écrans : un peu plus compacts */
@media (max-width: 560px){
  .portrait-card{
    flex-basis: clamp(240px, 70vw, 300px);
    height: clamp(420px, 64vh, 560px);
  }
}


/* ========= Portrait Gallery (clean) ========= */

/* Conteneur : ne coupe rien en vertical, espace pour les flèches */
.portrait-gallery{
  position: relative;
  padding-bottom: 44px;            /* place pour les flèches */
  overflow: visible;               /* surtout pas hidden -> pas de coupe */
}

/* Rail : scroll horizontal uniquement */
.portrait-track{
  display: flex;
  gap: 20px;
  padding: 14px 24px 22px;
  overflow-x: auto;
  overflow-y: visible;             /* aucune coupe verticale */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

/* Cartes : taille responsive qui tient à l’écran (100% visibles) */
.portrait-card{
  position: relative;
  flex: 0 0 clamp(260px, 26vw, 304px);
  height: clamp(460px, 66vh, 610px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  scroll-snap-align: start;
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;                /* garde les coins arrondis, pas la hauteur */
}
.portrait-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.16); }

/* Image : jamais recadrée */
.portrait-card .portrait-bg{
  position:absolute; inset:0; z-index:-1; display:grid; place-items:center;
}
.portrait-card .portrait-bg img{
  width: 100%; height: 100%;
  object-fit: contain;             /* clé : pas de coupe */
  background: #f3f6fb;             /* “lettre-boxing” propre */
}

/* Titres */
.portrait-topic{
  font-size:.86rem; text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 6px; color:var(--card-accent,#666);
}
.portrait-headline{
  font-size:1.35rem; font-weight:800; line-height:1.15;
  margin:0 40px 8px 0; color:#111;
  text-wrap:balance;
}

/* Bouton + */
.portrait-plus{
  position:absolute; right:12px; bottom:12px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.92); color:#0f172a; font-weight:700;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.portrait-plus:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.20); }

/* Flèches centrées en bas */
.portrait-nav{
  position:absolute; left:50%; bottom:6px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  color:#111;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.portrait-nav:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.20); }
.portrait-nav.prev{ transform:translate(calc(-50% - 28px), 0); }
.portrait-nav.next{ transform:translate(calc(-50% + 28px), 0); }

/* Mobiles : un peu plus compacts */
@media (max-width:560px){
  .portrait-card{
    flex-basis: clamp(240px, 70vw, 300px);
    height: clamp(420px, 64vh, 560px);
  }
}