@import url("fonts.css");

/* ===============================================================
   ARCHIO — feuille de style principale
   Reprise du site Framer, réécrite en HTML5 / CSS natif.
   =============================================================== */

/* --- Jetons ---------------------------------------------------- */
:root{
  /* couleurs */
  --vert-fonce:#0e3a27;      /* bouton principal             */
  --vert-clair:#e6eecd;      /* bouton secondaire            */
  --beige:#ecebe4;           /* fond des sections alternées  */
  --beige-clair:#f6f4ed;     /* puces, cartes douces         */
  --blanc:#fff;
  --noir:#000;
  --texte:rgba(0,0,0,.85);
  --texte-doux:rgba(0,0,0,.6);
  --filet:rgba(0,0,0,.1);
  --vert-vif:#31ee33;        /* pastille « available »       */

  /* typographie */
  --titre:"Crimson Pro",Georgia,serif;
  --corps:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --label:Satoshi,Inter,sans-serif;

  /* mesures */
  --contenu:1200px;
  --marge-page:50px;
  --rayon:10px;
  --rayon-bloc:36px;
  --rayon-image:16px;
}

/* --- Remise à zéro --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanc);
  color:var(--noir);
  font-family:var(--corps);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--vert-fonce);outline-offset:3px;border-radius:4px}

/* --- Utilitaires ----------------------------------------------- */
.contenu{width:100%;max-width:var(--contenu);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

.titre-xl{
  font-family:var(--titre);font-weight:300;font-size:70px;line-height:1;
  letter-spacing:-.04em;color:var(--noir);
}
.titre-l{
  font-family:var(--titre);font-weight:300;font-size:56px;line-height:1.05;
  letter-spacing:-.035em;color:var(--noir);
}
.titre-m{
  font-family:var(--titre);font-weight:300;font-size:40px;line-height:1.1;
  letter-spacing:-.03em;color:var(--noir);
}
.texte{
  font-family:var(--corps);font-size:18px;font-weight:400;line-height:1.5;
  letter-spacing:-.02em;color:var(--texte);
}
.texte-s{
  font-family:var(--corps);font-size:15px;font-weight:400;line-height:1.6;
  letter-spacing:-.02em;color:var(--texte);
}

/* Étiquette en petites capitales (AWARD-WINNING FIRM) */
.puce{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:99px;background:var(--blanc);
  box-shadow:0 8px 24px rgba(173,173,173,.08);
  font-family:var(--label);font-size:14px;font-weight:500;
  letter-spacing:.057em;color:var(--noir);white-space:nowrap;
}
.puce svg{flex:0 0 auto}

/* --- Boutons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 24px;border-radius:var(--rayon);
  font-family:var(--corps);font-size:15px;line-height:24px;letter-spacing:-.02em;
  white-space:nowrap;
  transition:transform .25s cubic-bezier(.4,0,.2,1),
             box-shadow .25s ease,background-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primaire{
  background:var(--vert-fonce);color:var(--blanc);
  box-shadow:0 .6px 1.08px -1.25px rgba(61,61,61,.72),
             0 2.29px 4.12px -2.5px rgba(61,61,61,.63),
             0 10px 18px -3.75px rgba(61,61,61,.3);
}
.btn-secondaire{background:var(--vert-clair);color:var(--texte)}
.btn-clair{background:var(--blanc);color:var(--texte)}
.btn .fleche{width:14px;height:14px;flex:0 0 auto}

/* ===============================================================
   EN-TÊTE
   =============================================================== */
.entete{
  position:relative;z-index:20;background:var(--blanc);
  display:flex;justify-content:center;padding:20px var(--marge-page);
}
.entete-inner{
  width:100%;max-width:var(--contenu);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:block;flex:0 0 auto}
.logo img{width:156px;height:44px;object-fit:contain}
.entete-droite{display:flex;align-items:center;gap:16px}
.dispo{display:flex;align-items:center;gap:10px;padding:8px 12px}
.dispo p{font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
         white-space:nowrap}
.point{position:relative;width:12px;height:12px;flex:0 0 auto}
.point i,.point b{position:absolute;inset:3px;border-radius:50%;background:var(--vert-vif)}
.point i{box-shadow:0 0 20px rgba(49,238,51,.5)}
.point b{animation:pulse 2s ease-out infinite;opacity:.5}
@keyframes pulse{
  0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(6.85);opacity:0}
}
.separateur-v{width:2px;height:19px;background:var(--filet);flex:0 0 auto}
.icone-ronde{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:5px;border-radius:8px;
  background:var(--beige-clair);
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
  transition:background-color .25s ease,transform .25s ease;
}
.icone-ronde:hover{background:var(--vert-clair);transform:translateY(-2px)}
.icone-ronde svg{width:24px;height:24px}

