/* FORGE FP — transposition vectorielle du visuel 06 de « Le projet ». Arial, zéro dépendance. */
:root{--navy:#082A78;--blue:#0A4C9B;--bright:#0B64F2;--pale:#D5E6FA;--teal:#00B3B3;--orange:#FF7800;--body:#3561AC;--sand:#D5A581}
*{box-sizing:border-box}
html{background:#fff;scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--navy);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,.architecture-scroll:focus-visible{outline:3px solid #FF8A00;outline-offset:4px;border-radius:3px}
svg{display:block}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;z-index:10;top:-100px;left:20px;padding:12px 18px;background:#fff;border:2px solid var(--blue)}
.skip-link:focus{top:10px}
.page-shell{position:relative;overflow:hidden;background:radial-gradient(circle at -3% 15%,rgba(222,240,255,.42),transparent 10%),radial-gradient(circle at 99% 21%,rgba(224,241,255,.32),transparent 8%),#fff}
.site-width{width:min(1220px,calc(100% - 90px));margin-inline:auto}
.site-header{position:relative;z-index:2;height:115px}
.header-inner{height:100%;display:flex;justify-content:space-between;align-items:flex-start}
.brand{display:flex;gap:11px;align-items:center;margin-top:21px}
.brand-wheel{display:block;flex-shrink:0;width:71px;height:71px}
.brand-wheel img{width:100%;height:100%}
.brand-text{display:flex;flex-direction:column;text-decoration:none;gap:1px}
.brand-name{font-size:37px;line-height:1;letter-spacing:-.4px;font-weight:700;color:var(--blue);white-space:nowrap}
.brand-name span{color:var(--orange)}
.brand-subtitle{font-size:12.5px;color:#145EE5;white-space:nowrap}
.main-nav{display:flex;gap:36px;margin-top:47px;white-space:nowrap;align-items:flex-start}
.main-nav a{text-decoration:none;color:#315CBC;font-size:15px;padding:0 0 9px}
.main-nav a:hover{color:var(--bright)}
.main-nav a[aria-current="page"]{font-weight:700;color:var(--bright);border-bottom:2px solid var(--bright)}
.hero{position:relative;min-height:425px;padding-top:10px}
.hero::before{content:"";position:absolute;border-radius:50%;background:#E6F4FF;opacity:.65;width:94px;height:94px;top:-78px;left:53%;pointer-events:none}
.hero-copy{position:relative;z-index:1;width:64%;pointer-events:none}
.eyebrow{margin:0 0 14px;color:#1673F8;font-size:13px;letter-spacing:3px;line-height:1.4}
h1{font-size:clamp(36px,3.35vw,50px);line-height:1.07;letter-spacing:-1.25px;font-weight:700;color:#072C85;margin:0 0 20px;white-space:nowrap}
h1 span{color:#1268EA}
.hero-copy p:not(.eyebrow){font-size:15.4px;line-height:1.35;letter-spacing:-.14px;color:#2F5CB5;margin:0 0 18px}
.hero-art{position:absolute;width:58%;max-width:690px;height:auto;right:-49px;top:-46px;z-index:0;pointer-events:none}
.hero-art img{width:100%;height:auto;display:block}
.hero-bubble{position:absolute;border-radius:50%;background:#E9F5FF;opacity:.67;pointer-events:none}
.bubble-a{width:125px;height:200px;top:10px;left:-161px}
.bubble-b{width:115px;height:115px;right:-122px;top:158px}
.section{border-top:1px solid #BED8F9;padding:9px 15px 10px;position:relative}
.section h2,.architecture-section h2{color:#092D85;font-size:25px;line-height:1.08;letter-spacing:-.65px;margin:0 0 15px;font-weight:700}
.section h3{margin:0;color:#07358E;font-size:15.6px;font-weight:700;line-height:1.2}
.section p{font-size:13.2px;line-height:1.37;color:#416ABC;margin:7px 0 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2px}
.why-item{display:flex;align-items:flex-start;gap:21px;min-width:0;padding:0 24px 4px 0}
.why-item:not(:last-child){border-right:1px solid #B4D4FF}
.why-item .feature-icon{flex:0 0 48px}
.feature-icon{width:49px;height:49px;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;fill:none}
.feature-icon.blue{color:#0869F5}.feature-icon.teal{color:#04B1BF}.feature-icon.orange{color:#FF7800}
.principles-section{padding-bottom:12px}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.principle{min-width:0;padding:1px 33px 0 18px;min-height:113px}
.principle:not(:last-child){border-right:1px solid #B4D4FF}
.principle:first-child{padding-left:17px}
.principle .feature-icon{width:45px;height:45px;margin-bottom:5px}
.principle h3{font-size:15px}
.principle p{max-width:225px;margin-top:5px}
.method-section{padding-bottom:11px}
.method-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:start}
.step{text-align:center;position:relative;padding:0 12px}
.step:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 53px);right:calc(-50% + 57px);top:28px;border-top:2px dashed #ACCEF7;pointer-events:none}
.step:not(:last-child)::before{content:"";position:absolute;right:-6px;top:24px;border:solid #0A6EFC;border-width:0 2px 2px 0;padding:4px;transform:rotate(-45deg);z-index:1;pointer-events:none}
.step-icon{height:66px;width:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;position:relative;z-index:2}
.step-icon svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
.bg-blue{color:#086FFC;background:#E0EEFF}.bg-orange{color:#FF7100;background:#FBE9E0}.bg-teal{color:#00B5BC;background:#DDF6F8}.bg-sand{color:#C89876;background:#F7EFEA}
.step h3{font-size:14px;margin:0}.step p{font-size:12.5px;margin:5px auto 0;max-width:180px;line-height:1.3}
.transparency-section{padding-bottom:11px}
.transparency-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.transparency-item{display:flex;gap:20px;padding:0 28px 0 5px;align-items:flex-start}
.transparency-item:first-child{border-right:1px solid #B4D4FF}
.transparency-item svg{flex-shrink:0}
.transparency-item h3{font-size:15px}.transparency-item p{margin:5px 0 0;font-size:12.6px;line-height:1.33}
.documentation{border-top:1px solid #BCD8FA;display:flex;gap:15px;align-items:center;padding:8px 15px 10px;min-height:80px;position:relative}
.doc-book{width:51px;height:51px;stroke:white;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;border-radius:50%;padding:10px;background:linear-gradient(145deg,#3F9BFF,#0060E8);flex-shrink:0}
.doc-copy{min-width:0;flex:1}
.documentation h2{font-size:19px;line-height:1.05;color:#09328D;margin:0 0 4px}
.documentation p{color:#416ABC;font-size:12.7px;line-height:1.33;margin:0;max-width:880px}
.doc-link{color:#096BEB;white-space:nowrap;font-size:13px;text-underline-offset:4px;display:flex;align-items:center;gap:7px;align-self:center}
.doc-link svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.architecture-section{border-top:1px solid #BCD8FA;padding:12px 0 3px;position:relative}
.architecture-inner{width:min(1280px,calc(100% - 70px))}
.architecture-section h2{margin:0 0 8px;font-size:24px}
.architecture-scroll{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-color:#B5D4F6 #F1F8FF;scrollbar-width:thin}
.architecture-scroll img{width:100%;min-width:1050px;height:auto;display:block}
.site-footer{border-top:1px solid #C2DCFA;background:linear-gradient(#F5FAFF,#fff);min-height:48px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#5073B4;font-size:12px;padding:13px 5px}
.site-footer nav{display:flex;align-items:center;white-space:nowrap}
.site-footer nav a{text-decoration:none;padding:0 18px;border-right:1px solid #A8C7F6;line-height:14px}
.site-footer nav a:last-child{border-right:none;padding-right:0}
.site-footer a:hover{text-decoration:underline}
@media (min-width:1550px){.site-width{width:min(1350px,calc(100% - 130px))}.hero{min-height:405px;padding-top:24px}.hero-art{width:59%}.section{padding-top:13px;padding-bottom:15px}.section h2{font-size:29px}.section p{font-size:14px}.hero-copy p:not(.eyebrow){font-size:18px}h1{font-size:56px}}
@media (max-width:1150px) and (min-width:901px){.site-width{width:calc(100% - 65px)}.hero{min-height:414px}.hero-copy{width:65%}.hero-art{width:57%;right:-32px;top:-24px}h1{font-size:clamp(34px,3.55vw,45px)}.hero-copy p:not(.eyebrow){font-size:14.8px}.section{padding-inline:10px}.why-item{gap:10px;padding-right:12px}.why-item .feature-icon{flex-basis:40px;width:40px}.section p{font-size:12px}.principle{padding-right:15px;padding-left:17px}}
@media (max-width:900px){.site-width{width:calc(100% - 44px)}.site-header{height:auto;min-height:105px}.brand{margin-top:17px}.brand-wheel{width:59px;height:59px}.brand-name{font-size:31px}.brand-subtitle{font-size:11px}.main-nav{gap:17px;margin-top:43px}.main-nav a{font-size:12.5px}.hero{min-height:755px;padding-top:15px}.hero-copy{width:100%;position:relative;z-index:1}.hero-art{top:255px;width:min(700px,90vw);left:50%;right:auto;transform:translateX(-50%);max-width:none}.hero-copy p:not(.eyebrow){font-size:15px;max-width:720px}h1{font-size:clamp(34px,5vw,46px)}.wide-only{display:none}.why-grid{grid-template-columns:1fr;gap:14px}.why-item{padding:0 0 14px;border-right:none!important;border-bottom:1px solid #D5E6FD}.why-item:last-child{border-bottom:none;padding-bottom:0}.principles-grid{grid-template-columns:repeat(2,1fr);gap:20px 0}.principle:nth-child(2){border-right:0}.principle{min-height:120px}.method-grid{grid-template-columns:repeat(5,1fr)}.step{padding:0 5px}.step h3{font-size:12.4px}.step p{font-size:11px}.step-icon{width:53px;height:53px}.step-icon svg{width:28px;height:28px}.step:not(:last-child)::after{top:25px;left:calc(50% + 40px);right:calc(-50% + 38px)}.step:not(:last-child)::before{top:21px}.documentation{flex-wrap:wrap}.doc-link{margin-left:auto}.architecture-inner{width:calc(100% - 30px)}.architecture-scroll img{min-width:1150px}}
@media (max-width:610px){.site-width{width:calc(100% - 32px)}.site-header{min-height:119px}.header-inner{display:block}.brand{margin-top:13px;gap:9px}.brand-wheel{width:56px;height:56px}.brand-name{font-size:28px}.brand-subtitle{font-size:10px}.main-nav{justify-content:flex-end;gap:18px;margin:12px 0 0}.main-nav a{font-size:12px;padding-bottom:6px}.hero{min-height:652px;padding-top:10px}.eyebrow{font-size:11.5px;letter-spacing:2.5px;margin-bottom:13px}h1{white-space:normal;font-size:clamp(30px,7vw,42px);letter-spacing:-1px;margin-bottom:18px;line-height:1.13}.hero-copy p:not(.eyebrow){font-size:14px;line-height:1.42;margin-bottom:12px}.hero-art{top:314px;width:min(620px,110vw)}.section{padding:13px 4px}.section h2{font-size:24px}.why-item{gap:13px}.why-item .feature-icon{flex:0 0 43px;width:43px;height:43px}.section h3{font-size:14.5px}.section p{font-size:13px}.principle{padding:0 12px 0 5px;min-height:145px}.principle .feature-icon{width:42px;height:42px}.principles-grid{gap:15px 0}.method-grid{grid-template-columns:repeat(2,1fr);gap:25px 10px}.step:not(:last-child)::after,.step:not(:last-child)::before{display:none}.step h3{font-size:13px}.step p{font-size:12px}.step:last-child{grid-column:1/-1}.transparency-grid{grid-template-columns:1fr;gap:14px}.transparency-item{border-right:none!important;gap:13px;padding:0}.transparency-item:first-child{padding-bottom:15px;border-bottom:1px solid #D7E5FA}.transparency-item .feature-icon{height:41px;width:41px}.documentation{gap:11px;align-items:flex-start;padding:13px 2px}.doc-book{width:44px;height:44px}.doc-copy{flex-basis:calc(100% - 60px)}.documentation h2{font-size:18px}.documentation p{font-size:12.5px}.doc-link{font-size:12.5px}.architecture-section{padding:15px 0}.architecture-section h2{font-size:22px}.footer-inner{flex-direction:column;align-items:center;gap:13px;text-align:center;font-size:11px;padding:16px 0}.site-footer nav a{padding:0 12px}}
/* Tablettes : le schéma final est réduit à la largeur disponible,
   sans zone à défilement horizontal. Bureau inchangé et téléphone masqué. */
@media (min-width:768px) and (max-width:1150px){
  .architecture-scroll{overflow-x:visible;overflow-y:visible}
  .architecture-scroll img{display:block;width:100%;max-width:100%;min-width:0;height:auto}
}
@media (max-width:767px){.architecture-section{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* R07-H1 : lisibilite du hero Projet et libelles du schema, sans redesin. */
@media (min-width: 1251px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 24px;
    min-height: 470px;
    padding-top: 0;
  }
  .hero-copy { width: auto; min-width: 0; max-width: 100%; }
  .hero h1 {
    white-space: normal;
    font-size: clamp(35px, 2.8vw, 48px);
    line-height: 1.1;
  }
  .hero-art {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    justify-self: end;
  }
}
@media (max-width: 1250px) {
  .hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding-bottom: 20px;
  }
  .hero-copy { width: 100%; max-width: 100%; }
  .hero h1 {
    white-space: normal;
    max-width: 24ch;
    font-size: clamp(30px, 3.8vw, 46px);
  }
  .hero-art {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }
}