/* ========== Palette issue du logo ========== */
    :root {
      --clr-primary: #070423;
      --clr-accent : #6003c1;
      --clr-light  : #f5f5f9;
      --clr-white  : #ffffff;
      --clr-text   : #333333;
    }

    /* ========== Reset & base ========== */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter',sans-serif;
      background:var(--clr-light);
      color:var(--clr-text);
      line-height:1.6;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}

    /* ===== Logo ===== */
    .logo{width:220px;height:auto;margin-bottom:1.5rem;}

    /* ========== Utilitaires ========== */
    .wrapper{width:min(90%,1200px);margin-inline:auto}
    .btn{
      display:inline-block;
      padding:.9rem 2rem;
      background:var(--clr-accent);
      color:var(--clr-white)!important;
      font-weight:600;
      border-radius:50px;
      transition:transform .2s ease,box-shadow .2s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}

    /* ========== En-tête (hero) ========== */
    header{
      background:linear-gradient(135deg,rgba(7,4,35,.95) 0%,rgba(96,3,193,.8) 100%),
      url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;
      color:var(--clr-white);
      text-align:center;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      padding:6rem 1rem 8rem;
      position:relative;
      overflow:hidden;
    }
    header h1{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-.03em;margin-bottom:.5rem}
    header p{font-size:1.25rem;max-width:600px;margin-bottom:2rem}
    header::after{
      content:"";
      position:absolute;bottom:0;left:0;right:0;height:80px;
      background:linear-gradient(to bottom,transparent, var(--clr-light));
    }

    /* ========== Navigation collante ========== */
    nav{
      position:sticky;top:0;z-index:100;
      background:var(--clr-white);
      box-shadow:0 2px 5px rgba(0,0,0,.05);
    }
    .nav-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 2rem;padding:1rem .5rem}
    nav a{font-weight:600;color:var(--clr-text);opacity:.85}
    nav a:hover{color:var(--clr-accent);opacity:1}
    nav a[aria-current="page"]{color:var(--clr-accent);opacity:1}

    /* Recrutement */
    .recruitment-main{padding:3rem 0 0}
    .recruitment-intro{max-width:780px;margin-bottom:2.5rem}
    .recruitment-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--clr-accent);margin-bottom:.75rem}
    .recruitment-intro .recruitment-kicker{margin-top:2rem}
    .recruitment-intro h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15;color:var(--clr-primary);margin-bottom:1.25rem;letter-spacing:-.03em}
    .recruitment-intro>p:last-child{font-size:1.1rem;color:#555;max-width:650px}
    .recruitment-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
    .recruitment-content{display:grid;gap:1.5rem}
    .recruitment-card{background:white;border-radius:1rem;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 8px 24px rgba(7,4,35,.06)}
    .recruitment-card h2{font-size:1.4rem;line-height:1.35;color:var(--clr-primary);margin-bottom:1rem}
    .recruitment-card>p{margin-bottom:1rem}
    .recruitment-domains{display:grid;gap:1.5rem;margin:1.5rem 0}
    .recruitment-domains>div{border-left:3px solid #ede2fa;padding-left:1rem}
    .recruitment-domains span{font-size:.8rem;color:var(--clr-accent);font-weight:700}
    .recruitment-domains h3{font-size:1.05rem;color:var(--clr-primary);margin:.25rem 0}
    .recruitment-domains p{font-size:.95rem;color:#555}
    .recruitment-apply{border-top:4px solid var(--clr-accent)}
    section.recruitment-apply{padding:clamp(1.25rem,3vw,2rem)}
    section.recruitment-apply h2{text-align:left}
    .recruitment-apply ul{padding-left:1.2rem;margin:1rem 0 1.5rem;color:#555;font-size:.95rem}
    .recruitment-apply li{margin:.5rem 0}
    .recruitment-apply .btn{padding:.85rem 1rem;display:block;text-align:center}
    .recruitment-mail{font-size:.9rem;margin-top:1rem;overflow-wrap:anywhere}
    .recruitment-mail a{color:var(--clr-accent);text-decoration:underline}
    .application-email{background:transparent;border:0;padding:0;font:inherit;color:var(--clr-accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;max-width:100%;cursor:pointer;user-select:text;text-align:left;min-height:44px}
    .application-copy-button{border:0;font:inherit;cursor:pointer;width:100%}
    .application-email:focus-visible,.application-copy-button:focus-visible{outline:3px solid var(--clr-accent);outline-offset:4px}
    .application-email[hidden],.application-copy-button[hidden]{display:none}
    .recruitment-note{font-size:.8rem;color:#666}
    .application-step{border-top:1px solid #e9e3f0;margin-top:1.5rem;padding-top:1.5rem}
    .application-step h3{font-size:1.05rem;line-height:1.4;color:var(--clr-primary);margin-bottom:.75rem}
    .application-step h3>span{display:block;color:var(--clr-accent);font-size:.8rem;margin-bottom:.35rem}
    .application-step p{font-size:.9rem;margin:.8rem 0}
    .application-step .recruitment-note{font-size:.8rem}
    .recruitment-apply .application-filenames{list-style:none;padding:0;margin:1rem 0}
    .application-filenames li{background:#f5f2fa;padding:.75rem;border-radius:8px}
    .application-filenames strong,.application-filenames code{display:block;font-size:.8rem}
    .application-filenames code{color:var(--clr-accent);margin-top:.3rem;overflow-wrap:anywhere}
    .recruitment-home{display:flex;align-items:center;gap:2rem;justify-content:space-between;padding:2.5rem;background:#eee7f8;border-radius:1rem;margin-bottom:2rem}
    .recruitment-home>div{max-width:650px}
    .recruitment-home h2{text-align:left;font-size:1.8rem;line-height:1.25}
    .recruitment-home .btn{flex-shrink:0;text-align:center;max-width:290px}
    .recruitment-main a:focus-visible{outline:3px solid #b97aff;outline-offset:4px}
    @media(max-width:899px){.recruitment-layout{grid-template-columns:1fr}.recruitment-home{flex-direction:column;align-items:flex-start;padding:1.5rem}.recruitment-home .btn{max-width:100%}}

    /* Rendez-vous : accès direct sans fenêtre JavaScript, calendrier adaptatif. */
    .booking-main{padding:3rem 0 0}
    .booking-intro{max-width:780px;margin-bottom:2rem}
    .booking-back{color:var(--clr-accent);text-decoration:underline;text-underline-offset:3px}
    .booking-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--clr-accent);margin:2rem 0 .6rem}
    .booking-intro h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.2;color:var(--clr-primary);margin-bottom:1rem}
    .booking-intro>p:last-child{color:#555;font-size:1.1rem}
    .booking-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:1.5rem;align-items:start}
    .booking-calendar,.booking-help{background:var(--clr-white);border-radius:1rem;box-shadow:0 8px 24px rgba(7,4,35,.06);overflow:hidden}
    .booking-toolbar{padding:1.5rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}
    .booking-toolbar h2,.booking-help h2{font-size:1.15rem;color:var(--clr-primary);margin-bottom:.4rem}
    .booking-toolbar p,.booking-help p{font-size:.95rem;color:#555}
    .booking-toolbar .btn{padding:.75rem 1.2rem;text-align:center}
    .booking-status{font-size:.85rem;color:#555;padding:1rem 1.5rem;background:#f0eafa}
    .booking-status:empty{display:none}
    #booking-frame-container iframe{display:block;width:100%;height:900px;min-height:70vh;border:0;background:white}
    .booking-help{padding:1.5rem;border-top:4px solid var(--clr-accent)}
    .booking-help-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f0eafa;color:var(--clr-accent);font-size:1.5rem;margin-bottom:1rem}
    .booking-phone,.booking-email{display:block;color:var(--clr-accent);font-weight:600;margin-top:1rem;overflow-wrap:anywhere}
    .booking-phone{font-size:1.2rem}
    .booking-secondary{display:inline-block;background:white;border:1px solid var(--clr-accent);border-radius:50px;color:var(--clr-accent);padding:.7rem 1rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-align:center}
    .booking-help .booking-secondary{margin-top:1.5rem;width:100%}
    .booking-mobile{display:none;padding:1.5rem}
    .booking-mobile p{margin-bottom:1rem;color:#555}
    .booking-steps{padding:2rem 1.5rem;display:grid;gap:1.5rem}
    .booking-step{display:flex;align-items:flex-start;gap:1rem}
    .booking-step>span{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;background:#f0eafa;color:var(--clr-accent);font-weight:700;border-radius:50%}
    .booking-step h3{font-size:1rem;color:var(--clr-primary);margin-bottom:.3rem}
    .booking-step p,.booking-note p{font-size:.9rem;color:#555}
    .booking-note{padding:1.2rem 1.5rem;background:#f5f2fa}
    .booking-contact p{font-size:.9rem;margin-top:.75rem;color:#555;max-width:400px}
    .booking-main a:focus-visible,.booking-main button:focus-visible{outline:3px solid #b97aff;outline-offset:4px}
    @media(max-width:899px){
      .booking-layout{grid-template-columns:1fr}
      .booking-mobile{display:block}
      .booking-toolbar .btn{width:100%}
      #booking-frame-container iframe{height:80vh;min-height:650px}
      nav .nav-container{gap:.8rem 1rem;font-size:.9rem}
      .booking-main{padding-top:2rem}
    }

    /* ========== Sections ========== */
    section{padding:5rem 0}
    section h2{font-size:2.25rem;text-align:center;margin-bottom:1rem;color:var(--clr-primary)}
    section>p.lead{font-size:1.125rem;text-align:center;max-width:700px;margin:0 auto 3rem;color:#555}

    /* ========== Services ========== */
    .services-grid{
      display:grid;
      gap:2rem;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }
    .service-card{
      background:var(--clr-white);
      padding:2.5rem 2rem 2rem;
      border-radius:1rem;
      box-shadow:0 8px 16px rgba(0,0,0,.04);
      transition:transform .25s ease,box-shadow .25s ease;
      position:relative;
    }
    .service-card:hover{
      transform:translateY(-6px);
      box-shadow:0 12px 24px rgba(0,0,0,.08);
    }
    .service-icon{
      width:52px;height:52px;
      border-radius:50%;
      background:var(--clr-accent);
      display:flex;align-items:center;justify-content:center;
      color:var(--clr-white);
      font-size:1.5rem;
      position:absolute;top:-26px;left:2rem;
    }
    .service-card h3{margin-top:2.25rem;font-size:1.25rem;color:var(--clr-accent)}
    .service-card p{margin-top:.75rem}

    /* ========== À propos ========== */
    .about-grid{
      display:grid;gap:2rem;align-items:center;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    }
    .about-grid img{border-radius:1rem;box-shadow:0 6px 12px rgba(0,0,0,.06)}

    /* ========== Contact ========== */
    .contact-grid{
      display:flex;
      flex-direction:column;
      gap:2rem;
      margin-top:3rem;
    }
    @media(min-width:768px){
      .contact-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:4rem;
        align-items:start;
      }
      .contact-info{
        align-items:flex-start;
        text-align:left;
      }
    }

    .contact-info{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
    .contact-info a{font-weight:600;color:var(--clr-accent)}

    .contact-card{
      max-width:600px;
      width:100%;
    }

    .contact-form{display:grid;gap:1rem;max-width:100%;margin:0}
    .contact-form label{display:flex;flex-direction:column;text-align:left;font-weight:600;font-size:.9rem}
    .contact-form input,
    .contact-form textarea{
      padding:.75rem 1rem;
      border:1px solid #ddd;
      border-radius:8px;
      font-size:1rem;
      background:var(--clr-white);
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .contact-form textarea{resize:vertical;min-height:140px}
    .contact-form input:focus,
    .contact-form textarea:focus{
      outline:none;
      border-color:var(--clr-accent);
      box-shadow:0 0 0 3px rgba(96,3,193,.15);
    }
    .contact-form button{
      justify-self:start;
      width:100%;
      text-align:center;
      border:none;
      cursor:pointer;
    }

    /* ========== Footer ========== */
    footer{
      background:var(--clr-primary);
      color:var(--clr-white);
      text-align:center;
      padding:3rem 1rem 2rem;
      margin-top:4rem;
    }

    @media (min-width:900px){
      header{padding:8rem 1rem 10rem}
    }

    /* ========== Overlay / Modales (unique) ========== */
    .overlay{
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 99999;
    }

    /* Modale générique (RDV) */
    .modal{
      background: white;
      padding: 2rem;
      border-radius: 12px;
      max-width: 60%;
      width: 90%;
      text-align: center;
      height: 60%;
    }

    /* Bouton fermeture RDV */
    .close-btn-rdv{
      position: relative;
      top: 2rem;
      right: 2rem;
      background: #ccc;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      color: #333;
      transition: background 0.3s ease;
    }
    .close-btn-rdv:hover{ background:#999; }

    /* Support / RDV highlights */
    .support-highlight {
      border: 2px solid #ff69b4;
      border-radius: 5px;
      padding: 3px 8px;
      background-color: #ff69b4;
      color: #ffffff;
    }
    .rdv-highlight {
      border: 2px solid #6003c1;
      border-radius: 5px;
      padding: 3px 8px;
      background-color: #6003c1;
      color: #ffffff;
    }
    nav a.rdv-highlight{
      color:#fff;
      opacity:1;
      cursor:pointer;
    }
    nav a.rdv-highlight:hover{
      color:#ff69b4;
      cursor:pointer;
    }

    /* ===== Mentions légales ===== */
    .footer-link{
      color: var(--clr-white);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor:pointer;
    }

    .legal-modal{
      position: relative;
      text-align: left;
      height: auto !important;
      max-width: 900px;
      width: min(92%, 900px);
      max-height: 85vh;
      overflow: hidden;
    }

    /* Bouton fermeture Mentions légales */
    .close-btn{
      position: absolute;
      top: 14px;
      right: 14px;
      background: #ccc;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      color: #333;
      transition: background 0.3s ease;
    }
    .close-btn:hover{ background:#999; }

    .legal-content{
      overflow: auto;
      max-height: calc(85vh - 70px);
      padding-right: .25rem;
      margin-top: 1rem;
    }

    .legal-modal h3{
      margin: 0;
      padding-right: 50px;
      color: var(--clr-primary);
    }

    .legal-section{margin-bottom:1.2rem}
    .legal-section h4{color:var(--clr-accent);margin-bottom:.25rem}
	/* ===== Bloc adresses ===== */

.addresses{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:.5rem;
  width:100%;
}

.address-card{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  align-items:flex-start;
  background: var(--clr-white);
  padding: .9rem 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align:left;
}
.address-location{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.3rem .75rem;width:100%;padding:.3rem;background:transparent;color:inherit;border:0;border-radius:8px;font:inherit;text-align:left;cursor:pointer}
.address-location:hover{background:#f5f2fa}
.address-card .address-text{opacity:1}
.address-card .address-copy-hint{grid-column:2;font-size:.75rem;color:var(--clr-accent);opacity:1;margin-top:.3rem}
.address-maps-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .7rem;border:1px solid #e2e2e8;border-radius:8px;font-size:.85rem;align-self:flex-start}
.address-card .address-maps-link span{font-size:inherit;opacity:1}
.address-maps-link:hover{background:#f5f5f9}
.address-location:focus-visible,.address-maps-link:focus-visible{outline:3px solid var(--clr-accent);outline-offset:3px}
.address-copy-status{font-size:.8rem;color:var(--clr-accent);user-select:text;overflow-wrap:anywhere}
.address-copy-status:empty{display:none}

.address-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.address-card i{
  color: var(--clr-accent);
  margin-top:4px;
  font-size:1.1rem;
}

.address-card strong{
  color: var(--clr-primary);
  font-size:.95rem;
}

.address-card span{
  display:block;
  font-size:.9rem;
  opacity:.75;
  line-height:1.45;
}

/* Desktop → côte à côte */
@media(min-width:768px){
  .addresses{
    flex-direction:row;
  }
  .address-card{
    flex:1;
  }
}