/* =========================
   RESET / BASE
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 1.15;
    color: #333;
    background-color: #f9f9f9;
}

br
{
    clear:both;
}

/* =========================
   TYPOGRAPHIE
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.2;
}

p {
    margin-bottom: 1em;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* =========================
   LAYOUT
   ========================= */

.container {
    width: 90%;
    max-width: 1552px;
    margin: 0 auto;
    overflow:hidden;
}

header {
    background: #FFFFFF;
    padding: 1.5rem 0;
    overflow: auto;
    border-bottom: 1px solid #e2e4e9;
}

footer 
{
    background: #101828;
    color: #fff;
    padding: 6rem 0 1rem 0;
}

footer .slug
{
    font-size:1.1rem;
    line-height:1.6rem;
    font-weight:400;
    color:#CFCFCF;
}

footer .column-title
{
    font-size:1.2rem;
    font-weight:bold;
    margin-bottom:1rem;
}

footer .question
{
    font-size:1.2rem;
    line-height:1.7rem;
    font-weight:400;
    color:#CFCFCF;
}

footer a.button.contact
{
    font-size:1rem;
}

footer .site-map
{
    margin-top:1rem;
}

footer .site-map a
{
    font-size:1.2rem;
    line-height:1.7rem;
    font-weight:400;
    color:#CFCFCF;
}

#copyright
{
    padding-top:1%;
    color:#cfd1d4;
}

#copyright .container
{
    border-top:1px solid #404653;
    padding:1%;
    text-align:center;
}

main {
    padding: 2rem 0;
}

/* =========================
   BOUTONS
   ========================= */

button,
.btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    background: #0066cc;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

button:hover,
.btn:hover {
    background: #004999;
}

/* =========================
   FORMULAIRES
   ========================= */

input,
textarea,
select {
    width: 100%;
    padding: 0.6em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: 500;
}

/* =========================
   LISTES & IMAGES
   ========================= */

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================
   UTILITAIRES
   ========================= */
.center
{
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

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

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}


a {
    text-decoration: none;
}

.clear
{
    clear:both;
}

.company {
    float: left;
    width: auto;
}

.logo a {
    font-family: Trebuchet MS, Arial, Helvetica;
    font-size: 3.2rem;
    font-weight: bold;
    color: #269CCB;
}

#navigation {
    float: right;
    width: 40%;
    margin-top: 10px;
    margin-right: 15%;
}

#navigation-items {
    float: right;
    margin-right: 2%;
}

#navigation-items .item {
    float: left;
    list-style: none;
    height: 40px;
    line-height: 40px;
}

#navigation-items .item a {
    color: #344054;
    font-weight: normal;
    margin: 0 0 0 40px;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    font-family: "Inter", Helvetica, Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    text-shadow: 0 0 0 #191919;
    letter-spacing: 1px;
}

#user-action-access {
    float: right;
    width: 320px;
    margin-top: 4px;
}

a.button.alternative-blue {
    margin-right: 0px;
}

a.button {
    padding: 12px 28px 12px 28px;
    font-family:"Inter";
    font-size: 1.32rem;
    display:inline-block;
}

.button
{
    border-radius: 10px;
}

.button.fill-blue {
    background: #279ccb;
    border: 2px solid #279ccb;
    box-shadow: 0px 2px 4px 0px rgb(230, 230, 230);
}

.button.fill-white {
    background: #ffffff;
}

.button.text-blue {
    color: #279ccb;
    font-weight: normal;
    border: 1.5px solid #279ccb;
}

.text-white
{
    color: #ffffff;
}

.button.text-white {
    color: #ffffff;
    font-weight: normal;
}

.button.border-white {
    border: 1.5px solid #ffffff;
}

.left {
    float: left;
}

.right {
    float: right;
}

.margin-left-0_5rem {
    margin-left: 0.5rem;
}

.margin-left-1rem {
    margin-left: 1rem;
}

.margin-left-2rem {
    margin-left: 2rem;
}

