/* ==========================================================================
   Groupe Dallaba — couche « motion design »
   Chargée après main.css. Uniquement transform / opacity / clip-path (fluide
   sur mobile), aucune bibliothèque externe. Tout est neutralisé si le visiteur
   a demandé « réduire les animations » (bloc en fin de fichier).
   Les classes .m-* sont posées par motion.js : sans JS, rien n'est masqué.
   ========================================================================== */

/* 1. Transitions entre pages (navigateurs récents ; ignoré ailleurs) */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: m-page-out .28s ease both; }
::view-transition-new(root){ animation: m-page-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes m-page-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes m-page-in{ from{ opacity:0; transform:translateY(14px); } }

/* 2. Barre de progression de lecture */
.m-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:200; pointer-events:none;
  background:linear-gradient(90deg,var(--c-education),var(--c-transport),var(--gold),var(--c-commerce));
  transform-origin:0 50%; transform:scaleX(var(--m-p,0));
}

/* 3. Titre principal : les mots montent un par un, du flou au net */
.m-split .m-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.m-split .m-w > span{
  display:inline-block; transform:translateY(105%) rotate(4deg); opacity:0; filter:blur(6px);
  animation:m-word .9s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(.15s + var(--i) * .07s);
}
@keyframes m-word{ to{ transform:none; opacity:1; filter:none; } }
.hero h1 .accent,.split-hero h1 .accent{ position:relative; }

/* Éléments du haut de page qui suivent le titre */
.m-after{ opacity:0; transform:translateY(16px); animation:m-rise .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(.2s + var(--i) * .07s); }
@keyframes m-rise{ to{ opacity:1; transform:none; } }

/* 4. Mot tournant des cinq métiers (accueil) */
.m-rotator{ display:inline-grid; vertical-align:bottom; height:1.25em; overflow:hidden; margin-left:.35em; }
.m-rotator > span{
  grid-area:1/1; font-weight:700; transform:translateY(110%); opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s;
}
.m-rotator > span.is-on{ transform:none; opacity:1; }
.m-rotator > span.is-off{ transform:translateY(-110%); opacity:0; }

