.multipage-header nav{gap:25px}.multipage-header nav .button{margin-left:20px}.multipage-header nav a[aria-current]:not(.button){position:relative;color:var(--or-texte)}.multipage-header nav a[aria-current]: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]{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:var(--or-texte);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,.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,.inner-heading>.raison>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,.engagements-accueil .line-icon{width:39px;height:39px;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 var(--or-trait);color:var(--or-texte);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:#fff;color:var(--ink);border-top:1px solid #d7e0e9;border-bottom:1px solid #d7e0e9}.dark-section .inner-heading>p,.dark-section .inner-heading>.raison>p{color:#395271}.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 #dce5ed;padding-left:35px}.pillar-grid .line-icon{margin-bottom:15px}.pillar-grid p{font-size:14px;line-height:1.45;color:#395271;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?v=6be558158c');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?v=8438e1cc98') type('image/webp'),url('assets/industrial-night.jpg?v=6be558158c') 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]{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,.inner-heading>.raison>p{font-size:13px}.inner-page .line-icon,.engagements-accueil .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]: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,.inner-heading>.raison>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 #dce5ed;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]: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; }
.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 { --ico-1: #fff; --ico-2: #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: 23px; height: 23px; }
.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: #395271; }

.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 #dce5ed; padding-left: 34px; }
.m-pillars .m-ring { color: var(--or-trait); margin-bottom: 14px; }
.m-pillars h3 { font-size: 15px; color: var(--ink); margin: 0 0 7px; }
.m-pillars p { font-size: 13px; line-height: 1.45; color: #395271; margin: 0; }

.m-note {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 0; padding-top: 20px; border-top: 1px solid #dce5ed;
  font-size: 13px; color: #395271;
}
.m-note .m-ring { color: var(--or-trait); }

/* ---- 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: var(--or-trait); margin: 0 auto 14px; }
.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; }
.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}
}

/* Le telephone reprend le traitement de l'adresse : meme or, meme soulignement
   au survol. Les deux se lisent comme une seule voie de contact. */
.footer-tel{margin:5px 0 0!important;font-size:.82rem!important}
.footer-tel a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s}
.footer-tel a:hover,.footer-tel a:focus-visible{border-bottom-color:var(--gold)}
.contact-direct-tel{margin:6px 0 0!important;font-size:1.12rem!important;font-weight:700}
.contact-direct-tel a{color:var(--gold);text-decoration:none;border-bottom:1px solid #edba5455;transition:border-color .18s}
.contact-direct-tel a:hover,.contact-direct-tel a:focus-visible{border-bottom-color:var(--gold)}
@media (max-width:640px){.contact-direct-tel{font-size:1rem!important}}

/* Champ-piege : hors de l'ecran plutot que `display:none`, que certains
   robots reperent et evitent. Invisible et inatteignable au clavier. */
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* La ville complete les coordonnees : meme famille, ton plus discret que
   l'adresse et le telephone, qui restent les moyens d'action. */
.footer-lieu{margin:5px 0 0!important;font-size:.82rem!important;color:#aebbca!important}
.contact-direct-lieu{margin:6px 0 0!important;font-size:.88rem!important;color:#d2dce6!important}

/* ---- Retour du formulaire --------------------------------------------
   L'ancien message tenait en une ligne de .85rem sans couleur, sous le
   bouton : rien ne distinguait une confirmation d'envoi d'une mention
   legale. Un panneau, une coche, un titre — et le navigateur amene le tout
   sous les yeux. */
#form-status.form-etat{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:5px;border-left:3px solid;font-size:.86rem;line-height:1.5}
#form-status.form-etat svg{flex:0 0 21px;width:21px;height:21px;margin-top:1px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#form-status.form-etat strong{display:block;font-size:.97rem;margin-bottom:3px}
#form-status.form-etat:focus-visible{outline:2px solid currentColor;outline-offset:3px}

#form-status.reussi{background:#e9f6ef;border-color:#0f7b4f;color:#0c5638}
#form-status.reussi svg{stroke:#0f7b4f}

#form-status.echec{background:#fdeceb;border-color:#c0392b;color:#8d2a20}
#form-status.echec svg{stroke:#c0392b}

@media (max-width:640px){
  #form-status.form-etat{padding:13px 14px;gap:10px}
}

/* ---- Coordonnees sous le formulaire ----------------------------------
   Elles etaient en or sur fond blanc : environ 1,9:1, illisible et tres en
   dessous du minimum de 4,5:1. Le marine passe a 13:1. L'or reste, mais en
   soulignement : il rappelle la marque sans porter la lisibilite. */
.form-notice{font-size:.84rem!important;line-height:1.6!important}
.form-notice a{color:#0c2340!important;font-weight:700;font-size:1.02em;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;white-space:nowrap;transition:background-color .18s}
.form-notice a:hover,.form-notice a:focus-visible{background:#fdf3dd}

/* ---- Accueil : un hero degage -----------------------------------------
   Les deux panneaux chiffres occupaient la moitie droite et masquaient la
   photo. Retires a la demande du client, ils laissent une grille a une seule
   colonne : le texte garde une largeur de lecture au lieu de s'etaler devant
   l'image sur toute la page. */
.hero-grid--simple{grid-template-columns:minmax(0,1fr)}
.hero-grid--simple .hero-copy{max-width:640px}
@media (max-width:1100px){.hero-grid--simple .hero-copy{max-width:560px}}
@media (max-width:640px){.hero-grid--simple .hero-copy{max-width:none}}


/* ---- Raison d'etre : deux paragraphes cote titre ----------------------
   .inner-heading est une grille a deux colonnes ; un second paragraphe y
   retomberait sous le titre. L'enveloppe les garde ensemble a droite. */
.inner-heading>.raison{display:grid;gap:13px;min-width:0}



/* ---- Accueil : une seule echelle pour les trois blocs -----------------
   Raison d'etre, engagements et valeurs viennent de trois endroits
   differents ; chacun arrivait avec ses reglages — 70 puis 64 px de
   respiration, des titres de cartes a 16 puis 21,6 px, du texte a 13 puis
   14 px dans deux gris voisins. Assemble sur une meme page, cela se voyait.
   Une classe commune porte l'echelle ; les fonds alternent franchement
   (blanc, pale, blanc, photo) plutot que de se distinguer par un filet. */
.bloc-presentation .inner-heading{margin-bottom:36px}
.bloc-presentation .inner-heading:last-child{margin-bottom:0}
.bloc-presentation .inner-heading h2{margin-bottom:0}
.bloc-presentation h3{font-size:1.12rem;line-height:1.3;margin:0 0 9px;color:var(--ink)}
.bloc-presentation p,
.bloc-presentation .inner-heading>p,
.bloc-presentation .inner-heading>.raison>p,
.bloc-presentation .pillar-grid p,
.bloc-presentation .value-cards p{font-size:.94rem;line-height:1.6;color:#41597a;margin:0}
.bloc-presentation .inner-heading>.raison{gap:15px}


/* Les cartes des valeurs passent du fond pale au fond blanc : elles
   reprennent l'habillage des cartes d'expertise, pour que les deux pages
   se ressemblent. */
.valeurs-accueil .value-cards article{background:#fff;border:1px solid #e4ebf2;
  box-shadow:0 6px 20px #153c6008;border-radius:7px;padding:22px 21px}

@media (max-width:900px){
  .bloc-presentation .inner-heading{margin-bottom:28px}
  .bloc-presentation p,
  .bloc-presentation .inner-heading>p,
  .bloc-presentation .inner-heading>.raison>p,
  .bloc-presentation .pillar-grid p,
  .bloc-presentation .value-cards p{font-size:1rem}
  .bloc-presentation h3{font-size:1.18rem}
}
@media (max-width:760px){
  .bloc-presentation .pillar-grid article+article,
  .bloc-presentation .pillar-grid.four article:nth-child(3){border-top-color:#d3dce6}
}

/* ---- Engagements, sur l'accueil ---------------------------------------
   Le bloc a longtemps porte un fond marine, herite de la page À propos ;
   il fallait alors retourner les couleurs posees par `.bloc-presentation`,
   sinon marine sur marine. Le client a demande un fond blanc, comme les
   blocs voisins : ces retournements ont ete retires et le bloc suit de
   nouveau les regles communes.
   Le fond et les filets sont poses une seule fois, par `.dark-section`.
   Cette classe garde son nom d'origine sur les trois blocs concernes :
   revenir au marine ne demande que de lui rendre son
   `background:#001f36;color:#fff`. */

/* ---- Questions fréquentes, sur l'accueil -------------------------------
   Le bloc vient de la page Ressources, qui reste sa page de référence : le
   balisage FAQPage n'est pas dupliqué ici, deux pages ne peuvent pas
   déclarer la même FAQ. Sur l'accueil il ferme la page, juste avant le
   formulaire, et son lien mène à ce formulaire plutôt qu'à /contact.
   Le filet haut le détache des valeurs : quatre sections blanches se
   suivent désormais. */
.faq-accueil{border-top:1px solid #d7e0e9}
.faq-accueil .faq-grid{align-items:start}

/* ---- Consentement ------------------------------------------------------
   Derniere chose lue avant d'envoyer, donc placee juste au-dessus du
   bouton. La case est agrandie : une cible de 18 px se rate au doigt, et
   c'est la case qui conditionne tout l'envoi. */
.consentement{margin:16px 0 6px}
.consentement label{display:flex;gap:12px;align-items:flex-start;font-size:.76rem;line-height:1.6;color:#41597a;cursor:pointer}
.consentement input{flex:0 0 19px;width:19px;height:19px;margin:1px 0 0;accent-color:#0c2340;cursor:pointer}
.consentement label:hover span{color:#1d3357}
.consentement input:focus-visible{outline:3px solid #b67c16;outline-offset:3px}
.consentement+.field-error{margin:0 0 10px}

/* ==========================================================================
   ACTUALITES : liste des publications
   La page portait un simple message d'attente ; elle porte desormais des
   cartes qui menent chacune a un article. Prefixe `actu-`.
   ========================================================================== */
.actu-list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.actu-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:18px 36px;
  border:1px solid #e4ebf2;border-radius:8px;background:#fff;padding:24px 28px;
  box-shadow:0 6px 20px #153c6008;
  transition:transform 300ms var(--kz-sortie),box-shadow 300ms var(--kz-sortie),border-color 200ms ease}
.actu-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #153c6014;border-color:#d8e3ee}
.actu-card .actu-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--or-texte);margin:0}
.actu-card .actu-meta .actu-sep{opacity:.55}
.inner-page .actu-card h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;margin:11px 0 9px}
/* Le titre porte le lien, mais toute la carte doit etre cliquable : le lien
   s'etale en surimpression. Il reste un seul lien, donc un seul arret au
   clavier et un intitule complet pour les lecteurs d'ecran. */
.actu-card h3 a:after{content:"";position:absolute;inset:0;border-radius:8px}
.actu-card h3 a:hover{color:var(--or-texte)}
.actu-card p{font-size:14px;line-height:1.55;color:#395271;margin:0}
.actu-card .actu-fleche{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--or-trait);border-radius:50%;color:var(--or-texte);font-size:19px;
  transition:transform 300ms var(--kz-sortie),background-color 200ms ease}
.actu-card:hover .actu-fleche{transform:translateX(3px);background:#fdf3dd}
@media (max-width:640px){
  .actu-card{grid-template-columns:minmax(0,1fr);padding:22px}
  .actu-card .actu-fleche{display:none}
  .inner-page .actu-card h3{font-size:19px}
  .actu-card p{font-size:15px}
}

/* ==========================================================================
   ARTICLE
   Gabarit d'une publication. Le texte tient dans une colonne de lecture
   etroite ; l'exemple chiffre, le fil en cinq etapes et les cartes
   « A retenir » reprennent toute la largeur et les composants deja poses
   plus haut (`.m-table`, `.m-flow`, `.value-cards`, `.number-circle`).
   Prefixe `article-`.
   ========================================================================== */
.article-hero .inner-hero-copy{max-width:730px}
.article-hero h1{font-size:clamp(28px,3vw,42px)}
.article-hero .inner-hero-copy>p:not(.eyebrow):not(.article-meta){max-width:600px;margin-bottom:0}
.article-hero .inner-hero-copy>p.article-meta{display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 14px;font-size:13px;color:#cdd9e5;margin:20px 0 0}
.article-meta .article-sep{opacity:.5}

.article-body{padding:42px 0 52px}
.article-back{margin:0 0 30px;font-size:13px;font-weight:600}
.article-back a{display:inline-flex;align-items:center;gap:9px;color:#395271}
.article-back a:hover{color:var(--or-texte)}
.article-back--bas{margin:36px 0 0}

/* ---- Sommaire ----------------------------------------------------------
   Sur deux colonnes : il occupe la largeur du bandeau, la ou la colonne de
   lecture qui suit laisse la moitie droite vide. */
.article-sommaire{margin:0 0 42px;padding:22px 26px 15px;
  border:1px solid #e4ebf2;border-radius:8px;background:#fbfdfe}
.article-sommaire-titre{font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--or-texte);margin:0 0 15px}
.article-sommaire ol{list-style:none;margin:0;padding:0;columns:2;column-gap:60px}
/* Pas de numerotation ici : l'article en a deja une, de 1 a 7, et elle ne
   couvre pas les memes entrees. Deux series concurrentes se contredisent. */
.article-sommaire li{position:relative;break-inside:avoid;
  padding-left:24px;margin:0 0 9px}
.article-sommaire li:before{content:"";position:absolute;left:0;top:11px;
  width:10px;height:1px;background:#b98a36}
.article-sommaire a{font-size:14px;line-height:1.5;color:#2f4664;
  border-bottom:1px solid transparent}
.article-sommaire a:hover{color:var(--or-texte);border-bottom-color:var(--or-trait)}
/* L'en-tete se fige au defilement : une ancre doit s'arreter en dessous. */
.article-prose h2,.article-case h2{scroll-margin-top:104px}

/* ---- Colonne de lecture ------------------------------------------------ */
.article-prose{max-width:74ch}
.article-prose>p{font-size:15.5px;line-height:1.72;color:#2f4664;margin:0 0 18px}
.article-prose>p:last-child{margin-bottom:0}
.article-prose>p.article-chapo{font-size:17px;line-height:1.6;color:#132f52;font-weight:500}
.inner-page .article-prose h2{display:flex;align-items:center;gap:16px;
  font-size:clamp(21px,2.1vw,27px);line-height:1.2;letter-spacing:-.02em;
  margin:42px 0 16px;color:var(--ink)}
.inner-page .article-prose h2:first-child{margin-top:0}
.article-prose h2 .number-circle{font-weight:700}
/* Un titre sans pastille n'a rien a aligner : il redevient un bloc, et le
   retour a la ligne des titres longs suit le flux normal. */
.inner-page .article-prose h2.article-h2-plain{display:block}

/* ---- Listes ------------------------------------------------------------
   Le point de liste par defaut tombait dans la marge de la colonne ; un
   filet or de 10 px le remplace, aligne sur le texte. */
.article-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.article-list li{position:relative;padding-left:26px;
  font-size:15px;line-height:1.6;color:#2f4664}
.article-list li:before{content:"";position:absolute;left:2px;top:12px;
  width:10px;height:1px;background:#b98a36}
.article-list strong{color:#0c2340;font-weight:600}

/* ---- Formule TRS ------------------------------------------------------- */
.article-formula{margin:26px 0 24px;padding:17px 22px;
  border-left:3px solid var(--or-trait);background:#f6f9fb;
  font-size:17px;font-weight:600;letter-spacing:.01em;color:#0c2340}
.article-formula .article-sigle{color:var(--or-texte)}

/* ---- Exemple chiffre ---------------------------------------------------
   Encadre plutot qu'une bande de couleur : le client a demande des fonds
   blancs, l'exemple se detache donc par son filet et son ombre. */
.article-case{margin:46px 0;padding:32px 34px;
  border:1px solid #e1e8ee;border-radius:9px;background:#fbfdfe;
  box-shadow:0 10px 30px #153c600a}
.inner-page .article-case h2{font-size:clamp(21px,2.2vw,28px);line-height:1.2;
  letter-spacing:-.02em;margin:0 0 14px}
.inner-page .article-case h3{font-size:15px;margin:30px 0 11px;color:var(--ink)}
.article-case-intro{font-size:15px;line-height:1.65;color:#2f4664;max-width:74ch;margin:0 0 22px}
.article-case p:not(.m-note){font-size:15px;line-height:1.65;color:#2f4664}
.article-case .table-wrap{border:1px solid #e4ebf2;border-radius:7px;overflow:auto;background:#fff}
/* `.m-table` reserve sa premiere colonne a un pictogramme de 46 px. Ici
   elle porte du texte : la contrainte de largeur doit sauter. */
.article-case .m-table th:first-child,
.article-case .m-table td:first-child{width:auto;padding-right:14px}
.article-case .m-table th,.article-case .m-table td{border-left:0;border-right:0;border-top:0}
.article-resultats tbody th{text-transform:none;letter-spacing:0;font-size:14px;
  font-weight:500;color:#0c2340;background:transparent;width:auto}
.article-gain{font-weight:700;color:var(--or-texte);white-space:nowrap}
.article-case .m-note{align-items:flex-start;margin-top:26px}
.article-case .m-note strong{color:#0c2340}

/* ---- Fil en cinq etapes ------------------------------------------------ */
.article-etapes{margin:44px 0 46px;padding-top:30px;border-top:1px solid #e4ebf2}
.article-etapes h3,.article-retenir h3{font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--or-texte);margin:0 0 26px}

/* ---- A retenir --------------------------------------------------------- */
.article-retenir{margin:44px 0 0;padding-top:30px;border-top:1px solid #e4ebf2}
.article-retenir .value-cards article{background:#fff;border:1px solid #e4ebf2;
  border-radius:7px;box-shadow:0 6px 20px #153c6008;padding:22px 21px}
.article-retenir .value-cards p{font-size:14px;line-height:1.55}

/* ---- Citation de cloture ----------------------------------------------- */
.article-quote{position:relative;margin:46px 0 0;padding-left:52px;
  font-size:clamp(20px,2.1vw,26px);line-height:1.3;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.article-quote:before{content:"\201C";position:absolute;left:0;top:-15px;
  color:#b98a36;font:75px Georgia,serif}
.article-quote p{margin:0}

@media (max-width:850px){
  .article-body{padding:34px 0 42px}
  .article-sommaire ol{columns:1}
  .article-case{padding:26px 22px;margin:38px 0}
  .inner-page .article-prose h2{margin-top:36px;gap:13px}
}
@media (max-width:580px){
  .article-hero h1 br{display:none}
  .article-hero .inner-hero-copy>p.article-meta{font-size:12px}
  .article-prose>p{font-size:16px}
  .article-prose>p.article-chapo{font-size:17px}
  .article-list li{font-size:16px}
  .article-prose h2 .number-circle{width:31px;height:31px;font-size:14px}
  .inner-page .article-prose h2{gap:11px}
  .article-case{padding:22px 18px;border-radius:7px}
  .article-formula{font-size:16px;padding:15px 17px}
  .article-quote{padding-left:38px}
  .article-quote br{display:none}
}

/* Let the reference pictograms supply their own circular backgrounds. */
.m-ring,.m-ico{background:transparent;border:0;border-radius:0}
.m-ring svg,.m-ico svg,.m-ico-sm svg{width:100%;height:100%}
.m-badges .m-ring,.m-note .m-ring{background:#f7f2e7;border-radius:50%;padding:3px}

/* Method hero: clear white/gold artwork and evenly aligned labels. */
.m-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.m-badges>span{width:auto;gap:10px;font-size:12px;line-height:1.4}
.m-badges .m-ring{width:40px;height:40px;background:transparent;border:0;border-radius:0;padding:0}
@media(max-width:580px){
  .m-badges{grid-template-columns:1fr;gap:14px}
  .m-badges>span{width:auto;font-size:13px;gap:12px}
  .m-badges .m-ring{width:36px;height:36px}
}