/* ==========================================================
   COLOMBO — DIGITAL PUBLIC V2.3.0
   ========================================================== */

.digital-page{
  background:#fff;
  overflow:hidden;
}

.digital-container{
  width:min(1220px,88vw);
  margin:0 auto;
}


/* HERO ---------------------------------------------------- */

.digital-hero{
  position:relative;
  padding:92px 0 110px;
  background:
    radial-gradient(
      circle at 87% 16%,
      rgba(188,150,98,.11),
      transparent 31%
    ),
    #fff;
}

.digital-hero-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1.06fr)
    minmax(410px,.94fr);
  gap:75px;
  align-items:center;
}

.digital-hero-copy{
  max-width:720px;
}

.digital-hero h1{
  margin:0;
  max-width:760px;
  font-size:clamp(50px,5.5vw,82px);
  line-height:1.01;
  letter-spacing:-.045em;
  color:#082b49;
}

.digital-lead{
  margin:30px 0 0;
  max-width:670px;
  font-size:20px;
  line-height:1.65;
  color:#526776;
}

.digital-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:36px;
}


/* DEMO INTERFACE ------------------------------------------ */

.digital-system{
  position:relative;
  min-height:480px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.digital-system::before{
  content:"";
  position:absolute;
  inset:32px 15px 25px 50px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(8,43,73,.09),
      rgba(8,43,73,0) 68%
    );
}

.digital-browser{
  position:relative;
  z-index:2;
  width:100%;
  max-width:550px;
  overflow:hidden;
  border:1px solid #dbe3e8;
  border-radius:18px;
  background:#fff;
  box-shadow:
    0 35px 80px rgba(8,43,73,.15);
  transform:rotate(1.2deg);
}

.digital-browser-bar{
  height:51px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 15px;
  border-bottom:1px solid #e5ebef;
  background:#f8fafb;
}

.digital-browser-bar > span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c9d4dc;
}

.digital-browser-bar > div{
  flex:1;
  margin-left:11px;
  border-radius:6px;
  background:#fff;
  border:1px solid #e0e7eb;
  padding:6px 11px;
  font-size:11px;
  color:#8a9ba7;
}

.digital-browser-body{
  display:grid;
  grid-template-columns:68px 1fr;
  min-height:340px;
}

.digital-browser-sidebar{
  padding:21px 14px;
  background:#082b49;
}

.digital-browser-logo{
  width:36px;
  height:36px;
  margin:0 auto 31px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#bd9662;
  color:#fff;
  font-weight:800;
}

.digital-browser-sidebar > span{
  display:block;
  width:31px;
  height:5px;
  margin:0 auto 18px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
}

.digital-browser-content{
  padding:32px 27px;
}

.digital-browser-title{
  margin-bottom:24px;
  color:#082b49;
  font-size:19px;
  font-weight:700;
}

.digital-browser-modules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.digital-browser-modules div{
  min-height:82px;
  padding:13px;
  border:1px solid #e1e8ec;
  border-radius:9px;
  background:#fafcfd;
}

.digital-browser-modules strong,
.digital-browser-modules span{
  display:block;
}

.digital-browser-modules strong{
  color:#082b49;
  font-size:11px;
}

.digital-browser-modules span{
  margin-top:7px;
  color:#8799a6;
  font-size:9px;
}

.digital-browser-chart{
  height:135px;
  margin-top:20px;
  display:flex;
  align-items:flex-end;
  gap:13px;
  padding:16px 19px;
  border-radius:9px;
  background:#f4f7f9;
}

.digital-browser-chart span{
  flex:1;
  border-radius:4px 4px 0 0;
  background:#173f5e;
}

.digital-browser-chart span:nth-child(1){
  height:37%;
}

.digital-browser-chart span:nth-child(2){
  height:64%;
}

.digital-browser-chart span:nth-child(3){
  height:48%;
}

.digital-browser-chart span:nth-child(4){
  height:83%;
}

.digital-browser-chart span:nth-child(5){
  height:70%;
}

.digital-floating-card{
  position:absolute;
  z-index:4;
  right:-20px;
  bottom:25px;
  min-width:205px;
  padding:18px 21px;
  border-radius:12px;
  background:#bd9662;
  box-shadow:0 15px 35px rgba(8,43,73,.15);
}