/* 5. Halos lumineux qui dérivent derrière les en-têtes */
.hero,.split-hero{ position:relative; isolation:isolate; overflow:hidden; }
.m-aurora{ position:absolute; top:-120px; left:-10%; width:120%; height:900px; z-index:-1; will-change:transform; pointer-events:none; filter:blur(70px); opacity:.55; }
.m-aurora i{ position:absolute; width:38vmax; height:38vmax; border-radius:50%; mix-blend-mode:screen; animation:m-drift 22s ease-in-out infinite alternate; }
.m-aurora i:nth-child(1){ background:radial-gradient(circle,var(--m-c1,#8c6fe0) 0,transparent 65%); top:-10%; left:-8%; }
.m-aurora i:nth-child(2){ background:radial-gradient(circle,var(--m-c2,#f5b342) 0,transparent 65%); top:20%; right:-12%; animation-duration:27s; animation-delay:-6s; }
.m-aurora i:nth-child(3){ background:radial-gradient(circle,var(--m-c3,#3ec9a7) 0,transparent 65%); bottom:-25%; left:30%; animation-duration:31s; animation-delay:-12s; opacity:.7; }
@keyframes m-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(6vmax,-4vmax,0) scale(1.15); }
  100%{ transform:translate3d(-4vmax,5vmax,0) scale(.9); }
}

/* 6. Bandeau défilant (accueil) */
.m-marquee{ position:relative; overflow:hidden; padding:1.4rem 0; border-block:1px solid var(--border); background:var(--bg-raised); }
.m-marquee-row{ display:flex; width:max-content; gap:2.6rem; animation:m-scroll 38s linear infinite; }
.m-marquee-row + .m-marquee-row{ margin-top:.9rem; animation-direction:reverse; animation-duration:46s; }
.m-marquee span{
  display:inline-flex; align-items:center; gap:2.6rem; white-space:nowrap;
  font-family:'Bricolage Grotesque',Inter,sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,2.8rem);
  letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1px #3a4a6e;
}
.m-marquee span.plein{ color:#fff; -webkit-text-stroke:0; }
.m-marquee span::after{ content:''; width:.42em; height:.42em; border-radius:50%; background:var(--dot,var(--gold)); flex:none; }
.m-marquee::before,.m-marquee::after{ content:''; position:absolute; top:0; bottom:0; width:12%; z-index:1; pointer-events:none; }
.m-marquee::before{ left:0; background:linear-gradient(90deg,var(--bg-raised),transparent); }
.m-marquee::after{ right:0; background:linear-gradient(270deg,var(--bg-raised),transparent); }
@keyframes m-scroll{ to{ transform:translateX(-50%); } }
.m-marquee:hover .m-marquee-row{ animation-play-state:paused; }

/* 7. Cascade : les cartes d'une grille apparaissent l'une après l'autre */
.js .m-stagger > *{ opacity:0; transform:translateY(28px) scale(.97); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 90ms); }
.js .m-stagger.is-visible > *{ opacity:1; transform:none; }

/* 8. Titres de section : révélation par rideau + trait doré qui se dessine */
.js .m-title{ clip-path:inset(0 0 100% 0); transform:translateY(.3em); transition:clip-path .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.js .m-title{ padding-bottom:.12em; }
.js .m-title.is-visible{ clip-path:inset(0 0 0 0); transform:none; }
.js .eyebrow.m-line::before{ transform:scaleX(0); transform-origin:0 50%; transition:transform .8s cubic-bezier(.16,1,.3,1) .15s; }
.js .eyebrow.m-line.is-visible::before{ transform:scaleX(1); }

/* 9. Halo qui suit la souris sur les cartes (ordinateur) */
@media (hover:hover){
  .m-spot{ position:relative; }
  .m-spot::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(245,179,66,.13),transparent 60%);
  }
  .m-spot:hover::after{ opacity:1; }
}

/* 10. Reflet qui balaie les boutons dorés */
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);
  animation:m-shine 5.5s ease-in-out infinite; animation-delay:2.2s;
}
@keyframes m-shine{ 0%,70%{ left:-60%; } 100%{ left:130%; } }

/* 11. Logo : l'hexagone se dessine au chargement */
.m-draw path:first-of-type{ stroke-dasharray:140; stroke-dashoffset:140; animation:m-stroke 1.4s cubic-bezier(.65,0,.35,1) .1s forwards; }
@keyframes m-stroke{ to{ stroke-dashoffset:0; } }

/* 12. « Notre histoire » : fil doré qui se remplit pendant la lecture */
.histoire-card:has(.histoire-titre){ position:relative; }
.m-thread{ position:absolute; left:0; top:12%; bottom:12%; width:3px; border-radius:3px; background:var(--border); overflow:hidden; }
.m-thread::after{ content:''; position:absolute; inset:0; background:linear-gradient(var(--gold),var(--c-transport)); transform-origin:50% 0; transform:scaleY(var(--m-h,0)); }
.js .histoire-intertitre{ opacity:0; transform:translateX(-14px); transition:opacity .6s, transform .6s cubic-bezier(.16,1,.3,1); }
.js .histoire-intertitre.is-visible{ opacity:1; transform:none; }

/* 13. Visuel des en-têtes de pages : légère flottaison */
.hero-visual-shape{ animation:m-float 9s ease-in-out infinite alternate; }
.hero-visual-shape + .hero-visual-shape{ animation-duration:11s; animation-delay:-4s; }
@keyframes m-float{ to{ transform:translate3d(14px,-18px,0) scale(1.06); } }

/* 13 bis. Carte des axes (Transport) : les pointillés circulent, les villes étapes « battent » */
.hero-visual path[stroke-dasharray]{ animation:m-route 1.4s linear infinite; }
@keyframes m-route{ to{ stroke-dashoffset:-24; } }
.hero-visual svg:has(path[stroke-dasharray]) circle{ transform-box:fill-box; transform-origin:center; animation:m-pulse 2.6s ease-in-out infinite; }
.hero-visual svg:has(path[stroke-dasharray]) circle:nth-of-type(2){ animation-delay:.4s; }
.hero-visual svg:has(path[stroke-dasharray]) circle:nth-of-type(3){ animation-delay:.8s; }
.hero-visual svg:has(path[stroke-dasharray]) circle:nth-of-type(4){ animation-delay:1.2s; }
.hero-visual svg:has(path[stroke-dasharray]) circle:nth-of-type(5){ animation-delay:1.6s; }
@keyframes m-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.45); } }

