@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/polices/ibmplexsans-400-latin-ext.c93d2a12aa.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/polices/ibmplexsans-400-latin.3b646991d3.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/polices/ibmplexsans-600-latin-ext.b25dfd4f97.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/polices/ibmplexsans-600-latin.8960851d69.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --turquoise:#6BDCC1; --turquoise-vif:#00E5CC; --turquoise-pale:#BEFFF8;
  --menthe:#ECFDFB; --noir:#121212; --rouge:#A11B1B; --bleu-nuit:#000E44;
  --gris:#454545; --gris-clair:#848E9F;
  --titre:'IBM Plex Sans','Segoe UI',Roboto,sans-serif;
  --texte:Helvetica,'Helvetica Neue',Arial,sans-serif;
  --large:1170px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--noir);font-family:var(--texte);
     font-size:17px;line-height:1.7;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--titre);font-weight:600;color:var(--noir);
         margin:0;line-height:1.32;text-wrap:balance}
.conteneur{max-width:var(--large);margin:0 auto;padding:0 20px}
.accent{background-image:linear-gradient(90deg,rgba(107,220,193,0) 0%,
        rgba(107,220,193,.45) 40%,rgba(107,220,193,.85) 100%);
        padding:0 .12em;border-radius:2px}
.lien-evitement{position:absolute;left:-9999px;top:0;background:#fff;
        color:var(--noir);padding:12px 18px;z-index:99}
.lien-evitement:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--noir);outline-offset:3px}

/* ------------------------------------------------- 1. bandeau d'ouverture */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero__fond{position:absolute;inset:0;width:100%;height:100%;
            object-fit:cover;z-index:-1}
.hero .conteneur{padding-top:60px;padding-bottom:0}
.hero__logo{width:230px;margin-left:-28px}
.hero__bloc{width:57.78%;background:#fff;padding:40px 50px 50px;
            margin:130px 0 130px -25px;position:relative;isolation:isolate}
.hero__bloc::before{content:'';position:absolute;inset:0;z-index:-1;
            background:url('/assets/img/fond-sante.837d66bdf5.jpg') center/cover no-repeat;opacity:.4}