.digital-floating-card span,
.digital-floating-card strong{
  display:block;
}

.digital-floating-card span{
  margin-bottom:4px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:#fff;
}

.digital-floating-card strong{
  color:#fff;
  font-size:16px;
}


/* INTRO --------------------------------------------------- */

.digital-intro-section{
  padding:100px 0;
  background:#082b49;
}

.digital-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

.digital-intro-section h2{
  margin:0;
  max-width:590px;
  color:#fff;
  font-size:clamp(37px,4vw,59px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.digital-rich-copy{
  max-width:590px;
  color:#dce6ed;
  font-size:18px;
  line-height:1.75;
}

.digital-rich-copy p:first-child{
  margin-top:0;
}

.digital-rich-copy p:last-child{
  margin-bottom:0;
}


/* GENERAL ------------------------------------------------- */

.digital-section{
  padding:105px 0;
}

.digital-section-soft{
  background:#f6f8f9;
}

.digital-section-heading{
  max-width:790px;
  margin-bottom:50px;
}

.digital-section-heading h2,
.digital-work-heading h2,
.digital-integration-grid h2{
  margin:0;
  color:#082b49;
  font-size:clamp(38px,4vw,59px);
  line-height:1.06;
  letter-spacing:-.035em;
}

.digital-section-heading > p{
  max-width:680px;
  margin-top:22px;
  color:#667b89;
  font-size:18px;
  line-height:1.7;
}


/* SERVICES ------------------------------------------------ */

.digital-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.digital-service{
  min-height:315px;
  padding:30px;
  border:1px solid #dfe6ea;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  background:#fff;
}

.digital-service-featured{
  min-height:400px;
  grid-column:span 1;
}

.digital-service-number{
  display:block;
  margin-bottom:35px;
  color:#bd9662;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}

.digital-service h3{
  margin:0 0 14px;
  color:#082b49;
  font-size:23px;
  line-height:1.15;
}

.digital-service p{
  margin:0;
  color:#687d8b;
  line-height:1.65;
}

.digital-service ul{
  margin:auto 0 0;
  padding:22px 0 0;
  list-style:none;
  border-top:1px solid #e5ebef;
}

.digital-service li{
  position:relative;
  padding:4px 0 4px 18px;
  color:#264b67;
  font-size:14px;
}

.digital-service li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bd9662;
}


/* REALISATIONS -------------------------------------------- */

.digital-work-section{
  background:#fff;
}

.digital-work-heading{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:end;
  gap:60px;
  margin-bottom:58px;
}

.digital-work-heading > p{
  margin:0;
  color:#667b89;
  font-size:17px;
  line-height:1.7;
}

.digital-project{
  display:grid;
  grid-template-columns:70px 1.2fr .8fr;
  gap:36px;
  padding:52px 46px;
  margin-top:18px;
  border:1px solid #dce5ea;
  border-radius:15px;
  background:#f8fafb;
}

.digital-project-dark{
  background:#082b49;
  border-color:#082b49;
  color:#fff;
}

.digital-project-number{
  color:#bd9662;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
}

.digital-project-meta,
.digital-project-label{
  display:block;
  color:#bd9662;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}

.digital-project h3{
  margin:11px 0 13px;
  color:#082b49;
  font-size:clamp(33px,3vw,46px);
  letter-spacing:-.03em;
}

.digital-project-dark h3{
  color:#fff;
}

.digital-project-subtitle{
  max-width:600px;
  margin:0;
  color:#607785;
  font-size:17px;
  line-height:1.65;
}

.digital-project-dark .digital-project-subtitle{
  color:#d4e0e7;
}

.digital-project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:25px;
}

.digital-project-tags span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #d7e0e5;
  background:#fff;
  color:#264b67;
  font-size:12px;
  font-weight:600;
}

.digital-project-dark .digital-project-tags span{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);
  color:#fff;
}

.digital-project-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:28px;
  color:#082b49;
  font-weight:700;
}

.digital-project-dark .digital-project-link{
  color:#fff;
}

.digital-project-link span{
  color:#bd9662;
}