.margin-left-3rem {
    margin-left: 3rem;
}

.margin-left-4rem {
    margin-left: 4rem;
}

.margin-left-5rem {
    margin-left: 5rem;
}

.margin-right-1pc {
    margin-right: 1%;
}

.margin-right-1rem {
    margin-right: 1rem;
}

.margin-right-1-5rem {
    margin-right: 1.5rem;
}

.margin-right-2rem {
    margin-right: 2rem;
}

.margin-top-1rem {
    margin-top: 1rem;
}

.margin-top-2rem {
    margin-top: 2rem;
}

.margin-top-3rem {
    margin-top: 3rem;
}

.margin-top-4rem {
    margin-top: 4rem;
}

.margin-top-5rem {
    margin-top: 5rem;
}

.margin-top-8rem {
    margin-top: 8rem;
}

.margin-bottom-0_5rem {
    margin-bottom: 0.5rem;
}

.margin-bottom-1rem {
    margin-bottom: 1rem;
}

.margin-bottom-2rem {
    margin-bottom: 2rem;
}

.margin-bottom-3rem {
    margin-bottom: 3rem;
}

.margin-bottom-4rem {
    margin-bottom: 3rem;
}

#page-top {
    /*	height:675px;*/
    min-height: 65vh;
    padding: 80px;
    background:
        radial-gradient(circle at top left,
            #fff6ed 0%,
            transparent 40%),
        radial-gradient(circle at top right,
            #e6f3ff 0%,
            transparent 55%),
        linear-gradient(180deg,
            #f9fcfb 0%,
            #f2f8f6 100%);

}


.slide-front
{
    float:left;
    width:50%;
}

a.button.no-shadow
{
    box-shadow: none;
}

h1 {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 5em;
    line-height: 6.5rem;
    color:#101828;
}

h1 .highlight 
{
    color: #1b6d8e;
}

h1.small1
{
    font-family: "Inter";
    font-size:1.6rem;
    line-height:2.6rem;
}

h2 
{
    font-family: "Inter";
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:#344054;
    font-size:2rem;
}

h2.small
{
    font-size:1.5rem;
    line-height:2.5rem;
}

h2.medium3
{
    font-size:4rem;
    font-weight:600;
    line-height:5.6rem;
    color:#101828;
}

h2.medium4
{
    font-size:3rem;
    font-weight:600;
    line-height:4.2rem;
    color:#101828;
}

h3
{
    font-family: "Inter";
}

h3.small1_5
{
    font-size:1.5rem;
    font-weight:400;
    line-height:2.5rem;
}

h3.medium1
{
    font-size:1.5rem;
    font-weight:400;
    line-height:2rem;
    color:#344054;
}

h4
{
    font-size:1.5rem;
    font-weight:600;
    line-height:2.1rem;
}

