/* =====================================================================
   Pages d'expertise (Quality, Studio, Network) — même style que l'accueil
   ===================================================================== */

/* Héros de page */
.heros.page { min-height: 0; padding: 150px 0 80px; }
.heros.page h1 { font-size: clamp(40px, 5vw, 76px); }
.heros.page .marque-exp { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgb(255 255 255 / .85); }
.heros.page .marque-exp b { font-weight: 500; color: #fff; }
.fil { font-size: 14px; color: rgb(255 255 255 / .6); margin-bottom: 18px; }
.fil a:hover { color: #fff; }

/* Sections */
.sec { padding: 140px 0; }
.sec.gris { background: var(--bg); }
.sec .etiquette { font-size: 14px; color: var(--marque-bleu); margin-bottom: 18px; }
.sec h2 { font-size: clamp(34px, 4vw, 58px); color: var(--marque-bleu-nuit); max-width: 860px; }
.sec .intro { color: var(--muted); font-size: 19px; max-width: 680px; margin-top: 22px; }

/* Bloc texte + visuel */
.bloc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.bloc + .bloc { margin-top: 140px; }
.bloc.inverse > .texte { order: 2; }
.bloc h3 { font-size: clamp(28px, 2.8vw, 42px); color: var(--marque-bleu-nuit); margin-bottom: 18px; }
.bloc p { color: var(--muted); font-size: 18px; }
.coches { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.coches li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); display: flex; gap: 14px; }
.coches li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--or-metal); }