.hero h1{font-size:32px;margin-bottom:18px}
.hero p{font-size:18px;text-align:justify;color:#000}

/* ---------------------------------------------------- 2. les trois valeurs */
/* La marge négative de l'original rognait 60 px de vidéo et resserrait les
   cartes contre l'en-tête. Elle est retirée, et le blanc au-dessus des cartes
   passe de 120 à 170 px. */
.valeurs{padding:170px 0 60px;background:#fff}
.valeurs__grille{display:grid;grid-template-columns:32.35fr 34.86fr 32.09fr}
.valeur{padding:38px 32px;border:1px solid rgba(18,18,18,.06);
        box-shadow:0 12px 34px rgba(18,18,18,.09)}
.valeur__ico{width:44px;height:44px;margin-bottom:20px}
.valeur h2{font-size:24px;margin-bottom:14px}
.valeur p{font-size:17px;text-align:justify;margin:0}
.valeur--clair{background:#fff;color:#000}
.valeur--clair .valeur__ico{color:var(--turquoise)}
.valeur--turquoise{background:#6BDCC7;color:#fff}
.valeur--turquoise h2{color:#fff}
.valeur--turquoise p{color:#F6F5FF}
.valeur--turquoise .valeur__ico{color:#fff}
.valeur--noir{background:var(--noir);color:#fff}
.valeur--noir h2{color:#fff}
.valeur--noir .valeur__ico{color:var(--turquoise)}

/* ------------------------------------------ 3. la vidéo et les quatre types */
.donnees{padding:90px 0 100px}
.donnees__grille{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.donnees__media{background:#000;border:1px solid #000;
                box-shadow:0 18px 40px rgba(18,18,18,.18)}
.donnees__media video{aspect-ratio:1/1;object-fit:cover;width:100%}
.donnees__texte{padding:10px 0 10px 60px}
.donnees h2{font-size:30px;margin-bottom:18px}
.donnees__texte>p{font-size:17px;text-align:justify;margin-bottom:26px}
.types{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;margin:0;padding:0;
       list-style:none}
.type{display:flex;align-items:center;gap:16px}
.type .ico{flex:0 0 62px;width:62px;height:62px}
.type h3{font-size:23px;line-height:1.25}
/* Les quatre pictogrammes portent leur turquoise dans le fichier lui-même :
   leur donner une couleur ici n'aurait aucun effet. Seuls les titres sont
   colorés. */
.type--1{color:#000}
.type--2{color:var(--noir)}
.type--3{color:var(--bleu-nuit)}
.type--4{color:var(--noir)}

/* ------------------------------------------------- 4. les neuf prestations */
.services{padding:80px 0 100px;background:var(--menthe);position:relative;
          isolation:isolate}
.services::before{content:'';position:absolute;inset:0;z-index:-1;
          background:url('/assets/img/fond-sante.837d66bdf5.jpg') center;opacity:.3}
.services h2{font-size:32px;text-align:center;margin-bottom:20px}
.services__intro{font-size:17px;text-align:justify;margin:0 auto 96px;
          max-width:960px}
/* 🚨 L'écart entre deux cartes doit être le MÊME partout. Deux tentatives ont
   échoué avant celle-ci :
     - une grille unique sans espace entre les lignes collait les trois cartes
       du milieu les unes aux autres ;
     - trois rangées aux décalages propres les séparait, mais donnait des
       écarts de 30, 50 et 76 px selon la hauteur du texte de chaque carte.
   Ici, la colonne du milieu est remontée de 50 px par une marge haute
   négative COMPENSÉE par une marge basse égale : elle occupe donc la même
   hauteur qu'une autre, la grille reste régulière, et l'écart vaut 30 px
   partout. Le décalage en escalier de l'original est conservé. */
.services__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
                  padding-top:50px}
.services__grille>*:nth-child(3n+2){margin-top:-50px;margin-bottom:50px}
.service{background:#fff;padding:34px 28px 30px;position:relative;
         isolation:isolate;overflow:hidden;
         box-shadow:0 12px 34px rgba(18,18,18,.08);
         border:1px solid rgba(18,18,18,.05)}
.service::after{content:'';position:absolute;inset:0;z-index:-1;
         background:var(--noir);transform:translateY(100%);
         transition:transform .45s ease}
.service:hover::after,.service:focus-within::after{transform:translateY(0)}
.service:hover h3,.service:focus-within h3{color:#fff}
.service img{width:96px;margin-bottom:18px;transition:transform .45s ease}
.service:hover img{transform:translateY(-6px)}
.service h3{font-size:20px;transition:color .45s ease}
.service--vedette{background:var(--turquoise)}
.service--vedette h3{color:#fff}

/* ------------------------------------------------------ 5. les trois étapes */
.processus{padding:100px 0 70px}
.processus__grille{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.processus__texte{padding:10px 60px 10px 0}
.processus h2{font-size:32px;margin-bottom:30px}
.etapes{list-style:none;margin:0;padding:0}
.etape{display:flex;gap:22px;position:relative;padding-bottom:30px}
.etape:last-child{padding-bottom:0}
.etape::before{content:'';position:absolute;left:21px;top:46px;bottom:6px;
               width:2px;background:var(--turquoise-pale)}
.etape:last-child::before{display:none}
.etape__num{flex:0 0 44px;height:44px;background:var(--turquoise-vif);color:#fff;
            display:flex;align-items:center;justify-content:center;
            font-family:var(--texte);font-weight:600;font-size:18px;
            font-variant-numeric:tabular-nums}
.etape h3{font-family:var(--texte);font-size:22px;font-weight:600;
          margin-bottom:6px}
.etape p{font-size:17px;color:#353535;margin:0}
.processus__media{background:#235763;box-shadow:0 18px 40px rgba(18,18,18,.18)}
.processus__media video{aspect-ratio:1/1;object-fit:cover;width:100%}

/* ----------------------------------------------------------- 6. références */
.confiance{padding:50px 0 140px;background:#fff}
.confiance h2{font-size:32px;text-align:center;margin-bottom:40px}
.confiance h2 .accent{display:inline-block}
.confiance__rangee{display:grid;align-items:center;gap:40px;margin:0 auto;
                   max-width:940px}
.confiance__rangee--a{grid-template-columns:1fr 1fr;padding:0 20px}
.confiance__rangee--b{grid-template-columns:1fr 1fr;padding:40px 40px 0}
.confiance__rangee img{margin:0 auto}
/* Chaque visuel mène au site du partenaire. L'ombre portée suit le contour
   du logo et non sa boîte, ce qui compte sur des images détourées. */
.partenaire{display:block;border-radius:6px;
            transition:transform .35s ease,filter .35s ease}
.partenaire:hover,.partenaire:focus-visible{transform:translateY(-6px) scale(1.04);
            filter:drop-shadow(0 8px 16px rgba(107,220,193,.5))}

/* ----------------------------------------------------------- 7. le contact */
.contact{margin-bottom:-55px}
.contact__grille{display:grid;grid-template-columns:48.5fr 51.5fr}
.contact__accroche{position:relative;isolation:isolate;color:#fff;
        padding:50px;min-height:520px;display:flex;flex-direction:column;
        justify-content:flex-end;background:#fff}
.contact__accroche::before{content:'';position:absolute;inset:0;z-index:-2;
        background:url('/assets/img/fond-formulaire.875eeeaa0e.jpg') center 0/cover no-repeat}
.contact__accroche::after{content:'';position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.88) 80%)}
.contact__accroche h2{color:#fff;font-family:var(--texte);font-weight:500;
        font-size:26px;line-height:1.4}
.contact__formulaire{background:#fff;padding:50px 50px 60px}
.champ{margin-bottom:20px}
.champ label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
/* L'astérisque des champs obligatoires reprend le rouge des messages
   d'erreur : une couleur fonctionnelle, déjà présente, et pas le violet. */
.champ .requis{color:var(--rouge)}
.champ input,.champ textarea{width:100%;font:inherit;font-size:16px;
        padding:12px 14px;border:1px solid #D6DEDC;background:#fff;
        color:var(--noir);border-radius:0}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ textarea:focus{border-color:var(--turquoise-vif);
        outline:2px solid var(--turquoise-pale);outline-offset:0}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.envoyer{font:inherit;font-weight:600;font-size:16px;border:0;cursor:pointer;
        background:var(--noir);color:#fff;padding:15px 34px;
        transition:opacity .25s ease}
/* Le bouton doit réagir au curseur, mais sans introduire une couleur qui
   n'existe nulle part ailleurs sur le site : on éclaircit le même noir. */
.envoyer:hover{opacity:.82}
.mention-rgpd{margin-top:16px;font-size:14px;line-height:1.5;color:#5A6B67;
        max-width:34em}
.mention-rgpd a{color:#0B7A64}
.message{margin-top:18px;font-size:16px;font-weight:600}
.message--erreur{color:var(--rouge)}
.message--succes{color:#0E6B52}

/* -------------------------------------------------------- 8. pied de page */
.pied{background:var(--turquoise);color:#fff;padding:120px 0 20px}
.pied a{color:#fff}
/* Deux colonnes alignées par le haut : le logo et sa signature à gauche,
   l'encart de courriel à droite, calé sur le bord du contenu. */
.pied__haut{display:grid;grid-template-columns:1fr 420px;gap:40px;
            padding:0 10px;align-items:start}
/* 🚨 Sans cela, une colonne de grille ne descend pas sous la largeur
   minimale de son contenu et déborde de la page sur téléphone. */
.pied__haut>*{min-width:0}
.pied__logo{width:200px;margin-bottom:14px}
.pied__haut p{font-size:18px}
.pied__contact{display:flex;align-items:center;gap:16px;background:#000;
               padding:20px 24px;width:100%}
.pied__contact .ico{flex:0 0 34px;width:34px;height:34px;
               background:var(--turquoise-vif);color:#fff;padding:7px}
.pied__contact p{margin:0}
.pied__contact .etiquette{font-size:21px;font-weight:600;color:#fff}
.pied__contact a{font-size:17px;color:#E5E5E5;text-decoration:none}
.pied__contact a:hover{text-decoration:underline}
.pied__trait{width:98%;margin:36px auto 0;border:0;border-top:2px solid
             rgba(0,0,0,.99)}
.pied__bas{padding:18px 10px 0;font-size:17px;display:flex;flex-wrap:wrap;
           gap:6px 26px}
.pied__bas p{margin-left:15px}
.pied__bas a{text-decoration:underline;text-underline-offset:3px}

/* ------------------- pages courtes : erreur 404, remerciement -------- */
.simple{min-height:100vh;display:flex;flex-direction:column;
        align-items:center;justify-content:center;text-align:center;
        gap:26px;padding:40px 24px;background:var(--turquoise)}
.simple__logo{width:190px}
/* 🚨 Texte FONCÉ sur le turquoise, pas blanc : 11,3:1 au lieu de 1,66. Ces
   pages sont nouvelles, rien n'oblige à reprendre le contraste faible hérité
   du site d'origine. */
.simple h1{font-size:34px;color:#101B19;max-width:16em}
.simple p{font-size:18px;color:#123B33;max-width:30em;margin:0}
/* Aucun changement de couleur au survol : le violet des réglages d'origine
   n'apparaît nulle part à l'écran, il n'a donc pas à être introduit ici. */
.simple__bouton{display:inline-block;background:var(--noir);color:#fff;
        font-family:var(--titre);font-weight:600;font-size:16px;
        text-decoration:none;padding:15px 30px;margin-top:8px}
@media (max-width:640px){
  .simple__logo{width:150px}
  .simple h1{font-size:26px}
}

/* ------------------------------------------------- page des mentions */
.legal{max-width:44rem;margin:0 auto;padding:70px 20px 90px}
.legal a{color:var(--noir)}
/* Bouton turquoise, texte foncé : 11,3:1. Du blanc y donnerait 1,66. */
.legal__retour{display:inline-block;background:var(--turquoise);color:#101B19;
       font-family:var(--titre);font-weight:600;font-size:15px;
       text-decoration:none;padding:12px 24px}
.legal__retour--haut{margin-bottom:38px}
.legal__retour--bas{margin-top:48px}
.legal h1{font-size:32px;margin-bottom:10px}
.legal__date{color:#5A6B67;font-size:15px;margin-bottom:44px}
.legal h2{font-size:21px;margin:44px 0 14px;padding-top:22px;
       border-top:1px solid #E2ECE9}
.legal h3{font-family:var(--texte);font-size:17px;font-weight:600;
       margin:26px 0 8px}
.legal p,.legal li{font-size:17px}
.legal ul{margin:0 0 1em;padding-left:1.2em}
.legal li{margin-bottom:.35em}
.legal dl{margin:0}
.legal dt{font-weight:600;font-size:15px;color:#5A6B67;margin-top:14px}
.legal dd{margin:0;font-size:17px}
.legal__net{background:var(--menthe);border-left:3px solid var(--turquoise);
       padding:18px 22px;margin:26px 0}
.legal__net p{margin:0}
@media (max-width:640px){
  .legal{padding:44px 20px 60px}
  .legal h1{font-size:26px}
}

/* ------------------------------------------------------------ adaptations */
@media (max-width:1024px){
  .hero__bloc{width:78%}
  .donnees__grille,.processus__grille,.contact__grille{grid-template-columns:1fr}
  .donnees__texte{padding:40px 0 0}
  .processus__texte{padding:0 0 40px}
  /* 🚨 En dessous de trois colonnes, l'escalier n'a plus de sens : on remet
     toutes les cartes au même niveau. Ces règles doivent porter le MÊME nom
     de classe que la grille : une fois renommée sans les mettre à jour, elles
     ne s'appliquaient plus et les cartes restaient en trois colonnes serrées
     sur téléphone. */
  .services__intro{margin-bottom:50px}
  .services__grille{grid-template-columns:1fr 1fr;padding-top:0}
  .services__grille>*:nth-child(3n+2){margin-top:0;margin-bottom:0}
  .valeurs__grille{grid-template-columns:1fr}
  .contact__accroche{min-height:380px}
  .pied__haut{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero .conteneur{padding-top:36px}
  .hero__logo{width:170px;margin:0 auto}
  .hero__bloc{width:100%;margin:60px 0;padding:30px 24px 34px}
  .hero h1{font-size:26px}
  .valeurs{padding:90px 0 40px}
  .donnees,.processus{padding:60px 0}
  .services{padding:60px 0}
  .services__grille,.types{grid-template-columns:1fr}
  .confiance{padding:40px 0 70px}
  .confiance__rangee--a,.confiance__rangee--b{grid-template-columns:1fr;
       padding:0;gap:30px}
  .confiance__rangee .partenaire{width:74%;margin:0 auto}
  .contact__accroche,.contact__formulaire{padding:34px 24px 40px}
  .contact__accroche h2{font-size:21px}
  .donnees h2,.processus h2,.services h2,.confiance h2{font-size:26px}
  .pied{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}