/* ===========================
   PALETTE DE COULEURS DIGI-SAMS
=========================== */

html{

scroll-behavior:smooth;

}

:root {

    --bleu-principal: #173f5f;
    --bleu-secondaire: #2f5d7c;
    --doré:#c09a5b;
    --gris-clair: #f4f6f86b;
    --gris-foncé: #555555;
    --blanc: #ffffff;

}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background-color:var(--gris-clair);
    color:var(--gris-foncé);
}

/* ===========================
   EN-TÊTE ET NAVIGATION
=========================== */

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 18px 7%;
    background-color: #ffffff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-zone {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-sams {
    color:#173f5f;
}

.logo-site {
    
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.identite h1 {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 28px;
    line-height: 1.1;
    color: var(--bleu-principal);
}

.identite p{

    font-size:18px;
    font-weight:700;
    color:#173f5f;

    line-height:1.15;

    margin:8px 0 0;

    margin-left:40px;

}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.navigation a {
    white-space: nowrap;
    color: var(--bleu-principal);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

.navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background-color: var(--doré);
    transition: width 0.3s ease;
}

.navigation a:hover::after {
    width: 100%;
}

.btn-contact-entete {
    background: linear-gradient(135deg, #c09a5b,#c09a5b);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 13px 25px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 7px 18px rgba(219, 166, 60, 0.25);
    transition: transform 0.3s ease;
}

.btn-contact-entete:hover {
    transform: translateY(-2px);
}

h1 {
    text-align: center;
    font-size: 42px;
    color: var(--bleu-principal);
    margin-top: 50px;
}

h2 {
    text-align: center;
    font-size: 28px;
    color:var(--bleu-secondaire);
}

h3 {
    font-size: 24px;
    color: var(--bleu-principal);
}

p {
    font-size: 18px;
    line-height: 1.6;
}

.slogan {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color:#c09a5b;
}

.benefices{
    display:grid;
    grid-template-columns:repeat(2, minmax(250px, 340px));
    justify-content:center;
    gap:22px;

    padding:75px 40px 55px;
    background:#eef5f8;
    
}

.benefice{
    position:relative;

    width:100%;
    min-height:215px;
    padding:48px 24px 24px;

    background:#ffffff;
    border:2px solid rgba(192,154,91,.55);
    border-radius:22px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    text-align:center;

    box-shadow:0 12px 28px rgba(16,58,135,.10);
    transition:all .35s ease;
    overflow:visible;
}

.benefice:hover .benefice-cercle{

    transform:translateX(-50%) scale(1.15) rotate(10deg);

}

.benefice-cercle{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);

    width:52px;
    height:52px;

    border-radius:50%;
    background:linear-gradient(135deg,#c09a5b,#f3d179);

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:0 8px 18px rgba(16,58,135,.18);
    transition:all .35s ease;
}

.benefice:hover{
    transform:translateY(-6px);
    border-color:#c09a5b;
    box-shadow:0 18px 35px rgba(16,58,135,.16);
}

.benefice:hover .benefice-cercle{
    transform:translateX(-50%) scale(1.10) rotate(6deg);
}

.icone{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;

    
    font-size:20px;
    color:#173f5f;

}

.icone i{
    color:#173f5f;
}

.benefice h3{
    margin:12px 0 12px;
    font-size:24px;
    color:#103a87;
}

.benefice h3::after{
    content:"";
    display:block;
    width:45px;
    height:3px;
    background:#c09a5b;
    margin:10px auto 0;
    border-radius:10px;
    transition:.35s ease;
}

.benefice:hover h3::after{
    width:65px;
}

.benefice:nth-child(3) h3{
    font-size:21px;
}

.benefice p{
    margin:0;
    font-size:16px;
    line-height:1.55;
    color:#555;
}
/*==========================
  COULEURS DU LOGO
==========================*/

.logo-digi{

    color:#c09a5b;
}

.hero{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #e8f2fa 50%,
        #ffffff 100%
    );

    padding:20px 80px;

    text-align:center;

}

.hero h1,
.hero h2,
.hero .slogan,
.hero .intro{

text-align:left;

}

.hero-contenu{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

max-width:1200px;

margin:auto;

flex-wrap:wrap;

}

.hero-gauche{

flex:1;

text-align:left;

padding-right:40px;

}

.hero-droite{

flex:1;

display:flex;

justify-content:center;

padding-left:40px;

}

.photo-profil{

width:200px;

height:200px;

border-radius:50%;

background:linear-gradient(135deg,#173f5f,#2f5d7c);

display:flex;

justify-content:center;

align-items:center;

font-size:120px;

color:white;

overflow:hidden;

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.photo-profil img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 30% 30%;

    transition:transform .40s ease;

}

.photo-profil:hover img{

    transform:scale(1.08);

}

.intro {

    margin-top: 30px;

    font-size: 22px;

    color: #555;

}

.boutons {

    margin-top: 50px;

}

.btn-principal{

position:relative;

overflow:hidden;

background:var(--bleu-principal);

color:white;

padding:16px 35px;

border-radius:10px;

text-decoration:none;

font-weight:600;

display:inline-block;

transition:all .30s ease;

box-shadow:0 6px 18px rgba(23,63,95,.20);

}

.btn-principal::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:rgba(255,255,255,.35);

transform:skewX(-25deg);

transition:.60s;

}

.btn-principal:hover{

transform:translateY(-4px);

box-shadow:0 12px 24px rgba(23,63,95,.30);

}

.btn-principal:hover::before{

left:130%;

}

.btn-secondaire {

    border: 2px solid #1c4d75;

    color: #1c4d75;

    padding: 15px 35px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;

}

.btn-secondaire:hover {

    background: #1c4d75;

    color: white;

}
.apropos{

display:flex;

justify-content:center;

align-items:center;

gap:70px;

padding:90px 60px;

background: var(--blanc);

flex-wrap:wrap;

}


.services{

padding:90px 40px;

background:#eef4fb;

text-align:center;

}

.soustitre{

margin-bottom:25px;

color:#333;

}

.grille-services{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

max-width:1400px;

margin:auto;

}

.carte-service{
    background:var(--blanc);

    border:2px solid rgba(192,154,91,.55);

    padding:30px 25px;
    border-radius:22px;

    box-shadow:0 12px 28px rgba(16,58,135,.10);

    cursor:pointer;
    transition:all .35s ease;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;

    min-height:330px;
}

.service-icone{
    font-size:38px;
    margin-bottom:20px;
    color:#173f5f;
    transition:all .35s ease;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.carte-service:hover{
    transform:translateY(-6px);
    border-color:#c09a5b;
    box-shadow:0 18px 35px rgba(16,58,135,.16);
}

.carte-service:hover .service-icone{
    transform:scale(1.25) rotate(-8deg);
    color:#c09a5b;
}

.carte-service h3{
    min-height:90px;
    margin:20px 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.carte-service p{
    margin:0;
    line-height:1.55;
}

.carte-service:hover{

    transform:translateY(-12px) scale(1.03);

    border-color:#c09a5b;

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.service-icone{

font-size:38px;

margin-bottom:20px;

color:#173f5f;

transition:all .35s ease;

}


/* ===== MENU ===== */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(10px);

    background:rgba(255,255,255,.95);

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:all .35s ease;
}

.navbar:hover{

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

.logo{

font-size:30px;

font-weight:bold;

color: var(--bleu-principal);

transition:transform .30s ease;
}

.logo:hover{

transform:scale(1.08);

}

.menu{

display:flex;

list-style:none;

gap:35px;

margin:0;

padding:0;

}

.menu a{

position:relative;

text-decoration:none;

color:var(--bleu-principal);

font-weight:bold;

transition:color .3s ease;

transition:.30s ease;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#c09a5b;

    transition:width .3s ease;

}

.menu a:hover{

color:#c09a5b;

}

.menu a:hover::after{

width:100%;

}

.logo span:first-child {
color: var(--bleu-principal);
}

.logo .logo-sams {
    color:var(--doré);
}
/* ===== AVANTAGES ===== */

.avantages{

padding:90px 40px;

background: var(--blanc);

text-align:center;

}

.avantages h2{
    text-align:center;
    width:100%;
    margin:0 auto 20px;
}

.grille-avantages{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

max-width:1200px;

margin:auto;

margin-top:50px;

}

.carte-avantage{
    background:#ffffff;
    border:2px solid rgba(192,154,91,.55);
    border-radius:28px;

    padding:28px 25px;
    min-height:340px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;

    box-shadow:0 12px 28px rgba(16,58,135,.10);
    transition:all .35s ease;
}

.carte-avantage:hover{
    transform:translateY(-8px);
    border-color:#c09a5b;
    box-shadow:0 18px 35px rgba(16,58,135,.16);
}

.atout-icone{
    width:78px;
    height:78px;
    margin:0 auto 28px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #fff8e8,
        #f4d98b
    );

    color:#103a87;
    font-size:38px;

    box-shadow:0 10px 25px rgba(192,154,91,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.carte-avantage:hover .atout-icone{
    transform:scale(1.12) rotate(4deg);
    box-shadow:0 15px 30px rgba(192,154,91,.38);
}

/* ===== CONTACT ===== */

.contact{

padding:40px 40px;

background:white;

color:white;

text-align:center;

}

.contact h2{

color:white;

}

.contact .soustitre{

color:#2f5d7c;

font-size:22px;

font-weight:500;


margin-bottom:20px;

}

.contact{
    padding:40px;
    background:#ffffff;
    color:#103a87;
    text-align:center;
}

.contact-cartes{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.contact-carte{
    width:230px;
    min-height:210px;
    padding:30px 25px;

    background:#ffffff;
    border:2px solid rgba(192,154,91,.55);
    border-radius:22px;

    box-shadow:0 12px 28px rgba(16,58,135,.10);
    transition:all .35s ease;
}

.contact-carte:hover{
    transform:translateY(-10px);
    border-color:#c09a5b;
    box-shadow:0 20px 38px rgba(16,58,135,.16);
}

.contact-icone{
    font-size:45px;
    margin-bottom:12px;
    color:#c09a5b;
}

h1,h2{

transition:0.3s;

}

h1:hover,
h2:hover{

letter-spacing:1px;

}

@keyframes apparition{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================
   VERSION MOBILE
========================== */

@media (max-width:768px){

.hero-contenu{

    flex-direction:column;

    text-align:center;

}

.hero-gauche{

    padding-right:0;

}

.hero h1{

    font-size:48px;

}

.hero h2{
    font-size:24px;
    line-height:1.3;
    font-weight:600;

}

.hero .intro{

    font-size:22px;

}

.photo-profil{

    width:260px;

    height:260px;

    margin-top:40px;

}

.boutons{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.visible{

opacity:0;

transform:translateY(50px);

}

}

/* ===== Bouton retour en haut ===== */

.retour-haut{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

background:#173f5f;

color:white;

text-decoration:none;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:bold;

box-shadow:0 10px 25px rgba(0,0,0,.20);

transition:all .30s ease;

z-index:1000;

}

.retour-haut:hover{

background:#c09a5b;

transform:translateY(-5px);

}

/* ===== Atouts ===== */

.atouts{

padding:90px 40px;

background:white;

text-align:center;

}

.atouts span{

color:#c09a5b;

}

.grille-atouts{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:30px;

max-width:1200px;

margin:50px auto 0;

}

/* Ordre identique à la grille « Mes services » */
.grille-atouts .atout:nth-child(1){
    grid-column:1;
    grid-row:1;
}

.grille-atouts .atout:nth-child(3){
    grid-column:2;
    grid-row:1;
}

.grille-atouts .atout:nth-child(2){
    grid-column:1;
    grid-row:2;
}

.grille-atouts .atout:nth-child(4){
    grid-column:2;
    grid-row:2;
}

.atout{

    background:linear-gradient(180deg,#ffffff 0%,#fcfcfc 100%);

    padding:28px;

    border-radius:22px;

    border:2px solid rgba(219,166,60,.35);

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

    display:flex;
    flex-direction:column;
}

.atout:hover{

transform:translateY(-8px);

box-shadow:0 18px 30px rgba(0,0,0,.15);

}

.atout i{

    font-size:50px;
    margin-bottom:20px;
    display:inline-block;
    color:#173f5f;
    transition:color .35s ease, transform .35s ease;

}

.atout:hover i{

    color:#c09a5b;
    transform:scale(1.15);

}

.atout:hover i{

    transform:scale(1.15);

}

.atout h3{

    margin-bottom:12px;
    color:#173f5f;
    font-size:24px;

}

.atout p{

    color:#666;
    line-height:1.5;
    font-size:16px;
    margin:0;

}

/* ===== FAQ ===== */

.faq{
    text-align:center;
    padding:90px 40px;
    background:#eef4fb;
}

.faq h2{
    text-align:center;
    color:#103a87;
    margin-bottom:15px;
}

.question{
    background:#ffffff;

    padding:18px 25px;
    margin:18px auto;
    max-width:900px;

    border:1px solid rgba(192,154,91,.45);
    border-left:6px solid #c09a5b;
    border-radius:12px;

    box-shadow:0 10px 24px rgba(16,58,135,.09);
    transition:all .30s ease;
}

.question:hover{
    transform:translateX(10px);
    border-left-color:#c09a5b;
    box-shadow:0 14px 30px rgba(16,58,135,.15);
}

.question h3{
    color:#103a87;
    margin-bottom:8px;
}

.question p{
    color:#333;
    line-height:1.5;
    margin:0;
}

/* ===== Soulignement des titres ===== */

.services h2::after,
.atouts h2::after,
.faq h2::after,
.contact h2::after{

content:"";

display:block;

width:70px;

height:4px;

background:#c09a5b;

margin:15px auto 0;

border-radius:10px;

}

/* ===== Conteneur principal ===== */

.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}

/* ===== Formulaire de contact ===== */

.formulaire-contact{

max-width:700px;

margin:50px auto 0;

display:flex;

flex-direction:column;

gap:20px;

background:white;

padding:35px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.formulaire-contact input,

.formulaire-contact textarea{

padding:15px;

border:1px solid #d6d6d6;

border-radius:10px;

font-size:16px;

font-family:inherit;

transition:.30s ease;

}

.formulaire-contact input:focus,

.formulaire-contact textarea:focus{

outline:none;

border-color:#c09a5b;

box-shadow:0 0 8px rgba(176,141,87,.3);

transition:.30s ease;

.formulaire-contact button{

background:#173f5f;

color:white;

border:none;

padding:15px;

border-radius:10px;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;

width:250px;

margin:auto;

}

}

.formulaire-contact button:hover{

background:#c09a5b;

}

.contact h2{

display:block;

color:#173f5f;

font-size:36px;

font-weight:bold;

text-align:center;

margin:0 0 15px;

text-transform:uppercase;

}

/* ======================
   FORMULAIRE DE CONTACT
====================== */

.contact-formulaire{
    max-width:650px;
    margin:0 auto;
    padding:30px;

    background:#ffffff;
    border:1px solid rgba(192,154,91,.45);
    border-radius:16px;

    box-shadow:0 14px 32px rgba(16,58,135,.11);

    display:flex;
    flex-direction:column;
    gap:15px;

    box-sizing:border-box;
}

.contact-formulaire input,
.contact-formulaire select,
.contact-formulaire textarea{

width:100%;

padding:14px 16px;

border:1px solid #d6d6d6;

border-radius:8px;

font-family:inherit;

font-size:15px;

box-sizing:border-box;

outline:none;

transition:.3s ease;

}

.contact-formulaire textarea{

min-height:150px;

resize:vertical;

}

.contact-formulaire input:focus,
.contact-formulaire select:focus,
.contact-formulaire textarea:focus{

    .label-formulaire{
    color:#173f5f;
    font-size:15px;
    font-weight:600;
    text-align:left;
}

.contact-formulaire select{
    background:#ffffff;
    cursor:pointer;
}
    border-color:#c09a5b;
    box-shadow:0 0 0 3px rgba(192,154,91,.15);
}

.contact-formulaire button{

border:none;

background:#103a87;

color:#ffffff;

padding:14px 25px;

border-radius:30px;

font-size:15px;

font-weight:bold;

cursor:pointer;

transition:.3s ease;

}

.contact-formulaire button:hover{
    background:#2764d5;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(16,58,135,.20);
}

/* ======================
   ANIMATION D'APPARITION
====================== */

.apparition{

opacity:0;

transform:translateY(60px);

transition:opacity .8s ease,
transform .8s ease;

}

.apparition.visible{

opacity:1;

transform:translateY(0);

}

/* RÉPARATION TEMPORAIRE DES ANIMATIONS */

.apparition{

    opacity:1;

    transform:none;

}

.contact-carte p{
    color:#173f5f;
    font-size:16px;
    line-height:1.5;
    margin-top:12px;

}

.contact-carte p{

    color:#173f5f;

    font-size:14px;

    line-height:1.5;

    margin-top:12px;

    text-align:center;

    word-break:break-word;

}

@media (max-width:1024px){

    .grille-services{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .grille-services{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .contact-cartes{

        flex-direction:column;

        align-items:center;

    }

}

@media (max-width:768px){

    .hero-contenu{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:768px){

    .photo-profil{

        width:220px;

        height:220px;

    }

}

.apparition{
    opacity:1;

transform:translateY(0)

}

.apparition.visible{

    opacity:1;

    transform:translateY(0);

}

.js-active .apparition{
    opacity:0;
    transform:translateY(50px);
    transition:opacity .8s ease,
               transform .8s ease;
}

.js-active .apparition.visible{
    opacity:1;
    transform:translateY(0);
}

.btn-principal,
.btn-secondaire{

    transition:transform .3s ease,
               box-shadow .3s ease,
               background-color .3s ease;

}

.btn-principal:hover,
.btn-secondaire:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

section{

    scroll-margin-top:90px;

}

::selection{

    background:#c09a5b;

    color:#ffffff;

}

img{

    max-width:100%;

    display:block;

}

@media (max-width:768px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.7rem;

    }

    p{

        font-size:1rem;

        line-height:1.7;

    }

}

/* =========================
   NOUVELLE BARRE DE MENU
========================= */

.navbar{
    min-height:105px;
    padding:12px 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:#071f3c;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 5px 20px rgba(0,0,0,.18);
}

.identite{
    
    display:flex;
    align-items:center;
    gap:18px;
}

.logo-navbar{
    width:125px;
    height:85px;
    object-fit:contain;
}

.nom-entreprise{
    min-width:260px;
}

.nom-digisams{
    margin:0;
    color:#ffffff;
    font-size:2rem;
    font-weight:700;
    letter-spacing:1px;
}

.nom-digisams span{
    color:#d7a229;
}

.signature{
    margin:2px 0 0;
    color:#d7a229;
    font-size:1rem;
}

.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:38px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu a{
    position:relative;
    color:#ffffff;
    text-decoration:none;
    font-weight:500;
    transition:color .3s ease;
}

.menu a:hover{
    color:#d7a229;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    border-radius:3px;
    background:#d7a229;
    transition:width .3s ease;
}

.menu a:hover::after{
    width:100%;
}

.btn-menu{
    padding:15px 28px;
    border-radius:8px;
    background:linear-gradient(135deg,#c09a5b,#b97b0d);
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(176,141,87,.25);
    transition:transform .3s ease,
               box-shadow .3s ease;
}

.btn-menu:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(176,141,87,.4);
}


/* =========================
   NOUVEL ACCUEIL
========================= */

.hero{
    position:relative;
    min-height:520px;
    padding:70px 7%;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(255,255,255,.95),
            rgba(216,229,245,.75) 30%,
            transparent 55%
        ),
        linear-gradient(
            120deg,
            #7998bd 0%,
            #edf4fb 48%,
            #c4d7eb 100%
        );
}

.hero::after{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-80px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.38);
    transform:rotate(-3deg);
}

.hero-contenu{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1350px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.hero-gauche{
    width:58%;
}

.hero-sur-titre{
    margin:0 0 22px;
    color:#c48b16;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:.5px;
}

.hero h1{
    margin:0;
    color:#071f3c;
    font-size:3.2rem;
    line-height:1.18;
    font-weight:700;
}

.hero h1 span{
    color:#c48b16;
}

.trait-dore{
    width:48px;
    height:4px;
    margin:26px 0 20px;
    border-radius:10px;
    background:#c48b16;
}

.hero-description{
    margin:0 0 34px;
    color:#173f5f;
    font-size:1.3rem;
    line-height:1.6;
}

.boutons{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.btn-principal,
.btn-secondaire{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:0 30px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:transform .3s ease,
               box-shadow .3s ease;
}

.btn-principal{
    color:#ffffff;
    background:#082d55;
    box-shadow:0 10px 25px rgba(8,45,85,.22);
}

.btn-secondaire{
    color:#082d55;
    background:rgba(255,255,255,.45);
    border:2px solid #082d55;
}

.btn-principal:hover,
.btn-secondaire:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.hero-logo{
    width:38%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cercle-logo{
    width:380px;
    height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #d7a229;
    border-radius:50%;
    background:rgba(255,255,255,.75);
    box-shadow:
        0 20px 50px rgba(0,0,0,.12),
        0 0 35px rgba(215,162,41,.25);
}

.cercle-logo img{
    width:82%;
    height:82%;
    object-fit:contain;
}


/* =========================
   VERSION TABLETTE
========================= */

@media (max-width:1100px){

    .menu{
        gap:20px;
    }

    .nom-entreprise{
        display:none;
    }

    .hero h1{
        font-size:2.7rem;
    }

    .cercle-logo{
        width:320px;
        height:320px;
    }
}


/* =========================
   VERSION TÉLÉPHONE
========================= */

@media (max-width:768px){

    .navbar{
        min-height:auto;
        padding:12px 20px;
        flex-wrap:wrap;
    }

    .logo-navbar{
        width:90px;
        height:65px;
    }

    .menu{
        order:3;
        width:100%;
        gap:16px;
        padding-top:10px;
        overflow-x:auto;
        justify-content:flex-start;
    }

    .btn-menu{
        padding:12px 18px;
    }

    .hero{
        padding:55px 25px 90px;
    }

    .hero-contenu{
        flex-direction:column;
        text-align:center;
    }

    .hero-gauche{
        width:100%;
    }

    .hero h1{
        font-size:2.25rem;
    }

    .trait-dore{
        margin:24px auto 20px;
    }

    .hero-description{
        font-size:1.1rem;
    }

    .boutons{
        justify-content:center;
    }

    .hero-logo{
        width:100%;
    }

    .cercle-logo{
        width:260px;
        height:260px;
    }
}

@media (max-width: 1024px) {

    .entete {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navigation {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 18px;
    }
}

@media (max-width: 768px) {

    .entete {
        position: relative;
        padding: 15px 20px;
    }

    .logo-site {
        width: 65px;
        height: 65px;
    }

    .identite h1 {
        font-size: 23px;
    }

    .identite p {
        font-size: 11px;
    }

    .navigation {
        gap: 12px 18px;
    }

    .navigation a {
        font-size: 13px;
    }

    .btn-contact-entete {
        padding: 11px 18px;
        font-size: 14px;
    }
}


.message-confirmation{
    display:none;
    max-width:700px;
    margin:0 auto 25px;
    padding:18px 22px;
    border:1px solid #c09a5b;
    border-radius:14px;
    background:#ffffff;
    color:#103a87;
    font-weight:600;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.message-confirmation.visible{
    display:block;
}

/* ==================================
   PAGES LÉGALES
================================== */

.page-legale{
    margin:0;
    background:#f4f6f8;
    color:#103a87;
}

.entete-page{
    min-height:90px;
    padding:20px 8%;
    background:#103a87;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.entete-page .logo{
    color:#ffffff;
    font-size:28px;
    font-weight:700;
    text-decoration:none;
    letter-spacing:1px;
}

.entete-page .logo-sams{
    color:#c09a5b;
}

.btn-retour-site{
    padding:12px 20px;
    border:1px solid #c09a5b;
    border-radius:25px;

    color:#ffffff;
    text-decoration:none;
    transition:all .3s ease;
}

.btn-retour-site:hover{
    background:#c09a5b;
    color:#ffffff;
    transform:translateY(-2px);
}

.contenu-legal{
    width:min(900px, 88%);
    margin:60px auto;
}

.contenu-legal h1{
    margin-bottom:10px;
    color:#173f5f;
    font-size:42px;
    text-align:center;
}

.mise-a-jour{
    margin-bottom:40px;
    color:#666666;
    text-align:center;
    font-size:14px;
}

.bloc-legal{
    margin-bottom:25px;
    padding:28px;

    background:#ffffff;
    border-left:4px solid #c09a5b;
    border-radius:12px;

    box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.bloc-legal h2{
    margin-top:0;
    margin-bottom:18px;
    color:#173f5f;
    font-size:23px;
}

.bloc-legal p{
    margin:10px 0;
    line-height:1.8;
}

.bloc-legal a{
    color:#2f5d7c;
    font-weight:600;
}

.bloc-legal a:hover{
    color:#c09a5b;
}

.footer-page-legale{
    background: #103a87;
}

@media screen and (max-width:700px){

    .entete-page{
        flex-direction:column;
        text-align:center;
    }

    .contenu-legal{
        width:90%;
        margin:40px auto;
    }

    .contenu-legal h1{
        font-size:32px;
    }

    .bloc-legal{
        padding:22px 18px;
    }

    .bloc-legal h2{
        font-size:21px;
    }
}

.logo-page-legale{
    display:inline-flex;
    align-items:center;
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
    text-decoration:none;
}

.logo-page-digi{
    color:#ffffff;
}

.logo-page-sams{
    color:#c09a5b;
}

.footer{
    background:#103a87;
    color:#ffffff;
    padding:35px 20px 22px;
    text-align:center;
}

.footer-contenu{
    max-width:1100px;
    margin:auto;
}

.footer h3{
    margin:0 0 8px;
    font-size:28px;
    color:#ffffff;
    transition:color .30s ease;
}

.footer h3:hover{
    color:#c09a5b;
}

.footer-metier{
    margin:0 0 20px;
    font-size:17px;
}

.footer-coordonnees{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 25px;
    margin-bottom:20px;
}

.footer-coordonnees a,
.footer-coordonnees span{
    color:#ffffff;
    text-decoration:none;
    font-size:16px;
}

.footer-coordonnees a:hover{
    color:#c09a5b;
}

.footer-liens{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.footer-liens a{
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
}

.footer-liens a:hover{
    color:#c09a5b;
}

.footer-copyright{
    margin:0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.25);
    font-size:14px;
    color:rgba(255,255,255,.8);
}

.champ-antispam{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.retour-haut{
    position:fixed;
    bottom:30px;
    right:30px;

    width:52px;
    height:52px;

    background:#103a87;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;
    text-decoration:none;

    box-shadow:0 10px 25px rgba(0,0,0,.20);
    transition:all .30s ease;
    z-index:1000;
}

.footer-coordonnees i{
    color:#c09a5b;
    margin-right:8px;
    font-size:30px;
}

.titre-section{
    color:#103a87;
    font-size:42px;
    font-weight:700;
    text-align:center;
    margin:0 auto 35px;
}

.titre-section::after{
    content:"";
    display:block;
    width:65px;
    height:4px;
    background:#c09a5b;
    margin:12px auto 0;
    border-radius:3px;
}

.titre-formulaire{

    text-align:center;
    font-size:28px;
    font-weight:600;
    color:titre-formulaire{

    text-align:center;
    font-size:28px;
    font-weight:600;
    color:#173f5f;

    margin:50px 0 10px;

};

    margin:50px 0 10px;

}

.texte-formulaire{
    text-align:center;
    color:#666;
    font-size:17px;
    margin:0 0 4px;
}

.fleche-formulaire{
    text-align:center;
    margin:0 0 4px;
    line-height:1;
}

.fleche-formulaire{
    text-align:center;
    margin:5px 0 5px;
    line-height:1;
}

.fleche-formulaire{
    text-align:center;
    margin:5px 0 -10px;
    line-height:1;
}

.fleche-formulaire i{

    font-size:28px;
    color:#c09a5b;

    animation:flecheBouge 1.8s infinite;

}

@keyframes flecheBouge{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(8px);
    }

}

.texte-formulaire{
    text-align:center;
    color:#666;
    font-size:17px;
    font-weight:700;
    margin:50px 0 10px;
}

.fleche-formulaire{
    text-align:center;
    margin:0 0 8px;
    line-height:1;
}

.nom-profil{
    color:#c09a5b;
    font-size:34px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:8px;
}

.fondatrice{

    font-size:40px;
    font-weight:700;

    color:#173f5f;

    letter-spacing:1px;

    margin:10px 0 20px;

    text-shadow:
        1px 1px 0 #ffffff,
        2px 2px 4px rgba(0,0,0,.18);

}

.fonction{
    color:#c09a5b;
    font-size:22px;
    font-weight:700;
    line-height:1.5;
    margin-top:10px;
    margin-bottom:25px;
}

.apropos{
    max-width:1200px;
    margin:auto;
    padding:70px 40px;
}

.presentation{
    display:flex;
       gap:45px;

    width:100%;
    max-width:1100px;
    box-sizing:border-box;

    margin:0 auto;
    padding:45px;

    background:#ffffff;

    border:1px solid rgba(176,141,87,.40);
    border-left:8px solid #c09a5b;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.presentation-photo{
    flex:0 0 260px;

    display:flex;
    justify-content:center;
    align-items:center;

    align-self:center;
}

.presentation-photo img{
    display:block;
    width:100%;
    height:auto;

    border-radius:25px;
    border:3px solid #c09a5b;

    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.presentation-texte{
    flex:1;
    min-width:0;
    text-align:left;
}

.nom-profil{
    margin-top:0;
}

.texte-parcours{
    text-align:left;
    line-height:1.7;
}

@media screen and (max-width:900px){

    .apropos{
        padding:50px 20px;
    }

    .presentation{
        flex-direction:column;
        align-items:center;
        gap:30px;
        padding:30px 25px;
    }

    .presentation-photo{
        flex:auto;
        width:220px;
    }

    .presentation-texte{
        width:100%;
        text-align:center;
    }

    .texte-parcours{
        text-align:left;
    }
}

.presentation{
    display:flex !important;
    align-items:flex-start !important;
    gap:40px !important;
}

.presentation-texte{
    display:block !important;
    flex:1 !important;
    min-width:0 !important;
    text-align:left !important;
}

.presentation-texte h3,
.presentation-texte h4,
.presentation-texte p{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    column-count:1 !important;
    box-sizing:border-box;
}

.texte-parcours{
    display:block !important;
    width:100% !important;
    line-height:1.7;
    margin:0 0 18px;
}

.presentation{
    display:flex !important;
    align-items:flex-start !important;
    gap:40px !important;
}

.presentation-texte{
    display:block !important;
    flex:1 !important;
    min-width:0 !important;
    text-align:left !important;
}

.presentation-texte h3,
.presentation-texte h4,
.presentation-texte p{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    column-count:1 !important;
    box-sizing:border-box;
}

.texte-parcours{
    display:block !important;
    width:100% !important;
    line-height:1.7;
    margin:0 0 18px;
}

@media screen and (max-width:700px){

    .benefices{
        grid-template-columns:1fr;
        gap:28px;
        padding:70px 25px 45px;
    }

    .benefice,
    .benefice:nth-child(3){
        grid-column:auto;
        width:100%;
        max-width:360px;
        justify-self:center;
    }
}

@media screen and (min-width:701px){

    .benefices{
        display:grid;
        grid-template-columns:repeat(2, 340px);
        justify-content:center;
        align-items:start;
        column-gap:24px;
        row-gap:24px;
    }

    .benefice{
        width:340px;
        min-height:220px;
        padding:48px 22px 22px;
        box-sizing:border-box;
    }

    .benefice:nth-child(3){
        grid-column:1 / 3;
        justify-self:center;
        width:340px;
        max-width:340px;
    }
}

/* Alignement définitif des trois cartes */

.benefices{
    display:grid;
    grid-template-columns:340px 340px;
    justify-content:center;
    align-items:start;

    column-gap:25px;
    row-gap:25px;

    padding:100px 40px 70px;
}


/* Dimensions des deux premières cartes */

.benefice{
    width:100%;
    box-sizing:border-box;
}


/* Centrage de la troisième carte */

.ligne-accompagnement{
    grid-column:1 / -1;

    width:100%;

    display:flex;
    justify-content:center;
}


/* Largeur de la troisième carte */

.ligne-accompagnement > .benefice{
    width:340px;
}


/* Version téléphone */

@media screen and (max-width:750px){

    .benefices{
        grid-template-columns:minmax(280px,340px);
        padding:70px 20px 50px;
    }

    .ligne-accompagnement{
        grid-column:auto;
    }

    .ligne-accompagnement > .benefice{
        width:100%;
    }
}

/* Liens des pages légales */

.footer-page-legale a,
.footer-page-legale a:visited{
    color:#ffffff;
    text-decoration:none;
}


/* Passage de la souris */

.footer-page-legale a:hover{
    color:#c09a5b;
    text-decoration:underline;
}

/* Fond blanc légèrement chaud des sections claires */

body,
.apropos,
.services,
.atouts,
.contact{
    background:#fdfcf9;
}

/* Section déroulement d'une collaboration */

.collaboration{
    padding:90px 40px;
    background:#fdfcf9;
    text-align:center;
}

.collaboration-introduction{
    max-width:700px;
    margin:-15px auto 70px;
    color:#555;
    font-size:17px;
}

.collaboration-etapes{
    position:relative;

    max-width:1100px;
    margin:0 auto 45px;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}


/* Trait reliant les trois étapes */

.collaboration-etapes::before{
    content:"";

    position:absolute;
    top:-36px;
    left:16%;
    right:16%;

    height:3px;
    background:rgba(192,154,91,.40);
}


/* Cartes */

.collaboration-etape{
    position:relative;

    background:#ffffff;
    border:1px solid rgba(192,154,91,.45);
    border-radius:22px;

    padding:55px 28px 30px;

    box-shadow:0 12px 30px rgba(23,63,95,.08);

    transition:all .35s ease;
}

.collaboration-etape:hover{
    transform:translateY(-8px);

    border-color:#c09a5b;

    box-shadow:0 20px 40px rgba(23,63,95,.14);
}


/* Numéros */

.numero-etape{
    position:absolute;
    top:-38px;
    left:50%;

    transform:translateX(-50%);

    width:72px;
    height:72px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#c09a5b,#f3d179);
    color:#173f5f;

    font-size:28px;
    font-weight:700;

    box-shadow:0 10px 22px rgba(192,154,91,.30);
}

.collaboration-etape h3{
    color:#173f5f;
    font-size:21px;
    margin:0 0 18px;
}

.collaboration-etape p{
    margin:0;
    color:#555;
    line-height:1.7;
}


/* Bouton devis */

.btn-collaboration{
    display:inline-block;

    padding:15px 34px;

    background:#103a87;
    color:#ffffff;

    border-radius:30px;

    text-decoration:none;
    font-weight:600;

    transition:all .30s ease;
}

.btn-collaboration:hover{
    background:#2764d5;
    transform:translateY(-3px);
}


/* Adaptation téléphone */

@media screen and (max-width:750px){

    .collaboration{
        padding:70px 20px;
    }

    .collaboration-etapes{
        grid-template-columns:1fr;
        gap:65px;
    }

    .collaboration-etapes::before{
        display:none;
    }
}

/* Choix multiples du formulaire */

.choix-besoins{
    margin:0;
    padding:20px;

    border:1px solid #d6d6d6;
    border-radius:10px;

    text-align:left;
}

.choix-besoins legend{
    padding:0 8px;

    color:#173f5f;
    font-size:15px;
    font-weight:600;
}

.grille-besoins{
    display:grid;
    grid-template-columns:repeat(2, 1fr);

    gap:14px 25px;
}

.case-besoin{
    display:flex;
    align-items:center;
    gap:10px;

    color:#333;
    font-size:14px;

    cursor:pointer;
}

.contact-formulaire .case-besoin input{
    width:18px;
    height:18px;

    padding:0;
    margin:0;

    flex:none;

    accent-color:#103a87;
    cursor:pointer;
}

@media screen and (max-width:750px){

    .grille-besoins{
        grid-template-columns:1fr;
    }

}

.case-besoin span{
    line-height:1.4;
}

/* ==================================
   VERSION TÉLÉPHONE — EN-TÊTE
================================== */

@media screen and (max-width:750px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .entete{
        width:100%;
        padding:18px 20px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:16px;
        box-sizing:border-box;
    }

    .logo-zone{
        width:100%;

        display:flex;
        justify-content:center;
        align-items:center;

        gap:14px;
    }

    .logo-site{
        width:75px;
        height:auto;
        flex:none;
    }

    .identite{
        text-align:left;
    }

    .identite h1{
        margin:0 0 5px;
        font-size:25px;
        line-height:1.1;
        white-space:nowrap;
    }

    .identite p{
        margin:0;
        font-size:13px;
        line-height:1.35;
    }

    .btn-contact-entete{
        order:2;

        padding:12px 24px;
        font-size:14px;

        text-align:center;
        white-space:nowrap;
    }

    .navigation{
        order:3;
        width:100%;

        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;

        gap:10px 18px;
    }

    .navigation a{
        margin:0;
        font-size:13px;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — QUI SUIS-JE
================================== */

@media screen and (max-width:750px){

    .apropos{
        width:100%;
        max-width:none;

        margin:0;
        padding:50px 15px;

        box-sizing:border-box;
    }

    .apropos .titre-section{
        width:max-content;
        max-width:100%;

        margin:0 auto 45px;
        padding-bottom:10px;

        font-size:34px;
        line-height:1.2;
        text-align:center;
    }

    .presentation{
        width:100%;
        max-width:620px;

        margin:0 auto;
        padding:35px 22px;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:25px;
        box-sizing:border-box;
    }

    .presentation-photo{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .presentation-photo img{
        width:210px;
        max-width:100%;
        height:auto;

        display:block;
        margin:0 auto;

        border-radius:20px;
    }

    .presentation-texte{
        width:100%;
        box-sizing:border-box;
    }

    .nom-profil{
        margin:0 0 12px;

        font-size:26px;
        line-height:1.25;
        text-align:center;
    }

    .fondatrice{
        margin:0 0 18px;

        font-size:22px;
        line-height:1.4;
        text-align:center;
    }

    .fondatrice strong{
        white-space:nowrap;
    }

    .fonction{
        margin-bottom:25px;

        font-size:16px;
        line-height:1.5;
        text-align:center;
    }

    .texte-parcours{
        margin-bottom:18px;

        font-size:15px;
        line-height:1.75;
        text-align:left;
    }

    .texte-parcours:last-child{
        margin-bottom:0;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — SERVICES
================================== */

@media screen and (max-width:750px){

    .services{
        width:100%;
        padding:55px 15px;
        box-sizing:border-box;
    }

    .services .titre-section,
    .services h2{
        margin-bottom:25px;

        font-size:34px;
        line-height:1.2;
    }

    .services .soustitre{
        max-width:500px;
        margin:0 auto 35px;
        padding:0 10px;

        font-size:15px;
        line-height:1.6;
    }

    .services .grille-services{
    width:100%;
    max-width:620px;

    margin:0 auto;

    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;

    gap:18px !important;
}

.services .grille-services .carte-service{
    width:100% !important;
    height:auto !important;
    min-height:230px !important;

    margin:0 !important;
    padding:22px 12px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;

    justify-items:center !important;
    align-content:center !important;

    gap:14px !important;

    border-radius:20px;
    box-sizing:border-box;
}

    .services .grille-services .service-icone{
    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    font-size:36px !important;
    line-height:1 !important;
}

.services .grille-services .carte-service h3{
    margin:0 !important;
    padding:0 !important;

    font-size:18px;
    line-height:1.35;
    text-align:center;

    overflow-wrap:anywhere;
}

.services .grille-services .carte-service p{
    margin:0 !important;
    padding:0 !important;

    font-size:13px;
    line-height:1.55;
    text-align:center;
}

}

/* ==================================
   VERSION TÉLÉPHONE — COLLABORATION
================================== */

@media screen and (max-width:750px){

    .collaboration{
        width:100%;
        padding:55px 15px;

        box-sizing:border-box;
    }

    .collaboration .titre-section{
        width:100%;
        max-width:520px;

        margin:0 auto 25px;
        padding:0 10px 12px;

        font-size:34px;
        line-height:1.25;
        text-align:center;

        box-sizing:border-box;
    }

    .collaboration-introduction{
        max-width:500px;
        margin:0 auto 45px;

        padding:0 10px;

        font-size:15px;
        line-height:1.6;
        text-align:center;
    }

    .collaboration-etapes{
        width:100%;
        max-width:520px;

        margin:0 auto;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:45px !important;
    }

    .collaboration-etape{
        width:100%;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:48px 20px 25px !important;

        box-sizing:border-box;
    }

    .numero-etape{
        width:58px !important;
        height:58px !important;

        top:-29px !important;

        display:flex;
        justify-content:center;
        align-items:center;

        font-size:25px !important;
        line-height:1 !important;
    }

    .collaboration-etape h3{
        margin:0 0 14px !important;

        font-size:22px;
        line-height:1.35;
        text-align:center;
    }

    .collaboration-etape p{
        margin:0 !important;

        font-size:15px;
        line-height:1.65;
        text-align:center;
    }

    .btn-collaboration{
        display:block;

        width:max-content;
        max-width:100%;

        margin:35px auto 0;
        padding:13px 25px;

        font-size:15px;
        text-align:center;

        box-sizing:border-box;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — ATOUTS
================================== */

@media screen and (max-width:750px){

    .atouts{
        width:100%;
        padding:55px 15px;
        box-sizing:border-box;
    }

    .atouts h2{
        max-width:620px;

        margin:0 auto 25px;

        font-size:32px;
        line-height:1.3;
        text-align:center;
    }

    /* Couleurs du titre Pourquoi choisir DIGI-SAMS */

.atouts h2 .digi-dore {
    color: #C09A5B !important;
}

.atouts h2 .sams-bleu {
    color: #173f5f !important;
}

    .atouts .soustitre{
        max-width:600px;

        margin:0 auto 35px;
        padding:0 10px;

        font-size:15px;
        line-height:1.6;
        text-align:center;
    }

    .atouts .grille-atouts{
        width:100%;
        max-width:620px;

        margin:0 auto;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;

        gap:18px !important;
    }

    .atouts .grille-atouts .atout{
        width:100% !important;
        height:auto !important;
        min-height:230px !important;

        margin:0 !important;
        padding:22px 12px !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto !important;

        justify-items:center !important;
        align-content:center !important;

        gap:14px !important;

        border-radius:20px;
        box-sizing:border-box;
    }

    .atouts .grille-atouts .atout i{
        margin:0 !important;
        padding:0 !important;

        font-size:36px !important;
        line-height:1 !important;
    }

    .atouts .grille-atouts .atout h3{
        margin:0 !important;
        padding:0 !important;

        font-size:18px;
        line-height:1.35;
        text-align:center;

        overflow-wrap:anywhere;
    }

    .atouts .grille-atouts .atout p{
        margin:0 !important;
        padding:0 !important;

        font-size:13px;
        line-height:1.55;
        text-align:center;
    }

    /* Ordre souhaité sur téléphone */

    .atouts .grille-atouts .atout:nth-child(1){
        order:1;
    }

    .atouts .grille-atouts .atout:nth-child(3){
        order:2;
    }

    .atouts .grille-atouts .atout:nth-child(2){
        order:3;
    }

    .atouts .grille-atouts .atout:nth-child(4){
        order:4;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — FAQ
================================== */

@media screen and (max-width:750px){

    .faq{
        width:100%;
        padding:55px 15px;

        box-sizing:border-box;
    }

    .faq h2{
        max-width:520px;

        margin:0 auto 25px;

        font-size:32px;
        line-height:1.3;
        text-align:center;
    }

    .faq .soustitre{
        max-width:500px;

        margin:0 auto 35px;
        padding:0 10px;

        font-size:15px;
        line-height:1.6;
        text-align:center;
    }

    .faq .question{
        width:100%;
        max-width:520px;

        margin:15px auto;
        padding:22px 18px;

        border-left-width:5px;
        border-radius:12px;

        box-sizing:border-box;
    }

    .faq .question h3{
        margin:0 0 10px;

        font-size:19px;
        line-height:1.4;
        text-align:center;
    }

    .faq .question p{
        margin:0;

        font-size:14px;
        line-height:1.65;
        text-align:center;
    }

    .question:hover{
        transform:none;
    }

    .retour-haut{
        right:12px;
        bottom:15px;

        width:44px;
        height:44px;
    }

    .retour-haut i{
        font-size:22px;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — CONTACT
================================== */

@media screen and (max-width:750px){

    .contact{
        width:100%;
        padding:55px 15px;

        box-sizing:border-box;
    }

    .contact .titre-section,
    .contact h2{
        max-width:520px;

        margin:0 auto 25px;

        font-size:32px;
        line-height:1.3;
        text-align:center;
    }

    .contact .soustitre{
        max-width:500px;

        margin:0 auto 35px;
        padding:0 10px;

        font-size:16px;
        line-height:1.6;
        text-align:center;
    }

    .contact-cartes{
        width:100%;
        max-width:520px;

        margin:0 auto 25px;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;

        gap:18px !important;
    }

    .contact-carte{
        width:100% !important;
        min-height:190px !important;

        margin:0 !important;
        padding:22px 12px !important;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:14px;

        box-sizing:border-box;
    }

    .contact-carte:nth-child(3){
        grid-column:1 / -1;

        width:calc(50% - 9px) !important;
        justify-self:center;
    }

    .contact-icone{
        margin:0 !important;
        font-size:36px !important;
        line-height:1;
    }

    .contact-icone i{
        margin:0 !important;
        font-size:36px !important;
    }

    .contact-carte h3{
        margin:0 !important;

        font-size:19px;
        line-height:1.35;
        text-align:center;
    }

    .contact-carte p,
    .contact-carte a{
        margin:0 !important;

        font-size:13px;
        line-height:1.55;
        text-align:center;

        overflow-wrap:anywhere;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — FORMULAIRE
================================== */

@media screen and (max-width:750px){

    .titre-formulaire{
        max-width:520px;

        margin:35px auto 20px;
        padding:0 15px;

        font-size:19px;
        line-height:1.5;
        text-align:center;

        box-sizing:border-box;
    }

    .contact-formulaire{
        width:100%;
        max-width:520px;

        margin:0 auto;
        padding:22px 16px;

        gap:14px;

        border-radius:16px;
        box-sizing:border-box;
    }

    .contact-formulaire input,
    .contact-formulaire textarea{
        width:100%;

        padding:12px 14px;

        font-size:14px;
        line-height:1.5;

        box-sizing:border-box;
    }

    .contact-formulaire textarea{
        min-height:130px;
    }

    .choix-besoins{
        width:100%;

        margin:0;
        padding:18px 14px;

        box-sizing:border-box;
    }

    .choix-besoins legend{
        padding:0 7px;

        font-size:15px;
        line-height:1.4;
    }

    .grille-besoins{
        display:grid;
        grid-template-columns:1fr !important;

        gap:12px;
    }

    .case-besoin{
        width:100%;

        gap:10px;

        font-size:14px;
        line-height:1.45;
    }

    .contact-formulaire .case-besoin input{
        width:18px;
        height:18px;

        flex:none;
    }

    .contact-formulaire button{
        width:100%;

        padding:13px 18px;

        font-size:15px;
        line-height:1.4;
    }

}

/* ==================================
   VERSION TÉLÉPHONE — PIED DE PAGE
================================== */

@media screen and (max-width:750px){

    .footer{
        width:100%;

        padding:32px 15px 22px;

        box-sizing:border-box;
    }

    .footer-contenu{
        width:100%;
        max-width:520px;

        margin:0 auto;
    }

    .footer h3{
        margin:0 0 8px;

        font-size:25px;
        line-height:1.3;
    }

    .footer-metier{
        margin:0 0 22px;

        padding:0 10px;

        font-size:14px;
        line-height:1.5;
    }

    .footer-coordonnees{
        margin-bottom:22px;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:13px;
    }

    .footer-coordonnees a,
    .footer-coordonnees span{
        margin:0;

        font-size:14px;
        line-height:1.5;
        text-align:center;
    }

    .footer-coordonnees i{
        margin-right:7px;

        font-size:22px;
    }

    .footer-liens{
        margin-bottom:14px;

        display:flex;
        justify-content:center;
        flex-wrap:wrap;

        gap:7px 10px;
    }

    .footer-liens a,
    .footer-liens span{
        font-size:13px;
        line-height:1.5;
    }

    .footer-copyright{
        padding-top:14px;

        font-size:12px;
        line-height:1.5;
    }

}

/* Couleurs du titre Pourquoi choisir DIGI-SAMS */

.atouts h2 .digi-dore {
    color: #C09A5B !important;
}

.atouts h2 .sams-bleu {
    color: #173f5f !important;
}

/* DIGI-SAMS reste entier sous « Fondatrice de » sur téléphone */

@media screen and (max-width:750px) {

    .fondatrice .nom-marque {
        display: block;
        white-space: nowrap;
    }

}

.digi-dore {
    color: #C09A5B;
}

.sams-bleu {
    color: #173f5f;
}

:root {
    --bleu-sams: #2b6385;
}

.logo-sams {
    color: var(--bleu-sams) !important;
}

.atouts h2 .sams-bleu {
    color: var(--bleu-sams) !important;
    -webkit-text-fill-color: var(--bleu-sams) !important;
}

.digi-profil {
    color: #C09A5B !important;
    -webkit-text-fill-color: #C09A5B !important;
}

/* DIGI doré dans la présentation */

.digi-profil {
    color: #C09A5B !important;
    -webkit-text-fill-color: #C09A5B !important;
}

.fondatrice .digi-fondatrice {
    color: #C09A5B !important;
    -webkit-text-fill-color: #C09A5B !important;
}