.digital-project-features{
  padding-left:32px;
  border-left:1px solid #dce5ea;
}

.digital-project-dark .digital-project-features{
  border-color:rgba(255,255,255,.16);
}

.digital-project-features ul{
  margin:17px 0 0;
  padding:0;
  list-style:none;
}

.digital-project-features li{
  padding:9px 0;
  border-bottom:1px solid #e2e8ec;
  color:#385b73;
  font-size:14px;
}

.digital-project-dark .digital-project-features li{
  border-color:rgba(255,255,255,.13);
  color:#e2ebf0;
}


/* INTEGRATIONS -------------------------------------------- */

.digital-integration-section{
  background:#f6f8f9;
}

.digital-integration-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
}

.digital-integration-list{
  border-top:1px solid #dbe4e8;
}

.digital-integration-list div{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid #dbe4e8;
}

.digital-integration-list strong{
  color:#082b49;
}

.digital-integration-list span{
  color:#687d8b;
}


/* METHODE ------------------------------------------------- */

.digital-method-section{
  background:#fff;
}

.digital-method-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.digital-method-grid article{
  min-height:245px;
  padding:28px;
  border-top:2px solid #bd9662;
  background:#f7f9fa;
}

.digital-method-grid article > span{
  display:block;
  margin-bottom:36px;
  color:#bd9662;
  font-size:12px;
  font-weight:800;
}

.digital-method-grid h3{
  margin:0 0 10px;
  color:#082b49;
  font-size:21px;
}

.digital-method-grid p{
  margin:0;
  color:#687d8b;
  line-height:1.65;
}


/* CTA ----------------------------------------------------- */

.digital-final{
  padding:15px 0 105px;
  background:#fff;
}

.digital-final-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:center;
  padding:58px 60px;
  border-radius:22px;
  background:#082b49;
}