/* 13 ter. Visuel des actualités au format des images de partage (1200×630) : rien n'est rogné */
.news-card .product-visual{ aspect-ratio:1200/630; }

/* Accueil : extrait de 4 lignes + lien vers la page de l'activité */
.news-grid-groupe .news-card .product-body p{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.news-more{ margin-top:auto; padding-top:.4rem; font-size:.88rem; font-weight:600; color:var(--gold); }
.news-more:hover{ text-decoration:underline; }
/* Une seule actualité sur une page : grand format horizontal plutôt qu'une carte isolée */
/* (annule la hauteur fixe prévue pour le gâteau « featured » de la Boulangerie) */
.news-card.featured .product-visual{ aspect-ratio:1200/630; min-height:0; }
@media (min-width:560px){ .news-card.featured .product-visual{ align-self:center; } }
.news-card.featured .product-body{ justify-content:center; }

/* Grilles de cartes : la dernière rangée incomplète est centrée (3 colonnes, puis 2) */
@media (min-width:1024px){
  .activities-grid{ grid-template-columns:repeat(6,1fr); }
  .activities-grid > *{ grid-column:span 2; }
  .activities-grid > :nth-child(3n+1):nth-last-child(2){ grid-column:2 / span 2; }
  .activities-grid > :nth-child(3n+1):last-child{ grid-column:3 / span 2; }
}
@media (min-width:640px) and (max-width:1023px){
  .activities-grid{ grid-template-columns:repeat(4,1fr); }
  .activities-grid > *{ grid-column:span 2; }
  .activities-grid > :nth-child(2n+1):last-child{ grid-column:2 / span 2; }
}

/* Galerie de 3 images : la grande à gauche, les deux autres empilées à droite (pas de trou) */
.gallery-premium a:nth-child(2):nth-last-child(2),.gallery-premium a:nth-child(3):last-child{ grid-column:span 2; }

/* 15. Médias (photos, actualités, produits) — s'applique tout seul aux contenus publiés plus tard */
/* Attente : reflet qui balaie le cadre tant que l'image charge */
.m-media{ position:relative; overflow:hidden; isolation:isolate; }
.m-media.m-loading{ background:linear-gradient(110deg,var(--bg-card) 30%,rgba(255,255,255,.06) 50%,var(--bg-card) 70%) 0 0/250% 100%; animation:m-shimmer 1.4s linear infinite; }
@keyframes m-shimmer{ to{ background-position:-250% 0; } }
/* Révélation : rideau qui s'ouvre de bas en haut + image qui se pose (léger recul), trait doré qui balaie */
.js .m-media.m-hidden > img{ clip-path:inset(100% 0 0 0); transform:scale(1.18); }
.m-media > img{ transition:clip-path 1.05s cubic-bezier(.77,0,.18,1),transform 1.6s cubic-bezier(.16,1,.3,1),filter .6s ease; }
.m-media::after{ content:''; position:absolute; left:0; right:0; height:2px; top:100%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; }
.m-media.m-in::after{ animation:m-scan 1.05s cubic-bezier(.77,0,.18,1); }
@keyframes m-scan{ 0%{ top:100%; opacity:1; } 90%{ opacity:1; } 100%{ top:0; opacity:0; } }
/* Image aux proportions différentes du cadre (logo, bannière) : entière, sur un fond flouté tiré d'elle-même */
.m-media.m-contain::before{ content:''; position:absolute; inset:-12%; z-index:0; background:var(--m-src) center/cover no-repeat;
  filter:blur(22px) saturate(1.3) brightness(.5); }
.m-media.m-contain > img{ object-fit:contain !important; padding:6%; background:none !important; position:relative; z-index:1; }
.gallery-premium a.m-contain > img{ position:absolute; inset:0; }
/* Survol (ordinateur) : l'image avance doucement, un voile doré se lève */
@media (hover:hover){
  .news-card .m-media > img,.gallery-premium .m-media > img{ will-change:transform; }
  .news-card:hover .m-media > img,.gallery-premium a:hover > img{ transform:scale(1.07); }
  .news-card .m-media::before,.gallery-premium a::before{ transition:opacity .4s ease; }
  .gallery-premium a:not(.m-contain)::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    background:linear-gradient(180deg,transparent 55%,rgba(11,18,32,.75)); }
  .gallery-premium a:hover::before{ opacity:1; }
}
/* Légende de la galerie qui monte au survol */
.gallery-premium a[data-legende]::after{ content:attr(data-legende); position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .9rem;
  font-size:.78rem; color:#fff; transform:translateY(100%); transition:transform .45s cubic-bezier(.16,1,.3,1); pointer-events:none;
  background:linear-gradient(0deg,rgba(11,18,32,.85),transparent); }
