/*
Theme Name: sitewebconcept
Theme URI: sitewebconcept.com/
Author: SiteWebconcept
Author URI: https://www.sitewebconcept.com/
Description: Theme WordPress personnalisé
Version: 1.0
Text Domain: sitewebconcept.com/
*/
:root {
          --primary-color: #f2680a;
          --text-dark: #333;
          --white: #ffffff;
          --gray-dark: #AEAFAC;
          --gray-light: #e2e2e1; 
          --gray-neutre: #e9e6e6;
          --gray-ultra: #F9F9F9;
          --gray-ultralight: #f8f9fa;
          --social-color: #34495e;
          --orange-light: #FFB757;
          --orange-dark: #c0392b;

      }

#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--orange-dark);
  width: 0%;
  z-index: 9999;
  transition: width 0.08s linear;
}
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { 
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300; 
    background: var(--gray-ultralight);
    background-repeat: no-repeat; 
    background-size: cover; 
  }

  .enter_title_posrtfolio h2 {
     font-family: 'Archivo Black', Arial, sans-serif;
     font-weight: 900;
  }

.entry-content {
  margin: 0px 10px;
  color: var(--gray-ultra);
}

.entry-content-single {
  margin: 0px 10px;
  color: var(--text-dark);
}

  /* ✓ Cible uniquement les liens dans le contenu de la page */
    .menu-footer a,
    .post-navigation a,
    .entry-content a, 
    .page-content a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    strong {
      font-weight: 800;
    }

.entry-content ul, .entry-content-single ul, .entry-content-contact ul, .text-content ul,  
.entry-content ol, .entry-content-single ol, .entry-content-contact ol, .text-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