/* ===============================================================
   BARRE DE NAVIGATION FLOTTANTE
   =============================================================== */
.nav-flottante{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:4px;
  padding:10px;border-radius:99px;background:var(--blanc);
  box-shadow:0 10px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
}
.nav-flottante a{
  padding:10px 16px;border-radius:99px;font-size:15px;line-height:1;
  color:var(--texte);transition:background-color .2s ease,color .2s ease;
}
.nav-flottante a:hover{background:var(--beige-clair)}
.nav-flottante a.cta{background:var(--vert-fonce);color:var(--blanc);padding:12px 20px}
.nav-flottante a.cta:hover{background:#0a2c1e}

/* ===============================================================
   HERO
   =============================================================== */
.hero{
  display:flex;flex-direction:column;align-items:center;
  padding:20px var(--marge-page) 100px;background:var(--blanc);
}
.hero-bloc{
  position:relative;width:100%;max-width:var(--contenu);
  display:flex;align-items:flex-start;gap:48px;padding:100px 0 40px;
  border-radius:var(--rayon-bloc);
  background:linear-gradient(var(--beige) -105%,rgba(247,244,242,0) 83.55%);
  overflow:hidden;
}
/* colonne gauche : 6 blocs, gap 24, centrés sur 425px */
.hero-gauche{
  position:relative;z-index:2;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:24px;
}
.hero-titre{width:100%}
.hero-texte{max-width:406px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.filet{width:100%;max-width:406px;height:2px;background:var(--filet);border:0;margin:0}
.hero-avis{display:flex;align-items:center;gap:16px}
.etoiles{display:flex;gap:2px;color:var(--noir)}
.etoiles svg{width:16px;height:16px}
.hero-avis .barre{width:2px;height:24px;background:var(--filet)}

/* colonne droite : images + filet + clients, calé en bas */
.hero-droite{
  position:relative;z-index:2;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:24px;
}
.hero-images{display:flex;gap:16px}
.hero-images figure{flex:1 1 0;margin:0;border-radius:var(--rayon-image);overflow:hidden}
.hero-images img{width:100%;height:425px;object-fit:cover}
.hero-droite .filet{max-width:none}
.hero-clients{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avatars{display:flex}
.avatars img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:2px solid var(--blanc);margin-left:-8px;
}
.avatars img:first-child{margin-left:0}
.hero-clients p{font-size:18px;line-height:27px;letter-spacing:-.02em;color:var(--texte)}
.hero-clients strong{font-weight:400}

/* halos décoratifs du hero */
.hero-halo{
  position:absolute;top:63px;left:10px;width:500px;height:500px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(50% 50%,rgba(255,255,255,.9) 13%,rgba(255,255,255,0) 100%);
  filter:blur(30px);
}
.hero-cercle{
  position:absolute;right:-120px;top:120px;width:594px;height:1030px;
  border-radius:50%;background:var(--blanc);z-index:0;pointer-events:none;
}

/* ===============================================================
   SECTIONS GÉNÉRIQUES
   =============================================================== */
.section{padding:100px var(--marge-page)}
.section-beige{background:var(--beige)}
.section-blanche{background:var(--blanc)}
.section > .contenu{display:flex;flex-direction:column;gap:44px}

.entete-section{
  width:100%;max-width:840px;margin-inline:auto;padding:0 32px;
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;
}
.entete-section h2{
  font-family:var(--titre);font-weight:300;font-size:44px;line-height:1.1;
  letter-spacing:-.04em;color:var(--noir);
}
.entete-section p{
  max-width:640px;font-size:18px;line-height:27px;letter-spacing:-.02em;
  color:var(--texte);
}

/* --- Cartes de service ------------------------------------------ */
.grille-services{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
}
.carte-service{
  display:flex;flex-direction:column;gap:24px;padding:20px;
  background:var(--beige-clair);border-radius:var(--rayon);
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.carte-service .haut{display:flex;flex-direction:column;gap:8px}
.icone-carre{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;padding:16px;
  background:var(--beige);border-radius:8px;
}
.icone-carre svg{width:32px;height:32px}
.carte-service h3{font-size:24px;font-weight:500;line-height:36px;color:var(--noir)}
.carte-service p{font-size:15px;font-weight:400;line-height:24px;letter-spacing:-.02em;color:var(--texte)}
.carte-service .visuels{display:flex;gap:10px;margin-top:auto}
.carte-service .visuels figure{flex:1 1 0;margin:0;border-radius:var(--rayon);overflow:hidden}
.carte-service .visuels img{width:100%;height:195px;object-fit:cover}

/* --- Bandeaux défilants ------------------------------------------ */
.bandeaux{display:flex;flex-direction:column;gap:0}
.bandeau{
  position:relative;display:flex;overflow:hidden;padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.bandeau ul{display:flex;flex:0 0 auto;gap:0;animation:defile 34s linear infinite}
.bandeau.inverse ul{animation-direction:reverse}
.bandeau li{padding:0 6px}
.bandeau .pilule{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:78px;background:var(--beige-clair);
  font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
  white-space:nowrap;
}
.bandeau .pilule svg{width:20px;height:20px;flex:0 0 auto;color:var(--vert-fonce)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bandeau ul{animation:none}}

/* --- Encart d'appel à l'action ----------------------------------- */
.encart{
  width:100%;max-width:840px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:44px;text-align:center;
  background:var(--beige-clair);border-radius:18px;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.encart h2{
  font-family:var(--titre);font-weight:300;font-size:44px;line-height:1.1;
  letter-spacing:-.04em;color:var(--noir);
}
.encart .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* ===============================================================
   CARROUSEL D'AVANTAGES + BARRE DE PREUVES
   =============================================================== */
.section-large > .contenu{gap:54px}   /* Why Us, comparatif */
.bloc-carrousel{display:flex;flex-direction:column;gap:16px}

.piste-zone{
  position:relative;overflow:hidden;height:300px;max-width:1100px;margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.piste{display:flex;align-items:flex-start;gap:20px;width:max-content;
       animation:defile 40s linear infinite}
.piste-zone:hover .piste{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.piste{animation:none}}

.carte-avantage{flex:0 0 353px;padding:8px;border-radius:16px}
.carte-avantage .dedans{
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  height:261px;padding:24px;background:var(--beige);border-radius:14px;
}
.carte-avantage .haut{display:flex;flex-direction:column;gap:10px}
.carte-avantage .icone{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;padding:16px;background:var(--blanc);border-radius:8px;
}
.carte-avantage .icone svg{width:32px;height:32px}
.carte-avantage .textes{display:flex;flex-direction:column;gap:16px}
.carte-avantage h3{font-size:24px;font-weight:500;line-height:36px;color:var(--noir)}
.carte-avantage p{font-size:15px;font-weight:400;line-height:24px;letter-spacing:-.02em;color:var(--texte)}
.carte-avantage .points{display:flex;gap:10px}
.carte-avantage .points span{width:15px;height:15px;border-radius:8px;background:rgba(0,0,0,.1)}

/* barre de preuves : « Worked With 100+ Clients · Industry Expert … » */
.barre-preuves{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;
  padding:24px;border-radius:8px;
}
.barre-preuves .item{display:flex;align-items:center;gap:10px}
.barre-preuves .item svg{width:20px;height:20px;flex:0 0 auto;color:var(--vert-fonce)}
.barre-preuves p{font-size:15px;line-height:25px;letter-spacing:-.02em;color:var(--texte);white-space:nowrap}
.barre-preuves .sep{width:2px;height:19px;background:var(--filet);flex:0 0 auto}

/* ===============================================================
   PROCESSUS EN TROIS ÉTAPES
   =============================================================== */
.deux-colonnes{display:flex;gap:44px;align-items:flex-start}
.deux-colonnes > *{flex:1 1 0;min-width:0}

.colonne-intro{display:flex;flex-direction:column;gap:32px}
.colonne-intro .entete-section{
  max-width:none;margin:0;padding:0;align-items:flex-start;text-align:left;gap:24px;
}
.colonne-intro .entete-section p{max-width:none}
.colonne-intro .actions{display:flex;flex-wrap:wrap;gap:16px}
.colonne-intro .avis{display:flex;align-items:center;gap:12px}
.colonne-intro .avis .etoiles svg{width:19px;height:19px}

.etapes{display:flex;flex-direction:column;gap:20px}
.etape{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:24px 24px 32px;text-align:center;
  background:var(--beige-clair);border-radius:18px;
}
.etape .halo{
  position:absolute;top:27px;left:50%;transform:translateX(-50%);
  width:223px;height:135px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
}
.etape .num{
  position:relative;z-index:1;
  font-family:var(--titre);font-size:70px;font-weight:300;line-height:70px;
  letter-spacing:-.04em;color:var(--noir);
}
.etape .textes{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:100%}
.etape h3{font-size:24px;font-weight:500;line-height:36px;color:var(--noir)}
.etape p{font-size:15px;font-weight:400;line-height:24px;letter-spacing:-.02em;color:var(--texte)}

/* ===============================================================
   TABLEAU COMPARATIF
   =============================================================== */
.bloc-comparatif{display:flex;flex-direction:column;gap:16px}
.comparatif{
  width:100%;border-collapse:collapse;table-layout:fixed;
  background:var(--blanc);
}
.comparatif col.c1{width:37%}
.comparatif col.c2,.comparatif col.c3{width:31.5%}

.comparatif th,.comparatif td{
  height:80px;padding:0;border:0;vertical-align:middle;
  background:var(--beige-clair);
  font-size:15px;font-weight:400;line-height:24px;letter-spacing:-.02em;
  color:var(--texte);
}
.comparatif thead th{font-weight:400}
.comparatif .libelle{padding:0 32px;text-align:left}
.comparatif .col-b,.comparatif .col-c{text-align:center}
.comparatif tbody .col-c{background:var(--beige)}
.comparatif thead .col-c{background:var(--vert-fonce);color:var(--blanc)}

/* coins arrondis du cadre */
.comparatif thead tr th:first-child{border-radius:12px 0 0 0}
.comparatif thead tr th:last-child{border-radius:0 12px 0 0}
.comparatif tbody tr:last-child td:first-child{border-radius:0 0 0 16px}
.comparatif tbody tr:last-child td:last-child{border-radius:0 0 16px 0}

.comparatif .marque{display:inline-flex;width:30px;height:33px;align-items:center;justify-content:center}
.comparatif .marque svg{width:26px;height:26px}
.comparatif .non{color:rgba(0,0,0,.35)}
.comparatif .oui{color:var(--vert-fonce)}

/* ===============================================================
   TÉMOIGNAGES + STATISTIQUES
   =============================================================== */
.bloc-temoignages{display:flex;flex-direction:column;gap:24px}
.temoignages-zone{
  position:relative;overflow:hidden;height:285px;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.temoignages{display:flex;align-items:flex-start;gap:24px;width:max-content;
             animation:defile 60s linear infinite}
.temoignages-zone:hover .temoignages{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.temoignages{animation:none}}

.temoignage{
  flex:0 0 600px;display:flex;flex-direction:column;gap:30px;
  padding:20px;background:var(--beige-clair);border-radius:16px;
}
.temoignage .qui{display:flex;align-items:center;gap:16px}
.temoignage .qui img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.temoignage .qui .nom{display:flex;flex-direction:column}
.temoignage .qui .nom strong{font-size:18px;font-weight:500;line-height:24px;color:var(--noir)}
.temoignage .qui .nom span{font-size:15px;font-weight:400;line-height:20px;color:var(--texte-doux)}
.temoignage blockquote{font-size:15px;font-weight:400;line-height:24px;
                       letter-spacing:-.02em;color:var(--texte)}
.temoignage .bas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.temoignage .etiquette{
  display:inline-flex;align-items:center;gap:10px;padding:12px;
  background:var(--beige-clair);border-radius:8px;
  font-size:14px;line-height:17px;color:var(--texte);white-space:nowrap;
}
.temoignage .etiquette svg{width:16px;height:16px;flex:0 0 auto;color:var(--vert-fonce)}

.stats{
  display:flex;flex-wrap:wrap;gap:24px;
  width:100%;max-width:1100px;align-self:center;padding:48px 40px;
  background:var(--beige-clair);border-radius:18px;
}
.stats .stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;text-align:center}
.stats h3{font-size:36px;font-weight:500;line-height:43.2px;color:var(--noir)}
.stats p{font-size:15px;font-weight:400;line-height:24px;letter-spacing:-.02em;color:var(--texte)}

.actions-centrees{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

/* ===============================================================
   ARTICLES
   =============================================================== */
.bloc-blog{display:flex;flex-direction:column;gap:24px}
.grille-blog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.carte-article{
  display:flex;flex-direction:column;padding:8px;
  background:var(--blanc);border-radius:20px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.carte-article:hover{transform:translateY(-4px)}
.carte-article .dedans{
  display:flex;flex-direction:column;gap:24px;height:100%;
  padding:20px 20px 30px;background:var(--beige);border-radius:18px;
}
.carte-article figure{margin:0;border-radius:10px;overflow:hidden}
.carte-article img{width:100%;height:325px;object-fit:cover}
.carte-article h3{
  font-family:var(--titre);font-size:36px;font-weight:300;line-height:39.6px;
  letter-spacing:-.03em;color:var(--noir);
}
.carte-article .resume{font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte)}
.carte-article .textes{display:flex;flex-direction:column;gap:16px;flex:1 1 auto}
.carte-article .lire{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px;padding-left:20px;background:var(--beige-clair);border-radius:30px;
  font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
}
.carte-article .lire .rond{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--vert-fonce);color:var(--blanc);
  flex:0 0 auto;transition:transform .3s ease;
}
.carte-article:hover .lire .rond{transform:rotate(45deg)}
.carte-article .lire svg{width:16px;height:16px}

/* ===============================================================
   FOIRE AUX QUESTIONS
   =============================================================== */
.faq-corps{display:flex;gap:24px;align-items:stretch;min-height:440px}
.faq-citation{
  flex:0 0 38%;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:40px;background:var(--beige-clair);border-radius:18px;
}
.faq-citation blockquote{
  font-family:var(--titre);font-size:28px;font-weight:300;line-height:1.25;
  letter-spacing:-.03em;color:var(--noir);
}
.faq-citation .signature{display:flex;align-items:center;gap:12px}
.faq-citation .signature img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.faq-citation .signature span{font-size:15px;line-height:24px;color:var(--texte)}

.faq-liste{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--beige-clair);border-radius:12px;overflow:hidden}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:500;line-height:24px;letter-spacing:-.02em;color:var(--noir);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{
  position:relative;width:20px;height:20px;flex:0 0 auto;
  transition:transform .3s ease;
}
.faq-item summary .plus::before,.faq-item summary .plus::after{
  content:"";position:absolute;background:var(--noir);border-radius:2px;
}
.faq-item summary .plus::before{top:9px;left:0;width:20px;height:2px}
.faq-item summary .plus::after{left:9px;top:0;width:2px;height:20px;transition:opacity .3s ease}
.faq-item[open] summary .plus{transform:rotate(90deg)}
.faq-item[open] summary .plus::after{opacity:0}
.faq-item .reponse{padding:0 24px 20px;font-size:15px;line-height:24px;
                   letter-spacing:-.02em;color:var(--texte)}

/* ===============================================================
   ÉQUIPE
   =============================================================== */
.grille-equipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.membre{display:flex;flex-direction:column;gap:24px;min-height:498px;padding:30px;
        background:var(--beige-clair);border-radius:12px}
.membre figure{margin:0;border-radius:8px;overflow:hidden}
.membre img{width:100%;height:286px;object-fit:cover}
.membre .infos{display:flex;flex-direction:column;gap:4px;padding:0}
.membre h3{font-size:20px;font-weight:500;line-height:28px;color:var(--noir)}
.membre .role{font-size:15px;line-height:24px;color:var(--texte-doux)}
.membre .lien{display:inline-flex;align-items:center;gap:8px;margin-top:8px;
              font-size:15px;line-height:24px;color:var(--vert-fonce)}
.membre .lien svg{width:16px;height:16px}
.membre .lien:hover{text-decoration:underline}

/* ===============================================================
   PIED DE PAGE
   =============================================================== */
.pied{
  position:relative;overflow:hidden;
  background:var(--beige);padding:100px 40px 140px;
}
.pied-inner{
  position:relative;z-index:2;
  width:100%;max-width:840px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:44px;min-height:596px;text-align:center;
}
.pied-mail-ligne a{
  font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
}
.pied-mail-ligne a:hover{color:var(--vert-fonce)}

.pied-marque{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.pied-logo{width:100%;max-width:840px;height:287px;object-fit:contain}
.pied-marque p{
  width:100%;font-size:18px;line-height:27px;letter-spacing:-.02em;color:var(--texte);
}

.pied-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.pied-nav .btn-clair{background:var(--beige-clair)}

.pied-bas{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.pied-bas p{font-size:15px;line-height:24px;color:var(--texte)}

/* pastilles décoratives du pied */
.pied .deco{
  position:absolute;bottom:0;border-radius:8px;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
}
.pied .d1{left:196px;bottom:-5px;width:85px;height:85px}
.pied .d2{left:433px;bottom:-17px;width:90px;height:90px}
.pied .d3{left:762px;bottom:-2px;width:85px;height:85px}
.pied .d4{left:927px;bottom:-13px;width:95px;height:95px}
@media (max-width:900px){.pied .deco{display:none}}

/* ===============================================================
   ADAPTATION AUX ÉCRANS — tablette (≤ 1024) et mobile (≤ 720)
   =============================================================== */
@media (max-width:1200px){
  :root{--marge-page:32px}
  .titre-xl{font-size:56px}
  .entete-section h2,.encart h2{font-size:38px}
}

@media (max-width:1024px){
  .section{padding:72px var(--marge-page)}
  .hero{padding:16px var(--marge-page) 72px}
  .hero-bloc{flex-direction:column;gap:32px;padding:48px 32px}
  .hero-gauche,.hero-droite{width:100%}
  .hero-titre{max-width:none}
  .hero-texte,.filet{max-width:none}
  .hero-images img{height:340px}
  .hero-cercle,.hero-halo{display:none}

  .grille-services{grid-template-columns:minmax(0,1fr)}
  .carte-service .visuels img{height:220px}

  .deux-colonnes{flex-direction:column}
  .deux-colonnes > *{width:100%}

  .grille-blog{grid-template-columns:minmax(0,1fr)}
  .carte-article img{height:280px}

  .faq-corps{flex-direction:column;min-height:0}
  .faq-citation{flex:0 0 auto}

  .grille-equipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .membre{min-height:0;padding:20px}

  .piste-zone,.temoignages-zone{max-width:none}
  .stats{padding:32px 24px}
  .pied-logo{height:180px}
  .pied-inner{min-height:0}
}

@media (max-width:720px){
  :root{--marge-page:20px;--rayon-bloc:24px}
  .section{padding:56px var(--marge-page)}

  /* en-tête : la mention « available for work » passe à la ligne */
  .entete-inner{flex-wrap:wrap;gap:12px}
  .dispo{padding:0}
  .dispo p{font-size:14px}
  .logo img{width:132px;height:38px}

  /* barre flottante : défilement horizontal plutôt que débordement */
  .nav-flottante{
    left:12px;right:12px;bottom:12px;transform:none;
    justify-content:flex-start;overflow-x:auto;padding:8px;
    scrollbar-width:none;
  }
  .nav-flottante::-webkit-scrollbar{display:none}
  .nav-flottante a{padding:9px 13px;font-size:14px;flex:0 0 auto}
  .nav-flottante a.cta{padding:10px 16px}

  .titre-xl{font-size:38px;letter-spacing:-.03em}
  .entete-section h2,.encart h2{font-size:30px}
  .entete-section{padding:0}
  .texte,.entete-section p{font-size:16px;line-height:25px}

  .hero-bloc{padding:32px 20px}
  .hero-images{gap:12px}
  .hero-images img{height:240px}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 auto}

  .carte-service .visuels img{height:150px}
  .carte-avantage{flex:0 0 280px}
  .carte-avantage .dedans{height:auto;min-height:240px}
  .temoignage{flex:0 0 min(88vw,420px)}
  .temoignage .qui img{width:48px;height:48px}

  .encart{padding:28px 20px}
  .stats{flex-direction:column;gap:24px;padding:28px 20px}

  .carte-article h3{font-size:26px;line-height:1.15}
  .carte-article img{height:200px}
  .carte-article .dedans{padding:12px 12px 20px}

  .faq-citation{padding:24px}
  .faq-citation blockquote{font-size:22px}
  .faq-item summary{padding:16px;font-size:15px}
  .faq-item .reponse{padding:0 16px 16px}

  .grille-equipe{grid-template-columns:minmax(0,1fr)}
  .membre img{height:320px}

  /* le tableau comparatif défile latéralement */
  .bloc-comparatif{overflow-x:auto;scrollbar-width:thin}
  .comparatif{min-width:640px}
  .comparatif .libelle{padding:0 16px;font-size:14px}
  .comparatif th,.comparatif td{height:64px;font-size:14px}

  .barre-preuves{gap:12px;padding:16px}
  .barre-preuves .sep{display:none}
  .barre-preuves p{font-size:14px}

  .pied{padding:56px var(--marge-page) 96px}
  .pied-logo{height:110px}
  .pied-marque p{font-size:16px;line-height:25px}
  .pied-nav{gap:10px}
  .pied-nav .btn{padding:10px 16px;font-size:14px}
}

/* ---- apparition douce au défilement (activée par le script) ---- */
[data-anim]{opacity:0;transform:translateY(18px);
            transition:opacity .7s cubic-bezier(.22,1,.36,1),
                       transform .7s cubic-bezier(.22,1,.36,1)}
[data-anim].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}