/* Page "Le concept" — réutilise au maximum les composants de la homepage
   (.hero, .cover-title, .wave, .sticker/.bsticker, .stamp, .eyebrow,
   .concept-grid/.concept-visual, .sec-head) pour garder la même charge
   graphique et la même DA. N'ajoute que ce qui n'existe pas déjà. */

/* --- Reveal de mots : réutilise le même déclencheur que .reveal (la classe
   .in est ajoutée par l'IntersectionObserver déjà présent dans
   donkey-base.js) — aucun JS supplémentaire nécessaire ici. --- */
.word-reveal span{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 70ms)}
.word-reveal.in span{opacity:1;transform:none}

.center-title{text-align:center;margin:0 auto 20px;max-width:640px}

/* ==========================================================================
   1. HERO — .hero de base fait 100svh de haut ; sans le badge/eyebrow
   au-dessus du titre, ce serait beaucoup de vide. On réduit la hauteur
   pour cette page uniquement (sans toucher .hero global).
   ========================================================================== */
.concept-hero{min-height:62svh;padding-top:110px;padding-bottom:90px}
@media(max-width:700px){.concept-hero{min-height:56svh;padding-top:100px;padding-bottom:80px}}

/* ==========================================================================
   2. LE DÉCLIC — collage photo + récit complet de l'origine (2021 → 2026),
   écrit en courts paragraphes, tous au même style. Post-it flottant sur
   le collage.
   ========================================================================== */
.story2-grid{display:grid;grid-template-columns:.85fr 1fr;gap:56px;align-items:start}
/* Une seule grande photo "au premier plan", entièrement visible (pas de
   masque de fondu : juste des coins arrondis + une ombre portée). */
.declic-collage{position:relative}
.declic-photo{overflow:hidden;border-radius:18px;box-shadow:0 22px 40px -20px rgba(1,36,95,.4)}
.declic-photo img{width:100%;height:100%;object-fit:cover;display:block}
.declic-hero{aspect-ratio:4/5;max-width:460px;margin:0 auto}
.story2-callout{position:absolute;bottom:-14px;right:-10px;max-width:210px;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 22px 40px -16px rgba(1,36,95,.4);transform:rotate(-3deg);z-index:1}
.story2-callout::before{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--blue-800)}
.story2-callout-title{display:block;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--blue-800);font-size:1rem;margin-bottom:4px}
.story2-callout-text{display:block;color:var(--muted);font-size:.85rem;line-height:1.4}
.story2-text{padding-top:6px}
.story2-kicker{display:block;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.5rem,2.7vw,2.1rem);color:var(--blue-800);margin:6px 0 28px}
.story2-narrative{display:flex;flex-direction:column;gap:15px}
.story2-narrative p{margin:0;color:var(--muted);font-size:1rem;line-height:1.65}

/* ==========================================================================
   3. NOTRE HISTOIRE — timeline éditoriale verticale (esprit Gyraya : dates +
   étapes qui progressent, sur fond blanc), redessinée aux codes Donkey :
   bleu/blanc/orange, stickers, œil grec, ligne "dessinée à la main" qui se
   trace au scroll. Pas de sticky, pas de carrousel — juste des reveals
   doux et une étape "active" légèrement mise en avant.
   Voir assets/js/pages/concept.js — data-timeline-track / -fill / -step.
   ========================================================================== */
.concept-journey{position:relative;overflow:visible;background:#fff;padding:100px 0 90px}
.concept-journey h2{color:var(--blue-800)}
.journey-intro{max-width:520px;margin:0 auto 60px;text-align:center;color:var(--muted);font-size:1.05rem}

.timeline{position:relative;max-width:920px;margin:0 auto}
.timeline-line{position:absolute;left:50%;top:0;width:24px;height:100%;transform:translateX(-50%);pointer-events:none}
.timeline-line-track{fill:none;stroke:rgba(1,36,95,.15);stroke-width:2}
.timeline-line-fill{fill:none;stroke:var(--blue-800);stroke-width:2.4;stroke-linecap:round}

.timeline-step{position:relative;display:flex;width:100%;padding:24px 0}
.timeline-step.is-left{justify-content:flex-start}
.timeline-step.is-right{justify-content:flex-end}
.timeline-marker{position:absolute;left:50%;top:40px;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue-800);z-index:2;transition:transform .3s ease,background .3s ease}
.timeline-step.is-current .timeline-marker{transform:translate(-50%,-50%) scale(1.3)}