/* Optionnel : ajoute un petit espace entre chaque ligne de la liste */
.entry-content ul li, .entry-content-single ul li, .entry-content-contact ul li, .text-content ul li,  
.entry-content ol li, .entry-content-single ol li, .entry-content-contact ol li, .text-content ol li {
    margin-bottom: 8px; 
}

  /* ── HERO TITLE ── */
  #heroTitle {
    position: fixed;
    top: calc(50% - 120px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Placé sous le bloc de texte transparent (z-index: 2) pour l'effet de recouvrement */
    text-align: center;
    pointer-events: none;
    width: 100%;
    padding: 0 1rem;
    transition: opacity 0.05s linear;
  }

  #heroTitle h1 {
    font-family: 'Archivo Black', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    color: var(--white);
    letter-spacing: 0.04em;
    line-height: 1.05;
    filter: blur(0.6px); /* Filtre blur appliqué */
    /* Text-shadow renforcé et plus foncé en arrière-plan */
    text-shadow:
      0 0 35px rgba(0, 0, 0, 0.7),
      0 4px 25px rgba(0, 0, 0, 0.85),
      0 15px 50px rgba(0, 0, 0, 0.95);
  }

  /* Chaque conteneur de chapitre */
  .scrolling-section {
    position: relative;
    width: 100%;
    /* 100vh pour l'image fixe + 100vh pour la hauteur de défilement du texte */
    height: 200vh; 
  }

    /* Chaque conteneur de chapitre */
  .scrolling-section-blog {
    position: relative;
    width: 100%;
    /* 100vh pour l'image fixe + 100vh pour la hauteur de défilement du texte */
    height: auto; 
    margin-top: -210px;
  }

  /* L'image de fond reste bloquée pendant le scroll de SA section */
  .bg-fixed {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    filter: brightness(0.72);
  }


  /* Le bloc de texte prend toute la largeur et fait 100vh de haut */
  .text-block-full {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 2; /* Passe devant l'image et devant le titre fixe */
    
    /* Effet de verre transparent */
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 0px solid rgba(255,255,255,0.4);
    
    /* Centrage du contenu du texte */
    display: flex;
    align-items: center;
    justify-content: center;
  }

   /* Le bloc de texte prend toute la largeur et fait 100vh de haut */
  .text-block-full-blog {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2; /* Passe devant l'image et devant le titre fixe */
    background-color: transparent;
    
    /* Centrage du contenu du texte */
    display: flex;
    align-items: center;
    justify-content: center;
  } 

    .text-block-full-single {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    z-index: 2; /* Passe devant l'image et devant le titre fixe */
    
    /* Effet de verre transparent */
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 0px solid rgba(255,255,255,0.4);
    
    /* Centrage du contenu du texte */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-content {
    max-width: 1200px;
    padding: 2rem;
    text-align: left;
    color: var(--text-dark);
  }

  .text-content-blog {
    /*max-width: 1400px;*/
    width: 100%;
    padding: 2rem 2rem 4rem;
    text-align: center;
  }

  @media screen and (max-width: 768px) {
       .text-content, .text-content-blog  {
         padding: 20px;
       }
  }

  .block-label {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--orange-dark);
    margin-bottom: 1.2rem;
    font-weight: 400;
  }

  .text-content h2 {
     font-family: 'Archivo Black', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 3.1rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--social-color);
  }

  .text-content p {
    font-size: clamp(0.8rem, 6vw, 1.05rem);
    line-height: 1.7;
    opacity: 0.9;
  }

  .container-buttons {
    display: flex;         /* Active le mode Flexbox */
    flex-wrap: wrap;       /* Permet aux boutons de passer à la ligne sur mobile si l'écran est trop petit */
    gap: 50px;             /* Crée un espace exact de 50px entre chaque bouton (horizontalement et verticalement) */
    justify-content: flex-start; /* Aligne les boutons au début (à gauche). Tu peux mettre 'center' pour les centrer */
    align-items: center;   /* Aligne verticalement les boutons s'ils n'ont pas la même hauteur */
    margin: 30px 0;        /* Ajoute un peu d'espace au-dessus et en dessous du bloc de boutons */
}

  .learn_more {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  text-align: center;
  background: linear-gradient(to right, #F70044, #FFB757);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 20px;
}

/* Effet au survol (Hover) */
.learn_more:hover {
  color: var(--social-color); /* Optionnel : passe le texte en jaune/orange pour le style sur le gris */
}

.btn-gradient-border {
    display: inline-block; /* Permet d'appliquer correctement le padding et les dimensions */
    position: relative;
    padding: 12px 24px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    background-color: var(--white);
    border: 2px solid var(--orange-dark);
    color:var(--orange-dark);
}

/* 3. OPTIONNEL : EFFET AU SURVOL (HOVER) */
.btn-gradient-border:hover {
    box-shadow: 0 5px 15px rgba(247, 0, 68, 0.2); /* Ombre douce colorée */
}

  /* ── LOGO ── */
  #siteLogo {
    position: fixed;
    top: 0.9rem;
    left: 2.1rem;
    z-index: 10000;
    height: 50px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  }

  #siteLogo svg { 
    height: 100%; 
    width: auto; 
    display: block; 
  }

  .navigation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center;
    gap: 50px;           
}

  /* ── MENU BUTTON ── */
  #menuBtn {
    position: fixed;
    top: 0.5rem;
    right: 2.1rem;
    z-index: 10000;
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: margin-right 0.3s ease;
  }

  #menuBtn svg {
    width: 54px;
    height: 54px;
    transition: transform 0.55s cubic-bezier(.77,0,.18,1);
    transform-origin: 24px 24px;
  }

  #menuBtn.open svg { transform: rotate(45deg) scale(1.1); }

  /* ── MENU OVERLAY ── */
  #menuOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(.77,0,.18,1);
  }

  #menuOverlay.open { opacity: 1; pointer-events: auto; }

  .menu-nav { list-style: none; text-align: center; }
  .menu-nav li { overflow: hidden; margin: 0.3rem 0; }

  .menu-nav a {
    display: inline-block;
    font-family: 'Archivo Black', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 6vw, 5rem);
    color: rgba(52,73,94,0.85);
    text-decoration: none;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transform: translateY(60px);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(.77,0,.18,1),
                opacity   0.55s cubic-bezier(.77,0,.18,1),
                color     0.2s ease;
  }

  .menu-nav a:hover { color: var(--primary-color); }

  #menuOverlay.open .menu-nav a { transform: translateY(0); opacity: 1; }
  #menuOverlay.open .menu-nav li:nth-child(1) a { transition-delay: 0.08s; }
  #menuOverlay.open .menu-nav li:nth-child(2) a { transition-delay: 0.14s; }
  #menuOverlay.open .menu-nav li:nth-child(3) a { transition-delay: 0.20s; }
  #menuOverlay.open .menu-nav li:nth-child(4) a { transition-delay: 0.26s; }

  .menu-footer {
    position: absolute;
    bottom: 2.5rem;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26,22,18,0.25);
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300; /* Poids léger (Light) */
    -webkit-font-smoothing: antialiased; /
  }

  /* ── SCROLL TO TOP ── */
  #toTop {
    position: fixed;
    bottom: 40px;
    right: 2rem;
    z-index: 9999;
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #toTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  #toTop:hover { background: var(--orange-dark); transform: translateY(-4px); }
  #toTop svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }


  /* ── MASONRY GRID ── */