.digital-final h2{
  max-width:700px;
  margin:0;
  color:#fff;
  font-size:clamp(36px,4vw,56px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.digital-final p{
  max-width:650px;
  margin:19px 0 0;
  color:#d6e1e8;
  font-size:17px;
  line-height:1.65;
}

.digital-final-actions{
  min-width:230px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.digital-final-primary,
.digital-final-secondary{
  padding:13px 19px;
  border-radius:8px;
  text-align:center;
  font-weight:700;
  text-decoration:none;
}

.digital-final-primary{
  background:#bd9662;
  color:#fff;
}

.digital-final-secondary{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}


/* RESPONSIVE ---------------------------------------------- */

@media(max-width:1050px){

  .digital-hero-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .digital-system{
    width:min(650px,100%);
    margin:0 auto;
  }

  .digital-intro-grid,
  .digital-integration-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .digital-services-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .digital-project{
    grid-template-columns:55px 1fr;
  }

  .digital-project-features{
    grid-column:2;
    padding:24px 0 0;
    border-left:0;
    border-top:1px solid #dce5ea;
  }

  .digital-project-dark .digital-project-features{
    border-top-color:rgba(255,255,255,.16);
  }

  .digital-method-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .digital-final-card{
    grid-template-columns:1fr;
  }

  .digital-final-actions{
    width:min(100%,340px);
  }

}


@media(max-width:720px){

  .digital-container{
    width:min(100% - 32px,1220px);
  }

  .digital-hero{
    padding:60px 0 72px;
  }

  .digital-hero h1{
    font-size:clamp(42px,13vw,60px);
  }

  .digital-lead{
    font-size:18px;
  }

  .digital-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .digital-hero-actions .btn{
    width:100%;
  }

  .digital-system{
    min-height:360px;
  }

  .digital-browser{
    transform:none;
  }

  .digital-browser-body{
    grid-template-columns:51px 1fr;
    min-height:280px;
  }

  .digital-browser-content{
    padding:24px 16px;
  }

  .digital-browser-modules{
    grid-template-columns:1fr;
  }

  .digital-browser-modules div:nth-child(3){
    display:none;
  }

  .digital-browser-chart{
    height:105px;
  }

  .digital-floating-card{
    right:8px;
    bottom:-5px;
  }

  .digital-intro-section,
  .digital-section{
    padding:75px 0;
  }

  .digital-services-grid{
    grid-template-columns:1fr;
  }

  .digital-service,
  .digital-service-featured{
    min-height:0;
  }

  .digital-work-heading{
    grid-template-columns:1fr;
    gap:25px;
  }

  .digital-project{
    grid-template-columns:1fr;
    gap:18px;
    padding:32px 25px;
  }

  .digital-project-features{
    grid-column:auto;
  }

  .digital-method-grid{
    grid-template-columns:1fr;
  }

  .digital-method-grid article{
    min-height:0;
  }

  .digital-integration-list div{
    grid-template-columns:110px 1fr;
  }

  .digital-final{
    padding-bottom:75px;
  }

  .digital-final-card{
    gap:34px;
    padding:38px 26px;
  }

}


/* ==========================================================
   DIGITAL V2.3.1.1
   IDENTITE COLOMBO : BLANC + BLEU
   ========================================================== */

.digital-page,
.digital-hero,
.digital-work-section,
.digital-method-section,
.digital-final{
  background:#ffffff !important;
}

.digital-hero{
  background:#ffffff !important;
}

.digital-section-soft,
.digital-integration-section{
  background:#f5f9fc !important;
}

.digital-page .eyebrow{
  color:#176c9c !important;
}

.digital-intro-section{
  background:#082b49 !important;
}

.digital-intro-section .eyebrow,
.digital-final .eyebrow{
  color:#94c8e2 !important;
}


/* BOUTONS ------------------------------------------------- */

.digital-page .btn-outline{
  border-color:#176c9c !important;
  background:#fff !important;
  color:#082b49 !important;
}

.digital-page .btn-outline:hover{
  background:#eef6fa !important;
}


/* HERO ---------------------------------------------------- */

.digital-hero-grid{
  grid-template-columns:
    minmax(0,.95fr)
    minmax(470px,1.05fr) !important;
  gap:62px !important;
}

.digital-hero-showcase{
  position:relative;
  min-height:505px;
}

.digital-showcase-window{
  position:absolute;
  display:block;
  overflow:hidden;
  border:1px solid #cfdee8;
  border-radius:12px;
  background:#fff;
  box-shadow:
    0 22px 55px rgba(8,43,73,.13);
  text-decoration:none;
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.digital-showcase-window:hover{
  transform:translateY(-4px);
  box-shadow:
    0 28px 65px rgba(8,43,73,.18);
}

.digital-showcase-window img{
  display:block;
  width:100%;
  height:auto;
}

.digital-showcase-main{
  z-index:3;
  width:77%;
  right:0;
  top:74px;
}

.digital-showcase-zouti{
  z-index:2;
  width:51%;
  left:0;
  top:4px;
}

.digital-showcase-lgf{
  z-index:4;
  width:53%;
  left:12px;
  bottom:0;
}

.digital-window-bar{
  height:30px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border-bottom:1px solid #dbe6ed;
  background:#fff;
}

.digital-window-bar i{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b9ccd8;
}

.digital-window-bar b{
  min-width:0;
  margin-left:7px;
  overflow:hidden;
  color:#647f91;
  font-size:9px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* SERVICES ------------------------------------------------ */

.digital-service{
  background:#fff !important;
  border-color:#d4e2eb !important;
}

.digital-service-number{
  color:#176c9c !important;
}

.digital-service li::before{
  background:#176c9c !important;
}


/* REALISATIONS -------------------------------------------- */

.digital-work-heading{
  margin-bottom:70px !important;
}

.digital-case{
  display:grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(330px,.75fr);
  gap:65px;
  align-items:center;
  padding:65px 0;
  border-top:1px solid #d6e3eb;
}

.digital-case:last-child{
  border-bottom:1px solid #d6e3eb;
}

.digital-case-reverse .digital-case-visual{
  order:2;
}

.digital-case-reverse .digital-case-copy{
  order:1;
}

.digital-case-visual{
  min-width:0;
}

.digital-real-browser{
  overflow:hidden;
  border:1px solid #cadbe6;
  border-radius:13px;
  background:#fff;
  box-shadow:
    0 20px 55px rgba(8,43,73,.10);
}

.digital-real-browser-bar{
  height:38px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 13px;
  border-bottom:1px solid #dbe6ed;
  background:#fff;
}

.digital-real-browser-bar i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#bdd0dc;
}

.digital-real-browser-bar span{
  min-width:0;
  margin-left:8px;
  overflow:hidden;
  color:#6c8291;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.digital-real-browser img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.digital-case-number{
  display:block;
  margin-bottom:13px;
  color:#176c9c;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
}

.digital-case h3{
  margin:0 0 17px;
  color:#082b49;
  font-size:clamp(35px,3.4vw,52px);
  line-height:1;
  letter-spacing:-.035em;
}

.digital-case-lead{
  margin:0;
  color:#526b7b;
  font-size:17px;
  line-height:1.68;
}

.digital-case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}

.digital-case-tags span{
  padding:6px 9px;
  border:1px solid #c9dce7;
  border-radius:999px;
  background:#fff;
  color:#174565;
  font-size:11px;
  font-weight:650;
}

.digital-case ul{
  margin:23px 0 0;
  padding:18px 0 0;
  border-top:1px solid #dbe6ed;
  list-style:none;
}

.digital-case li{
  position:relative;
  padding:5px 0 5px 17px;
  color:#31566f;
  font-size:14px;
}

.digital-case li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#176c9c;
}

.digital-case-link{
  display:inline-flex;
  margin-top:25px;
  padding-bottom:3px;
  border-bottom:1px solid #176c9c;
  color:#082b49;
  font-weight:750;
  text-decoration:none;
}


/* METHODE ------------------------------------------------- */

.digital-method-grid article{
  background:#fff !important;
  border:1px solid #d5e3ec !important;
  border-top:3px solid #176c9c !important;
}

.digital-method-grid article > span{
  color:#176c9c !important;
}


/* CTA ----------------------------------------------------- */

.digital-final-card{
  background:#082b49 !important;
}

.digital-final-primary{
  background:#fff !important;
  color:#082b49 !important;
}

.digital-final-primary:hover{
  background:#eef6fa !important;
}


/* TABLETTE ------------------------------------------------ */

@media(max-width:1050px){

  .digital-hero-grid{
    grid-template-columns:1fr !important;
  }

  .digital-hero-showcase{
    width:min(720px,100%);
    min-height:500px;
    margin:0 auto;
  }

  .digital-case,
  .digital-case-reverse{
    grid-template-columns:1fr;
    gap:34px;
  }

  .digital-case-reverse .digital-case-visual,
  .digital-case-reverse .digital-case-copy{
    order:initial;
  }

}


/* MOBILE -------------------------------------------------- */

@media(max-width:720px){

  .digital-hero-showcase{
    min-height:350px;
    margin-top:20px;
  }

  .digital-showcase-main{
    width:83%;
    top:67px;
  }

  .digital-showcase-zouti{
    width:55%;
  }

  .digital-showcase-lgf{
    width:57%;
  }

  .digital-window-bar{
    height:24px;
  }

  .digital-case{
    padding:45px 0;
  }

  .digital-case h3{
    font-size:36px;
  }

  .digital-real-browser-bar{
    height:31px;
  }

}


/* ==========================================================
   DIGITAL V2.3.1.2
   BLEU CLAIR COLOMBO
   ========================================================== */

/*
   Deux sections de respiration :
   - Ce que nous construisons
   - Ecosystème
*/

.digital-section-soft,
.digital-integration-section{
  background:#EAF4FA !important;
}


/* Les cartes restent franchement blanches */

.digital-section-soft .digital-service{
  background:#FFFFFF !important;
}


/* Lignes de l'écosystème légèrement renforcées */

.digital-integration-list,
.digital-integration-list div{
  border-color:#C9DDE9 !important;
}


/* Contraste des textes secondaires */

.digital-section-soft .digital-section-heading > p,
.digital-integration-section .digital-integration-list span{
  color:#526F82;
}



/* ==========================================================
   V2.3.1.2.1 — BLEU CLAIR PLUS VISIBLE SUR DESKTOP
   ========================================================== */

@media (min-width:721px){

  .digital-section-soft,
  .digital-integration-section{
    background:#E1F0F8 !important;
  }

}


/* Mobile validé : on conserve la teinte actuelle */

@media (max-width:720px){

  .digital-section-soft,
  .digital-integration-section{
    background:#EAF4FA !important;
  }

}


/* ==========================================================
   COLOMBO DIGITAL V2.3.1.3
   FINITIONS VISUELLES
   Mobile déjà validé : pas de modification <= 720px
   ========================================================== */


/* ----------------------------------------------------------
   NOTRE APPROCHE
   Texte de droite plus présent sans concurrencer le titre
   ---------------------------------------------------------- */

@media (min-width:721px){

  .digital-intro-grid{
    gap:70px;
  }

  .digital-rich-copy{
    max-width:620px;
    font-size:19px;
    line-height:1.78;
  }

  .digital-rich-copy p + p{
    margin-top:22px;
  }

}


/* ----------------------------------------------------------
   COLONIAL CLUB
   Le projet inversé doit conserver une grande colonne image.
   Dans la version précédente, l'ordre inversé plaçait
   visuellement l'image dans la petite colonne.
   ---------------------------------------------------------- */

@media (min-width:1051px){

  .digital-case-reverse{
    grid-template-columns:
      minmax(330px,.75fr)
      minmax(0,1.25fr);
  }

  #colonial-club .digital-case-visual{
    width:100%;
  }

  #colonial-club .digital-real-browser{
    width:100%;
  }

}