.gallery-premium a[data-legende]:hover::after,.gallery-premium a[data-legende]:focus-visible::after{ transform:none; }

@media (min-width:900px){ .gallery-premium{ grid-auto-rows:170px; } }
.gallery-premium a.m-contain > img{ padding:4%; }

/* 16. Actualités : pastille « Nouveau », date en étiquette, titre souligné au survol */
.news-badge{ display:inline-flex; align-items:center; gap:.4em; margin-right:.5em; padding:.15em .6em; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#0b1220; background:var(--gold); vertical-align:middle; }
.news-badge::before{ content:''; width:.45em; height:.45em; border-radius:50%; background:#0b1220; animation:m-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes m-ping{ 0%{ box-shadow:0 0 0 0 rgba(11,18,32,.55); } 80%,100%{ box-shadow:0 0 0 .55em rgba(11,18,32,0); } }
.news-card h3{ background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat; transition:background-size .45s cubic-bezier(.16,1,.3,1); display:inline; }
.news-card:hover h3{ background-size:100% 2px; }
.news-card .product-body h3 + p,.news-card .product-body h3 + .news-more{ margin-top:.6rem; }
.news-card{ cursor:default; }
/* Bordure dorée qui fait le tour de la carte au survol */
@media (hover:hover){
  .news-card{ position:relative; }
  .news-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:4;
    background:conic-gradient(from var(--m-a,0deg),transparent 0 70%,var(--gold) 85%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
  .news-card:hover::before{ opacity:1; animation:m-orbit 2.4s linear infinite; }
}
@property --m-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes m-orbit{ to{ --m-a:360deg; } }

/* 17. Visionneuse photo : la photo s'agrandit depuis sa vignette, légende, flèches, compteur */
.lightbox{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-width:min(1100px,92vw); max-height:88vh; }
.lightbox figure img{ max-height:76vh; width:auto; box-shadow:0 30px 80px rgba(0,0,0,.55); transform-origin:center; }
.lightbox figcaption{ color:#e9edf6; font-size:.9rem; text-align:center; max-width:60ch; }
.lightbox-count{ position:absolute; top:24px; left:24px; color:#9aa7bd; font-size:.8rem; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(11,18,32,.55); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .2s,transform .2s; }
.lightbox-nav:hover{ background:var(--gold); color:#0b1220; }
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-prev{ left:20px; } .lightbox-next{ right:20px; }
.lightbox.is-single .lightbox-nav,.lightbox.is-single .lightbox-count{ display:none; }
@media (max-width:639px){ .lightbox-nav{ top:auto; bottom:24px; transform:none; } .lightbox-prev{ left:calc(50% - 60px); } .lightbox-next{ right:calc(50% - 60px); } }

/* 14. Compteurs */
.m-count{ font-variant-numeric:tabular-nums; }

/* Respect du réglage « réduire les animations » : tout s'affiche directement */
@media (prefers-reduced-motion:reduce){
  @view-transition { navigation: none; }
  .m-split .m-w > span,.m-after,.js .m-stagger > *,.js .m-title,.js .histoire-intertitre{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .js .eyebrow.m-line::before{ transform:none; transition:none; }
  .m-aurora i,.m-marquee-row,.btn-gold::after,.hero-visual-shape,.m-draw path:first-of-type,.hero-visual path[stroke-dasharray],.hero-visual circle{ animation:none !important; }
  .m-draw path:first-of-type{ stroke-dashoffset:0; }
  .m-rotator > span{ transition:none; }
  .js .m-media.m-hidden > img,.m-media > img{ clip-path:none !important; transform:none !important; transition:none !important; }
  .m-media::after,.news-badge::before,.news-card::before,.m-media.m-loading{ animation:none !important; }
}