.masonry-grid {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
  column-count: 1;
  column-gap: 20px;
}

.grid-item {
  break-inside: avoid;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  padding: 0;
}

.grid-item:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}

.grid-item-img {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.item-content { 
  padding: 15px; 
  text-align: center;
}

.post-date {
  color:var(--orange-light);
  font-size: 0.8em;
  line-height: 1.8em;
}

.grid-item h3 {
  margin-top: 0;
  margin-bottom: 5px;
  color: var(--gray-light);
  font-size: 1.15rem;
}

.grid-item a {
  text-decoration: none;
}

.grid-item p {
  font-size: 0.88rem;
  color: var(--gray-ultra);
  line-height: 1.6;
  font-weight: 300;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  margin-bottom: 0;
  transition: transform 0.45s ease;
}

.grid-item:hover img {
  transform: scale(1.06);
}

.item-tag {
  display: inline-block;
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color); /* Harmonisé sur ton dégradé jaune/orangé */
  margin-bottom: 6px;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200; /* Poids léger (Light) */
  -webkit-font-smoothing: antialiased; /
}

/* ── BOUTONS & LIENS ── */
.entre-link {
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 20px 0; 
}

.entre-link-home {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
}

.mon-bouton {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 50px;
  text-align: center;
  background: linear-gradient(to right, #F70044, #FFB757);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Effet au survol (Hover) */
.mon-bouton:hover {
  color: var(--social-color); /* Optionnel : passe le texte en jaune/orange pour le style sur le gris */
}

@media (max-width: 600px) {
    .masonry-grid { margin-left:0; margin-right: 0 ;}
    .text-content-blog { margin-left:0px; margin-right: 0px ;}
}

/* ── RESPONSIVE MEDIA QUERIES ── */
@media (min-width: 600px) {
    .masonry-grid { column-count: 2; }
}

@media (min-width: 1024px) {
  .masonry-grid { column-count: 5; }
  }

/* MENU SOCIAL NETWORK */

.post-categories {
   font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 200;
   color: var(--orange-dark);
   font-size: clamp(0.8rem, 2vw, 1.2rem); 
}
/* 1. Structure du menu avec Flexbox */
.social-menu {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

/* 2. Style des liens et masquage du texte */
.social-menu a {
    display: inline-flex;
    width: 24px;  /* Taille de votre picto */
    height: 24px;
    font-size: 0; /* Masque le texte du lien proprement */
    color: var(--social-color);  /* Couleur par défaut de l'icône */
    transition: color 0.3s ease, transform 0.2s ease;
    position: relative;
}

/* Effet au survol global (facultatif) */
.social-menu a:hover {
    color: var(--primary-color); /* Couleur au survol */
   /* transform: translateY(-2px);*/
}

/* 3. Configuration du pseudo-élément pour accueillir le SVG */
.social-menu a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor; /* Permet au SVG de changer de couleur au :hover */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 4. Injection dynamique des pictogrammes SVG selon l'URL */
.social-menu a[href*="facebook.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.social-menu a[href*="linkedin.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.23 0H1.77C.8 0 0 .77 0 1.72v20.56C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.2 0 22.23 0zM7.12 20.45H3.56V9H7.12v11.45zM5.34 7.43c-1.14 0-2.06-.92-2.06-2.06 0-1.14.92-2.06 2.06-2.06 1.14 0 2.06.92 2.06 2.06 0 1.14-.92 2.06-2.06 2.06zm15.11 13.02h-3.56v-5.6c0-1.34-.03-3.05-1.86-3.05-1.86 0-2.14 1.45-2.14 2.95v5.7H9.33V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.23 0H1.77C.8 0 0 .77 0 1.72v20.56C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.2 0 22.23 0zM7.12 20.45H3.56V9H7.12v11.45zM5.34 7.43c-1.14 0-2.06-.92-2.06-2.06 0-1.14.92-2.06 2.06-2.06 1.14 0 2.06.92 2.06 2.06 0 1.14-.92 2.06-2.06 2.06zm15.11 13.02h-3.56v-5.6c0-1.34-.03-3.05-1.86-3.05-1.86 0-2.14 1.45-2.14 2.95v5.7H9.33V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29z'/%3E%3C/svg%3E");
}

.social-menu a[href*="instagram.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
}

.social-menu a[href*="x.com"]::before,
.social-menu a[href*="twitter.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.social-menu a[href*="tiktok.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.02 1.59 4.23.73.9 1.69 1.63 2.77 2.06v4.01c-1.35-.11-2.68-.61-3.75-1.47-.66-.53-1.21-1.19-1.6-1.94v6.52c-.06 1.83-.58 3.65-1.58 5.14-1.46 2.13-3.9 3.45-6.48 3.44-2.83-.05-5.46-1.71-6.62-4.32-1.43-3.05-.6-6.86 2.02-8.98 1.55-1.29 3.59-1.9 5.61-1.64v3.99c-.71-.16-1.47-.1-2.11.23-.97.47-1.64 1.49-1.67 2.57-.08 1.62 1.2 3.05 2.81 3.09 1.46.08 2.83-.94 3.09-2.39.06-.29.08-.59.08-.88V.02z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.02 1.59 4.23.73.9 1.69 1.63 2.77 2.06v4.01c-1.35-.11-2.68-.61-3.75-1.47-.66-.53-1.21-1.19-1.6-1.94v6.52c-.06 1.83-.58 3.65-1.58 5.14-1.46 2.13-3.9 3.45-6.48 3.44-2.83-.05-5.46-1.71-6.62-4.32-1.43-3.05-.6-6.86 2.02-8.98 1.55-1.29 3.59-1.9 5.61-1.64v3.99c-.71-.16-1.47-.1-2.11.23-.97.47-1.64 1.49-1.67 2.57-.08 1.62 1.2 3.05 2.81 3.09 1.46.08 2.83-.94 3.09-2.39.06-.29.08-.59.08-.88V.02z'/%3E%3C/svg%3E");
}

/* ---  MENU SOCIAL NET WORK END ---  */

/* --- Conteneur principal (Grille de 3 colonnes par défaut) --- */
        .med-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            padding: 20px;
            margin: 0;
        }

        /* --- Style de chaque bloc de contenu --- */
        .med-card {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centre le cercle, le titre et le texte horizontalement */
            text-align: center;   /* Centre l'alignement du texte */
            background-color: rgba(255, 255, 255, 0.2);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            padding: 0px;
        }

        /* --- Le cercle rouge entourant le SVG --- */
        .med-icon-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;          /* Taille du cercle rouge */
            height: 64px;
            background-color: var(--primary-color);
            border-radius: 50%;   /* En fait un cercle parfait */
            margin-bottom: 0px;  /* Espace sous le cercle */
            margin-top: -20px;
        }

        .med-icon-circle-single {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;          /* Taille du cercle rouge */
            height: 64px;
            background-color: var(--primary-color);
            border-radius: 50%;   /* En fait un cercle parfait */
            margin-bottom: 0px;  /* Espace sous le cercle */
            margin-top: 20px;
        }

        /* --- Le picto SVG à l'intérieur du cercle --- */
        .med-icon-circle svg {
            width: 32px;          /* Largeur forcée à 32px */
            height: 32px;         /* Hauteur forcée à 32px */
            fill: var(--white);        /* Couleur blanche */
        }

        /* --- Style du Titre --- */
        .med-card h3 {
            margin: 0 0 10px 0;
            font-size: 1.10rem;
            color: var(--gray-neutre); 
            text-transform: uppercase;
        }

        .med-card a {
          text-decoration: none;
          color: var(--gray-neutre);
        }

        /* --- Style du Texte (Forcé sur 3 lignes max) --- */
        .med-card p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.32;  
            color: var(--gray-ultra);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;           
        }

        /* ==========================================================================
        RESPONSIVE : Gestion des tailles d'écrans
        ========================================================================== */

        /* Écrans Moyens (Entre 800px et 1000px) : Passage automatique en 2 colonnes */
        @media (min-width: 800px) and (max-width: 1000px) {
            .med-grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Écrans Petits (Moins de 800px) : Passage automatique en 1 colonne unique */
        @media (max-width: 799px) {
            .med-grid-container {
                grid-template-columns: 1fr;
                gap: 40px; /* Plus d'espace vertical entre les blocs empilés */
                margin: 0;
                padding: 0;
            }
        }
        /*PICTOS END*/

/* ==========================================================================
   Classe de Base commune pour tous les Pictogrammes
========================================================================== */
.picto {
    display: inline-block;
    width: 24px;   /* Taille par défaut ajustable */
    height: 24px;
    background-color: currentColor; /* Permet de changer la couleur via le CSS (ex: color: red;) */
    vertical-align: middle;
    
    /* Propriétés de masquage */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Modifier les tailles facilement si besoin */
.picto-sm { width: 16px; height: 16px; }
.picto-lg { width: 20px; height: 20px; }
.picto-xl { width: 25px; height: 25px; }
.picto-xxl { width: 30px; height: 30px; }

/* ==========================================================================
   Attributs Spécifiques (SVG encodés en Data URI)
   ========================================================================== */

/* Clock */
.picto-clock {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
}

.picto-code {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-280 40-480l200-200 56 56-143 144 143 144-56 56Zm178 132-76-24 200-640 76 24-200 640Zm302-132-56-56 143-144-143-144 56-56 200 200-200 200Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-280 40-480l200-200 56 56-143 144 143 144-56 56Zm178 132-76-24 200-640 76 24-200 640Zm302-132-56-56 143-144-143-144 56-56 200 200-200 200Z'/%3E%3C/svg%3E");
}

/* Device (Écrans / Appareils) */
.picto-device {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M80-160v-80h400v80H80Zm120-120q-33 0-56.5-23.5T120-360v-360q0-33 23.5-56.5T200-800h560q33 0 56.5 23.5T840-720H200v360h280v80H200Zm600 40v-320H640v320h160Zm-180 80q-25 0-42.5-17.5T560-220v-360q0-25 17.5-42.5T620-640h200q25 0 42.5 17.5T880-580v360q0 25-17.5 42.5T820-160H620Zm100-300q13 0 21.5-9t8.5-21q0-13-8.5-21.5T720-520q-12 0-21 8.5t-9 21.5q0 12 9 21t21 9Zm0 60Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M80-160v-80h400v80H80Zm120-120q-33 0-56.5-23.5T120-360v-360q0-33 23.5-56.5T200-800h560q33 0 56.5 23.5T840-720H200v360h280v80H200Zm600 40v-320H640v320h160Zm-180 80q-25 0-42.5-17.5T560-220v-360q0-25 17.5-42.5T620-640h200q25 0 42.5 17.5T880-580v360q0 25-17.5 42.5T820-160H620Zm100-300q13 0 21.5-9t8.5-21q0-13-8.5-21.5T720-520q-12 0-21 8.5t-9 21.5q0 12 9 21t21 9Zm0 60Z'/%3E%3C/svg%3E");
}

/* Translate (Traduction / Langues) */
.picto-translate {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-80-40-120H160q-33 0-56.5-23.5T80-280v-520q0-33 23.5-56.5T160-880h240l35 120h365q35 0 57.5 22.5T880-680v520q0 33-22.5 56.5T800-80H480ZM286-376q69 0 113.5-44.5T444-536q0-8-.5-14.5T441-564H283v62h89q-8 28-30.5 43.5T287-443q-39 0-67-28t-28-69q0-41 28-69t67-28q18 0 34 6.5t29 19.5l49-47q-21-22-50.5-34T286-704q-67 0-114.5 47.5T124-540q0 69 47.5 116.5T286-376Zm268 20 22-21q-14-17-25.5-33T528-444l26 88Zm50-51q28-33 42.5-63t19.5-47H507l12 42h40q8 15 19 32.5t26 35.5Zm-84 287h280q18 0 29-11.5t11-28.5v-520q0-18-11-29t-29-11H447l47 162h79v-42h41v42h146v41h-51q-10 38-30 74t-47 67l109 107-29 29-108-108-36 37 32 111-80 80Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-80-40-120H160q-33 0-56.5-23.5T80-280v-520q0-33 23.5-56.5T160-880h240l35 120h365q35 0 57.5 22.5T880-680v520q0 33-22.5 56.5T800-80H480ZM286-376q69 0 113.5-44.5T444-536q0-8-.5-14.5T441-564H283v62h89q-8 28-30.5 43.5T287-443q-39 0-67-28t-28-69q0-41 28-69t67-28q18 0 34 6.5t29 19.5l49-47q-21-22-50.5-34T286-704q-67 0-114.5 47.5T124-540q0 69 47.5 116.5T286-376Zm268 20 22-21q-14-17-25.5-33T528-444l26 88Zm50-51q28-33 42.5-63t19.5-47H507l12 42h40q8 15 19 32.5t26 35.5Zm-84 287h280q18 0 29-11.5t11-28.5v-520q0-18-11-29t-29-11H447l47 162h79v-42h41v42h146v41h-51q-10 38-30 74t-47 67l109 107-29 29-108-108-36 37 32 111-80 80Z'/%3E%3C/svg%3E");
}

/* SEO (Optimisation / Recherche) */
.picto-seo {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m590-160 80 80H240q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h360l200 240v480q0 20-8.5 36.5T768-96L560-302q-17 11-37 16.5t-43 5.5q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 43T618-360l102 104v-356L562-800H240v640h350Zm-53.5-223.5Q560-407 560-440t-23.5-56.5Q513-520 480-520t-56.5 23.5Q400-473 400-440t23.5 56.5Q447-360 480-360t56.5-23.5Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m590-160 80 80H240q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h360l200 240v480q0 20-8.5 36.5T768-96L560-302q-17 11-37 16.5t-43 5.5q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 43T618-360l102 104v-356L562-800H240v640h350Zm-53.5-223.5Q560-407 560-440t-23.5-56.5Q513-520 480-520t-56.5 23.5Q400-473 400-440t23.5 56.5Q447-360 480-360t56.5-23.5Z'/%3E%3C/svg%3E");
}

/* Design (Édition / Création graphique) */
.picto-design {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm160-240v-170l367-367q12-12 27-18t30-6q16 0 30.5 6t26.5 18l56 57q11 12 17 26.5t6 29.5q0 15-5.5 29.5T897-728L530-360H360Zm80-80h56l232-232-28-28-29-28-231 231v57Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm160-240v-170l367-367q12-12 27-18t30-6q16 0 30.5 6t26.5 18l56 57q11 12 17 26.5t6 29.5q0 15-5.5 29.5T897-728L530-360H360Zm80-80h56l232-232-28-28-29-28-231 231v57Z'/%3E%3C/svg%3E");
}

/* Chip (Puce électronique / Processeur / Hardware) */
.picto-chip {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80 320v-80h-80q-33 0-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33 23.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33 0 56.5 23.5T760-680v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80 320v-80h-80q-33 0-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33 23.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33 0 56.5 23.5T760-680v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400Z'/%3E%3C/svg%3E");
}

/* Calendar (Calendrier / Date / Événement) */
.picto-calendar {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
}

/* User Search (Recherche d'utilisateur / Profils) */
.picto-user-search {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T520-640q0-33-23.5-56.5T440-720q-33 0-56.5 23.5T360-640q0 33 23.5 56.5T440-560ZM884-20 756-148q-21 12-45 20t-51 8q-75 0-127.5-52.5T480-300q0-75 52.5-127.5T660-480q75 0 127.5 52.5T840-300q0 27-8 51t-20 45L940-76l-56 56ZM731-229q29-29 29-71t-29-71q-29-29-71-29t-71 29q-29 29-29 71t29 71q29 29 71 29t71-29Zm-611 69v-111q0-34 17-63t47-44q51-26 115-44t142-18q-12 18-20.5 38.5T407-359q-60 5-107 20.5T221-306q-10 5-15.5 14.5T200-271v31h207q5 22 13.5 42t20.5 38H120Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T520-640q0-33-23.5-56.5T440-720q-33 0-56.5 23.5T360-640q0 33 23.5 56.5T440-560ZM884-20 756-148q-21 12-45 20t-51 8q-75 0-127.5-52.5T480-300q0-75 52.5-127.5T660-480q75 0 127.5 52.5T840-300q0 27-8 51t-20 45L940-76l-56 56ZM731-229q29-29 29-71t-29-71q-29-29-71-29t-71 29q-29 29-29 71t29 71q29 29 71 29t71-29Zm-611 69v-111q0-34 17-63t47-44q51-26 115-44t142-18q-12 18-20.5 38.5T407-359q-60 5-107 20.5T221-306q-10 5-15.5 14.5T200-271v31h207q5 22 13.5 42t20.5 38H120Z'/%3E%3C/svg%3E");
}

/* Cart (Panier d'achat / E-commerce) */
.picto-cart {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M223.5-103.5Q200-127 200-160t23.5-56.5Q247-240 280-240t56.5 23.5Q360-193 360-160t-23.5 56.5Q313-80 280-80t-56.5-23.5Zm400 0Q600-127 600-160t23.5-56.5Q647-240 680-240t56.5 23.5Q760-193 760-160t-23.5 56.5Q713-80 680-80t-56.5-23.5ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M223.5-103.5Q200-127 200-160t23.5-56.5Q247-240 280-240t56.5 23.5Q360-193 360-160t-23.5 56.5Q313-80 280-80t-56.5-23.5Zm400 0Q600-127 600-160t23.5-56.5Q647-240 680-240t56.5 23.5Q760-193 760-160t-23.5 56.5Q713-80 680-80t-56.5-23.5ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z'/%3E%3C/svg%3E");
}

/* Settings (Paramètres / Configuration) */
.picto-settings {
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z'/%3E%3C/svg%3E");
}

.service-icon {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    min-height: 100vh;
}

/* ── CONTENEUR PRINCIPAL DE LA NAVIGATION ── */
.post-navigation {
    display: flex;
    /* Mobile : reste sur une seule ligne et se centre au milieu */
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 40px 0;
    gap: 20px;
}

/* Style de chaque bloc de lien */
.post-navigation .colpaging {
    flex: 1;
    max-width: 45%; /* On augmente légèrement pour le mobile */
    text-align: center; /* Tout le monde est centré sur mobile */
}

/* ── PASSAGE EN DESKTOP (Écrans supérieurs à 600px) ── */
@media (min-width: 600px) {
    .post-navigation {
        /* On pousse le premier au début (gauche) */
        justify-content: flex-start; 
    }

    .post-navigation .colpaging {
        max-width: 40%;
    }

    /* S'il n'y a qu'un seul élément (Précédent OU Suivant), il se cale à gauche */
    .post-navigation .colpaging:only-child {
        text-align: left !important;
    }

    /* S'ils sont deux, on remet les alignements gauche / droite d'origine */
    .post-navigation .colpaging:first-child:not(:only-child) {
        text-align: left;
    }

    .post-navigation .colpaging:last-child:not(:only-child) {
        text-align: right;
        margin-left: auto; /* Pousse le bouton Suivant tout à droite */
    }
}

/* ── STYLE DES LIENS (Inchangé) ── */
.post-navigation .colpaging a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;
}

.post-navigation .colpaging a:hover {
    color: var(--orange-dark);
}

/* ── STYLE DES LIENS (Inchangé) ── */
.post-navigation .colpaging a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;
}