.timeline-card{position:relative;width:100%;max-width:360px;background:#fff;border-radius:22px;padding:28px 30px;box-shadow:0 22px 46px -26px rgba(1,36,95,.3);transition:transform .35s ease,box-shadow .35s ease}
.timeline-step.is-left .timeline-card{margin-right:auto}
.timeline-step.is-right .timeline-card{margin-left:auto}
.timeline-step.is-wide .timeline-card{max-width:400px}
.timeline-step.is-current .timeline-card{transform:translateY(-3px);box-shadow:0 32px 60px -28px rgba(1,36,95,.4)}

.timeline-doodle{width:32px;height:32px;color:var(--blue-800);margin-bottom:14px;animation:bob 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.timeline-doodle{animation:none}}
.timeline-date{display:inline-block;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.35rem;color:var(--blue-800);margin-bottom:8px}
.timeline-card h3{margin:0 0 8px;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-800);font-size:1.12rem}
.timeline-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.timeline-strong{margin-top:6px!important;font-weight:800!important;color:var(--blue-800)!important}

/* Mykonos : petite touche orange (accent de marque) */
.timeline-step.is-accent .timeline-card{border-bottom:4px solid #ff7a3d}
.timeline-step.is-accent .timeline-date{color:#ff7a3d}

/* Fin 2022 : carte pleine bleue, ressort davantage */
.timeline-step.is-blue .timeline-card{background:var(--blue-800)}
.timeline-step.is-blue .timeline-date,
.timeline-step.is-blue .timeline-card h3{color:#fff}
.timeline-step.is-blue .timeline-card p{color:rgba(255,255,255,.85)}
.timeline-step.is-blue .timeline-strong{color:#fff!important}
.timeline-step.is-blue .timeline-doodle{color:#fff}
.timeline-step.is-blue .timeline-card::after{content:"";position:absolute;top:20px;right:20px;width:10px;height:10px;border-radius:50%;background:#ff7a3d}

/* 2026 : point d'orgue, carte pleine largeur, très grand chiffre */
.timeline-step.is-final{justify-content:center;padding:50px 0 10px}
.timeline-step.is-final .timeline-marker{background:#ff7a3d;border-color:#ff7a3d}
.timeline-step.is-final .timeline-card{max-width:540px;width:100%;background:var(--blue-800);text-align:center;padding:52px 40px;border-radius:28px;box-shadow:0 40px 74px -30px rgba(1,36,95,.5)}
.timeline-date-big{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(3.4rem,9vw,5.6rem);line-height:1;color:#fff;margin-bottom:6px}
.timeline-step.is-final .timeline-card h3{color:#fff;font-size:1.4rem}
.timeline-step.is-final .timeline-card p{color:rgba(255,255,255,.9);font-size:1.02rem}
.timeline-step.is-final .timeline-strong{color:#ff7a3d!important;font-size:1.2rem}

.timeline-conclusion{max-width:600px;margin:60px auto 0;text-align:center;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;color:var(--blue-800);font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.5}

/* ==========================================================================
   5. POURQUOI DONKEY ? — sceau tournant façon .stamp de la homepage
   ========================================================================== */
.concept-why{text-align:center;position:relative;overflow:hidden}
.concept-why-inner{max-width:560px;margin:0 auto}
.why-stamp{position:relative;display:block;width:172px;height:172px;margin:0 auto 26px}
.why-stamp::before{content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,rgba(1,61,185,.14),transparent 70%)}
/* La rotation s'applique au <g> interne (coordonnées SVG), jamais à
   l'élément <svg> lui-même : animer le <svg> via CSS transform décentre
   le badge dans certains navigateurs (le pivot de la rotation se cale
   sur le viewBox interne plutôt que sur la vraie boîte CSS). */
.why-stamp svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 20px rgba(1,36,95,.35))}
.why-stamp-spin{transform-origin:50px 50px;animation:spin 24s linear infinite}
@media(prefers-reduced-motion:reduce){.why-stamp-spin{animation:none}}
.why-stamp-photo{position:absolute;inset:0;margin:auto;width:108px;height:108px;border-radius:50%;object-fit:cover;object-position:50% 42%;box-shadow:0 0 0 4px #fff,0 8px 18px -6px rgba(0,0,0,.4)}
.concept-why h2{margin:0 0 18px}
.concept-why p{color:var(--muted);font-size:1.08rem;margin:0 0 8px}

/* Carte "définition" façon dictionnaire : donne du relief à l'étymologie
   (Donkey = l'âne) au lieu d'un simple paragraphe centré de plus. */
.why-def{margin:34px auto 0;max-width:420px;background:var(--off);border:1px solid var(--line);border-radius:18px;padding:26px 30px;text-align:left}
.why-def-word{display:block;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-800);font-size:1.6rem;margin-bottom:4px}
.why-def-type{display:block;font-family:'Poppins',sans-serif;font-style:italic;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.why-def-text{display:block;color:var(--ink);font-size:.98rem;line-height:1.6}

/* ==========================================================================
   NOUVELLES SECTIONS ÉDITORIALES — brief SEO "Le concept" : Greek Fine
   Food (texte seul), Les saveurs (mise en scène visuelle courte, 4
   familles), Les valeurs (3 blocs texte), Le partage (texte seul),
   Loukoumades origine + Halle Nova (mini splits photo/texte courts),
   Donkey aujourd'hui (bandeau bleu de clôture). Remplace l'ancienne
   section "Le concept" (.concept-offer, cartes compose-card + bar à
   loukoumades) : ce contenu commercial détaillé fait désormais doublon
   avec /la-carte/, largement enrichie depuis — cette page redevient
   éditoriale plutôt que transactionnelle, comme demandé.
   ========================================================================== */

/* Titrage cohérent avec le reste du site pour tous les H2 "nus" de ces
   nouvelles sections (hors .sec-head, qui a déjà sa propre règle de taille
   dans donkey-base.css). */
.story2-text h2,
.concept-vision-inner h2,
.concept-flavors-intro h2,
.concept-values h2,
.concept-share-inner h2,
.concept-today-inner h2,
.mini-split-text h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:0 0 20px}

/* Greek Fine Food — texte seul, sobre, sur fond blanc */
.concept-vision{padding:100px 0}
.concept-vision-inner{max-width:680px;margin:0 auto;text-align:center}
.concept-vision-inner p{color:var(--muted);font-size:1.08rem;line-height:1.7;margin:0 0 16px;text-align:left}
.concept-vision-inner p:last-of-type{margin-bottom:0}

/* Les saveurs — 4 familles avec une petite photo chacune (mise en scène
   visuelle demandée), sans détailler les produits (pages dédiées). */
.concept-flavors{background:var(--off);padding:100px 0}
.concept-flavors-intro{max-width:680px;margin:0 auto 50px;text-align:center}
.concept-flavors-intro p{color:var(--muted);font-size:1.05rem;line-height:1.7;margin:0 0 12px}
.flavor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1000px;margin:0 auto 46px}
.flavor-card{text-align:center}
.flavor-photo{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 20px 36px -22px rgba(1,36,95,.4)}
.flavor-photo img{width:100%;height:100%;object-fit:cover;display:block}
.flavor-card h3{font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;color:var(--blue-800);font-size:1.15rem;font-weight:400;letter-spacing:.02em;margin-bottom:6px}
.flavor-card p{color:var(--muted);font-size:.88rem;line-height:1.5;margin:0}
.flavor-card a{display:inline-block;margin-top:8px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;color:var(--blue-800)}
/* Pas encore de photo dédiée "frites grecques" seules dans la banque
   d'images : on recadre la table dressée existante sur le coin où elles
   apparaissent plutôt que d'inventer un visuel. */
.flavor-photo-frites img{object-position:10% 18%}
.concept-flavors-cta{text-align:center}

/* Les valeurs — trois colonnes texte, pas de cartes : sobre, mémorable */
.concept-values{padding:100px 0;text-align:center}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:900px;margin:50px auto 0;text-align:left}
.value-ic{width:42px;height:42px;color:var(--blue-800);margin-bottom:16px}
.value-card h3{font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;color:var(--blue-800);font-size:1.3rem;font-weight:400;letter-spacing:.02em;margin-bottom:10px}
.value-card p{color:var(--muted);font-size:.98rem;line-height:1.6;margin:0}

/* Le partage — texte seul, fond off-white pour respirer entre deux
   sections blanches */
.concept-share{background:var(--off);padding:100px 0;text-align:center}
.concept-share-inner{max-width:640px;margin:0 auto}
.concept-share-inner p{color:var(--muted);font-size:1.05rem;line-height:1.7;margin:0 0 16px}

/* Loukoumades origine + Halle Nova — mini splits photo/texte courts,
   volontairement plus compacts que .story2-grid (sections brèves par
   nature, pas un récit complet). .is-reverse inverse photo/texte pour
   alterner la composition d'une section à l'autre. */
.concept-mini-split{padding:90px 0}
.mini-split-grid{display:grid;grid-template-columns:.8fr 1fr;gap:50px;align-items:center}
.mini-split-photo{border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 22px 40px -22px rgba(1,36,95,.4)}
.mini-split-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mini-split-text p{color:var(--muted);font-size:1.03rem;line-height:1.65;margin:0 0 20px}
.concept-mini-split.is-reverse .mini-split-grid{grid-template-columns:1fr .8fr}
.concept-mini-split.is-reverse .mini-split-photo{order:2}

/* Donkey aujourd'hui — bandeau bleu de clôture avant les marquees, ton
   affirmatif ("et ce n'est que le début") */
.concept-today{background:var(--blue-800);color:#fff;padding:110px 0;text-align:center}
.concept-today h2{color:#fff}
.concept-today-inner{max-width:680px;margin:0 auto}
.concept-today-inner p{color:rgba(255,255,255,.85);font-size:1.08rem;line-height:1.7;margin:0 0 16px}
.concept-today a{color:#fff;text-decoration:underline}

@media(max-width:900px){
  .flavor-grid{grid-template-columns:repeat(2,1fr);max-width:460px}
  .value-grid{grid-template-columns:1fr;max-width:420px;gap:34px}
  .mini-split-grid,
  .concept-mini-split.is-reverse .mini-split-grid{grid-template-columns:1fr;gap:32px}
  .concept-mini-split.is-reverse .mini-split-photo{order:0}
}
@media(max-width:560px){
  .flavor-grid{grid-template-columns:1fr;max-width:280px}
}

/* Ligne de ciel grecque : le fichier source est déjà détouré à sa bande
   utile (voir crop en amont), donc pas de object-fit:cover ici — une
   hauteur fixe + cover recadrait différemment selon la largeur de
   viewport (jamais la même tranche verticale) et pouvait couper une
   partie du dessin. On garde le ratio naturel de l'image à la place :
   toujours complète, quelle que soit la largeur d'écran. */
.greek-skyline-strip{width:100%;line-height:0;background:var(--blue-800)}
.greek-skyline-strip img{width:100%;height:auto;display:block}

/* ==========================================================================
   6. BANDEAUX MENU — reprend le composant .marquee-wrap/.marquee de la
   homepage (bandeau tourné, texte défilant en boucle) : un exemplaire bleu,
   un exemplaire blanc, avec les icônes du menu au lieu du logo Donkey.
   Fond bleu (plutôt que off-white) pour que le contour blanc du bandeau
   bleu ait sa raison d'être. overflow:hidden sur la section uniquement
   pour contenir le débordement horizontal du bandeau (width:114%) — le
   padding vertical du wrap doit rester généreux, sinon la rotation du
   bandeau se fait rogner en haut/bas par ce même overflow:hidden.
   Les deux pistes défilent en sens opposé et déphasées, pour ne jamais
   avoir le même mot à la même position sur les deux bandeaux. --- */
.menu-ribbons{background:var(--blue-800);padding:70px 0;overflow:hidden}
.menu-ribbons .marquee-wrap{overflow:hidden;background:transparent;padding:42px 0}
.menu-ribbons .marquee{padding:9px 0}
.menu-ribbons .marquee-track{font-size:clamp(1.25rem,3vw,2rem)}
/* Bleu plus foncé que le fond de section (--blue-900 vs --blue-800) : sans
   ça, le bandeau "bleu" se fond dans le fond bleu et ne reste visible que
   via son contour blanc — plus de ruban distinct. */
.marquee.ribbon-blue{background:var(--blue-900);border:3px solid #fff}
.marquee.marquee-white{background:#fff;color:var(--blue-800);border:3px solid var(--blue-800);transform:rotate(2.5deg)}
.marquee-track-reverse{animation-name:scroll-reverse;animation-delay:-9s}
@keyframes scroll-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq-group{display:inline-flex;align-items:center;gap:30px;padding-right:30px}
.mq-item{display:inline-flex;align-items:center;gap:12px}
.mq-icon{width:32px;height:32px;flex:none}

/* ==========================================================================
   6bis. SUIVEZ-NOUS @DONKEY — bandeau Instagram façon collage : photos de
   hauteurs variées (tall/medium/short) centrées sur une même ligne, ce qui
   crée le silhouette en dents de scie plutôt qu'une grille uniforme.
   Défilement continu, réutilise @keyframes scroll (donkey-base.css) —
   pause au survol pour laisser le temps de regarder.
   ========================================================================== */
.social-feed{position:relative;background:#fff;padding:90px 0 0;overflow:hidden}
.social-feed-intro{max-width:520px;margin:0 auto 10px;text-align:center;color:var(--muted);font-size:1.05rem}
.social-links{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 40px}
.social-links-label{font-family:'Poppins',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
/* .socials est défini dans donkey-base.css pour un fond sombre (footer) ;
   ici la section est blanche, on adapte les couleurs de contact. */
.social-feed .socials{margin:0}
.social-feed .socials a{background:var(--blue-050);color:var(--blue-800)}
.social-feed .socials a:hover{background:var(--blue-800);color:#fff}
/* Baby Stingrays (h2) n'a pas de glyphe "@" — même défaut que les chiffres
   (cf. le "2026" de la timeline). On isole "@donkey" en Poppins. */
.social-at{font-family:'Poppins',sans-serif;font-weight:800;text-transform:uppercase}
.social-strip-wrap{overflow:hidden;padding:26px 0 60px}
.social-track{display:inline-flex;align-items:center;gap:22px;animation:scroll 46s linear infinite}
.social-strip-wrap:hover .social-track{animation-play-state:paused}
.social-photo{flex:none;width:220px;aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 20px 36px -20px rgba(1,36,95,.35);transition:transform .3s ease}
.social-photo img{width:100%;height:100%;object-fit:cover;display:block}
.social-photo:nth-child(odd){transform:rotate(-4deg)}
.social-photo:nth-child(even){transform:rotate(4deg)}
.social-photo:hover{transform:rotate(0deg) scale(1.04)}

/* ==========================================================================
   7. CTA FINAL — photographie food pleine largeur + conversion
   ========================================================================== */
.concept-cta-final{position:relative;overflow:hidden;padding:150px 24px;color:#fff}
.concept-final-bg{position:absolute;inset:0;z-index:0}
.concept-final-bg img{width:100%;height:100%;object-fit:cover}
.concept-final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,36,95,.6),rgba(1,36,95,.9))}
.concept-final-inner{position:relative;z-index:1;text-align:center}
.concept-final-title{margin:0 0 30px}
.concept-final-title .line{display:block;font-size:clamp(2.4rem,6vw,4rem);color:#fff}
.concept-cta-final .btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.concept-cta-final .btn:hover{transform:translateY(-3px) scale(1.035);box-shadow:0 16px 30px -12px rgba(1,36,95,.5)}
.concept-cta-final .btn:active{transform:translateY(0) scale(.97)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .story2-grid{grid-template-columns:1fr;gap:40px}
  .story2-callout{max-width:70%}
  .timeline-card{max-width:320px}
  .timeline-step.is-wide .timeline-card{max-width:340px}
}
@media(max-width:760px){
  .story2-callout{right:2px;bottom:-16px;padding:12px 15px;max-width:64%}
  .declic-hero{max-width:none}
  .concept-journey{padding:70px 0 70px}
  .journey-intro{margin-bottom:44px}
  .timeline-line{left:16px;transform:none}
  .timeline-step,
  .timeline-step.is-final{justify-content:flex-start!important;padding-left:38px}
  .timeline-marker{left:16px}
  .timeline-card,
  .timeline-step.is-wide .timeline-card,
  .timeline-step.is-final .timeline-card{max-width:none;margin:0!important}
  .timeline-date-big{font-size:clamp(2.6rem,16vw,3.6rem)}
  .concept-vision,.concept-flavors,.concept-values,.concept-share,.concept-mini-split{padding:70px 0}
  .concept-today{padding:80px 0}
  .mq-icon{width:30px;height:30px}
  .social-feed{padding:70px 0 0}
  .social-feed-intro{margin-bottom:34px}
  .social-photo{width:150px}
  .concept-cta-final{padding:110px 20px}
  .why-stamp{width:120px;height:120px}
  .why-stamp-photo{width:74px;height:74px}
  .why-def{padding:20px 22px}
}