/* Trois modes (lignes, sans cadres) */
.modes { margin-top: 70px; border-top: 1px solid var(--line); }
.mode { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.mode .lettre { font-size: 15px; color: var(--marque-bleu); }
.mode h3 { font-size: clamp(24px, 2.4vw, 34px); color: var(--marque-bleu-nuit); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mode:hover h3 { transform: translateX(12px); }
.mode p { color: var(--muted); }

/* Écran de la plateforme */
.fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgb(4 24 58 / .16); }
.fenetre .barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.fenetre .barre i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.fenetre .barre span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.fenetre .corps { display: grid; grid-template-columns: 170px 1fr; }
.fenetre aside { background: var(--marque-bleu-nuit); color: rgb(255 255 255 / .75); padding: 18px 10px; display: grid; align-content: start; gap: 2px; font-size: 13.5px; }
.fenetre aside strong { color: #fff; font-weight: 500; padding: 0 10px 14px; }
.fenetre aside > span { padding: 8px 10px; border-radius: 8px; }
.fenetre aside > span.actif { background: rgb(255 255 255 / .1); color: #fff; }
.fenetre main { padding: 20px 22px; }
.fenetre .tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.fenetre h4 { font-size: 16px; font-weight: 500; color: var(--marque-bleu-nuit); }
.fenetre .meta { font-size: 12px; color: var(--muted); }
.jauge { display: flex; align-items: center; gap: 10px; }
.jauge svg { width: 54px; height: 54px; }
.jauge circle { fill: none; stroke-width: 7; }
.jauge .rail { stroke: var(--line); }
.jauge .val { stroke: #D9A441; stroke-linecap: round; stroke-dasharray: 163; stroke-dashoffset: 163; transform: rotate(-90deg); transform-origin: 50% 50%; }
.jauge b { font-size: 19px; font-weight: 500; color: var(--marque-bleu-nuit); display: block; }
.jauge small { font-size: 11.5px; color: var(--muted); }
.agent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; background: var(--accent-soft); font-size: 13px; color: var(--ink); min-height: 40px; }
.agent i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--marque-bleu); }
.curseur { display: inline-block; width: 6px; height: 14px; background: var(--marque-bleu); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; margin-top: 8px; }
.ligne small { display: block; color: var(--muted); font-size: 11.5px; }
.statut { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.statut.ok { background: var(--ok-soft); color: var(--ok); }
.statut.cours { background: var(--accent-soft); color: var(--accent); }
.statut.ano { background: var(--wait-soft); color: var(--wait); }

/* Externalisation : votre équipe / nos experts */
.equipe { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 40px 90px rgb(4 24 58 / .1); }
.bascule { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 18px; }
.bascule > span { padding: 8px 18px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background-color .5s, color .5s; }
.bascule > span.on { background: var(--marque-bleu-nuit); color: #fff; }
.membre { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.membre i { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 500; }
.membre .v { background: var(--accent-soft); color: var(--accent); } .membre .a { background: var(--or-metal); color: var(--gold-ink); } .membre .ia { background: var(--marque-bleu); color: #fff; }
.membre > span { flex: 1; } .membre small { display: block; color: var(--muted); font-size: 13px; }
.membre em { font-style: normal; font-size: 13px; color: var(--accent); }

/* Étapes (ligne de temps horizontale) */
.etapes { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 0; margin-top: 70px; counter-reset: e; }
.etapes div { position: relative; padding: 30px 26px 0 0; border-top: 1px solid var(--line); }
.etapes div::before { counter-increment: e; content: counter(e, decimal-leading-zero); display: block; font-size: 14px; color: var(--marque-bleu); margin-bottom: 14px; }
.etapes div::after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--or-metal); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.etapes.vu div::after { width: 100%; }
.etapes div:nth-child(2)::after { transition-delay: .15s; } .etapes div:nth-child(3)::after { transition-delay: .3s; }
.etapes div:nth-child(4)::after { transition-delay: .45s; } .etapes div:nth-child(5)::after { transition-delay: .6s; }
.etapes h4 { font-size: 21px; font-weight: 500; color: var(--marque-bleu-nuit); margin-bottom: 8px; }
.etapes p { color: var(--muted); font-size: 15px; }

/* Offres (lignes) */
.offres { margin-top: 60px; border-top: 1px solid var(--line); }
.offre { display: grid; grid-template-columns: 1.1fr 1.4fr .8fr auto; gap: 30px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.offre .stade { font-size: 13px; color: var(--marque-bleu); display: block; margin-bottom: 4px; }
.offre h3 { font-size: 24px; color: var(--marque-bleu-nuit); }
.offre p { color: var(--muted); font-size: 15px; }
.offre .chiffre { font-size: 15px; color: var(--ink); }
.offre .chiffre b { display: block; font-size: 30px; font-weight: 500; color: var(--marque-bleu-nuit); letter-spacing: -.02em; }
.btn.discret { background: transparent; color: var(--marque-bleu-nuit); border: 1px solid var(--line); padding: 12px 20px; font-size: 14px; }
.btn.discret:hover { border-color: #D9A441; box-shadow: none; }

/* Studio : 4 offres en grille aérée */
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 70px; }
.grille-4 > div { border-top: 2px solid #D9A441; padding-top: 26px; }
.grille-4 h3 { font-size: 24px; color: var(--marque-bleu-nuit); margin-bottom: 12px; }
.grille-4 p { color: var(--muted); font-size: 16px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.etiquettes > span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink); }

/* Network : profils */
.profils { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; }
.profils > span { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line); font-size: 18px; color: var(--marque-bleu-nuit);
                transition: background-color .3s, color .3s, border-color .3s; }
.profils > span:hover { background: var(--marque-bleu-nuit); color: #fff; border-color: var(--marque-bleu-nuit); }

/* Questions fréquentes */
.faq { margin-top: 50px; border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: 21px; font-weight: 500; color: var(--marque-bleu-nuit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #A8742A; font-size: 26px; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 26px; max-width: 760px; }

@media (max-width: 960px) {
  .bloc, .bloc.inverse { grid-template-columns: 1fr; gap: 40px; } .bloc.inverse > .texte { order: 0; }
  .mode { grid-template-columns: 1fr; gap: 8px; }
  .etapes { grid-template-columns: 1fr; } .etapes div { padding-bottom: 26px; }
  .offre { grid-template-columns: 1fr; gap: 12px; }
  .grille-4 { grid-template-columns: 1fr 1fr; }
  .fenetre .corps { grid-template-columns: 1fr; } .fenetre aside { display: none; }
  .sec { padding: 90px 0; }
}
@media (max-width: 600px) { .grille-4 { grid-template-columns: 1fr; } }
.groupe-profils { margin-top: 46px; font-size: 14px; color: var(--marque-bleu); } .groupe-profils + .profils { margin-top: 16px; }


/* =====================================================================
   Page Quality : boussole, frise, méthode, quatre formules, « bientôt »
   ===================================================================== */

/* Héros + boussole */
.q-heros { padding-bottom: 110px; }
.q-grille { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; }
.q-heros h1 { font-size: clamp(42px, 5.2vw, 80px); }
.q-heros .sous { max-width: 600px; }
.q-heros .devise { font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .14em; text-transform: uppercase; margin: -6px 0 18px; opacity: 0; transition: opacity 1s .55s; }
.q-heros.pret .devise { opacity: 1; }
.q-heros .devise > span { color: rgb(255 255 255 / .45); animation: devise 8s infinite; }
.q-heros .devise > span:nth-child(2) { animation-delay: 2s; } .q-heros .devise > span:nth-child(3) { animation-delay: 4s; } .q-heros .devise > span:nth-child(4) { animation-delay: 6s; }
@keyframes devise { 0%, 22% { color: #F3D99A; text-shadow: 0 0 18px rgb(243 217 154 / .55); } 30%, 100% { color: rgb(255 255 255 / .45); text-shadow: none; } }

.boussole { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; opacity: 0; transform: scale(.9) rotate(-8deg); transition: opacity 1.4s .4s, transform 1.6s .4s cubic-bezier(.2,.8,.2,1); }
.q-heros.pret .boussole { opacity: 1; transform: none; }
.boussole > * { position: absolute; }
.b-halo { inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgb(47 111 224 / .45), rgb(47 111 224 / .08) 55%, transparent 70%); filter: blur(8px); animation: respire 5s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.08); opacity: .75; } }
.b-graduation { inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -.3deg, rgb(243 217 154 / .75) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 64.5%, #000 69%, transparent 69.5%);
          mask: radial-gradient(circle, transparent 64%, #000 64.5%, #000 69%, transparent 69.5%);
  animation: tourne 90s linear infinite; }
.b-cercle { inset: 3%; border-radius: 50%; border: 1px solid rgb(243 217 154 / .45); box-shadow: 0 0 40px rgb(217 164 65 / .18), inset 0 0 50px rgb(47 111 224 / .18); }
.b-cercle::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgb(255 255 255 / .18); animation: tourne 40s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
.b-cap { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .4); animation: cap 12s infinite; white-space: nowrap; }
.b-cap.c1 { top: 24%; right: 19%; } .b-cap.c2 { bottom: 24%; right: 19%; animation-delay: -9s; }
.b-cap.c3 { bottom: 24%; left: 19%; animation-delay: -6s; } .b-cap.c4 { top: 24%; left: 19%; animation-delay: -3s; }
@keyframes cap { 0%, 20% { color: #F3D99A; text-shadow: 0 0 16px rgb(243 217 154 / .7); } 25%, 100% { color: rgb(255 255 255 / .4); text-shadow: none; } }
.b-aiguille { left: 50%; top: 50%; width: 9%; height: 58%; margin: -29% 0 0 -4.5%; filter: drop-shadow(0 0 12px rgb(243 217 154 / .5)); animation: aiguille 12s infinite; }
@keyframes aiguille {
  0% { transform: rotate(30deg); } 4% { transform: rotate(50deg); } 7%, 22% { transform: rotate(45deg); }
  25% { transform: rotate(120deg); } 29% { transform: rotate(140deg); } 32%, 47% { transform: rotate(135deg); }
  50% { transform: rotate(210deg); } 54% { transform: rotate(230deg); } 57%, 72% { transform: rotate(225deg); }
  75% { transform: rotate(300deg); } 79% { transform: rotate(320deg); } 82%, 97% { transform: rotate(315deg); }
  100% { transform: rotate(390deg); } }
.b-centre { left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--or-metal); box-shadow: 0 0 0 5px rgb(4 24 58 / .9), 0 0 24px rgb(243 217 154 / .8); }

/* Intro, phrase clé + frise animée */
.sec .intro.large { max-width: 860px; }
.phrase-cle { margin-top: 44px; padding-left: 22px; border-left: 3px solid #D9A441; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.3; color: var(--marque-bleu-nuit); max-width: 820px; }
.frise { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; position: relative; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.frise::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--or-metal); transition: width 1.8s cubic-bezier(.2,.8,.2,1); }
.frise.vu::after { width: 100%; }
.frise .voyage { position: absolute; top: -5px; left: 0; width: 70px; height: 12px; border-radius: 50%; z-index: 1; opacity: 0;
  background: radial-gradient(closest-side, #FFF7E0, #F3D99A 40%, transparent); filter: blur(1px); }
.frise.vu .voyage { animation: voyage 5s 1.8s ease-in-out infinite; }
@keyframes voyage { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 70px); opacity: 0; } }
.frise > a { position: relative; padding: 36px 24px 0 0; display: block; }
.frise > a::before { content: ""; position: absolute; top: -7px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid #D9A441; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1), background-color .3s, box-shadow .3s; z-index: 2; }
.frise.vu > a::before { transform: scale(1); }
.frise.vu > a:nth-of-type(2)::before { transition-delay: .35s; } .frise.vu > a:nth-of-type(3)::before { transition-delay: .7s; } .frise.vu > a:nth-of-type(4)::before { transition-delay: 1.05s; }
.frise > a:hover::before { background: #D9A441; box-shadow: 0 0 0 6px rgb(217 164 65 / .18); }
.frise > a > span { display: block; font-size: 14px; color: var(--marque-bleu); margin-bottom: 8px; }
.frise > a > b { font-size: 22px; font-weight: 500; color: var(--marque-bleu-nuit); transition: transform .4s; display: inline-block; }
.frise > a:hover > b { transform: translateX(8px); }

/* Méthode : bleu nuit, numéros qui s'allument */
.sec.nuit { color: #fff; position: relative; overflow: hidden; background: var(--marque-bleu-nuit) url("img/fond.jpg") center / cover no-repeat; background-blend-mode: screen; }
.sec.nuit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 24 58 / .85), rgb(4 24 58 / .62)); }
.sec.nuit .cadre { position: relative; }
.sec.nuit .etiquette { color: #F3D99A; }
.sec.nuit h2 { color: #fff; }
.sec.nuit .intro { color: rgb(255 255 255 / .75); }
.filigrane { position: absolute; width: 760px; aspect-ratio: 1; right: -260px; top: 80px; border-radius: 50%; opacity: .16; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #F3D99A 0 .5deg, transparent .5deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 60.5%, #000 66%, transparent 66.5%, transparent 80%, #000 80.5%, #000 81%, transparent 81.5%);
          mask: radial-gradient(circle, transparent 60%, #000 60.5%, #000 66%, transparent 66.5%, transparent 80%, #000 80.5%, #000 81%, transparent 81.5%);
  animation: tourne 120s linear infinite; }
.methode { list-style: none; margin: 60px 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .16); }
.methode > li { display: grid; grid-template-columns: 110px 1fr 1.5fr; gap: 30px; padding: 38px 20px; margin: 0 -20px; border-bottom: 1px solid rgb(255 255 255 / .16); align-items: baseline; position: relative; border-radius: 14px; transition: background-color .4s; }
.methode > li:hover { background: rgb(255 255 255 / .04); }
.methode > li::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: var(--or-metal); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.2,.8,.2,1) .2s; }
.methode > li.vu::after { transform: none; }
.methode .num { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgb(243 217 154 / .5);
  background: var(--or-metal); background-size: 100% 0%; background-repeat: no-repeat; background-position: bottom; -webkit-background-clip: text; background-clip: text;
  transition: background-size 1.1s cubic-bezier(.2,.8,.2,1) .25s; }
.methode > li.vu .num, .methode > li:hover .num { background-size: 100% 100%; }
.methode h3 { font-size: clamp(24px, 2.4vw, 32px); color: #fff; }
.methode em { display: block; margin-top: 6px; font-style: italic; color: #F3D99A; font-size: 17px; }
.methode .desc p { color: rgb(255 255 255 / .78); font-size: 17px; }
.methode .desc .recu { margin-top: 14px; color: #fff; padding-left: 16px; border-left: 2px solid #D9A441; }
.methode .desc .recu b { color: #F3D99A; font-weight: 500; }

/* Quatre formules : cartes à contour doré tournant */
.formules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; }
.formule { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 40px; border-radius: 22px;
  background: linear-gradient(180deg, #D9A441 0 3px, var(--line) 3px); scroll-margin-top: 110px; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.formule::before { content: ""; position: absolute; inset: -60%; z-index: -2; opacity: 0; transition: opacity .5s;
  background: conic-gradient(from 0deg, transparent 0 62%, #A8742A 72%, #F3D99A 82%, #D9A441 90%, transparent 100%); animation: tourne 3.5s linear infinite; }
.formule::after { content: ""; position: absolute; inset: 3px 1px 1px; border-radius: 0 0 21px 21px; background: var(--surface); z-index: -1; }
.formule:hover { transform: translateY(-6px); box-shadow: 0 40px 80px rgb(4 24 58 / .14); }
.formule:hover::before { opacity: 1; }
.formule:hover::after { inset: 2px; border-radius: 20px; }
.formules .formule:nth-child(2) { animation-delay: .12s; } .formules .formule:nth-child(3) { animation-delay: .24s; } .formules .formule:nth-child(4) { animation-delay: .36s; }
.formule .index { position: absolute; top: 18px; right: 28px; font-size: 92px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgb(217 164 65 / .35); transition: transform .6s cubic-bezier(.2,.8,.2,1), -webkit-text-stroke-color .4s; }
.formule:hover .index { transform: translateY(-6px) scale(1.05); -webkit-text-stroke-color: #D9A441; }
.formule .stade { font-size: 14px; color: var(--marque-bleu); }
.formule h3 { font-size: 30px; color: var(--marque-bleu-nuit); margin: 6px 0 10px; padding-right: 90px; }
.formule .accroche { color: var(--ink); font-size: 17px; }
.formule dl { margin: 22px 0; border-top: 1px solid var(--line); }
.formule dt { font-size: 13px; color: var(--marque-bleu); margin-top: 14px; }
.formule dd { margin: 4px 0 0; color: var(--muted); font-size: 15.5px; }
.formule .benefice { margin-top: auto; padding: 16px 18px 16px 42px; border-radius: 12px; background: var(--bg); color: var(--marque-bleu-nuit); font-weight: 500; position: relative; }
.formule .benefice::before { content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--or-metal); box-shadow: 0 0 12px rgb(217 164 65 / .7); }
.formule .btn { align-self: flex-start; margin-top: 20px; }

/* Bientôt : grisé, « En cours » */
.bientot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; }
.bientot > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 34px 36px; border-radius: 20px; border: 1px dashed #C4CCDA;
  background: repeating-linear-gradient(135deg, rgb(4 24 58 / .025) 0 12px, transparent 12px 24px), var(--surface); }
.bientot h3 { font-size: clamp(22px, 2vw, 28px); color: #8B95A8; font-weight: 500; }
.en-cours { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 7px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.en-cours i { width: 8px; height: 8px; border-radius: 50%; background: #D9A441; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(217 164 65 / .6); } 100% { box-shadow: 0 0 0 10px rgb(217 164 65 / 0); } }

@media (max-width: 960px) {
  .q-grille { grid-template-columns: 1fr; } .boussole { justify-self: center; width: min(80vw, 320px); }
  .frise { grid-template-columns: 1fr 1fr; row-gap: 40px; } .frise::before, .frise::after, .frise .voyage { display: none; }
  .methode > li { grid-template-columns: 1fr; gap: 10px; }
  .formules, .bientot { grid-template-columns: 1fr; } .formule { padding: 28px; }
  .bientot > div { flex-direction: column; align-items: flex-start; }
  .filigrane { display: none; }
}

/* ---------- Méthode : onglets + panneaux animés (style présentation) ---------- */
.explorateur { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; margin-top: 64px; align-items: stretch; }
.onglets { display: grid; gap: 6px; align-content: start; }
.onglet { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; padding: 22px 22px 24px; border: 0; border-radius: 16px;
  background: transparent; color: #fff; font: inherit; cursor: pointer; overflow: hidden; transition: background-color .4s; }
.onglet:hover { background: rgb(255 255 255 / .04); }
.onglet.on { background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(243 217 154 / .25); }
.onglet .num { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgb(243 217 154 / .45);
  background: var(--or-metal); background-size: 100% 0%; background-repeat: no-repeat; background-position: bottom; -webkit-background-clip: text; background-clip: text; transition: background-size .8s cubic-bezier(.2,.8,.2,1); }
.onglet.on .num { background-size: 100% 100%; }
.onglet .titres b { display: block; font-size: 20px; font-weight: 500; color: rgb(255 255 255 / .6); transition: color .3s; }
.onglet.on .titres b { color: #fff; }
.onglet .titres em { font-style: italic; font-size: 14.5px; color: rgb(243 217 154 / .55); transition: color .3s; }
.onglet.on .titres em { color: #F3D99A; }
.onglet .barre { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .1); opacity: 0; transition: opacity .3s; }
.onglet.on .barre { opacity: 1; }
.onglet .barre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--or-metal); transform: scaleX(0); transform-origin: left; }
.explorateur.joue .onglet.on .barre { animation: avancer 8s linear forwards; }
.explorateur.joue .onglet.on .barre::after { animation: avancer-trait 8s linear forwards; }
.explorateur:hover .onglet.on .barre, .explorateur:hover .onglet.on .barre::after { animation-play-state: paused; }
@keyframes avancer { to { opacity: 1; } }
@keyframes avancer-trait { to { transform: scaleX(1); } }

.panneaux { position: relative; min-height: 560px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)); box-shadow: inset 0 0 0 1px rgb(243 217 154 / .22), 0 40px 90px rgb(0 0 0 / .25); backdrop-filter: blur(6px); }
.panneaux::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -20%; top: -30%; border-radius: 50%; background: radial-gradient(circle, rgb(47 111 224 / .35), transparent 65%); }
.panneau { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 36px; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s .6s; }
.panneau.on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s .1s, transform .7s .1s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.panneau .texte { position: relative; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .12); }
.panneau .texte p { color: rgb(255 255 255 / .8); font-size: 17px; }
.panneau .texte .recu { margin-top: 12px; color: #fff; padding-left: 16px; border-left: 2px solid #D9A441; }
.panneau .texte .recu b { color: #F3D99A; font-weight: 500; }
.visuel { position: relative; display: grid; place-items: center; min-height: 300px; }

/* 01 · Plan de test */
.v-plan .doc { width: min(100%, 380px); background: #fff; border-radius: 18px; padding: 22px 24px; color: var(--ink); box-shadow: 0 30px 60px rgb(0 0 0 / .3); transform: rotate(-2deg); }
.doc-tete { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; margin-bottom: 14px; }
.doc-tete .pastille { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--marque-bleu-nuit); background: var(--or-metal); }
.doc-tete b { color: var(--marque-bleu-nuit); font-size: 17px; font-weight: 700; } .doc-tete small { color: var(--muted); font-size: 12.5px; }
.v-plan li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; opacity: 0; transform: translateX(-12px); }
.v-plan li i { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #C4CCDA; position: relative; }
.v-plan li i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v-plan li.cle { font-weight: 500; color: var(--marque-bleu-nuit); }
.panneau.on .v-plan li { animation: entrer .5s cubic-bezier(.2,.8,.2,1) forwards; }
.panneau.on .v-plan li i { animation: cocher .4s forwards; }
.v-plan li:nth-child(1), .v-plan li:nth-child(1) i { animation-delay: .3s !important; } .v-plan li:nth-child(2), .v-plan li:nth-child(2) i { animation-delay: .6s !important; }
.v-plan li:nth-child(3), .v-plan li:nth-child(3) i { animation-delay: .9s !important; } .v-plan li:nth-child(4), .v-plan li:nth-child(4) i { animation-delay: 1.2s !important; }
.v-plan li:nth-child(5), .v-plan li:nth-child(5) i { animation-delay: 1.6s !important; }
@keyframes entrer { to { opacity: 1; transform: none; } }
@keyframes cocher { to { background: #D9A441; border-color: #D9A441; } }

/* 02 · Test */
.v-test .ecran { width: min(100%, 420px); border-radius: 18px; padding: 20px; background: rgb(4 24 58 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.ecran-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: rgb(255 255 255 / .7); }
.direct { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .08); color: #fff; font-weight: 500; letter-spacing: .06em; font-size: 12px; }
.direct i { width: 8px; height: 8px; border-radius: 50%; background: #D9A441; animation: pulse 1.6s ease-out infinite; }
.testeurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; }
.testeurs i { aspect-ratio: 1; border-radius: 14px; position: relative; overflow: hidden; opacity: 0; transform: scale(.8);
  background: radial-gradient(circle at 50% 38%, rgb(243 217 154 / .9) 0 16%, transparent 17%), radial-gradient(ellipse at 50% 100%, rgb(243 217 154 / .55) 0 34%, transparent 35%), linear-gradient(160deg, #0F3374, #04183A); }
.testeurs i::after { content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #5E93F0; box-shadow: 0 0 8px #5E93F0; }
.panneau.on .testeurs i { animation: entrer-zoom .5s cubic-bezier(.3,1.4,.5,1) forwards; }
.testeurs i:nth-child(2) { animation-delay: .1s !important; } .testeurs i:nth-child(3) { animation-delay: .2s !important; } .testeurs i:nth-child(4) { animation-delay: .3s !important; }
.testeurs i:nth-child(5) { animation-delay: .4s !important; } .testeurs i:nth-child(6) { animation-delay: .5s !important; } .testeurs i:nth-child(7) { animation-delay: .6s !important; } .testeurs i:nth-child(8) { animation-delay: .7s !important; }
@keyframes entrer-zoom { to { opacity: 1; transform: none; } }
.avance { height: 6px; border-radius: 6px; background: rgb(255 255 255 / .1); overflow: hidden; }
.avance span { display: block; height: 100%; width: 0; background: var(--or-metal); border-radius: inherit; }
.panneau.on .avance span { animation: remplir 5s .8s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes remplir { to { width: 100%; } }
.retours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.retours > span { padding: 7px 14px; border-radius: 999px; font-size: 13px; color: #fff; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(243 217 154 / .4); opacity: 0; transform: translateY(8px); }
.panneau.on .retours > span { animation: entrer .5s forwards; }
.retours > span:nth-child(1) { animation-delay: 1.4s !important; } .retours > span:nth-child(2) { animation-delay: 1.7s !important; }
.retours > span:nth-child(3) { animation-delay: 2s !important; } .retours > span:nth-child(4) { animation-delay: 2.3s !important; }

/* 03 · Synthèse */
.v-synthese { grid-template-rows: auto auto auto; gap: 6px; }
.bulles { display: flex; gap: 10px; }
.bulles span { width: 54px; height: 34px; border-radius: 12px 12px 12px 3px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); opacity: 0; }
.panneau.on .bulles span { animation: tomber 1.8s ease-in infinite; }
.bulles span:nth-child(2) { animation-delay: .35s !important; } .bulles span:nth-child(3) { animation-delay: .7s !important; } .bulles span:nth-child(4) { animation-delay: 1.05s !important; } .bulles span:nth-child(5) { animation-delay: 1.4s !important; }
@keyframes tomber { 0% { opacity: 0; transform: translateY(-14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px) scale(.6); } }
.entonnoir { width: 160px; height: 46px; clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%); background: linear-gradient(180deg, rgb(243 217 154 / .5), rgb(217 164 65 / .15)); }
.barres { width: min(100%, 400px); display: grid; gap: 14px; margin-top: 12px; }
.barres div { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 14px; font-size: 14px; color: rgb(255 255 255 / .8); }
.barres i { height: 10px; border-radius: 10px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; }
.barres i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--or-metal); }
.panneau.on .barres i::after { animation: barre 1.4s .5s cubic-bezier(.2,.8,.2,1) forwards; }
.barres div:nth-child(2) i::after { animation-delay: .75s !important; } .barres div:nth-child(3) i::after { animation-delay: 1s !important; }
@keyframes barre { to { width: var(--l); } }

/* 04 · Feuille de route */
.v-route { grid-template-rows: auto; align-content: center; gap: 12px; justify-items: stretch; width: min(100%, 420px); margin: 0 auto; }
.sprint { justify-self: start; padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--marque-bleu-nuit); background: var(--or-metal); font-weight: 500; }
.carte-p { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: center; padding: 16px 18px; border-radius: 14px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); opacity: 0; transform: translateX(30px); }
.carte-p b { grid-row: span 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; color: #F3D99A; box-shadow: inset 0 0 0 1px rgb(243 217 154 / .5); }
.carte-p:first-of-type b { background: var(--or-metal); color: var(--marque-bleu-nuit); box-shadow: none; }
.carte-p i { height: 8px; border-radius: 8px; background: rgb(255 255 255 / .22); } .carte-p i.court { width: 55%; background: rgb(255 255 255 / .12); }
.panneau.on .carte-p { animation: entrer .6s cubic-bezier(.2,.8,.2,1) forwards; }
.carte-p:nth-of-type(2) { animation-delay: .25s !important; } .carte-p:nth-of-type(3) { animation-delay: .5s !important; } .carte-p:nth-of-type(4) { animation-delay: .75s !important; }

/* 05 · Atelier : trois documents */
.v-atelier { perspective: 900px; }
.document { position: absolute; width: 170px; height: 220px; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  background: #fff; box-shadow: 0 30px 60px rgb(0 0 0 / .35); color: var(--marque-bleu-nuit); transition: transform .9s cubic-bezier(.2,.8,.2,1); transform: translateY(20px) scale(.92); }
.document b { font-size: 15px; font-weight: 700; }
.document > i { flex: 1; border-radius: 10px; background: repeating-linear-gradient(180deg, #E6EBF3 0 6px, transparent 6px 16px); }
.document.d3 { background: linear-gradient(160deg, #0B2A5C, #04183A); color: #F3D99A; box-shadow: 0 30px 60px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(243 217 154 / .5); z-index: 2; }
.mini-boussole { flex: 1; display: grid; place-items: center; }
.mini-boussole::before { content: ""; width: 92px; height: 92px; border-radius: 50%; grid-area: 1 / 1; box-shadow: inset 0 0 0 1px rgb(243 217 154 / .6);
  background: repeating-conic-gradient(rgb(243 217 154 / .6) 0 1deg, transparent 1deg 15deg); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%); mask: radial-gradient(circle, transparent 58%, #000 59%); }
.mini-boussole > span { grid-area: 1 / 1; width: 8px; height: 70px; background: linear-gradient(180deg, #F3D99A 50%, #2F6FE0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: chercher 4s ease-in-out infinite; }
@keyframes chercher { 0%, 100% { transform: rotate(35deg); } 40% { transform: rotate(-20deg); } 70% { transform: rotate(48deg); } }
.panneau.on .document.d1 { transform: translateX(-150px) rotate(-10deg); } .panneau.on .document.d2 { transform: translateX(150px) rotate(10deg); }
.panneau.on .document.d3 { transform: translateY(-10px) scale(1.04); }

/* ---------- Quatre formules : cartes bleu nuit et doré ---------- */
.formule { background: linear-gradient(180deg, #D9A441 0 3px, rgb(243 217 154 / .25) 3px); color: #fff; }
.formule::after { background: linear-gradient(165deg, #0B2A5C 0%, #04183A 60%); }
.formule:hover { box-shadow: 0 40px 80px rgb(4 24 58 / .35); }
.formule .stade { color: #F3D99A; }
.formule h3 { background: var(--or-metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-texte 6s linear infinite; }
.formule .accroche { color: #fff; }
.formule .mot-cle { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; color: #F3D99A; background: rgb(243 217 154 / .08); box-shadow: inset 0 0 0 1px rgb(243 217 154 / .25); }
.formule dl { border-top-color: rgb(255 255 255 / .14); }
.formule dt { color: #F3D99A; opacity: .85; }
.formule dd { color: rgb(255 255 255 / .75); }
.formule .benefice { background: rgb(255 255 255 / .07); color: #fff; }
.formule .index { -webkit-text-stroke-color: rgb(243 217 154 / .3); }
.formule .btn.discret { color: #fff; border-color: rgb(243 217 154 / .5); }
.formule .btn.discret:hover { border-color: #F3D99A; background: rgb(243 217 154 / .1); }

@media (max-width: 960px) {
  .explorateur { grid-template-columns: 1fr; gap: 24px; }
  .onglets { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 6px; }
  .panneaux { min-height: 640px; } .panneau { padding: 24px; }
  .panneau.on .document.d1 { transform: translateX(-90px) rotate(-10deg) scale(.85); } .panneau.on .document.d2 { transform: translateX(90px) rotate(10deg) scale(.85); }
}

/* Studio : parcours en cinq étapes (de l'idée au produit) */
.frise.cinq { grid-template-columns: repeat(5, 1fr); }
.frise > div { position: relative; padding: 36px 20px 0 0; }
.frise > div::before { content: ""; position: absolute; top: -7px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid #D9A441; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); z-index: 2; }
.frise.vu > div::before { transform: scale(1); }
.frise.vu > div:nth-of-type(2)::before { transition-delay: .3s; } .frise.vu > div:nth-of-type(3)::before { transition-delay: .6s; }
.frise.vu > div:nth-of-type(4)::before { transition-delay: .9s; } .frise.vu > div:nth-of-type(5)::before { transition-delay: 1.2s; }
.frise > div > span { display: block; font-size: 13.5px; color: var(--marque-bleu); margin-bottom: 8px; }
.frise > div > b { font-size: 22px; font-weight: 500; color: var(--marque-bleu-nuit); }
.frise > div.cle::before { background: #D9A441; box-shadow: 0 0 0 7px rgb(217 164 65 / .2), 0 0 22px rgb(217 164 65 / .7); animation: pulse 1.8s ease-out infinite; }
.frise > div.cle > b { background: var(--or-metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-texte 5s linear infinite; font-weight: 700; }
@media (max-width: 960px) { .frise.cinq { grid-template-columns: 1fr 1fr; } }

/* Blog (vide pour le moment) */
.blog-vide { text-align: center; max-width: 720px; margin: 0 auto; padding: 40px 0 20px; }
.blog-vide h2 { margin: 22px auto 0; }
.blog-vide .intro { margin: 18px auto 0; }

/* Méthode Quality sur téléphone : onglets plus lisibles */
@media (max-width: 600px) {
  .onglets { grid-auto-columns: minmax(150px, 1fr); }
  .onglet { grid-template-columns: 1fr; gap: 6px; padding: 16px 16px 20px; }
  .onglet .num { font-size: 26px; }
  .onglet .titres b { font-size: 17px; }
  .onglet .titres em { white-space: nowrap; font-size: 13.5px; }
  .onglet .barre { left: 16px; right: 16px; }
  .panneaux { min-height: 620px; }
}

/* Network : les profils mènent au formulaire du métier */
.profils > a { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line); font-size: 18px; color: var(--marque-bleu-nuit);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s; }
.profils > a:hover { background: var(--marque-bleu-nuit); color: #fff; border-color: var(--marque-bleu-nuit); transform: translateY(-2px); }

/* =====================================================================
   Symboles animés des expertises (même famille que la boussole Quality)
   ===================================================================== */
.symbole { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; opacity: 0; transform: scale(.9); transition: opacity 1.4s .4s, transform 1.6s .4s cubic-bezier(.2,.8,.2,1); }
.q-heros.pret .symbole { opacity: 1; transform: none; }
.symbole > * { position: absolute; }

/* Studio : un écran qui se construit — idée, prototype (filaire), test, produit */
.proto { left: 22%; top: 27%; width: 56%; height: 46%; border-radius: 14px; overflow: hidden;
  background: rgb(4 24 58 / .75); box-shadow: inset 0 0 0 1px rgb(243 217 154 / .55), 0 0 40px rgb(47 111 224 / .25); }
.proto-barre { display: flex; gap: 5px; padding: 9px 11px; border-bottom: 1px solid rgb(243 217 154 / .25); }
.proto-barre i { width: 7px; height: 7px; border-radius: 50%; background: rgb(243 217 154 / .45); }
.proto-corps { position: relative; height: calc(100% - 26px); }
.proto-corps span { position: absolute; border-radius: 6px; border: 1.5px dashed rgb(243 217 154 / .7); animation: construire 12s infinite; }
.proto-corps .pb1 { left: 8%; top: 10%; width: 50%; height: 12%; }
.proto-corps .pb2 { left: 8%; top: 30%; width: 84%; height: 30%; animation-delay: .25s; }
.proto-corps .pb3 { left: 8%; top: 68%; width: 38%; height: 8%; animation-delay: .5s; }
.proto-corps .pb4 { left: 8%; top: 81%; width: 26%; height: 8%; animation-delay: .75s; }
.proto-corps .pb5 { right: 8%; top: 70%; width: 30%; height: 18%; border-radius: 999px; animation-delay: 1s; }
@keyframes construire {
  0%, 18% { opacity: 0; transform: scale(.85); }
  25%, 48% { opacity: 1; transform: none; background: transparent; border-style: dashed; }
  50%, 72% { opacity: 1; background: rgb(47 111 224 / .25); border-style: solid; border-color: rgb(94 147 240 / .7); }
  75%, 96% { opacity: 1; background: var(--or-metal); border-color: transparent; }
  100% { opacity: 0; } }
.proto-curseur { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #F3D99A; box-shadow: 0 0 14px #F3D99A; animation: viser 12s infinite; }
@keyframes viser { 0%, 50% { left: 20%; top: 40%; opacity: 0; } 54% { opacity: 1; } 60% { left: 55%; top: 45%; } 66% { left: 78%; top: 80%; } 72% { left: 78%; top: 80%; opacity: 1; } 75%, 100% { opacity: 0; } }

/* Network : un réseau de talents relié au groupe */
.reseau svg { inset: 0; width: 100%; height: 100%; overflow: visible; }
.reseau .orbite { fill: none; stroke: rgb(243 217 154 / .3); stroke-width: 1; stroke-dasharray: 2 6; }
.reseau .orbite.petite { stroke: rgb(94 147 240 / .35); animation: tourne 40s linear infinite reverse; transform-origin: 200px 200px; }
.reseau .liens line { stroke: rgb(243 217 154 / .75); stroke-width: 1.4; stroke-dasharray: 6 160; stroke-dashoffset: 166; animation: impulsion 8s linear infinite; animation-delay: calc(var(--k) * 1s); }
@keyframes impulsion { 0% { stroke-dashoffset: 166; opacity: 0; } 4% { opacity: 1; } 14% { stroke-dashoffset: 0; opacity: 1; } 18%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.reseau .noeuds circle { fill: #0B2A5C; stroke: rgb(243 217 154 / .6); stroke-width: 1.5; animation: allume 8s infinite; animation-delay: calc(var(--k) * 1s + .9s); transform-box: fill-box; transform-origin: center; }
@keyframes allume { 0% { fill: #F3D99A; transform: scale(1.4); filter: drop-shadow(0 0 8px #F3D99A); } 16%, 100% { fill: #0B2A5C; transform: none; filter: none; } }
.reseau .etiquettes text { font: 500 13px Satoshi, sans-serif; letter-spacing: .06em; fill: rgb(255 255 255 / .45); text-anchor: middle; animation: etiquette 8s infinite; animation-delay: calc(var(--k) * 1s + .9s); }
@keyframes etiquette { 0%, 14% { fill: #F3D99A; } 18%, 100% { fill: rgb(255 255 255 / .45); } }
.reseau .centre-halo { fill: rgb(243 217 154 / .18); animation: respire 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.reseau .centre { filter: drop-shadow(0 0 14px rgb(243 217 154 / .8)); }

/* Le symbole reste à côté du titre ; sur téléphone, il est masqué pour ne pas tomber en bas de page */
@media (max-width: 960px) {
  .q-grille { grid-template-columns: 1.3fr .7fr; gap: 24px; }
  .boussole, .symbole { justify-self: end; width: min(100%, 300px); }
}
@media (max-width: 760px) {
  .q-grille { grid-template-columns: 1fr; }
  .boussole, .symbole { display: none; }
}
/* Studio : mots au nord, à l'est, au sud et à l'ouest, l'écran au centre */
.atelier .proto { left: 27%; top: 30%; width: 46%; height: 40%; }
.atelier .b-cap.c1 { top: 17%; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
.atelier .b-cap.c2 { top: 50%; right: 7%; left: auto; bottom: auto; transform: translateY(-50%); }
.atelier .b-cap.c3 { bottom: 17%; left: 50%; top: auto; right: auto; transform: translateX(-50%); }
.atelier .b-cap.c4 { top: 50%; left: 7%; right: auto; bottom: auto; transform: translateY(-50%); }
.reseau .liens line { stroke-width: 1.6; }
.reseau .etiquettes text { font-size: 14px; }

/* Méthode Quality : la boussole entière, visible en fond (et plus coupée en deux) */
.sec.nuit .boussole.methode-b { position: absolute; right: 4%; top: 90px; width: 380px; opacity: .22; transform: none; transition: none; pointer-events: none; }
.sec.nuit .boussole.methode-b .b-aiguille { animation-duration: 16s; }

/* Téléphone : le symbole apparaît en haut, petit, avant le titre (il ne tombe plus en bas) */
@media (max-width: 760px) {
  .q-grille { grid-template-columns: 1fr; }
  .boussole, .symbole { display: block; order: -1; justify-self: start; width: 190px; margin: 10px 0 -10px; }
  .sec.nuit .boussole.methode-b { display: none; }
}
.sec.nuit .boussole.methode-b { top: 70px; right: 7%; width: 290px; opacity: .4; }
@media (max-width: 1100px) { .sec.nuit .boussole.methode-b { width: 220px; right: 3%; top: 60px; } }
.profils > a.autre { border-style: dashed; border-color: #D9A441; }

/* ---------- Le problème / Ce que vous gagnez (Quality, Studio, Network) ---------- */
.pb-sol { position: relative; color: #fff; padding: 130px 0; background: var(--marque-bleu-nuit) url("img/fond.jpg") center / cover no-repeat; background-blend-mode: screen; overflow: hidden; }
.pb-sol::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 24 58 / .9), rgb(4 24 58 / .72) 50%, rgb(4 24 58 / .9)); }
.pb-sol .cadre { position: relative; }
.pb-bloc { text-align: center; }
.pb-bloc + .pb-bloc { margin-top: 130px; }
.pb-etiquette { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #F3D99A; margin-bottom: 16px; }
.pb-sol h2 { font-size: clamp(34px, 4.2vw, 58px); max-width: 900px; margin: 0 auto; background: var(--or-metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-texte 6s linear infinite; }
.pb-intro { max-width: 680px; margin: 20px auto 0; font-size: 19px; color: rgb(255 255 255 / .8); }
.pb-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; text-align: center; }
.pb-carte { position: relative; padding: 44px 32px 40px; border-radius: 30px; border: 1.5px solid rgb(47 111 224 / .75);
  background: linear-gradient(180deg, rgb(10 36 84 / .78), rgb(4 24 58 / .9)); backdrop-filter: blur(6px);
  box-shadow: 0 0 34px rgb(217 164 65 / .28), inset 0 1px 0 rgb(255 255 255 / .08); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s; }
.pb-carte:hover { transform: translateY(-8px); border-color: #F3D99A; box-shadow: 0 0 60px rgb(217 164 65 / .5), inset 0 1px 0 rgb(255 255 255 / .1); }
.pb-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--or-metal); color: var(--marque-bleu-nuit); box-shadow: 0 10px 30px rgb(217 164 65 / .35); animation: flotte-ico 5s ease-in-out infinite; }
.pb-grille > :nth-child(2) .pb-ico { animation-delay: -1.6s; } .pb-grille > :nth-child(3) .pb-ico { animation-delay: -3.2s; }
@keyframes flotte-ico { 50% { transform: translateY(-6px); } }
.pb-ico svg { width: 32px; height: 32px; }
.pb-carte h3 { margin: 26px 0 14px; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; background: var(--or-metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-texte 6s linear infinite; }
.pb-carte p { color: rgb(255 255 255 / .8); font-size: 16px; }
.pb-carte ul { list-style: none; margin: 22px auto 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .12); display: grid; gap: 10px; text-align: start; max-width: 280px; }
.pb-carte li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #fff; }
.pb-carte li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; background: var(--or-metal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6'/%3E%3C/svg%3E") center / contain; position: relative; }
.pb-carte li { position: relative; }
.pb-carte li::after { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; width: 5px; height: 9px; border: solid var(--marque-bleu-nuit); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 960px) {
  .pb-grille { grid-template-columns: 1fr; }
  .pb-sol { padding: 90px 0; } .pb-bloc + .pb-bloc { margin-top: 90px; }
}

/* Cartes blanches sur le fond Altiora (demande du 18/10) */
.pb-carte { background: #fff; border: 1.5px solid #fff; backdrop-filter: none; box-shadow: 0 20px 50px rgb(4 24 58 / .35), 0 0 30px rgb(217 164 65 / .18); }
.pb-carte:hover { border-color: #fff; box-shadow: 0 26px 60px rgb(4 24 58 / .45), 0 0 50px rgb(217 164 65 / .45); }
.pb-ico { background: var(--marque-bleu-nuit); color: #F3D99A; box-shadow: 0 10px 26px rgb(4 24 58 / .35); }
.pb-carte h3 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--marque-bleu-nuit); animation: none; }
.pb-carte p { color: var(--muted); }
.pb-carte ul { border-top-color: var(--line); }
.pb-carte li { color: var(--ink); }

/* Cartes : fond Altiora (vagues bleu et or), contour blanc, textes blancs */
.pb-sol::before { background: radial-gradient(70% 60% at 50% 50%, rgb(4 24 58 / .55), rgb(4 24 58 / .25) 80%); }
.pb-carte { background: linear-gradient(180deg, rgb(4 24 58 / .25), rgb(4 24 58 / .55)), url("img/fond.jpg") center / cover no-repeat;
  border: 1.5px solid rgb(255 255 255 / .9); box-shadow: 0 0 34px rgb(217 164 65 / .3), 0 20px 50px rgb(4 24 58 / .4); }
.pb-grille > :nth-child(2) { background-position: 30% 40%, 30% 40%; } .pb-grille > :nth-child(3) { background-position: 70% 60%, 70% 60%; }
.pb-carte:hover { border-color: #fff; box-shadow: 0 0 60px rgb(217 164 65 / .55), 0 26px 60px rgb(4 24 58 / .5); }
.pb-ico { background: var(--marque-bleu-nuit); color: #F3D99A; border: 1px solid rgb(243 217 154 / .6); }
.pb-carte h3 { background: var(--or-metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-texte 6s linear infinite; }
.pb-carte p, .pb-carte li { color: #fff; }
.pb-carte ul { border-top-color: rgb(255 255 255 / .25); }

/* Section sur fond blanc : seules les cartes gardent le fond Altiora */
.pb-sol { background: #fff; color: var(--ink); }
.pb-sol::before { display: none; }
.pb-etiquette { color: var(--marque-bleu); }
.pb-sol h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--marque-bleu-nuit); animation: none; }
.pb-intro { color: var(--muted); }

/* Un seul bleu partout : celui de la bannière */
.sec.gris { background: #fff; }
.sec.nuit::before { background: radial-gradient(70% 60% at 50% 50%, rgb(4 24 58 / .7), transparent 75%); }
.pb-carte { background: linear-gradient(rgb(4 24 58 / .3), rgb(4 24 58 / .3)), url("img/fond.jpg") center / cover no-repeat, var(--marque-bleu-nuit);
  background-blend-mode: normal, screen, normal; }
.pb-grille > :nth-child(2) { background-position: 0 0, 30% 40%, 0 0; } .pb-grille > :nth-child(3) { background-position: 0 0, 70% 60%, 0 0; }

/* Quality : « Vous gardez le contrôle » — aperçu du tableau de bord USERFLOW du client */
.titre-controle { font-size: clamp(30px, 3.2vw, 46px); color: var(--marque-bleu-nuit); margin-bottom: 18px; line-height: 1.12; }
.tdb main { display: grid; gap: 14px; }
.en-direct { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 500; }
.en-direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse-vert 1.6s ease-out infinite; }
@keyframes pulse-vert { 0% { box-shadow: 0 0 0 0 rgb(31 138 91 / .5); } 100% { box-shadow: 0 0 0 9px rgb(31 138 91 / 0); } }
.tdb-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tdb-etapes li { position: relative; padding-top: 12px; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.tdb-etapes li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 5px; background: var(--line); }
.tdb-etapes li.fait::before { background: var(--or-metal); }
.tdb-etapes li.fait { color: var(--marque-bleu-nuit); }
.tdb-etapes li.encours { color: var(--marque-bleu-nuit); font-weight: 500; }
.tdb-etapes li.encours::before { background: linear-gradient(90deg, #D9A441 0 50%, var(--line) 50%); background-size: 200% 100%; animation: avance-etape 2.4s ease-in-out infinite alternate; }
@keyframes avance-etape { from { background-position: 100% 0; } to { background-position: 30% 0; } }
.tdb-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tdb-kpis div { padding: 12px; border-radius: 12px; background: var(--bg); }
.tdb-kpis b { display: block; font-size: 26px; font-weight: 500; color: var(--marque-bleu-nuit); letter-spacing: -.02em; }
.tdb-kpis small { font-size: 11.5px; color: var(--muted); }
.tdb-flux { display: grid; gap: 8px; }
.tdb-flux > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; animation: arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.tdb-flux > div:nth-child(1) { animation-delay: .8s; } .tdb-flux > div:nth-child(2) { animation-delay: 1.6s; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tdb-flux small { display: block; color: var(--muted); font-size: 11.5px; }
.pastille-v { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #04183A; background: var(--or-metal); }
@media (max-width: 600px) { .tdb-etapes li { font-size: 10px; } }

/* Page Contact : trois façons de nous joindre */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-carte { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 36px 32px; border-radius: 24px; text-decoration: none; color: var(--marque-bleu-nuit);
  background: var(--surface); border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s; }
.contact-carte:hover { transform: translateY(-6px); border-color: #D9A441; box-shadow: 0 30px 60px rgb(4 24 58 / .12); }
.contact-carte h2 { font-size: 28px; font-weight: 500; }
.contact-carte p { color: var(--muted); }
.contact-icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--bg); }
.contact-lien { margin-top: auto; padding-top: 10px; font-weight: 500; color: #A8742A; }
.contact-carte.principale { background: linear-gradient(165deg, #0B2A5C, #04183A 65%); color: #fff; border-color: transparent; }
.contact-carte.principale p { color: rgb(255 255 255 / .78); }
.contact-carte.principale .contact-icone { background: var(--or-metal); }
.contact-carte.principale .contact-lien { color: #F3D99A; }
@media (max-width: 960px) { .contacts { grid-template-columns: 1fr; } }
.q-heros .devise.trois > span { animation-duration: 6s; }