.post-navigation .colpaging a:hover {
    color: var(--orange-dark);
}

/*Formulaire de contact*/
fieldset, .screen-reader-response ul, .hidden-fields-container {
  border: none;
  padding-left: 15px;
  list-style-type: none;
}
/* Champs texte et email */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
 /* background-image: linear-gradient(to right, rgba(29,173,153,0.9), rgba(29,173,153,0.5));*/
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 25px;
  padding: 14px;
  color: var(--primary-color);
  border: var(--primary-color) 2px solid;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

/* Effet focus */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  background-image: none;
  border:none;
  background-color: #fff;
  color: var(--text-dark);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Placeholder couleur blanche sur fond dégradé */
.wpcf7 ::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* Bouton submit */
.wpcf7 input[type="submit"] {
  background-image: linear-gradient(to right, rgba(245,73,39,0.9), rgba(255, 183, 87,0.9));
  border: none;
  border-radius: 25px;
  padding: 14px 35px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover du bouton */
.wpcf7 input[type="submit"]:hover {
  background-image: none;
  background-color: var(--white);
  color: var(--primary-color);
}

/* Animation légère sur clic */
.wpcf7 input[type="submit"]:active {
  transform: scale(0.97);
}

/* Pour uniformiser le textarea */
.wpcf7 textarea {
  resize: vertical;
  min-height: 120px;
}

.wpcf7 .grecaptcha-badge,
.wpcf7-form .g-recaptcha {
    margin-top: 20px;
    margin-bottom: 20px;
}
.mon-recaptcha-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
}

