.multipage-header nav{gap:25px}.multipage-header nav .button{margin-left:20px}.multipage-header nav a[aria-current=page]:not(.button){position:relative;color:#ac771f}.multipage-header nav a[aria-current=page]:not(.button):after{content:"";position:absolute;height:2px;background:#ddb251;left:0;right:0;bottom:-9px}.professional-expertise{display:inline-block;margin:20px 0 0;padding:5px 12px;background:#ffffffa8;border-radius:3px;font-size:14px;font-weight:600;color:#183156;letter-spacing:.02em}.hero .professional-expertise+h1{margin-top:13px}.inner-page{color:#09213e}.inner-page .header{background:#001c32;color:white;border-bottom:1px solid #ffffff12}
/* L'en-tete des pages interieures est marine : le logotype passe en
   version reservee. Les deux fichiers sont dans le HTML, CSS choisit. */
.brand-pic--inverse{display:none}
.inner-page .header .brand-pic--couleur{display:none}
.inner-page .header .brand-pic--inverse{display:block}.inner-page .header nav{font-weight:400;font-size:13px}.inner-page .header nav a[aria-current=page]{color:#efc15d}.inner-page .header nav .button{border:1px solid #bd964b;background:transparent;color:#efc15d;box-shadow:none;border-radius:0;font-size:13px}.inner-page .header .button span{display:none}.inner-hero{position:relative;background:#001d33;color:white;padding:44px 0 42px;isolation:isolate;overflow:hidden}.inner-photo{position:absolute;inset:0;object-fit:cover;object-position:center;width:100%;height:100%;z-index:-2}.inner-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#001c33fa,#001c33db 38%,#001c3340 77%);z-index:-1}.inner-hero>.container{position:relative}.inner-hero-copy{max-width:570px}.inner-page .eyebrow{font-size:12px;letter-spacing:0;text-transform:uppercase;font-weight:600;color:#b38230;display:flex;margin:0 0 11px;gap:14px}.inner-page .eyebrow:before{display:none}.inner-page .eyebrow:after{content:"";width:39px;height:1px;background:currentColor;opacity:.7}.inner-hero .eyebrow,.dark-section .eyebrow,.inner-cta .eyebrow{color:#efbf5b}.inner-hero h1{font-size:clamp(33px,3.45vw,48px);line-height:1.1;letter-spacing:-.025em;margin:0 0 15px;font-weight:700}.inner-hero-copy>p:not(.eyebrow){font-size:18px;line-height:1.5;max-width:535px;margin:0 0 22px}.inner-page .button.gold{border-radius:0;padding:12px 23px;background:linear-gradient(105deg,#e2bc71,#cfa351);border:1px solid #f0ce82;box-shadow:none;font-size:14px}.inner-proofs{display:grid;grid-template-columns:repeat(3,1fr);width:59%;margin:-34px 0 0 auto;gap:20px}.inner-proofs>div{border-left:1px solid #c5d3df88;padding-left:18px}.inner-proofs strong{font-size:12px;line-height:1.35;font-weight:500;text-transform:uppercase;color:#edbd5b;display:block}.inner-proofs p{font-size:12px;line-height:1.35;color:#e0e8f0;margin:5px 0 0}.inner-section{padding:34px 0}.inner-heading{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:55px;align-items:center;margin-bottom:23px}.inner-heading:has(>div:only-child){display:block}.inner-page h2{font-size:clamp(25px,2.65vw,36px);line-height:1.15;letter-spacing:-.025em;margin:0}.inner-heading>p{font-size:14px;line-height:1.5;margin:0;color:#395271}.inner-page h3{font-size:17px;letter-spacing:-.015em;line-height:1.3;margin:0 0 8px}.inner-page h4{font-size:14px;font-weight:500;margin:0 0 12px;line-height:1.35}.inner-page .line-icon{width:39px;height:39px;fill:none;stroke:#b98a36;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.process-five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:0}.process-five li{position:relative;border:1px solid #dce5ed;padding:16px 18px;background:#fdfefe}.process-five li:not(:last-child):after{content:"→";position:absolute;left:calc(100% + 6px);top:30px;color:#b98a36;font-size:23px}.step-top{display:flex;gap:20px;align-items:center;margin-bottom:15px}.number-circle{width:37px;height:37px;display:grid;place-items:center;border:1px solid #d0ad6b;color:#b5832f;border-radius:50%;font-size:15px;flex-shrink:0}.process-five h3{font-size:13px}.process-five p{font-size:14px;line-height:1.4;margin:0}.dark-section{background:#001f36;color:#fff}.dark-section .inner-heading>p{color:#d2deea}.pillar-grid{display:grid;gap:38px}.pillar-grid.three{grid-template-columns:repeat(3,1fr)}.pillar-grid.four{grid-template-columns:repeat(4,1fr)}.pillar-grid article{padding-right:24px}.pillar-grid article+article{border-left:1px solid #b2c5d577;padding-left:35px}.pillar-grid .line-icon{stroke:#efbd55;margin-bottom:15px}.pillar-grid p{font-size:14px;line-height:1.45;color:#e0e8f0;margin:0}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.tool-grid article{display:flex;gap:19px;border:1px solid #e1e8ee;padding:17px 20px;background:#fcfdfe}.tool-grid h3{font-size:15px;margin-bottom:6px}.tool-grid p{font-size:14px;line-height:1.4;color:#395271;margin:0 0 10px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{font-size:11px;background:#e9edf1;color:#243d5d;border-radius:4px;padding:5px 9px}.pale-section{background:linear-gradient(110deg,#e9edf1,#f6f8fa)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}thead{background:#dfe5eb}th,td{padding:7px 15px;border:1px solid #dce4eb}tbody{background:#ffffffb0}tbody th{font-weight:400;width:46%}.inner-cta{padding:28px 0;color:#fff;background-color:#001d35;background-image:linear-gradient(90deg,#001d35f5,#001d35b5),url('assets/industrial-night.jpg');background-position:center;background-size:cover}@supports (background-image:image-set(url('a.webp') type('image/webp'))){.inner-cta{background-image:linear-gradient(90deg,#001d35f5,#001d35b5),image-set(url('assets/industrial-night.webp') type('image/webp'),url('assets/industrial-night.jpg') type('image/jpeg'))}}.inner-cta>.container{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:70px}.inner-cta h2{font-size:29px}.inner-cta p:not(.eyebrow){font-size:13px;line-height:1.4;margin:12px 0 0}.inner-footer{background:#001b30;color:#fff;border-top:1px solid #ffffff26;padding:30px 0}.footer-columns{display:grid;grid-template-columns:1fr .8fr 1fr 1fr;gap:40px}.footer-columns>div+div,.footer-columns>nav{border-left:1px solid #ffffff40;padding-left:40px}.footer-columns p{font-size:13px;line-height:1.5;margin:15px 0}.footer-columns nav{display:flex;flex-direction:column;font-size:13px;gap:3px}.footer-columns a[aria-current=page]{color:#eac064;text-decoration:underline}.footer-columns>div:last-child{align-self:end;font-size:12px}.footer-columns .legal-button{font-size:12px}.footer-columns>div>a:not(.brand){font-size:13px;color:#eac064}.vision-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}.vision-grid blockquote{position:relative;font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.025em;margin:32px 0 15px;padding-left:50px}.vision-grid blockquote:before{content:"“";position:absolute;left:0;top:-15px;color:#b98a36;font:75px Georgia,serif}.vision-list{border-left:1px solid #d4dfe9;padding-left:55px}.vision-list article{display:flex;gap:24px;padding:15px 0}.vision-list article+article{border-top:1px solid #dce5ed}.vision-list h3{font-size:16px}.vision-list p{font-size:14px;line-height:1.4;color:#395271;margin:0}.value-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.value-cards article{border:1px solid #dce5ed;padding:18px 21px;background:#ffffffb0}.value-cards .number-circle{margin-bottom:10px}.value-cards p{font-size:14px;color:#395271;line-height:1.5;margin:0}.approach-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:35px;align-items:center}.approach-grid h2{font-size:24px;margin-bottom:12px}.approach-grid>div>p:not(.eyebrow){font-size:14px;line-height:1.5;color:#395271;margin:0}.learning-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}.learning-steps li{border:1px solid #dce5ed;position:relative;text-align:center;padding:12px 9px}.learning-steps li:not(:last-child):after{content:"→";position:absolute;left:calc(100% + 4px);top:40%;color:#b98a36}.learning-steps strong{display:block;font-size:12px;line-height:1.4;margin:7px 0}.learning-steps p{font-size:12px;line-height:1.3;margin:0;color:#395271}.inner-page .diagnostic-detail{padding:42px 0}.inner-page .diagnostic-detail h2{font-size:32px}.inner-page .reference-offers{padding:42px 0}.inner-page .contact-section h2{margin-bottom:22px}.inner-page .contact-section .eyebrow{color:#edbd5b}.inner-page .contact-section .button{width:100%}.inner-page .resources-grid h3{margin:20px 0 15px}.inner-page .faq h2{margin-bottom:24px}
@media(min-width:1200px){.inner-hero{padding-top:40px;padding-bottom:38px}.inner-hero-copy{max-width:640px}.inner-hero h1{font-size:46px}.inner-proofs{margin-top:-43px}.inner-hero-copy>p:not(.eyebrow){font-size:20px;max-width:585px}.inner-section{padding:40px 0}}
@media(max-width:1150px){.multipage-header nav{gap:18px}.multipage-header nav .button{margin-left:5px}.inner-page .header nav{gap:22px}.inner-hero-copy{max-width:510px}.inner-hero-copy>p:not(.eyebrow){font-size:17px;max-width:470px}.inner-proofs{width:59%;margin-top:-32px;gap:15px}.inner-proofs>div{padding-left:15px}.inner-proofs strong{font-size:11px}.inner-proofs p{font-size:11px}.inner-heading{gap:35px}.process-five{gap:25px}.process-five li{padding:14px}.process-five p{font-size:13px}.tool-grid article{padding:14px;gap:15px}.tool-grid .line-icon{width:33px}.tool-grid p{font-size:13px}.pillar-grid{gap:20px}.pillar-grid article{padding-right:10px}.pillar-grid article+article{padding-left:24px}.pillar-grid h3{font-size:16px}.pillar-grid p{font-size:13px}.footer-columns{gap:25px}.footer-columns>div+div,.footer-columns>nav{padding-left:25px}.learning-steps{gap:20px}.learning-steps li{padding:10px 5px}.learning-steps strong{font-size:11px}.learning-steps p{font-size:11px}}
@media(max-width:1020px){.multipage-header .brand-logo{height:42px}.multipage-header nav{gap:14px;font-size:13px}.multipage-header nav .button{font-size:12px;padding:9px 12px}.inner-page .header nav{gap:17px;font-size:12px}.inner-proofs{width:57%;margin-top:25px}.inner-hero{padding:30px 0}.inner-heading{grid-template-columns:1.6fr 1fr;gap:30px}.inner-page h2{font-size:29px}.inner-heading>p{font-size:13px}.inner-page .line-icon{width:33px;height:33px}.step-top{gap:12px}.vision-grid{gap:35px}.vision-list{padding-left:35px}.vision-grid blockquote{font-size:24px}.approach-grid{grid-template-columns:1.1fr 1fr;gap:20px}.inner-cta h2{font-size:26px}}
@media(max-width:850px){.multipage-header nav .button{margin:10px 0 0}.multipage-header nav,.inner-page .header nav{gap:0;font-size:16px}.multipage-header nav a[aria-current=page]:not(.button):after{bottom:6px;right:auto;width:32px;left:13px}.inner-page .header nav{background:#001c32;color:#fff}.inner-page .menu-toggle{border-color:#ffffff55;color:#fff}.inner-page .header nav .button{font-size:15px}.professional-expertise{margin-top:22px}.inner-hero h1{font-size:38px}.inner-proofs{width:100%;margin:30px 0 0}.inner-proofs strong,.inner-proofs p{font-size:12px}.inner-hero-copy{max-width:570px}.inner-hero-copy>p:not(.eyebrow){max-width:520px}.inner-heading{grid-template-columns:1fr;gap:15px}.inner-heading>p{font-size:15px;max-width:600px}.process-five{grid-template-columns:1fr;gap:14px}.process-five li{display:grid;grid-template-columns:100px 1fr;gap:4px 20px;padding:20px}.process-five .step-top{grid-row:1/4;margin:0;align-self:start}.process-five li:after{display:none}.process-five h3,.process-five h4{margin:0}.process-five p{grid-column:2;font-size:15px;margin-top:6px}.tool-grid{grid-template-columns:1fr 1fr}.tool-grid p{font-size:14px}.pillar-grid.four{grid-template-columns:1fr 1fr;gap:28px}.pillar-grid.four article:nth-child(3){border:0;padding-left:0}.pillar-grid p{font-size:14px}.value-cards{grid-template-columns:1fr 1fr}.vision-grid{grid-template-columns:1fr;gap:25px}.vision-list{padding-left:0;border:0}.vision-grid blockquote{margin:25px 0 10px}.approach-grid{grid-template-columns:1fr;gap:25px}.learning-steps strong,.learning-steps p{font-size:13px}.learning-steps li{padding:14px 8px}.inner-cta>.container{gap:30px;grid-template-columns:1.3fr 1fr}.footer-columns{grid-template-columns:1fr 1fr;gap:30px}.footer-columns>div:nth-child(3){padding-left:0;border:0}.inner-page .contact-section h2{font-size:36px}.inner-page .inner-hero:before{background:linear-gradient(90deg,#001c33f5,#001c33ac 60%,#001c3377)}}
@media(max-width:580px){.multipage-header .brand-logo{height:40px}.multipage-header .brand-logo{height:44px}.inner-page .header-inner{min-height:70px}.inner-hero{padding:32px 0}.inner-hero h1{font-size:32px;line-height:1.15}.inner-hero h1 br{display:none}.inner-hero-copy>p:not(.eyebrow){font-size:17px;margin-top:16px}.inner-hero .button{font-size:14px;padding:11px 17px}.inner-proofs{grid-template-columns:1fr;gap:15px;margin-top:30px}.inner-proofs>div{padding-left:14px}.inner-proofs strong{font-size:12px}.inner-proofs p{font-size:13px}.inner-page .eyebrow{font-size:11px}.inner-page h2{font-size:27px}.inner-section{padding:30px 0}.inner-heading{margin-bottom:23px}.inner-heading h2 br{display:none}.process-five li{grid-template-columns:1fr;padding:22px;gap:7px}.process-five .step-top{grid-row:auto;margin-bottom:8px}.process-five p{grid-column:auto}.process-five h3{font-size:14px}.process-five h4{font-size:16px}.pillar-grid.three,.pillar-grid.four{grid-template-columns:1fr;gap:24px}.pillar-grid article+article,.pillar-grid.four article:nth-child(3){border-left:0;border-top:1px solid #ffffff40;padding:24px 0 0}.pillar-grid article{padding:0}.pillar-grid h3{font-size:19px}.pillar-grid p{font-size:16px}.tool-grid{grid-template-columns:1fr}.tool-grid article{padding:20px;gap:17px}.tool-grid h3{font-size:17px}.tool-grid p{font-size:15px}.tags span{font-size:12px}.value-cards{grid-template-columns:1fr}.value-cards p{font-size:16px}.value-cards h3{font-size:19px}.value-cards article{padding:22px}.vision-grid blockquote{font-size:24px;padding-left:37px}.vision-list article{gap:18px}.vision-list h3{font-size:17px}.vision-list p{font-size:15px}.approach-grid h2{font-size:25px}.approach-grid>div>p:not(.eyebrow){font-size:16px}.learning-steps{grid-template-columns:1fr 1fr;gap:15px}.learning-steps li:after{display:none}.learning-steps li{padding:18px 10px}.learning-steps strong{font-size:14px}.learning-steps p{font-size:14px}.inner-cta>.container{grid-template-columns:1fr;gap:22px}.inner-cta h2{font-size:27px}.inner-cta h2 br{display:none}.inner-cta p:not(.eyebrow){font-size:14px}.footer-columns{gap:25px 20px}.footer-columns>div+div,.footer-columns>nav{padding-left:20px}.footer-columns p,.footer-columns nav{font-size:13px}.footer-columns .brand-logo{height:42px}.inner-page .diagnostic-detail h2{font-size:27px}.inner-page .reference-offers{padding:35px 0}.inner-page .contact-section h2{font-size:32px}}


/* ==========================================================================
   MOUVEMENT
   --------------------------------------------------------------------------
   Deux familles, volontairement separees :

   1. L'entree de page (heros, photo) est en CSS pur, sans classe posee par
      JavaScript. C'est indispensable : le script est charge en `defer`, donc
      il s'execute APRES le premier affichage. Si l'animation dependait de
      lui, la page s'afficherait une fraction de seconde puis disparaitrait
      pour reapparaitre — le clignotement qu'on cherche justement a eviter.

   2. Les apparitions au defilement sont pilotees par JavaScript, mais
      uniquement pour les elements situes SOUS la ligne de flottaison au
      chargement. Un element deja visible n'est jamais masque apres coup.

   On n'anime que `transform` et `opacity` : aucune de ces regles ne
   declenche de recalcul de mise en page. `prefers-reduced-motion` neutralise
   l'ensemble en fin de fichier.
   ========================================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:root { --kz-sortie: cubic-bezier(.22, 1, .36, 1); }

/* ---- 1. Entree de page (CSS pur) --------------------------------------- */
@keyframes kz-monte {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: none }
}

.hero-copy > *,
.inner-hero-copy > *,
.hero-panels > * {
  animation: kz-monte 620ms var(--kz-sortie) both;
}
.hero-copy > *:nth-child(1), .inner-hero-copy > *:nth-child(1) { animation-delay: 40ms }
.hero-copy > *:nth-child(2), .inner-hero-copy > *:nth-child(2) { animation-delay: 110ms }
.hero-copy > *:nth-child(3), .inner-hero-copy > *:nth-child(3) { animation-delay: 180ms }
.hero-copy > *:nth-child(4), .inner-hero-copy > *:nth-child(4) { animation-delay: 250ms }
.hero-copy > *:nth-child(5), .inner-hero-copy > *:nth-child(5) { animation-delay: 320ms }
.hero-copy > *:nth-child(6), .inner-hero-copy > *:nth-child(6) { animation-delay: 390ms }
.hero-panels > *:nth-child(1) { animation-delay: 220ms }
.hero-panels > *:nth-child(2) { animation-delay: 330ms }

/* Rapprochement tres leger de la photographie : assez pour donner vie,
   assez discret pour ne pas attirer l'oeil. */
@keyframes kz-photo { from { transform: scale(1.035) } to { transform: scale(1) } }
.hero-photo, .inner-photo { animation: kz-photo 1100ms var(--kz-sortie) both; }

/* ---- 2. Apparitions au defilement -------------------------------------- */
/* Etat d'attente pose par le script, et seulement hors de l'ecran. */
.kz-attend { opacity: 0; transform: translateY(18px); }
.kz-vu {
  animation: kz-monte 560ms var(--kz-sortie) both;
  animation-delay: calc(var(--kz-rang, 0) * 60ms);
}

/* Barres des indicateurs : elles montent avec la carte qui les porte. */
@keyframes kz-barre { from { transform: scaleY(.15) } to { transform: scaleY(1) } }
.kz-vu .mini-bars i, .mini-bars.kz-vu i {
  transform-origin: bottom;
  animation: kz-barre 620ms var(--kz-sortie) both;
  animation-delay: calc(var(--kz-barre, 0) * 55ms + 120ms);
}

/* ---- 3. En-tete --------------------------------------------------------- */
/* Pas de changement de hauteur : cela decalerait toute la page. Seule
   l'ombre apparait, ce qui suffit a detacher l'en-tete du contenu. */
.header { transition: box-shadow 300ms ease; }
.header.kz-colle { box-shadow: 0 4px 18px rgba(7, 30, 54, .10); }
.inner-page .header.kz-colle { box-shadow: 0 4px 18px rgba(0, 0, 0, .32); }

.brand-logo { transition: transform 300ms var(--kz-sortie); }
.brand:hover .brand-logo { transform: scale(1.03); }

/* ---- 4. Navigation ------------------------------------------------------ */
.header nav > a:not(.button) { position: relative; transition: color 200ms ease; }
.header nav > a:not(.button)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: right;
  transition: transform 300ms var(--kz-sortie);
}
.header nav > a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; }
.header nav > a[aria-current=page]:not(.button)::after { display: none; }
@media (max-width: 850px) { .header nav > a:not(.button)::after { display: none } }

/* ---- 5. Boutons et cartes ---------------------------------------------- */
.button { transition: transform 240ms var(--kz-sortie), box-shadow 240ms var(--kz-sortie), background-color 200ms ease, color 200ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button span { display: inline-block; transition: transform 280ms var(--kz-sortie); }
.button:hover span { transform: translateX(4px); }

.expertise-card, .offer-card, .resources-grid article {
  transition: transform 300ms var(--kz-sortie), box-shadow 300ms var(--kz-sortie), border-color 300ms ease;
}
.expertise-card:hover, .resources-grid article:hover { transform: translateY(-4px); }
.expertise-card .icon, .offer-card .icon { transition: transform 340ms var(--kz-sortie); }
.expertise-card:hover .icon, .offer-card:hover .icon { transform: scale(1.06); }
.card-arrow { display: inline-block; transition: transform 300ms var(--kz-sortie); }
.expertise-card:hover .card-arrow, .offer-card:hover .card-arrow { transform: translateX(4px); }

/* ---- 6. Blocs depliants ------------------------------------------------- */
@keyframes kz-deplie { from { opacity: 0 } to { opacity: 1 } }
details[open] > *:not(summary) { animation: kz-deplie 300ms ease both; }

/* ---- 7. Compteurs ------------------------------------------------------- */
/* Chasse fixe : sans cela la largeur saute a chaque chiffre pendant le compte. */
.metric-number strong { font-variant-numeric: tabular-nums; }

/* ---- 8. Retour en haut -------------------------------------------------- */
.kz-haut {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #edba54; color: #071e36;
  box-shadow: 0 6px 18px rgba(7, 30, 54, .26);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms var(--kz-sortie), visibility 260ms;
}
.kz-haut.kz-visible { opacity: 1; visibility: visible; transform: none; }
.kz-haut:hover { transform: translateY(-2px); }
.kz-haut svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 9. Champs de formulaire -------------------------------------------- */
input, textarea { transition: border-color 200ms ease, box-shadow 200ms ease; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(237, 186, 84, .26); }

/* ---- 10. Moins de mouvement --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .inner-hero-copy > *, .hero-panels > *,
  .hero-photo, .inner-photo, .kz-attend, .kz-vu,
  .kz-vu .mini-bars i, .mini-bars.kz-vu i,
  details[open] > *:not(summary) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .kz-haut { transition: none; }
}

/* ==========================================================================
   PAGE METHODE
   Composants propres a cette page, d'apres la maquette client.
   Prefixe `m-` pour ne pas entrer en collision avec l'existant.
   ========================================================================== */

/* ---- Pastille circulaire, commune a plusieurs blocs --------------------- */
.m-ring {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px;
  border: 1px solid currentColor; border-radius: 50%;
}
.m-ring svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.m-ring--lg { width: 62px; height: 62px; }
.m-ring--lg svg { width: 26px; height: 26px; }
.m-ring--sm { width: 30px; height: 30px; }
.m-ring--sm svg { width: 15px; height: 15px; }

/* ---- Heros : trois reperes sous le bouton ------------------------------ */
.m-badges { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 26px; }
.m-badges > span {
  display: flex; align-items: center; gap: 13px;
  font-size: 13px; color: #e6edf4;
}
.m-badges .m-ring { color: #d0ad6b; }
.m-badges .m-ring svg { stroke: #efbd55; }

/* ---- Grilles de cartes ------------------------------------------------- */
.m-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.m-cards--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.m-card {
  border: 1px solid #e1e8ee; background: #fcfdfe; padding: 20px;
  transition: transform 300ms var(--kz-sortie), box-shadow 300ms var(--kz-sortie);
}
.m-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(7, 30, 54, .07); }
.m-ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #fdf3dd; margin-bottom: 14px;
  transition: transform 340ms var(--kz-sortie);
}
.m-card:hover .m-ico { transform: scale(1.06); }
.m-ico svg {
  width: 21px; height: 21px; fill: none; stroke: #0c2340;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.m-card h3 { font-size: 15px; color: #0c2340; margin: 0 0 6px; line-height: 1.25; }
.m-card p { font-size: 13px; line-height: 1.45; color: #395271; margin: 0; }
.m-cards--six .m-card { padding: 17px; }
.m-cards--six .m-card h3 { font-size: 14px; }

/* ---- Section IA -------------------------------------------------------- */
.m-lead { font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 70ch; }
.dark-section .m-lead { color: #d2deea; }

.m-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; margin-top: 26px; }
.m-pillars article + article { border-left: 1px solid #b2c5d544; padding-left: 34px; }
.m-pillars .m-ring { color: #cda957; margin-bottom: 14px; }
.m-pillars .m-ring svg { stroke: #efbd55; }
.m-pillars h3 { font-size: 15px; color: #fff; margin: 0 0 7px; }
.m-pillars p { font-size: 13px; line-height: 1.45; color: #d2deea; margin: 0; }

.m-note {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 0; padding-top: 20px; border-top: 1px solid #b2c5d533;
  font-size: 13px; color: #d2deea;
}
.m-note .m-ring { color: #cda957; }
.m-note .m-ring svg { stroke: #efbd55; }

/* ---- Fil conducteur DMAIC ---------------------------------------------- */
.m-flow {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px; list-style: none; padding: 0; margin: 6px 0 0; text-align: center;
}
.m-flow li { position: relative; }
/* La fleche relie deux pastilles : elle part du bord droit de l'une et
   s'arrete avant la suivante. Calculee en pourcentage pour suivre la grille. */
.m-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 31px;                      /* centre de la pastille : 62 / 2 */
  left: calc(100% + 12px);        /* moitie de la gouttiere (gap : 24px) */
  transform: translate(-50%, -50%);
  color: #b98a36; font-size: 21px; line-height: 1;
}
.m-flow .m-ring { color: #d0ad6b; margin: 0 auto 14px; }
.m-flow .m-ring svg { stroke: #b5832f; }
.m-flow strong {
  display: block; font-size: 14px; font-weight: 600;
  letter-spacing: .05em; color: #0c2340;
}
/* Ne viser que le sous-titre. `.m-flow span` attrapait aussi la pastille,
   qui passait alors de `grid` a `block` : le SVG, redevenu en ligne, se
   posait sur la ligne de base et remontait de 17 px dans son cercle. */
.m-flow li > span:not(.m-ring) { display: block; font-size: 13px; color: #5b7691; margin-top: 3px; }

/* ---- Boite a outils ---------------------------------------------------- */
.m-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.m-tools article { border: 1px solid #dde5ec; background: #fcfdfe; padding: 16px 18px; }
.m-tools h3 { font-size: 14px; color: #0c2340; margin: 0 0 11px; }

/* ---- Tableau des enjeux ------------------------------------------------ */
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.m-table th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: #5b7691; padding: 11px 14px;
  background: #f4f7fa; border-bottom: 1px solid #dde4eb;
}
.m-table td { padding: 11px 14px; border-bottom: 1px solid #e9eef3; vertical-align: middle; }
.m-table tbody tr:last-child td { border-bottom: 0; }
.m-table th:first-child, .m-table td:first-child { width: 46px; padding-right: 0; }
.m-ico-sm { display: grid; place-items: center; width: 24px; height: 24px; }
.m-ico-sm svg {
  width: 18px; height: 18px; fill: none; stroke: #b98a36;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.m-enjeu { font-weight: 600; color: #0c2340; }
.m-rec { color: #3a5a86; }

/* ---- Adaptations ------------------------------------------------------- */
@media (max-width: 1180px) {
  .m-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-cards--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .m-flow li:not(:last-child)::after { left: calc(100% + 7px); font-size: 18px; }
}
@media (max-width: 900px) {
  .m-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .m-pillars article:nth-child(odd) { border-left: 0; padding-left: 0; }
  .m-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; text-align: left; }
  .m-flow li::after { display: none !important; }
  .m-flow .m-ring { margin: 0 0 12px; }
}
@media (max-width: 700px) {
  .m-cards, .m-cards--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-badges { gap: 14px 26px; }
}
@media (max-width: 520px) {
  .m-cards, .m-cards--six, .m-tools { grid-template-columns: minmax(0, 1fr); }
  .m-pillars { grid-template-columns: minmax(0, 1fr); }
  .m-pillars article + article { border-left: 0; padding-left: 0; }
  .m-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .m-badges > span { width: 100%; }
}


/* ---- Coordonnees ------------------------------------------------------
   L'adresse electronique au pied de page reprend la couleur or des liens
   d'action : c'est le seul moyen direct de joindre le cabinet, il ne doit
   pas se confondre avec le texte courant. */
.footer-mail{margin:9px 0 0!important;font-size:.82rem!important}
.footer-mail a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s}
.footer-mail a:hover,.footer-mail a:focus-visible{border-bottom-color:var(--gold)}

/* Bloc d'appel de la page Contact : le formulaire n'envoie rien, cette voie
   fonctionne vraiment, elle est donc mise en avant juste au-dessus. */
.contact-direct{margin-top:28px;padding:20px 22px;border:1px solid #ffffff2e;border-left:3px solid var(--gold);border-radius:4px;background:#ffffff0d}
.contact-direct-label{font-size:.7rem!important;letter-spacing:.16em;text-transform:uppercase;color:#aebbca!important;margin:0 0 8px!important}
.contact-direct-mail{margin:0!important;font-size:1.12rem!important;font-weight:700}
.contact-direct-mail a{color:var(--gold);text-decoration:none;border-bottom:1px solid #edba5455;transition:border-color .18s}
.contact-direct-mail a:hover,.contact-direct-mail a:focus-visible{border-bottom-color:var(--gold)}
.contact-direct-note{margin:9px 0 0!important;font-size:.78rem!important;color:#aebbca!important}
.form-notice a{color:var(--gold)}

@media (max-width:640px){
  .contact-direct{padding:17px 18px}
  .contact-direct-mail{font-size:1rem!important;word-break:break-all}
}