.page-top-image-right1
{
    position:absolute;
    width:35%;
    margin-top:60px;
    right:10%;
    box-shadow: 0px 10px 10px 0px rgb(0, 0, 0, 0.1);
    border-radius:16px;
    mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#customer-logo
{
    background-color: #ffffff;
    padding:3% 0;
    display: flex;
    flex-wrap: nowrap; /* Empêche le passage à la ligne */
    overflow-x: hidden;

 mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}

#customer-logo img
{
    margin-right:2%;
    box-shadow: 1px 1px 1px 0px rgb(0, 0, 0, 0.04);
    border-radius:10px;
}



.block-dark
{
    background:#101e2d;
    padding:5% 3%;
    color:#ffffff;
}

.block-dark h1, .block-dark h2, .block-dark h3
{
    color:#ffffff;
}

.one-half
{
    width:48%;
    margin-left:1%;
    margin-right:1%;
}

.one-third
{
    width:31.3%;
    margin-left:1%;
    margin-right:1%;
}

.one-quarter
{
    float:left;
    width:23%;
    margin-left:1%;
    margin-right:1%;
}

.frame
{
    padding:2%;
}

.block-dark .frame
{
    /*background:#265760;*/
    /*background: rgba(38, 87, 96, 0.5);*/
    background: rgba(38, 87, 100, 0.5);
    border:1px solid #678a90;
    border-radius:16px;
    padding:2%;
}

p.summary
{
    font-family: "Inter";
    font-size:1.25rem;
    line-height:1.8rem;
}

#core-solutions
{
    overflow: hidden;
}

#customer-target
{
    overflow:hidden;
}

#core-solutions-banner
{
    background: 
    radial-gradient(circle at 15% 20%,
            rgba(20, 90, 100, 0.55) 0%,
            transparent 40%
            ),
    radial-gradient(circle at 50% 60%,
            rgba(20, 90, 100, 0.65) 0%,
            transparent 70%
            ),
    radial-gradient(circle at 85% 95%,
            rgba(30, 110, 120, 0.45) 0%,
            transparent 35%
            ),
    linear-gradient(
        180deg,
        #020808 0%,
        #000000 100%
    );
}

#core-solutions-banner p.summary
{   
    opacity:0.8;
}

#core-solutions .frame, #customer-target .frame
{
    /*opacity:0.7;*/
}

.block-light-gray
{
    background: #F6F8FA;
    padding-top:5%;
    padding-bottom:5%;
    overflow: hidden;
}

.block-light-gray .head
{
    font-size:4rem;
    font-weight:600;
    color:#1B6D8E;
    margin-bottom:1.5rem;
}

.section .description
{
    font-size:1.3rem;
    line-height:1.9rem;
    font-weight:400;
    color:#5C6777;
}

.section::after 
{
    display:block;
    content: "";
    margin-left: 38%;
    margin-top:15px;
    width: 24%;
    height: 5px; /* Épaisseur de la bordure */
    background-color: #1B6D8E; /* Couleur de la bordure */
}

.block-white
{
    background: #FFFFFF;
    padding-top:5%;
    padding-bottom:5%;
    overflow: hidden;
}

.row
{
    clear:both;
    margin-bottom:1%;
    padding-bottom:2px;
    overflow:hidden;
}

#activity-sectors .frame
{
    border-radius:15px;
    box-shadow: 1px 1px 2px 0px rgb(0, 0, 0, 0.1);
    padding:1.5% 2% 1.5% 1%;
}

.frame.rose
{
    background:#FBE4E5;
}

.frame.orange
{
    background:#FFF1DD;
}

.frame.blue
{
    background:#E2EFFF;
}

.frame.green
{
    background: #DCFCE7;
}

.frame.light-blue
{
    background: #D5F6FF;
}

.frame.light-green
{
    background: #EDFFDB;
}

.frame.yellow
{
    background: #FBF8DB;
}

.frame.purple
{
    background: #EDE9FE;
}


#activity-sectors .frame p
{
    font-size:1.35rem;
    line-height:2rem;
    color:#344054;
}

#activity-sectors .p1
{
    width:19%;
    margin-right:4%
}

#activity-sectors .p2
{
    width:77%;
}

.blue-round-gradient
{
    background: 
    radial-gradient(circle at 25% 30%,
            rgba(20, 90, 100, 0.55) 0%,
            transparent 50%
            ),
    radial-gradient(circle at 85% 95%,
            rgba(30, 110, 120, 0.45) 0%,
            transparent 25%
            ),
    linear-gradient(
        180deg,
        #020808 0%,
        #000000 100%
    );
}

.check-48
{
    height:32px;
    margin-top:4px;
}

.block
{
    overflow:hidden;
}

.block-white p.summary
{
    color:#5C6777;
}

#trial-banner
{
     background:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(
      135deg,
      #0f2a36 0%,
      #173d4a 35%,
      #1f5661 65%,
      #102531 100%
    );

  background-size: cover;
  background-repeat: no-repeat;

  padding:3.5% 3%;
}

#trial-banner h2.medium4
{
    font-family:lora;
}

#trial-banner p
{
    font-size:1.6rem;
}

.picto-frame
{
    text-align:center;
    margin-top:0.5rem;
    margin-bottom:2rem;
}

.picto-frame img
{
    margin-left:auto;
    margin-right:auto;
    height:90px;
}

#technology .frame img
{
    height:8rem;
    margin-top:-6rem;
    box-shadow: 1px -1px 1px 0px rgb(0, 0, 0, 0.1);
    border-radius:100%;
}

#technology .frame p
{
    margin-top:1rem;
}

.illustration-panel
{
    /* Trapèze : haut presque droit, bas incliné */

  clip-path: polygon(
    0% 0%,     
    100% 0%,   
    100% 16px, 
    92% 100%,  
    0% 100%    
  );

  inset(0% 45% 0% 45% round 10px)

/*
    clip-path: polygon(
    0% 0%,     
    100% 0%,   
    100% 100%,  
    0% 80%    
  );
*/
}

.illustration-panel img
{
    border-radius:16px;
}

.width-half
{
    width:50%;
}

.highlight
{
	color:#1b6d8e;
}

#benefit-retailers p.summary, #benefit-brand p.summary
{
    line-height:2.2rem;
}


#paarly-vs-competitors
{
    background:url("/wp-content/uploads/2026/01/grid_dot.png") no-repeat right bottom;
}

#paarly-vs-competitors img.check-48
{
    margin-top:1px;
}

.stats-overlay {
    position: absolute;
    margin-top:-100px;
    margin-left:1%;
    width:25%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--shadow);
    z-index: 2;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom:0;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom:0;
}