/*fin formulaire de contact*/

/* Conteneur du formulaire */

.form-container {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    margin: 0 auto;
}

/* Structure Grid - Version Mobile par défaut (1 seule colonne) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px; /* Espace entre les champs */
    margin-bottom: 20px;
}

/* Style des groupes de champs */
.form-group {
    display: flex;
    flex-direction: column;
}

.submit-align {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre les éléments comme les boutons ou blocs */
}

/* À partir de 600px de large (Desktop / Tablette) : Tout s'aligne à gauche */
@media (min-width: 600px) {
  .submit-align {
    text-align: left;
    align-items: flex-start; /* Aligne les boutons et blocs à gauche */
  }
}

/* --- Media Query pour les tablettes et écrans d'ordinateurs --- */
@media (min-width: 768px) {
    .form-grid {
        /* On passe à 3 colonnes égales */
        grid-template-columns: repeat(3, 1fr);
    }

    .full-width {
        /* Le message s'étale de la 1ère à la dernière colonne (les 3 colonnes) */
        grid-column: span 3;
    }
}

/* Base commune pour tous les dividers */
.divider {
  margin: 20px auto; /* Centre les dividers horizontalement et les espace */
  border: none;
  border-radius: 5px; /* Optionnel : arrondit légèrement les bords pour un effet plus propre */
  background: linear-gradient(to right, rgba(245, 73, 39, 0.9), rgba(255, 183, 87, 0.9));
}

