@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:wght@400;900&display=swap');
:root{
  --rouge:#BE1E2D;
  --rouge-fonce:#9E1522;
  --bleu:#4A7A9B;
  --encre:#2B3138;
  --gris-texte:#5A6470;
  --fond:#FFFFFF;
  --fond-doux:#F6F7F8;
  --ligne:#E7E9EC;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Rubik',sans-serif;color:var(--encre);background:var(--fond);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.display{font-family:'Rubik',sans-serif}

/* ---------- Header ---------- */
header.site{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
  transition:box-shadow .3s;
}
header.site.scrolled{box-shadow:0 6px 24px rgba(43,49,56,.08)}
.nav-wrap{max-width:1240px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center}
.logo img{height:42px;width:auto;display:block}
nav ul{display:flex;gap:6px;list-style:none;align-items:center}
nav a{font-weight:600;font-size:14.5px;padding:9px 14px;border-radius:999px;transition:.25s;color:var(--encre)}
nav a:hover{background:#FBEBED;color:var(--rouge)}
nav a.actif{color:var(--rouge)}
nav a.cta{background:var(--rouge);color:#fff;padding:10px 20px;margin-left:8px}
nav a.cta:hover{background:var(--rouge-fonce)}
.burger{display:none;background:none;border:none;font-size:26px;color:var(--encre);cursor:pointer}

/* ---------- Bandeau de page interne ---------- */
.bandeau{
  position:relative;margin-top:76px;height:calc(100vh - 76px);min-height:560px;
  display:flex;align-items:center;
  background-size:cover;background-position:center;
}
.bandeau-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:60px 32px;width:100%}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:'Rubik';font-weight:700;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--rouge);margin-bottom:16px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--rouge);border-radius:2px}
.bandeau .eyebrow,.hero .eyebrow{color:rgba(53,56,94,.73)}
.bandeau h1{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-1px;line-height:1.1;max-width:20ch;color:rgba(53,56,94,.73)}
.bandeau p.sub{font-size:clamp(17px,1.7vw,21px);color:rgba(53,56,94,.73);margin-top:16px;max-width:44ch}

/* ---------- Hero accueil ---------- */
.hero{
  position:relative;margin-top:76px;height:calc(100vh - 76px);min-height:560px;
  display:flex;align-items:center;
}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:40px 32px;width:100%}
.hero h1{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-1px;line-height:1.12;max-width:22ch;color:rgba(53,56,94,.73)}
.hero h1 .accent{color:rgba(53,56,94,.73)}
.hero p.sub{font-size:clamp(17px,1.6vw,20px);color:rgba(53,56,94,.73);margin:18px 0 28px;max-width:40ch}
.hero-bas{position:absolute;bottom:26px;left:0;right:0;text-align:center;z-index:2;color:var(--gris-texte);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.hero-bas span{display:block;width:1px;height:36px;background:var(--gris-texte);margin:8px auto 0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.9}}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:'Rubik';font-weight:700;font-size:14.5px;
  padding:14px 26px;border-radius:999px;transition:.25s;letter-spacing:.02em;
}
.btn-rouge{background:var(--rouge);color:#fff;box-shadow:0 10px 26px rgba(190,30,45,.28)}
.btn-rouge:hover{background:var(--rouge-fonce);transform:translateY(-2px)}
.btn-ghost{border:2px solid var(--encre);color:var(--encre);margin-left:14px}
.btn-ghost:hover{border-color:var(--rouge);color:var(--rouge)}
.btn-centre{margin:56px auto 0;display:table}

/* ---------- Sections communes ---------- */
section{padding:100px 32px}
.contenu{max-width:1240px;margin:0 auto}
.contenu-etroit{max-width:880px;margin:0 auto}
.titre-section{text-align:center;max-width:760px;margin:0 auto 64px}
.titre-section h1,.titre-section h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-1px;line-height:1.15}
.titre-section .sous{font-family:'Rubik';font-weight:600;font-size:19px;color:var(--bleu);margin-top:14px}
.titre-section p.desc{margin-top:16px;color:var(--gris-texte)}
h2.titre-gauche{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:10px}
.sous-gauche{font-family:'Rubik';font-weight:600;font-size:20px;color:var(--rouge);margin-bottom:26px}
.texte p{color:var(--gris-texte);margin-bottom:18px}
.texte p b,.texte p strong{color:var(--encre)}
.fond-doux{background:var(--fond-doux)}

/* ---------- Grilles de cartes ---------- */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.carte{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);
  padding:36px 30px 30px;display:flex;flex-direction:column;transition:.3s;position:relative;overflow:hidden;
}
.carte::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--rouge);transition:width .35s}
.carte:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(43,49,56,.10);border-color:transparent}
.carte:hover::after{width:100%}
.carte .icone{width:66px;height:66px;object-fit:contain;margin-bottom:22px}
.carte h3{font-size:20px;font-weight:700;color:var(--encre);margin-bottom:12px;letter-spacing:-.3px}
.carte p{color:var(--gris-texte);font-size:15.5px;flex:1}
.carte p b{color:var(--encre);display:block;margin-bottom:6px;font-weight:600}
.carte .lien{
  margin-top:22px;font-family:'Rubik';font-weight:700;font-size:14px;color:var(--rouge);
  display:inline-flex;align-items:center;gap:8px;
}
.carte .lien svg{transition:transform .25s}
.carte:hover .lien svg{transform:translateX(5px)}