#blog-list
{
    padding-top:4rem;
}

#page-top-blog 
{
    padding: 20px;
    background:
        radial-gradient(circle at top left,
            #fff6ed 0%,
            transparent 40%),
        radial-gradient(circle at top right,
            #e6f3ff 0%,
            transparent 55%),
        linear-gradient(180deg,
            #f9fcfb 0%,
            #f2f8f6 100%);

}

#page-top-blog h1
{
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 3.5rem;
  line-height: 4.25 rem;
  color: #101828;
  margin-bottom:0rem;
}

#blog-list img.attachment-small
{
    width:auto;
    height:20vh;
}

#blog-list .entry-summary
{
    padding:2% 0;
    line-height:1.4rem;
}

#blog-list article
{
    margin-left:2rem;
    margin-bottom:4rem;

}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1600px) {
    html {
        font-size: 15px;
    }

    #page-top
    {
        padding:3%;
    }

    a.button 
    {
        padding: 4% 6% 4% 6%;
        border-radius:12px;
    }

    #navigation
    {
        margin-right:7%;
        width:45%;
    }
}

@media (max-width: 1400px) 
{
    #navigation
    {
        margin-right:5%;
        width:48%;
    }

}

@media (max-width: 1200px) {
    html {
        font-size: 12px;
    }

    #navigation
    {
        display:none;
    }

    #demo-btn
    {
        display:none;
    }

    #user-action-access
    {
        width:200px;
    }

    ..one-half
    {
    }

    .one-third
    {
        width:98%;
        margin-bottom:4rem;
    }

    .one-quarter
    {
        width:98%;
        margin-bottom:4rem;
    }

    .container
    {
        width:95%;
    }

    #page-top
    {
        min-height:50vh;
    }

    a.button 
    {
        padding: 4% 6% 4% 6%;
        border-radius:10px;
    }

    .check-48
    {
        height:20px;
    }
    
    p.summary
    {
        width:90%;
    }

    p.summary br {
        display: none;
    }

    h2 br {
        display: none;
    }
}


@media (max-width: 768px) {
    html {
        font-size: 9px;
    }

    h1
    {
        font-size: 3em;
        line-height: 4rem;
    }

    #page-top
    {
        min-height:35vh;
    }


     a.button 
    {
        padding: 4% 6% 4% 6%;
        border-radius:6px;
    }

    .block-dark .one-half, .block-white .one-half
    {
        width:98%;
    }

    .illustration-panel img
    {
        margin-top:4%;
    }
}