/* 1er Divider : Le plus petit et fin */
.div-small {
  height: 2px;
  width: 30%; /* Ton minimum */
}

/* 2ème Divider : L'intermédiaire */
.div-medium {
  height: 2px;
  width: 20%;
}

/* 3ème Divider : Le plus grand et épais */
.div-large {
  height: 3px;
  width: 60%; /* Ton maximum */
}

#section-contact {
  margin-top: -42px;
}

@media (max-width: 768px) {
        #section-contact {
      margin-top: 20px;
    }
}

.banner {
  background: rgba(52, 73, 94, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.2rem 2rem;
  margin: 0 auto;
  max-width: 700px;
}

.sub-title {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300; /* Poids léger (Light) */
    -webkit-font-smoothing: antialiased; 
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: clamp(1rem, 5vw, 2rem);
    line-height: 2.5rem;
    color: var(--gray-light);
}
.description-title {
   text-transform: uppercase;
   color: var(--orange-dark);
   font-size: 1.3rem;
   font-size: clamp(0.9rem, 5vw, 1.3rem);
   font-weight: 800;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.entry-content-home {
  margin: 0 auto;
  max-width: 700px;
  color:var(--gray-neutre);
  padding: 20px;
  text-align: center;
  font-size: clamp(0.9rem, 5vw, 1.2rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

.entry-content-contact {
  margin: 0 auto;
  max-width: 1400px;
  color:var(--gray-neutre);
  padding: 0px;
  text-align: center;
  font-size: clamp(0.9rem, 5vw, 1.2rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}