/* ----------------------------------------------------------
   NOTRE METHODE
   Cartes moins hautes et section plus dynamique
   ---------------------------------------------------------- */

@media (min-width:721px){

  .digital-method-section{
    padding-top:82px;
    padding-bottom:82px;
  }

  .digital-method-section .digital-section-heading{
    margin-bottom:34px;
  }

  .digital-method-grid article{
    min-height:180px !important;
    padding:24px !important;
  }

  .digital-method-grid article > span{
    margin-bottom:24px !important;
  }

  .digital-method-grid h3{
    margin-bottom:8px;
  }

  .digital-method-grid p{
    line-height:1.58;
  }

}


/* ----------------------------------------------------------
   CTA FINAL
   Deux actions côte à côte sur véritable desktop
   ---------------------------------------------------------- */

@media (min-width:1000px){

  .digital-final-card{
    grid-template-columns:
      minmax(0,1fr)
      auto;
    gap:45px;
  }

  .digital-final-actions{
    min-width:390px !important;
    width:auto;
    flex-direction:row !important;
    align-items:stretch;
  }

  .digital-final-primary,
  .digital-final-secondary{
    min-width:185px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }

}


/* ----------------------------------------------------------
   TABLETTE
   On conserve les actions empilées avant 1000px
   ---------------------------------------------------------- */

