/* AVA IMAGE — page Réalisation immersive
   Feuille isolée : chargée après style.css, elle ne modifie aucune autre page. */

/* =========================================================
   AVA IMAGE — RÉALISATION / MISE EN PAGE IMMERSIVE FULL WIDTH
   Page-scoped: ne modifie pas les autres pages du site.
   ========================================================= */
.realisation-page {
  --real-max: 1180px;
  --real-max-wide: 1360px;
  --real-orange: #ff6600;
  --real-blue: #e5f4f8;
  --real-soft: #f2f3f4;
  --real-dark: #222426;
  --real-text: #303236;
  --real-muted: #656a70;
  background: #f4f4f8 !important;
}

/* Neutralise le fond à bandes latérales uniquement sur cette page. */
@media (min-width: 1500px) {
  body.realisation-page {
    background: #f4f4f8 !important;
  }
}

.realisation-page main.real-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 60px 0 0 !important;
  text-align: left;
  background: transparent;
}

.realisation-page .real-inner {
  width: min(var(--real-max), calc(100% - 64px));
  margin-inline: auto;
}
.realisation-page .real-inner-wide {
  width: min(var(--real-max-wide), calc(100% - 64px));
}

.realisation-page .real-breadcrumb {
  width: min(var(--real-max), calc(100% - 64px));
  margin: 0 auto;
  padding: 18px 0 16px;
  font-size: .92rem;
  color: #666;
}
.realisation-page .real-breadcrumb ol { display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; }
.realisation-page .real-breadcrumb li + li::before { content:"›"; margin-right:.55rem; opacity:.55; }
.realisation-page .real-breadcrumb a { color:inherit; text-decoration:none; }
.realisation-page .real-breadcrumb a:hover { color:var(--real-orange); }