/* ---------- Listes à puces stylées ---------- */
.liste-coche{list-style:none;display:flex;flex-direction:column;gap:14px;margin:22px 0}
.liste-coche li{display:flex;gap:14px;align-items:flex-start;color:var(--gris-texte)}
.liste-coche li b{color:var(--encre)}
.liste-coche li::before{
  content:"";flex:0 0 22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--rouge);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Blocs philosophie / valeurs ---------- */
.blocs-4{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.bloc{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:32px 30px;transition:.3s;
}
.bloc:hover{box-shadow:0 14px 36px rgba(43,49,56,.08);transform:translateY(-4px)}
.bloc h3{font-size:19px;font-weight:700;margin-bottom:10px;color:var(--rouge)}
.bloc p{color:var(--gris-texte);font-size:15.5px}
.fond-doux .bloc{background:#fff}
section:not(.fond-doux) .bloc{background:var(--fond-doux)}

/* ---------- Équipe ---------- */
.grille-equipe{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
@media (max-width:900px){.grille-equipe{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grille-equipe{grid-template-columns:1fr}}
.membre{text-align:center}
.membre .photo{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);
  filter:grayscale(12%);transition:.35s;
}
.membre:hover .photo{filter:none;transform:translateY(-5px);box-shadow:0 18px 40px rgba(43,49,56,.14)}
.membre h3{font-size:19px;font-weight:700;margin:18px 0 4px}
.membre .role{font-family:'Rubik';font-weight:600;font-size:14px;color:var(--bleu)}

/* ---------- Témoignages ---------- */
.temoignage{
  display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--ligne);
}
.temoignage:last-of-type{border-bottom:none}
.temoignage.inverse{grid-template-columns:1fr 260px}
.temoignage.inverse .logo-client{order:2}
.logo-client{display:flex;align-items:center;justify-content:center;padding:20px}
.logo-client img{max-height:110px;width:auto;max-width:220px;object-fit:contain}
.temoignage h3{font-size:23px;font-weight:500;letter-spacing:-.5px;margin-bottom:12px}
.temoignage .mission{color:var(--gris-texte);margin-bottom:22px}
blockquote{
  position:relative;padding:26px 30px;background:var(--fond-doux);border-radius:var(--radius);
  font-style:italic;color:var(--encre);font-size:16.5px;
}
blockquote footer{margin-top:14px;font-style:normal;font-family:'Rubik';font-weight:700;font-size:14px;color:var(--bleu);background:none;padding:0}

/* Grille de témoignages (page Témoignages) */
.grille-temoignages{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.carte-temoignage{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);
  padding:34px 32px;display:flex;flex-direction:column;gap:18px;transition:.3s;
}
.carte-temoignage:hover{box-shadow:0 16px 40px rgba(43,49,56,.09);transform:translateY(-4px)}
.carte-temoignage .tete{display:flex;align-items:center;gap:18px}
.carte-temoignage .tete img{max-height:56px;max-width:150px;width:auto;object-fit:contain}
.carte-temoignage h3{font-size:19px;font-weight:500;letter-spacing:-.3px}
.carte-temoignage blockquote{background:none;padding:0;font-size:15.5px}
.carte-temoignage blockquote footer{margin-top:12px}

/* ---------- Accréditations ---------- */
.accreditations{background:var(--fond-doux);padding:70px 32px}
.accreditations .contenu{display:flex;align-items:center;justify-content:center;gap:70px;flex-wrap:wrap}
.accreditations img{height:130px;width:auto;max-width:300px;object-fit:contain;filter:grayscale(35%);opacity:.85;transition:.3s}
.accreditations img:hover{filter:none;opacity:1;transform:scale(1.04)}

/* ---------- Bandeau CTA ---------- */
.cta-bande{background:#fff;color:var(--rouge);text-align:center;padding:80px 32px}
.cta-bande h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.8px;margin-bottom:14px;color:var(--rouge)}
.cta-bande p{color:rgba(190,30,45,.82);max-width:60ch;margin:0 auto 30px}
.cta-bande .btn{background:var(--rouge);color:#fff;box-shadow:0 10px 26px rgba(190,30,45,.22)}
.cta-bande .btn:hover{transform:translateY(-2px);background:var(--rouge-fonce)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.champ{margin-bottom:18px}
.champ label{display:block;font-family:'Rubik';font-weight:600;font-size:14px;margin-bottom:6px}
.champ input,.champ textarea{
  width:100%;padding:13px 16px;border:1px solid var(--ligne);border-radius:12px;
  font-family:inherit;font-size:15.5px;background:#fff;transition:border .25s;
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--rouge)}
.champ textarea{min-height:150px;resize:vertical}
.coordonnees{background:var(--fond-doux);border:1px solid var(--ligne);border-radius:var(--radius);padding:40px 38px}
.coordonnees h3{font-size:20px;font-weight:800;margin-bottom:18px}
.coordonnees p{color:var(--gris-texte);margin-bottom:10px}
.coordonnees a{color:var(--rouge);font-weight:600}
.carte-map{margin-top:26px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ligne)}
.carte-map iframe{display:block;width:100%;height:300px;border:0}

/* ---------- Articles / news ---------- */
.grille-news{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.carte-news{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:34px 32px;
  display:flex;flex-direction:column;transition:.3s;position:relative;overflow:hidden;
}
.carte-news::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rouge);opacity:0;transition:.3s}
.carte-news:hover{box-shadow:0 16px 40px rgba(43,49,56,.09);transform:translateY(-4px)}
.carte-news:hover::after{opacity:1}
.carte-news .etiquette{font-family:'Rubik';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.carte-news h2{font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:12px;line-height:1.3}
.carte-news p{color:var(--gris-texte);font-size:15.5px;flex:1}
.carte-news .lien{margin-top:20px;font-family:'Rubik';font-weight:700;font-size:14px;color:var(--rouge)}

/* ---------- Footer ---------- */
footer.site{background:var(--rouge);color:#fff;padding:80px 32px 0}
.footer-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:56px;padding-bottom:56px}
footer.site .titre-footer{font-size:18.5px;font-weight:500;margin-bottom:20px;letter-spacing:.01em;font-family:'Rubik'}
footer.site p,footer.site li,footer.site a{font-size:14.5px;color:rgba(255,255,255,.88)}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:12px}
footer.site a:hover{color:#fff;text-decoration:underline}
.footer-logo{display:none}
.newsletter{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.newsletter input{width:100%;padding:12px 16px;border-radius:999px;border:none;font-family:inherit;font-size:14px;min-width:0;box-sizing:border-box}
.newsletter button{
  background:#A0C05A;border:none;color:#fff;font-family:'Rubik';font-weight:700;width:100%;
  padding:12px 20px;border-radius:999px;cursor:pointer;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.confid{margin-top:28px}
.credits{font-size:12.5px;opacity:.7;margin-top:16px;line-height:1.6}
/* Titre à barre rouge (bandeau / pages vidéo) : un peu plus grand */
body .bandeau .titre-barre,
body .bandeau .entete-bloc .titre-barre,
body .hero .entete-bloc>h1{font-size:24px !important}
/* Sécurité mobile : les anciennes pages générées avec des grilles « en dur »
   (style="…grid-template-columns…") passent aussi en 1 colonne sur téléphone */
@media (max-width:860px){
  body [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* Accueil : la carte « Depuis 2002 à vos côtés » passe au-dessus du titre sur téléphone */
  .grille-2col-centre>div:last-child{order:-1}
}
.footer-bas{border-top:1px solid rgba(255,255,255,.25);padding:22px 0;text-align:center;font-size:13.5px;color:rgba(255,255,255,.85);max-width:1240px;margin:0 auto}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bas span{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grille{grid-template-columns:repeat(2,1fr)}
  .grille-temoignages,.grille-news{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  nav ul{display:none}
  .burger{display:block}
  nav.ouvert>ul{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;background:#fff;padding:20px 32px 26px;border-bottom:1px solid var(--ligne);align-items:flex-start;max-height:calc(100vh - 76px);overflow-y:auto}
}
@media (max-width:640px){
  section{padding:70px 22px}
  .grille,.grille-2,.blocs-4{grid-template-columns:1fr}
  .temoignage,.temoignage.inverse{grid-template-columns:1fr;gap:26px}
  .temoignage.inverse .logo-client{order:0}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .btn-ghost{margin:14px 0 0}
  .accreditations .contenu{gap:48px}
}

/* Grilles inline responsives */
@media (max-width:1024px){
  #intro-grid,#qui-grid,#valeurs-grid{grid-template-columns:1fr !important;gap:44px !important}
}

/* ---------- Menus déroulants ---------- */
nav li.deroulant{position:relative}
nav .chev{font-size:10px;opacity:.6}
nav .sous-menu{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:280px;
  background:#fff;border:1px solid var(--ligne);border-radius:14px;
  box-shadow:0 18px 44px rgba(43,49,56,.12);padding:10px;flex-direction:column;gap:2px;z-index:200;
}
nav li.deroulant:hover>.sous-menu,nav li.deroulant:focus-within>.sous-menu{display:flex}
nav .sous-menu a{display:block;border-radius:10px;padding:9px 14px;font-weight:500;font-size:14px;width:100%}
@media (max-width:1024px){
  nav .sous-menu{position:static;display:flex;box-shadow:none;border:none;padding:0 0 0 18px;min-width:0;transform:none}
  nav li.deroulant{width:100%}
}

/* ---------- Page prestation détaillée ---------- */
.prestation-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.citation-exergue{
  background:var(--fond-doux);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:28px 32px;font-style:italic;color:var(--encre);margin-bottom:34px;
}
.citation-exergue footer{margin-top:12px;font-style:normal;font-family:'Rubik';font-weight:700;font-size:14px;color:var(--bleu)}
.image-prestation{border-radius:var(--radius);overflow:hidden;border:1px solid var(--ligne)}
.image-prestation img{width:100%;height:auto;object-fit:cover}
.encadre-info{background:var(--fond-doux);border:1px solid var(--ligne);border-radius:var(--radius);padding:30px 28px;margin-top:26px}
.encadre-info h3{font-size:17px;font-weight:800;margin-bottom:14px}
.encadre-info a{display:block;color:var(--rouge);font-weight:600;font-size:15px;padding:7px 0;border-bottom:1px solid var(--ligne)}
.encadre-info a:last-child{border-bottom:none}
.projet-client{background:var(--fond-doux);border-radius:var(--radius);padding:44px 42px;margin-top:70px}
.projet-client .etiquette{font-family:'Rubik';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:10px}
.projet-client h3{font-size:22px;font-weight:800;margin-bottom:14px}
.projet-client p{color:var(--gris-texte)}

/* ---------- Fiche équipe ---------- */
.fiche-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.fiche-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:0 20px 48px rgba(43,49,56,.14)}
.fiche-grid h2{font-size:22px;font-weight:800;margin:30px 0 12px}
.fiche-grid h2:first-child{margin-top:0}
.fiche-grid p{color:var(--gris-texte);margin-bottom:14px}

/* ---------- Listes de clients ---------- */
.colonnes-clients{columns:3;column-gap:44px;margin-top:20px}
.colonnes-clients li{break-inside:avoid;padding:6px 0;color:var(--gris-texte);list-style:none;border-bottom:1px solid var(--ligne);font-size:15px}
.colonnes-clients h4{column-span:all;font-size:18px;font-weight:800;margin:26px 0 8px}
@media (max-width:1024px){.prestation-grid,.fiche-grid{grid-template-columns:1fr}.colonnes-clients{columns:2}}
@media (max-width:640px){.colonnes-clients{columns:1}}

/* ============================================================
   AMÉLIORATIONS VISUELLES ET ANIMATIONS
   ============================================================ */

/* --- Fonds animés (zoom lent façon Ken Burns) --- */
.bandeau,.hero{overflow:hidden}
.bandeau-fond,.hero-fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kenburns 22s ease-in-out infinite alternate;z-index:0;
  transform-origin:center center;
}
.bandeau-fond{object-position:center}
.hero-fond{object-position:center 72%}
@media (max-width:768px){
  .hero-fond{object-position:24% 78%}
}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.2)}}
.bandeau-inner,.hero-inner{z-index:2}

/* --- Entrée du contenu des bandeaux --- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.bandeau .eyebrow,.hero .eyebrow{animation:fadeUp .7s .1s both}
.bandeau h1,.hero h1{animation:fadeUp .7s .28s both}
.bandeau p.sub,.hero p.sub{animation:fadeUp .7s .46s both}
.hero .btn-rouge{animation:fadeUp .7s .62s both}
.hero .btn-ghost{animation:fadeUp .7s .74s both}

/* --- Cartes : icônes vivantes et halo --- */
.carte .icone{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.carte:hover .icone{transform:scale(1.12) rotate(-4deg)}
.btn-rouge{position:relative;overflow:hidden}
.btn-rouge::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .55s;
}
.btn-rouge:hover::after{left:130%}

/* --- Citation en exergue avec grand guillemet --- */
.citation-exergue{
  position:relative;padding:34px 38px 30px 92px;font-size:18px;
  background:#fff;border:1px solid var(--ligne);
  box-shadow:0 14px 38px rgba(43,49,56,.07);
}
.citation-exergue::before{
  content:"\201C";position:absolute;left:26px;top:6px;
  font-family:Georgia,serif;font-size:92px;line-height:1;color:var(--rouge);opacity:.9;
}

/* --- Pages prestations : cartes numérotées --- */
.grille-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.carte-detail{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);
  padding:30px 28px 26px;position:relative;overflow:hidden;transition:.35s;
}
.carte-detail::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--rouge),var(--bleu));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.carte-detail:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(43,49,56,.11);border-color:transparent}
.carte-detail:hover::before{transform:scaleX(1)}
.carte-detail .num{
  font-family:'Rubik';font-weight:800;font-size:15px;color:var(--rouge);
  background:#FBEBED;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:16px;transition:.35s;
}
.carte-detail:hover .num{background:var(--rouge);color:#fff;transform:rotate(-6deg)}
.carte-detail h3{font-size:18px;font-weight:700;margin-bottom:12px;letter-spacing:-.3px}
.carte-detail ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.carte-detail li{color:var(--gris-texte);font-size:15px;padding-left:20px;position:relative}
.carte-detail li::before{content:"—";position:absolute;left:0;color:var(--rouge);font-weight:700}

/* --- Colonne latérale collante des prestations --- */
.colonne-collante{position:sticky;top:100px}
.image-prestation{box-shadow:0 20px 48px rgba(43,49,56,.13);transition:.4s}
.image-prestation:hover{transform:translateY(-4px) scale(1.01)}
.encadre-info a{transition:padding .25s,color .25s}
.encadre-info a:hover{padding-left:8px;color:var(--rouge-fonce)}

/* --- Projet client : bloc bicolore --- */
.projet-client{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,var(--rouge) 0%,var(--rouge-fonce) 100%);
}
.projet-client::after{
  content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.projet-client .etiquette{color:rgba(255,255,255,.85)}
.projet-client h3{color:#fff}
.projet-client p{color:rgba(255,255,255,.92);position:relative;z-index:1}

/* --- Fiches équipe : portrait mis en scène --- */
.fiche-photo{position:relative}
.fiche-photo img{border-radius:var(--radius);box-shadow:0 20px 48px rgba(43,49,56,.14)}
.fiche-grid h2{position:relative;padding-bottom:10px}
.fiche-citation{
  font-family:'Rubik';font-weight:600;font-size:20px;letter-spacing:-.3px;color:var(--encre);
  border-left:4px solid var(--rouge);padding:6px 0 6px 20px;margin-bottom:30px;
}

/* --- Liste équipe : portraits animés --- */
.membre .photo-cadre{display:block;position:relative;border-radius:var(--radius);overflow:hidden}
.membre .photo-cadre::after{
  content:"Voir le profil →";position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(158,21,34,.92),rgba(158,21,34,0));
  color:#fff;font-family:'Rubik';font-weight:700;font-size:14px;letter-spacing:.03em;
  padding:38px 0 14px;text-align:center;opacity:0;transform:translateY(12px);transition:.35s;
}
.membre:hover .photo-cadre::after{opacity:1;transform:none}
.membre .photo{transition:transform .5s,filter .5s}
.membre:hover .photo{transform:scale(1.06)}
.membre h3{transition:color .3s}
.membre:hover h3{color:var(--rouge)}

/* --- Réductions de mouvement --- */
@media (prefers-reduced-motion:reduce){
  .bandeau-fond,.hero-fond{animation:none}
  .bandeau .eyebrow,.hero .eyebrow,.bandeau h1,.hero h1,.bandeau p.sub,.hero p.sub,.hero .btn-rouge,.hero .btn-ghost{animation:none}
  .btn-rouge::after{display:none}
}
@media (max-width:1024px){.grille-detail{grid-template-columns:1fr}.colonne-collante{position:static}}

/* ---------- Bloc d'intro prestation : image + citation superposée (proposition 2) ---------- */
.intro-fusion{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ligne);box-shadow:0 18px 44px rgba(43,49,56,.08)}
.intro-fusion .visuel{position:relative;min-height:440px;overflow:hidden}
.intro-fusion .visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.intro-fusion .visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(43,49,56,.82),rgba(43,49,56,.12));z-index:1}
.intro-fusion .visuel blockquote{position:absolute;left:34px;right:34px;bottom:30px;color:#fff;font-style:italic;font-size:16px;z-index:2;background:none;padding:0;border-radius:0}
.intro-fusion .visuel blockquote footer{color:#fff;opacity:.85;margin-top:10px;font-family:'Rubik';font-weight:700;font-size:13.5px;font-style:normal}
.intro-fusion .txt{padding:44px 42px;background:#fff;display:flex;flex-direction:column;gap:14px;justify-content:center}
.intro-fusion .txt p{margin-bottom:0}
.liens-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.liens-chips a{font-family:'Rubik';font-weight:700;font-size:13px;color:var(--rouge);background:#FBEBED;border-radius:999px;padding:8px 14px;transition:.2s}
.liens-chips a:hover{background:var(--rouge);color:#fff}
@media (max-width:900px){
  .intro-fusion{grid-template-columns:1fr}
  .intro-fusion .visuel{min-height:300px}
}

/* ---------- Pastille PDF pas encore disponible (staging) ---------- */
.liens-chips a.chip-desactive{
  background:transparent;color:var(--gris-texte);border:1.5px dashed var(--ligne);
  cursor:not-allowed;position:relative;
}
.liens-chips a.chip-desactive:hover{background:transparent;color:var(--gris-texte)}
.liens-chips a.chip-desactive::after{content:" (à venir)";font-weight:400;font-size:11px;opacity:.75}

/* ============================================================
   AJUSTEMENTS — séparation footer, alignement menus, refontes
   ============================================================ */

/* --- 1. Séparation visible entre le bandeau CTA et le footer --- */
.cta-bande{padding-bottom:64px}
footer.site{
  background:var(--rouge-fonce);
  border-top:1px solid rgba(255,255,255,.22);
  position:relative;
}
footer.site::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:rgba(255,255,255,.22);
}

/* --- 2. Alignement cohérent des menus déroulants --- */
nav .sous-menu a{text-align:center;white-space:nowrap}

/* --- 3. En-tête léger sans image (fiches équipe, news) --- */
.entete-simple{max-width:900px}
.entete-simple h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.15;max-width:26ch}
.entete-simple p.sub{font-size:clamp(15.5px,1.3vw,18px);color:var(--gris-texte);margin-top:10px;max-width:60ch}
.entete-fiche{margin-bottom:46px}
section.section-fiche{padding-top:150px}

/* --- 4. Cartes news avec vignette image --- */
.carte-news{padding:0}
.carte-news .vignette{height:190px;overflow:hidden}
.carte-news .vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.carte-news:hover .vignette img{transform:scale(1.07)}
.carte-news .corps{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1}

/* --- 5. Références clients : tags au lieu des colonnes --- */
.entete-references-page{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.entete-references-page h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.8px}
.compte{font-family:'Rubik';font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge);background:#FBEBED;border-radius:999px;padding:5px 14px;white-space:nowrap}
.compte-grand{font-size:13.5px;padding:8px 18px}
.grille-references{display:flex;flex-direction:column;gap:6px}
.bloc-references{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:28px 30px;margin-bottom:20px}
.bloc-references:last-child{margin-bottom:0}
.entete-references{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.entete-references::-webkit-details-marker{display:none}
.entete-references h3{font-size:18px;font-weight:800;letter-spacing:-.3px}
.entete-references::after{content:"+";margin-left:auto;font-size:22px;color:var(--gris-texte);line-height:1}
.bloc-references[open] .entete-references::after{content:"–"}
.bloc-references[open] .entete-references{margin-bottom:18px}
.tags-references{display:flex;flex-wrap:wrap;gap:9px}
.tags-references span{
  background:var(--fond-doux);border:1px solid var(--ligne);border-radius:999px;
  padding:8px 16px;font-size:13.5px;color:var(--gris-texte);font-weight:600;transition:.22s;
}
.tags-references span:hover{border-color:var(--rouge);color:var(--rouge);background:#FBEBED;transform:translateY(-2px)}

@media (max-width:640px){
  section.section-fiche{padding-top:120px}
  .bloc-references{padding:22px 20px}
}

/* --- 6. Témoignage client (page clients) : carte cohérente --- */
.carte-temoignage-client{
  background:var(--fond-doux);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:40px 44px;margin-top:36px;
}
.temoignage-client-entete{display:flex;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.temoignage-client-entete .logo-client{
  background:none;border:none;border-radius:0;padding:0;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:90px;
}
.temoignage-client-entete .logo-client img{height:84px;width:auto;max-width:240px;object-fit:contain}
.temoignage-client-entete h2{font-size:20px;font-weight:500;margin-bottom:4px;letter-spacing:-.3px}
.temoignage-client-entete .mission{color:var(--gris-texte);font-size:14.5px;margin-bottom:0;max-width:56ch}
.carte-temoignage-client blockquote{background:#fff}

/* --- 7. Grille news 3 colonnes + filtres par thème --- */
.grille-news{grid-template-columns:repeat(3,1fr)}
.filtres-news{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 36px}
.filtres-news button{
  font-family:'Rubik';font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:999px;
  border:1.5px solid var(--ligne);background:#fff;color:var(--encre);cursor:pointer;transition:.2s;
}
.filtres-news button:hover{border-color:var(--rouge);color:var(--rouge)}
.filtres-news button.filtre-actif{background:var(--rouge);border-color:var(--rouge);color:#fff}
.cats-news{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cats-news span{
  font-family:'Rubik';font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bleu);background:#EAF1F6;border-radius:999px;padding:4px 10px;
}
@media (max-width:1024px){.grille-news{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grille-news{grid-template-columns:1fr}}

/* --- En-tête News : réduire l'espace vide sous le sous-titre --- */
section.entete-page-section{padding:150px 32px 10px}

/* Le bouton principal du hero d'accueil utilise Roboto + majuscules,
   exactement comme sur le site actuel (tous les autres boutons restent en Rubik) */
.hero .btn-rouge{font-family:'Roboto',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.03em}

/* ============================================================
   EN-TÊTE UNIFIÉ (accueil + toutes les pages) :
   barre rouge à côté du titre, grand sous-titre gris, deux boutons
   ============================================================ */
.entete-bloc{max-width:none}
.bandeau .eyebrow::before,.hero .eyebrow::before{display:none}
.bandeau .eyebrow,.hero .eyebrow{
  color:var(--encre);opacity:.7;font-size:12.5px;letter-spacing:.18em;margin:0 0 14px;
}
.bandeau h1,.hero h1{
  display:block;max-width:none;width:fit-content;
  border-left:4px solid var(--rouge);padding:10px 0 10px 20px;margin:0;
  font-size:20px;font-weight:600;letter-spacing:0;line-height:1.2;color:var(--encre);
}
.hero h1 .accent{color:inherit}
.bandeau p.sub,.hero p.sub{
  font-size:clamp(18px,1.75vw,24px);font-weight:400;line-height:1.85;
  color:#5f5f5f;max-width:660px;margin:30px 0 30px;
}
.bandeau .btn-rouge{font-family:'Roboto',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.bandeau .btn-rouge{animation:fadeUp .7s .62s both}
.bandeau .btn-ghost{animation:fadeUp .7s .74s both}
@media (max-width:640px){
  .bandeau .btn-ghost,.hero .btn-ghost{margin:12px 0 0}
  .bandeau p.sub,.hero p.sub{line-height:1.6}
}
@media (prefers-reduced-motion:reduce){
  .bandeau .btn-rouge,.bandeau .btn-ghost{animation:none}
}

/* Visuel de type schéma (ex. roue de l'efficacité) : image entière, jamais rognée */
.intro-fusion .visuel.visuel-schema{background:#fff;border:1px solid var(--ligne)}
.intro-fusion .visuel.visuel-schema::after{display:none}
.intro-fusion .visuel.visuel-schema img{object-fit:contain!important;padding:22px;background:#fff}
/* Liste clients : ordre alphabétique, un nom par ligne (sans lettres) */
.az-liste{list-style:none;margin:0;padding:0}
.az-liste li{padding:13px 4px;font-size:16px;line-height:1.4;border-bottom:1px solid var(--ligne)}
.az-liste li:last-child{border-bottom:0}
@media (min-width:900px){.az-liste li{padding:14px 6px}}

/* Toutes les pages : petit titre avec barre rouge, texte en dessous, le tout en blanc sur la photo ou la vidéo */
.bandeau .titre-barre{display:block;width:fit-content;border-left:4px solid var(--rouge);padding:10px 0 10px 20px;margin:0;font-size:20px;font-weight:600;letter-spacing:0;line-height:1.2;color:#fff}
.bandeau h1.texte-principal{border:0;padding:0;margin:30px 0 0;max-width:660px;width:auto;font-size:clamp(18px,1.75vw,24px);font-weight:400;line-height:1.85}
.bandeau h1.texte-principal + p.sub{margin-top:14px;font-size:clamp(16px,1.4vw,19px);line-height:1.7}
.bandeau .eyebrow,.hero .eyebrow{color:#fff;opacity:1}
.bandeau h1,.hero h1,.hero h1 .accent{color:#fff}
.bandeau p.sub,.hero p.sub{color:#fff}
.bandeau .btn-ghost,.hero .btn-ghost{border-color:#fff;color:#fff;background:transparent}
.bandeau .btn-ghost:hover,.hero .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--encre)}
.hero-bas{color:#fff}.hero-bas span{background:#fff}

/* VERROU EN-TÊTE : la mise en page prime sur tout (photo, vidéo, YouTube ou réglage de l'admin). Elle ne peut jamais revenir à une ancienne version. */
.hero .entete-bloc>h1,.bandeau .entete-bloc .titre-barre{font-family:'Rubik',sans-serif!important;font-size:20px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:0!important;color:#fff!important;text-transform:none!important;border-left:4px solid var(--rouge)!important;padding:10px 0 10px 20px!important;margin:0!important;width:fit-content!important;max-width:none!important;background:none!important}
.hero .entete-bloc p.sub,.bandeau .entete-bloc .texte-principal{font-family:'Rubik',sans-serif!important;font-size:clamp(18px,1.75vw,24px)!important;font-weight:400!important;line-height:1.85!important;color:#fff!important;border:0!important;padding:0!important;margin-top:30px!important;max-width:660px!important;width:auto!important;letter-spacing:normal!important;text-transform:none!important}
.bandeau .entete-bloc .texte-principal+p.sub,.bandeau .entete-bloc .texte-principal+.sub{font-size:clamp(16px,1.4vw,19px)!important;font-weight:400!important;line-height:1.7!important;color:#fff!important;margin-top:14px!important}
.hero .entete-bloc>h1 *,.hero .entete-bloc p.sub *,.bandeau .entete-bloc .titre-barre *,.bandeau .entete-bloc .texte-principal *,.bandeau .entete-bloc .texte-principal+p.sub *{color:#fff!important;font-family:inherit!important;font-size:inherit!important}
.entete-bloc .titre-transparent{display:block!important;margin:0!important;padding:0!important}

/* Clients : cartes (sigle en gras + nom complet), lues de gauche à droite en ordre alphabétique */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding:6px 2px 4px}
.carte{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:20px 22px;border-top:4px solid var(--bleu);box-shadow:0 6px 20px rgba(20,30,40,.05);min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.carte:nth-child(4n+1){border-top-color:var(--rouge)}
.carte:nth-child(4n+3){border-top-color:var(--encre)}
.carte b{font-size:18px;font-weight:700;line-height:1.25;color:var(--encre)}
.carte span{font-size:13.5px;line-height:1.4;color:var(--gris)}
/* LinkedIn */
.lien-linkedin{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#0A66C2;font-weight:600;font-size:14px}
.lien-linkedin svg{width:22px;height:22px;fill:currentColor;flex:none}
.lien-linkedin:hover{color:#004182}
.membre .lien-linkedin{margin-top:10px}
.membre-lien{display:block;color:inherit;text-decoration:none}
.fiche-photo .lien-linkedin{margin-top:18px;width:100%;border:1px solid #0A66C2;border-radius:999px;padding:11px 16px}
.fiche-photo .lien-linkedin:hover{background:#0A66C2;color:#fff}
/* Logo sur une page de prestation */
.logo-prestation{margin-top:22px}
.logo-prestation img{max-height:70px;width:auto;max-width:220px;display:block}

/* ============ Page « Roue de l'efficacité » (mise en page éditoriale dédiée) ============ */
.roue-page{padding:150px 0 90px}
.roue-titre{font-family:'Rubik',sans-serif;font-size:clamp(28px,3.8vw,46px);font-weight:800;line-height:1.12;letter-spacing:-.5px;text-align:center;color:var(--encre);max-width:900px;margin:0 auto 42px}
.roue-intro{max-width:none;color:var(--gris-texte);font-size:clamp(16px,1.3vw,18px);line-height:1.8;margin-bottom:54px}
.roue-intro p{margin-bottom:14px}
.roue-intro p:last-child{margin-bottom:0}
.roue-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.roue-atouts h2{font-size:clamp(24px,2.2vw,30px);font-weight:800;color:var(--encre);margin:0 0 24px}
.roue-atout{margin-bottom:22px}
.roue-atout h3{position:relative;padding-left:22px;font-size:17px;font-weight:700;color:var(--encre);margin:0 0 6px}
.roue-atout h3::before{content:"\203A";position:absolute;left:2px;top:-1px;color:var(--rouge);font-weight:700;font-size:19px;line-height:1.2}
.roue-atout p{color:var(--gris-texte);font-size:15.5px;line-height:1.7;margin:0}
.roue-cta{margin-top:12px}
.roue-visuel{position:sticky;top:104px;background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(20,30,40,.05)}
.roue-visuel img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .roue-page{padding:120px 0 70px}
  .roue-grid{grid-template-columns:1fr;gap:38px}
  .roue-visuel{position:static;order:-1}
}

/* ===== Pages thématiques (Système salarial, RPS) et Guide : titre centré partagé ===== */
.page-titre{font-family:'Rubik',sans-serif;font-size:clamp(28px,3.8vw,46px);font-weight:800;line-height:1.14;letter-spacing:-.5px;text-align:center;color:var(--encre);max-width:900px;margin:0 auto 46px}
.theme-page,.guide-page{padding:150px 0 90px}
.theme-haut{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-bottom:64px}
.theme-texte p{color:var(--gris-texte);font-size:clamp(16px,1.25vw,17.5px);line-height:1.8;margin-bottom:16px}
.theme-texte p:last-of-type{margin-bottom:0}
.theme-texte ul{margin:10px 0 16px}
.theme-cta{margin-top:24px}
.theme-media{position:sticky;top:104px}
.theme-media img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--ligne);box-shadow:0 12px 34px rgba(20,30,40,.08)}
.theme-atouts{border-top:1px solid var(--ligne);padding-top:46px}
.theme-atouts h2{font-size:clamp(24px,2.2vw,30px);font-weight:800;color:var(--encre);margin:0 0 24px}
.theme-atouts .roue-atout{margin-bottom:22px;max-width:900px}
/* Guide : contenu éditorial + bloc de téléchargement */
.guide-corps{max-width:840px;margin:0 auto 54px}
.guide-telecharger{max-width:720px;margin:0 auto;background:var(--fond-doux);border:1px solid var(--ligne);border-radius:18px;padding:44px 40px;text-align:center}
.guide-telecharger h2{font-size:clamp(20px,2vw,26px);font-weight:800;color:var(--encre);line-height:1.3;margin:0 0 26px}
@media (max-width:900px){
  .theme-page,.guide-page{padding:120px 0 70px}
  .theme-haut{grid-template-columns:1fr;gap:34px}
  .theme-media{position:static;order:-1}
}

/* Grilles à 2 colonnes génériques : se replient sur mobile/tablette */
.grille-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.grille-2col-centre{grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.grille-2col-egal{grid-template-columns:1fr 1fr}
@media (max-width:860px){.grille-2col,.grille-2col-centre,.grille-2col-egal{grid-template-columns:1fr !important;gap:34px;align-items:start}}