@media (min-width:721px) and (max-width:999px){

  .digital-final-actions{
    width:min(100%,340px);
    flex-direction:column;
  }

}


/* ==========================================================
   COLOMBO DIGITAL V2.3.1.4
   FINITION FINALE
   ========================================================== */


/* ----------------------------------------------------------
   CARTES 03 A 06
   Même densité visuelle que les cartes principales
   ---------------------------------------------------------- */

.digital-service-final-list{
  margin:auto 0 0 !important;
  padding:22px 0 0 !important;
  border-top:1px solid #dbe6ed;
  list-style:none;
}

.digital-service-final-list li{
  position:relative;
  padding:4px 0 4px 18px;
  color:#264b67;
  font-size:14px;
}

.digital-service-final-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#176c9c;
}


/* ----------------------------------------------------------
   HERO
   Très légère augmentation des réalisations uniquement
   sur les écrans réellement larges.
   ---------------------------------------------------------- */

@media (min-width:1500px){

  .digital-hero-showcase{
    min-height:530px;
    transform:scale(1.055);
    transform-origin:center center;
  }

}


/* ----------------------------------------------------------
   MOBILE
   On conserve le rendu déjà validé.
   Les nouvelles listes suivent simplement la structure
   naturelle des cartes.
   ---------------------------------------------------------- */

@media (max-width:720px){

  .digital-service-final-list{
    margin-top:18px !important;
  }

}