.realisation-page .real-hero {
  position: relative;
  min-height: clamp(560px, 70vh, 760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.realisation-page .real-hero-bg {
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('imgs/tournage_ava-image.jpg');
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.015);
}
.realisation-page .real-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(13,17,20,.82) 0%, rgba(13,17,20,.66) 43%, rgba(13,17,20,.23) 72%, rgba(13,17,20,.08) 100%);
}
.realisation-page .real-hero-content { padding:76px 0 82px; }
.realisation-page .real-eyebrow,
.realisation-page .real-kicker {
  margin:0 0 12px;
  font-size:.82rem;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--real-orange);
}
.realisation-page .real-eyebrow { color:#fff; opacity:.9; }
.realisation-page .real-hero h1 {
  max-width:820px;
  margin:0;
  font-size:clamp(2.5rem, 5vw, 5.2rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
  color:#fff;
}
.realisation-page .real-hero-lead {
  max-width:680px;
  margin:24px 0 0;
  font-size:clamp(1.05rem, 1.5vw, 1.28rem);
  line-height:1.65;
  color:rgba(255,255,255,.94);
}
.realisation-page .real-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.realisation-page .real-hero .cta-button,
.realisation-page .real-final-cta .cta-button,
.realisation-page .real-center-action .cta-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.realisation-page .real-button-secondary,
.realisation-page .real-button-light {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border-radius:5px;
  text-decoration:none;
  font-weight:700;
  transition:.2s ease;
}
.realisation-page .real-button-secondary { border:1px solid rgba(255,255,255,.72); color:#fff; background:rgba(255,255,255,.08); }
.realisation-page .real-button-secondary:hover { background:#fff; color:#222; }

.realisation-page .real-strip { background:#fff; border-bottom:1px solid #e9eaeb; }
.realisation-page .real-pillars { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; }
.realisation-page .real-pillars article { position:relative; padding:38px 36px 40px; }
.realisation-page .real-pillars article + article { border-left:1px solid #e6e7e8; }
.realisation-page .real-number { display:block; margin-bottom:12px; color:var(--real-orange); font-weight:800; font-size:.84rem; letter-spacing:.12em; }
.realisation-page .real-pillars h2 { margin:0 0 8px; font-size:1.25rem; color:#26282b; }
.realisation-page .real-pillars p { margin:0; color:var(--real-muted); line-height:1.65; }

.realisation-page .real-band { width:100%; padding:86px 0; }
.realisation-page .real-band-white { background:#fff; }
.realisation-page .real-band-blue { background:var(--real-blue); }
.realisation-page .real-band-soft { background:var(--real-soft); }
.realisation-page .real-heading { max-width:780px; margin:0 auto 36px; text-align:center; }
.realisation-page .real-heading h2,
.realisation-page .real-gallery-banner h2,
.realisation-page .real-final-cta h2 {
  margin:0;
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  line-height:1.08;
  letter-spacing:-.025em;
  color:#222426;
  text-wrap:balance;
}
.realisation-page .real-heading > p:last-child { margin:16px auto 0; color:var(--real-muted); font-size:1.05rem; line-height:1.75; }

.realisation-page .real-offers-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.realisation-page .real-offers-grid article {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);
  border-radius:14px;
  padding:26px 28px;
  box-shadow:0 10px 30px rgba(20,40,50,.055);
}
.realisation-page .real-offers-grid h3 { margin:0 0 8px; font-size:1.22rem; color:#25282b; }
.realisation-page .real-offers-grid p { margin:0; color:#596168; line-height:1.68; }
.realisation-page .real-center-action { margin:30px 0 0; text-align:center; }

.realisation-page .real-process { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; counter-reset:none; }
.realisation-page .real-process li {
  position:relative;
  list-style:none;
  padding:28px 22px 26px;
  border-top:3px solid #dfe2e4;
}
.realisation-page .real-process li::after {
  content:"";
  position:absolute;
  top:-3px; left:0;
  width:34%; height:3px;
  background:var(--real-orange);
}
.realisation-page .real-process li > span { display:block; margin-bottom:18px; font-size:2rem; line-height:1; font-weight:800; color:#c8cdd0; }
.realisation-page .real-process h3 { margin:0 0 7px; font-size:1.15rem; }
.realisation-page .real-process p { margin:0; color:var(--real-muted); line-height:1.65; }

.realisation-page .real-packages-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch; }
.realisation-page .real-package {
  position:relative;
  background:#fff;
  border:1px solid #e4e5e7;
  border-radius:15px;
  padding:28px 26px;
  box-shadow:0 8px 24px rgba(25,30,35,.04);
}
.realisation-page .real-package-featured { border-color:#ffb27e; box-shadow:0 12px 32px rgba(255,102,0,.09); }
.realisation-page .real-badge { display:inline-block; margin:-2px 0 12px !important; padding:5px 8px; border-radius:999px; background:#fff0e6; color:#c84f00 !important; font-size:.75rem !important; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.realisation-page .real-package h3 { margin:0 0 8px; font-size:1.2rem; }
.realisation-page .real-package .price { margin:8px 0; font-size:1.38rem; font-weight:800; color:var(--real-orange); }
.realisation-page .real-package .meta { margin:0 0 16px; color:var(--real-muted); line-height:1.6; }
.realisation-page .real-package ul { padding:16px 0 0; margin:0; border-top:1px solid #eceeef; }
.realisation-page .real-package li { position:relative; list-style:none; padding:5px 0 5px 20px; color:#4f5459; }
.realisation-page .real-package li::before { content:"✓"; position:absolute; left:0; color:var(--real-orange); font-weight:800; }
.realisation-page .real-deliverables { margin:22px auto 0; padding:18px 20px; background:#fff; border-left:4px solid var(--real-orange); border-radius:9px; color:#555b60; line-height:1.65; }

.realisation-page .real-projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.realisation-page .real-project-card { overflow:hidden; background:#f7f7f8; border-radius:13px; border:1px solid #e7e7e8; }
.realisation-page .real-video { aspect-ratio:16/9; background:#000; }
.realisation-page .real-video iframe { width:100%; height:100%; display:block; border:0; }
.realisation-page .real-project-copy { padding:18px 18px 20px; }
.realisation-page .real-project-copy h3 { margin:0 0 6px; font-size:1.12rem; }
.realisation-page .real-project-copy p { margin:0; color:var(--real-muted); }

.realisation-page .real-gallery-banner { position:relative; min-height:430px; display:flex; align-items:center; isolation:isolate; overflow:hidden; color:#fff; }
.realisation-page .real-gallery-banner-bg { position:absolute; inset:0; z-index:-2; background:url('imgs/AdobeStock_realisation2.jpg') center/cover no-repeat; transform:scale(1.01); }
.realisation-page .real-gallery-banner::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(16,19,22,.83), rgba(16,19,22,.54) 58%, rgba(16,19,22,.18)); }
.realisation-page .real-gallery-banner-content { padding:72px 0; }
.realisation-page .real-gallery-banner .real-kicker { color:#ffb079; }
.realisation-page .real-gallery-banner h2 { max-width:720px; color:#fff; margin-bottom:24px; }
.realisation-page .real-button-light { background:#fff; color:#25272a; }
.realisation-page .real-button-light:hover { background:var(--real-orange); color:#fff; }

.realisation-page .real-faq-wrap { max-width:900px; }
.realisation-page .real-faq details { margin:10px 0; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95); border-radius:10px; overflow:hidden; }
.realisation-page .real-faq summary { position:relative; cursor:pointer; padding:17px 48px 17px 18px; font-weight:800; list-style:none; color:#272a2d; }
.realisation-page .real-faq summary::-webkit-details-marker { display:none; }
.realisation-page .real-faq summary::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--real-orange); font-size:1.4rem; }
.realisation-page .real-faq details[open] summary::after { content:"–"; }
.realisation-page .real-faq details > div { padding:0 18px 18px; color:#596168; line-height:1.65; }

.realisation-page .real-final-cta { width:100%; padding:78px 0 84px; background:#27292b; color:#fff; text-align:center; }
.realisation-page .real-final-cta p { margin:0 0 9px; color:rgba(255,255,255,.75); font-size:1.03rem; }
.realisation-page .real-final-cta h2 { max-width:760px; margin:0 auto 25px; color:#fff; }

@media (max-width: 1000px) {
  .realisation-page .real-pillars { grid-template-columns:1fr; }
  .realisation-page .real-pillars article + article { border-left:0; border-top:1px solid #e6e7e8; }
  .realisation-page .real-process { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .realisation-page .real-packages-grid,
  .realisation-page .real-projects-grid { grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
}

@media (max-width: 700px) {
  .realisation-page main.real-main { padding-top:54px !important; }
  .realisation-page .real-inner,
  .realisation-page .real-inner-wide,
  .realisation-page .real-breadcrumb { width:calc(100% - 32px); }
  .realisation-page .real-breadcrumb { padding:12px 0; font-size:.82rem; }
  .realisation-page .real-hero { min-height:610px; align-items:flex-end; }
  .realisation-page .real-hero-bg { background-position:61% center; }
  .realisation-page .real-hero::after { background:linear-gradient(0deg, rgba(12,15,18,.91) 0%, rgba(12,15,18,.69) 58%, rgba(12,15,18,.28) 100%); }
  .realisation-page .real-hero-content { padding:58px 0 52px; }
  .realisation-page .real-hero h1 { font-size:clamp(2.25rem, 11vw, 3.5rem); }
  .realisation-page .real-hero-actions { flex-direction:column; align-items:stretch; }
  .realisation-page .real-button-secondary { text-align:center; }
  .realisation-page .real-pillars article { padding:28px 6px; }
  .realisation-page .real-band { padding:60px 0; }
  .realisation-page .real-heading { margin-bottom:28px; }
  .realisation-page .real-offers-grid,
  .realisation-page .real-process { grid-template-columns:1fr; }
  .realisation-page .real-offers-grid article { padding:22px 20px; }
  .realisation-page .real-process { gap:6px; }
  .realisation-page .real-gallery-banner { min-height:400px; }
  .realisation-page .real-gallery-banner::after { background:rgba(16,19,22,.65); }
  .realisation-page .real-gallery-banner-content { padding:62px 0; }
  .realisation-page .real-final-cta { padding:62px 0 68px; }
}

/* =========================================================
   COHÉRENCE TABLETTE / MOBILE — PAGE RÉALISATION
   Corrige le centrage global hérité de style.css :
   cartes courtes centrées, contenus de lecture à gauche.
   ========================================================= */
@media (max-width: 1200px) {

  /* Hero : conserver la composition éditoriale alignée à gauche */
  .realisation-page .real-hero-content,
  .realisation-page .real-hero h1,
  .realisation-page .real-eyebrow,
  .realisation-page .real-hero-lead {
    text-align: left !important;
  }

  /* Cartes "Ce que je propose" */
  .realisation-page .real-offers-grid article,
  .realisation-page .real-offers-grid h3,
  .realisation-page .real-offers-grid p {
    text-align: center !important;
  }

  /* Processus : lecture séquentielle, donc alignement à gauche */
  .realisation-page .real-process li,
  .realisation-page .real-process h3,
  .realisation-page .real-process p {
    text-align: left !important;
  }

  /* Tarifs : titre/prix centrés, liste de détails à gauche */
  .realisation-page .real-package h3,
  .realisation-page .real-package .price,
  .realisation-page .real-package .meta,
  .realisation-page .real-package .real-badge {
    text-align: center !important;
  }

  .realisation-page .real-package ul,
  .realisation-page .real-package li,
  .realisation-page .real-deliverables {
    text-align: left !important;
  }

  /* Cartes projets */
  .realisation-page .real-project-copy,
  .realisation-page .real-project-copy h3,
  .realisation-page .real-project-copy p {
    text-align: center !important;
  }

  /* FAQ : questions/réponses plus faciles à lire à gauche */
  .realisation-page .real-faq,
  .realisation-page .real-faq summary,
  .realisation-page .real-faq details > div {
    text-align: left !important;
  }

  /* Bannière galerie : composition visuelle à gauche */
  .realisation-page .real-gallery-banner-content,
  .realisation-page .real-gallery-banner h2 {
    text-align: left !important;
  }
}