/* ========================================================================== LA PAGE « CE QU'ON FAIT », composition validee avec Codex le 22/09/2026. Reprise fidele de Reprise-Claude-Ce-qu-on-fait/page-assets-separes.html. ⚠ CE FICHIER NE SERT QUE SUR /ce-quon-fait. Tout y est cloisonne sous #menaria-harmonisee, cloisonnement deja fait par Codex, verifie selecteur par selecteur. Il ne peut donc pas deborder sur les onze autres pages, alors qu'il redefinit .wrap, .hero, .lead, h1, h2 et h3, qui existent tous dans style.css. TROIS ADAPTATIONS, et rien d'autre. 1. @font-face retire, la police Outfit est deja servie par style.css sous ce nom. Les references MenariaOutfit ont ete rebranchees dessus. 2. Les portraits pointent vers /img/*.webp. Les PNG d'origine pesaient 2 Mo piece, soit 7,6 Mo pour la page ; ils sont a 92 Ko au total apres conversion a 580 px de haut, le double de la taille d'affichage. 3. La regle body{} est retiree, elle aurait repeint tout le site, qui porte deja ce fond. Les regles de l'atelier de revue (.studio, .toolbar-bottom, .page-switch, #direction-note, .choices) sont supprimees, elles ne concernent pas les visiteurs. ========================================================================== */ #menaria-harmonisee{--paper:#FBF9F5;--ink:#26303F;--slate:#334965;--peach:#EFB779;--copper:#9C5D24;--sky:#9BCBED;--mist:#EDF0F5;--line:#D9D9D3;color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--paper);color-scheme:light;max-width:1600px;margin:auto} #menaria-harmonisee *{box-sizing:border-box} #menaria-harmonisee h1,#menaria-harmonisee h2,#menaria-harmonisee h3,#menaria-harmonisee .brand,#menaria-harmonisee button,#menaria-harmonisee .eyebrow,#menaria-harmonisee .number{font-family:Outfit,sans-serif} #menaria-harmonisee h1,#menaria-harmonisee h2,#menaria-harmonisee h3,#menaria-harmonisee p{margin:0} #menaria-harmonisee h1{font-size:clamp(42px,6.4vw,86px);line-height:1.06;letter-spacing:-.045em;font-weight:550} #menaria-harmonisee h2{font-size:clamp(31px,4vw,50px);line-height:1.13;letter-spacing:-.03em;font-weight:550} #menaria-harmonisee h3{font-size:25px;line-height:1.2;font-weight:550;letter-spacing:-.02em} #menaria-harmonisee a{color:inherit;text-decoration:none} #menaria-harmonisee button{font-size:14px;line-height:1.35;transition:background .2s,transform .2s} #menaria-harmonisee button:focus-visible,#menaria-harmonisee a:focus-visible{outline:3px solid var(--copper);outline-offset:5px} #menaria-harmonisee .site{position:relative;isolation:isolate} #menaria-harmonisee .wrap{width:min(1120px,90%);margin:auto} #menaria-harmonisee .site-header{position:sticky;top:12px;z-index:10;padding-top:20px} #menaria-harmonisee .navbar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--slate);color:#EAF0F7;padding:15px 23px;border-radius:60px;box-shadow:0 8px 24px #26303F12} #menaria-harmonisee .brand{font-size:24px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:2px;white-space:nowrap} #menaria-harmonisee .brand-diamond{width:25px;height:25px;transform:rotate(45deg);border-radius:4px;background:#EDF0F5;display:inline-flex;align-items:center;justify-content:center;margin-right:2px} #menaria-harmonisee .brand-diamond span{transform:rotate(-45deg);color:var(--slate);font-size:20px} #menaria-harmonisee .navlinks{display:flex;gap:25px;align-items:center;font-size:13px} #menaria-harmonisee .navlinks a{padding:3px 0} #menaria-harmonisee .navlinks .current{border-bottom:1px solid var(--peach)} #menaria-harmonisee .nav-cta{background:white;color:var(--slate);padding:11px 18px;border-radius:30px;font-family:Outfit,sans-serif;font-size:13px} #menaria-harmonisee .hero{position:relative;text-align:center;padding:105px 20px 90px;overflow:hidden} #menaria-harmonisee .hero-content{position:relative;z-index:2;max-width:920px;margin:auto} #menaria-harmonisee .eyebrow{display:block;text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:550;color:var(--copper);margin-bottom:24px} #menaria-harmonisee .lead{font-size:18px;line-height:1.7;max-width:660px;margin:27px auto;color:#526071} #menaria-harmonisee .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px} #menaria-harmonisee .action{display:inline-flex;align-items:center;gap:18px;padding:15px 24px;background:var(--slate);border:1px solid var(--slate);color:white;border-radius:9px;font:500 15px Outfit,sans-serif} #menaria-harmonisee .action.secondary{background:transparent;color:var(--slate);border-color:#BCC6D3} #menaria-harmonisee .under{position:relative;display:inline-block;white-space:nowrap} #menaria-harmonisee .under:after{content:'';position:absolute;left:0;right:0;bottom:-.06em;border-bottom:5px solid var(--peach);border-radius:50%;transform:rotate(-2deg);z-index:-1} #menaria-harmonisee .highlight{background:var(--peach);border-radius:.15em;padding:0 .12em} #menaria-harmonisee .wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--peach);opacity:.85;z-index:0} #menaria-harmonisee .wire path{fill:none;stroke:currentColor;stroke-width:2.5;vector-effect:non-scaling-stroke} #menaria-harmonisee .wire .plug{stroke:var(--slate);stroke-width:4} #menaria-harmonisee .sectors{font-size:12px;color:#667181;letter-spacing:.05em;margin-top:36px} #menaria-harmonisee .stats{background:#101722;color:#FBF9F5;padding:40px 5%} #menaria-harmonisee .stats-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;max-width:1050px;margin:auto} #menaria-harmonisee .stat .number{font-size:48px;line-height:1.2;color:var(--peach)} #menaria-harmonisee .stat p{font-size:14px;line-height:1.65;margin-top:9px;max-width:240px} #menaria-harmonisee .stats-source{display:block;font-size:10px;color:#C1CBDA;margin:24px auto 0;max-width:1050px;text-decoration:underline} #menaria-harmonisee .section{padding:86px 0} #menaria-harmonisee .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px} #menaria-harmonisee .section-head>p{max-width:370px;color:#526071;font-size:15px} #menaria-harmonisee .service-list{border-top:1px solid var(--line)} #menaria-harmonisee .service-row{display:grid;grid-template-columns:60px 1fr 1fr 30px;gap:26px;padding:30px 0;border-bottom:1px solid var(--line);align-items:center} #menaria-harmonisee .service-row .number{font-size:19px;color:var(--copper)} #menaria-harmonisee .service-row p{font-size:14px;color:#526071} #menaria-harmonisee .arrow{font-size:24px;font-family:Outfit,sans-serif} #menaria-harmonisee .method{background:#F1EDE5;border-radius:20px;padding:45px;display:grid;grid-template-columns:1fr 1.4fr;gap:65px} #menaria-harmonisee .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} #menaria-harmonisee .steps .number{font-size:30px;color:var(--copper);display:block;margin-bottom:12px} #menaria-harmonisee .steps h3{font-size:19px} #menaria-harmonisee .steps p{font-size:13px;color:#526071;margin-top:10px} #menaria-harmonisee .tools{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;font-family:Outfit,sans-serif;color:var(--slate);font-size:18px} #menaria-harmonisee .tools-label{text-align:center;font-size:12px;color:#526071;margin-bottom:18px} #menaria-harmonisee .contact{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;padding:76px 0} #menaria-harmonisee .contact p{margin:20px 0;color:#526071} #menaria-harmonisee .contact-box{padding:30px;border:1px solid var(--line);border-radius:14px;background:#fff} #menaria-harmonisee .contact-box strong{font:500 21px Outfit,sans-serif} #menaria-harmonisee .contact-box .action{margin-top:18px} #menaria-harmonisee footer{border-top:1px solid var(--line);padding:28px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#526071} #menaria-harmonisee .usage-hero{padding-bottom:65px} #menaria-harmonisee .usage-hero h1{font-size:clamp(40px,5.7vw,74px)} #menaria-harmonisee .avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} #menaria-harmonisee .avatar-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;display:flex;flex-direction:column} #menaria-harmonisee .portrait{background:#F2ECE2;overflow:hidden;position:relative} #menaria-harmonisee .portrait img{width:100%;height:250px;display:block;object-fit:cover;object-position:center 22%} #menaria-harmonisee .avatar-label{position:absolute;bottom:12px;left:12px;background:#FBF9F5ED;border:1px solid #D9D9D3;padding:4px 10px;border-radius:30px;font-size:10px;color:var(--slate)} #menaria-harmonisee .avatar-copy{padding:23px;flex:1;display:flex;flex-direction:column} #menaria-harmonisee .avatar-copy .name{font-size:12px;color:var(--copper);margin-bottom:9px} #menaria-harmonisee .avatar-copy h3{font-size:23px} #menaria-harmonisee .avatar-copy p{font-size:13px;color:#526071;margin:13px 0 18px} #menaria-harmonisee .avatar-copy button{border:0;background:transparent;color:var(--slate);text-align:left;padding:8px 0;margin-top:auto;font-weight:550} #menaria-harmonisee .example{background:#F1EDE5;border-radius:8px;padding:13px;margin-top:12px;font-size:12px;line-height:1.6} #menaria-harmonisee .example[hidden]{display:none} #menaria-harmonisee .connection{display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center;background:var(--mist);padding:65px;border-radius:24px} #menaria-harmonisee .connection p{color:#526071;margin-top:20px;font-size:15px} #menaria-harmonisee .checklist{padding:0;list-style:none;font-size:14px;margin-top:26px} #menaria-harmonisee .checklist li{padding:10px 0;border-bottom:1px solid #CFD7E0} #menaria-harmonisee .checklist li:before{content:'◆';font-size:8px;color:var(--copper);margin-right:12px} #menaria-harmonisee .devices{height:460px;position:relative;max-width:470px;width:100%;margin:auto} #menaria-harmonisee .phone{position:absolute;width:208px;height:404px;left:4%;top:35px;border:6px solid #26303F;outline:2px solid #A4ADBC;border-radius:34px;background:#FBF9F5;box-shadow:12px 20px 30px #33496517;z-index:2;overflow:hidden;padding:15px 12px} #menaria-harmonisee .island{height:14px;width:60px;background:#26303F;border-radius:20px;margin:-5px auto 17px} #menaria-harmonisee .phone-time{font-size:9px;position:absolute;left:14px;top:10px} #menaria-harmonisee .phone-head{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);padding-bottom:12px;font:500 13px Outfit,sans-serif} #menaria-harmonisee .phone-head img{width:29px;height:29px;border-radius:50%;object-fit:cover;object-position:top} #menaria-harmonisee .phone-head small{font-size:9px;display:block;color:#526071} #menaria-harmonisee .bubble{font-size:11px;line-height:1.6;padding:11px;border-radius:12px;background:white;border:1px solid #D9D9D3;margin-top:16px} #menaria-harmonisee .bubble.me{background:var(--slate);color:white;margin-left:15px;border:0} #menaria-harmonisee .phone-doc{background:#F1EDE5;border-radius:9px;padding:9px;margin-top:11px;font-size:10px} #menaria-harmonisee .phone-doc span{display:block;color:var(--copper);font-size:9px} #menaria-harmonisee .phone-send{border:0;background:var(--slate);color:white;width:100%;padding:9px;border-radius:8px;margin-top:12px;font-size:10px} #menaria-harmonisee .monitor{position:absolute;right:0;top:8px;width:225px;padding:8px;background:#334965;border-radius:12px;transform:rotate(3deg);box-shadow:8px 8px 20px #33496513} #menaria-harmonisee .monitor-screen{background:white;padding:16px;height:145px;border-radius:5px;font-size:10px} #menaria-harmonisee .monitor-screen strong{font:500 13px Outfit,sans-serif} #menaria-harmonisee .screen-lines{display:grid;gap:9px;margin-top:17px} #menaria-harmonisee .screen-lines i{height:9px;background:var(--mist);border-left:4px solid var(--peach);display:block} #menaria-harmonisee .screen-lines i:nth-child(2){width:80%} #menaria-harmonisee .monitor:after{content:'';display:block;width:65px;height:17px;background:#6C7F9D;position:absolute;bottom:-17px;left:80px;border-radius:0 0 4px 4px} #menaria-harmonisee .server{position:absolute;right:6%;bottom:22px;background:#FBF9F5;border:1px solid #BCC6D3;border-radius:10px;width:125px;padding:14px;transform:rotate(-3deg)} #menaria-harmonisee .server span{display:block;border:1px solid #BCC6D3;border-radius:3px;height:19px;margin-bottom:5px;position:relative;background:#EDF0F5} #menaria-harmonisee .server span:before{content:'';width:5px;height:5px;background:#9C5D24;position:absolute;right:8px;top:6px;border-radius:50%} #menaria-harmonisee .server small{display:block;font-size:9px;line-height:1.5;margin-top:8px;text-align:center;color:var(--slate)} #menaria-harmonisee .device-line{position:absolute;right:45px;top:190px;width:155px;height:160px;border-right:2px solid var(--peach);border-bottom:2px solid var(--peach);border-radius:0 0 30px 0} #menaria-harmonisee .connection .caption{font-size:10px;color:#526071;margin-top:15px} #menaria-harmonisee .usage-closing{text-align:center;padding:75px 15px} #menaria-harmonisee .usage-closing p{max-width:620px;margin:20px auto;color:#526071} #menaria-harmonisee .territory{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:25px} #menaria-harmonisee .territory span{border:1px solid var(--line);border-radius:30px;padding:6px 16px;font-size:12px} #menaria-harmonisee .route-label{display:none} #menaria-harmonisee .case-tabbar{display:none} #menaria-harmonisee .split-use{display:none} #menaria-harmonisee .fine-note{font-size:11px;color:#6C7F9D;text-align:center;margin-top:22px} /* 02 — formes accueillantes, blocs ouverts et portraits détourés par le cadrage */ #menaria-harmonisee .hero{margin:20px auto 0;width:96%;border-radius:35px;background:#F0EBE1;padding-top:85px} #menaria-harmonisee .under:after{display:none} #menaria-harmonisee .under{background:var(--sky);padding:0 .14em;border-radius:60px;transform:rotate(-2deg);color:var(--slate)} #menaria-harmonisee .highlight{border-radius:8px;display:inline-block;transform:rotate(1deg)} #menaria-harmonisee .wire{opacity:.35} #menaria-harmonisee .action{border-radius:40px} #menaria-harmonisee .stats{background:transparent;color:var(--ink);padding:50px 5%;border-bottom:1px solid var(--line)} #menaria-harmonisee .stat .number{color:var(--copper);font-size:58px} #menaria-harmonisee .stats-source{color:#526071} #menaria-harmonisee .service-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0} #menaria-harmonisee .service-row{display:block;border:0;padding:32px;background:#F1EDE5;border-radius:24px;position:relative} #menaria-harmonisee .service-row:nth-child(2){background:#EDF0F5} #menaria-harmonisee .service-row .number{display:block;margin-bottom:18px} #menaria-harmonisee .service-row p{margin-top:14px;max-width:330px} #menaria-harmonisee .service-row .arrow{position:absolute;right:25px;top:24px} #menaria-harmonisee .avatar-grid{grid-template-columns:1fr 1fr;gap:28px} #menaria-harmonisee .avatar-card{display:grid;grid-template-columns:42% 58%;border:0;background:#F1EDE5;border-radius:25px} #menaria-harmonisee .portrait{border-radius:120px 120px 20px 20px;margin:20px 0 20px 20px} #menaria-harmonisee .portrait img{height:100%;min-height:290px} #menaria-harmonisee .avatar-label{display:none} #menaria-harmonisee .connection{background:#F1EDE5;border-radius:40px} #menaria-harmonisee .connection h2 .under{background:var(--peach);transform:none} #menaria-harmonisee .phone{transform:rotate(-6deg)} /* 03 — parcours en ligne, peu de cadres, le câble devient une ponctuation */ #menaria-harmonisee[data-concept="3"] .hero{padding-top:115px;padding-bottom:105px} #menaria-harmonisee[data-concept="3"] .highlight{background:transparent;color:var(--copper)} #menaria-harmonisee[data-concept="3"] .under:after{border-color:var(--sky);border-bottom-width:8px} #menaria-harmonisee[data-concept="3"] .wire{opacity:1} #menaria-harmonisee[data-concept="3"] .stats{background:#EDF0F5;color:var(--ink)} #menaria-harmonisee[data-concept="3"] .stat .number{color:var(--slate)} #menaria-harmonisee[data-concept="3"] .stats-source{color:#526071} #menaria-harmonisee[data-concept="3"] .service-row{grid-template-columns:60px 1.1fr 1fr 30px} #menaria-harmonisee[data-concept="3"] .service-row .number{border:1px solid #EFB779;width:45px;height:45px;display:grid;place-items:center;border-radius:50%} #menaria-harmonisee[data-concept="3"] .method{background:transparent;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0} #menaria-harmonisee[data-concept="3"] .avatar-grid{display:flex;flex-direction:column;gap:0;position:relative} #menaria-harmonisee[data-concept="3"] .avatar-card{display:grid;grid-template-columns:230px 1fr;border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--line);padding:35px 0;position:relative} #menaria-harmonisee[data-concept="3"] .portrait{width:180px;height:180px;border-radius:50%;margin:auto} #menaria-harmonisee[data-concept="3"] .portrait img{height:200px} #menaria-harmonisee[data-concept="3"] .portrait .avatar-label{display:none} #menaria-harmonisee[data-concept="3"] .avatar-copy{display:grid;grid-template-columns:1fr 1fr;gap:8px 35px;align-content:center} #menaria-harmonisee[data-concept="3"] .avatar-copy .name{grid-column:1/-1;margin:0} #menaria-harmonisee[data-concept="3"] .avatar-copy h3{font-size:32px;grid-row:2/4} #menaria-harmonisee[data-concept="3"] .avatar-copy p{margin:0} #menaria-harmonisee[data-concept="3"] .avatar-copy button{margin:0} #menaria-harmonisee[data-concept="3"] .example{grid-column:1/-1} #menaria-harmonisee[data-concept="3"] .connection{background:transparent;border:1px solid var(--line);border-radius:15px} #menaria-harmonisee[data-concept="3"] .route-label{display:block;font:500 11px Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);border-bottom:1px solid var(--peach);padding-bottom:15px;margin-bottom:20px} /* 04 — contraste et grandes compositions, même identité */ #menaria-harmonisee[data-concept="4"] .hero{padding-top:90px;padding-bottom:75px} #menaria-harmonisee[data-concept="4"] .hero h1{font-size:clamp(44px,7.2vw,95px);font-weight:600} #menaria-harmonisee[data-concept="4"] .under:after{border-bottom:12px solid var(--sky);bottom:.02em;border-radius:0;transform:none} #menaria-harmonisee[data-concept="4"] .highlight{background:transparent;color:var(--copper)} #menaria-harmonisee[data-concept="4"] .service-list{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden} #menaria-harmonisee[data-concept="4"] .service-row{display:block;padding:35px;border:0;position:relative} #menaria-harmonisee[data-concept="4"] .service-row:nth-child(1),#menaria-harmonisee[data-concept="4"] .service-row:nth-child(4){background:#EDF0F5} #menaria-harmonisee[data-concept="4"] .service-row h3{margin:20px 0 13px} #menaria-harmonisee[data-concept="4"] .service-row .arrow{position:absolute;right:25px;top:30px} #menaria-harmonisee[data-concept="4"] .usage-hero{padding-bottom:40px} #menaria-harmonisee[data-concept="4"] .avatar-grid{grid-template-columns:repeat(2,1fr);gap:22px} #menaria-harmonisee[data-concept="4"] .avatar-card{position:relative;min-height:335px;padding-right:43%;border-radius:18px;background:#EDF0F5;border:0} #menaria-harmonisee[data-concept="4"] .portrait{position:absolute;right:0;top:0;bottom:0;width:43%} #menaria-harmonisee[data-concept="4"] .portrait img{height:100%;object-position:45% top} #menaria-harmonisee[data-concept="4"] .avatar-copy{padding:28px} #menaria-harmonisee[data-concept="4"] .avatar-copy h3{font-size:28px} #menaria-harmonisee[data-concept="4"] .avatar-label{display:none} #menaria-harmonisee[data-concept="4"] .connection{border-radius:0;background:#EDF0F5;padding:65px 45px;grid-template-columns:1.1fr 1fr} #menaria-harmonisee[data-concept="4"] .connection .devices{grid-column:1;grid-row:1} #menaria-harmonisee[data-concept="4"] .connection .connection-copy{grid-column:2} #menaria-harmonisee[data-concept="4"] .method{border-radius:0;background:#F1EDE5} @media(min-width:1400px){#menaria-harmonisee h1{font-size:86px}} @media(max-width:850px){#menaria-harmonisee .navlinks{gap:14px;font-size:12px}#menaria-harmonisee .navlinks .optional{display:none}#menaria-harmonisee .connection{padding:35px;gap:20px}#menaria-harmonisee .devices{transform:scale(.87);transform-origin:center}#menaria-harmonisee .avatar-grid{grid-template-columns:repeat(2,1fr)}#menaria-harmonisee .method{grid-template-columns:1fr;gap:30px}#menaria-harmonisee .section{padding:60px 0}#menaria-harmonisee .contact{gap:35px}#menaria-harmonisee .avatar-card{display:flex}#menaria-harmonisee .portrait{margin:18px 18px 0;height:230px}#menaria-harmonisee .portrait img{min-height:0}#menaria-harmonisee[data-concept="4"] .avatar-copy{padding:20px}#menaria-harmonisee[data-concept="4"] .avatar-copy h3{font-size:23px}} @media(max-width:600px){#menaria-harmonisee .wrap{width:90%}#menaria-harmonisee .navbar{gap:8px;padding:14px 17px;border-radius:25px;flex-wrap:wrap}#menaria-harmonisee .brand{font-size:21px}#menaria-harmonisee .nav-cta{padding:8px 12px;font-size:11px}#menaria-harmonisee .navlinks{order:3;width:100%;justify-content:center;margin-top:6px;font-size:12px}#menaria-harmonisee .hero,#menaria-harmonisee[data-concept] .hero{padding:60px 17px}#menaria-harmonisee h1,#menaria-harmonisee[data-concept="4"] .hero h1{font-size:43px}#menaria-harmonisee .lead{font-size:16px}#menaria-harmonisee .wire{opacity:.3}#menaria-harmonisee .sectors{font-size:10px}#menaria-harmonisee .actions{gap:9px}#menaria-harmonisee .action{padding:13px 17px;font-size:13px}#menaria-harmonisee .stats-inner{gap:25px;grid-template-columns:1fr}#menaria-harmonisee .stat{display:grid;grid-template-columns:90px 1fr;gap:18px}#menaria-harmonisee .stat p{margin:0}#menaria-harmonisee .section-head{display:block}#menaria-harmonisee .section-head>p{margin-top:20px}#menaria-harmonisee .service-row,#menaria-harmonisee[data-concept="3"] .service-row{grid-template-columns:35px 1fr 20px;gap:15px}#menaria-harmonisee .service-row p{grid-column:2;grid-row:2}#menaria-harmonisee .service-row .arrow{grid-column:3;grid-row:1}#menaria-harmonisee .method{padding:28px}#menaria-harmonisee .steps{grid-template-columns:1fr;gap:22px}#menaria-harmonisee .steps .number{float:left;margin-right:16px}#menaria-harmonisee .contact{grid-template-columns:1fr}#menaria-harmonisee .tools{gap:18px;font-size:15px}#menaria-harmonisee footer{flex-wrap:wrap}#menaria-harmonisee .avatar-grid,#menaria-harmonisee .avatar-grid,#menaria-harmonisee[data-concept="4"] .avatar-grid{grid-template-columns:1fr}#menaria-harmonisee .portrait img{height:300px;object-position:center 22%}#menaria-harmonisee .avatar-card{max-width:440px;width:100%;margin:auto}#menaria-harmonisee .connection,#menaria-harmonisee[data-concept="4"] .connection{display:flex;flex-direction:column;padding:32px 20px;gap:10px}#menaria-harmonisee .devices{height:450px;transform:scale(.85);margin:-18px auto;min-width:300px;max-width:360px}#menaria-harmonisee .phone{left:0}#menaria-harmonisee .monitor{width:190px;right:0}#menaria-harmonisee .server{right:0}#menaria-harmonisee .connection h2{font-size:35px}#menaria-harmonisee .service-list,#menaria-harmonisee[data-concept="4"] .service-list{grid-template-columns:1fr}#menaria-harmonisee[data-concept="3"] .avatar-card{grid-template-columns:95px 1fr;gap:15px;padding:25px 0}#menaria-harmonisee[data-concept="3"] .portrait{width:95px;height:110px;margin:0}#menaria-harmonisee[data-concept="3"] .portrait img{height:125px}#menaria-harmonisee[data-concept="3"] .avatar-copy{display:flex;padding:0;gap:7px}#menaria-harmonisee[data-concept="3"] .avatar-copy h3{font-size:25px}#menaria-harmonisee[data-concept="4"] .avatar-card{min-height:330px}#menaria-harmonisee[data-concept="4"] .portrait img{height:100%}#menaria-harmonisee .connection .under{white-space:normal}} @media(prefers-reduced-motion:reduce){#menaria-harmonisee *{transition:none!important;scroll-behavior:auto!important}} #menaria-harmonisee[data-concept] .connection{background:var(--mist);border-radius:24px} #menaria-harmonisee[data-concept] .phone{transform:none} #menaria-harmonisee[data-concept] .connection h2 .under{background:transparent;padding:0;transform:none;color:var(--ink);border-radius:0} #menaria-harmonisee[data-concept] .connection h2 .under:after{display:none} #menaria-harmonisee[data-concept] .usage-closing .under,#menaria-harmonisee[data-concept] .contact .under{background:transparent;padding:0;transform:none;color:inherit;border-radius:0;isolation:isolate} #menaria-harmonisee[data-concept] .usage-closing .under:after,#menaria-harmonisee[data-concept] .contact .under:after{display:block;border-bottom:5px solid var(--peach);border-radius:50%;transform:rotate(-2deg)} /* B — Galerie ouverte, composition asymétrique */ #menaria-harmonisee[data-concept="5"] .hero{background:transparent;text-align:left;max-width:1120px;width:90%;padding:85px 0 65px;margin:auto;border-radius:0} #menaria-harmonisee[data-concept="5"] .hero-content{max-width:none;display:grid;grid-template-columns:1.7fr 1fr;gap:20px 65px;align-items:end} #menaria-harmonisee[data-concept="5"] .hero .eyebrow{grid-column:1/-1;margin-bottom:0} #menaria-harmonisee[data-concept="5"] .hero h1{font-size:clamp(44px,5.3vw,68px);line-height:1.08} #menaria-harmonisee[data-concept="5"] .hero .lead{font-size:17px;margin:0 0 10px;padding:20px 0 20px 26px;border-left:3px solid var(--peach)} #menaria-harmonisee[data-concept="5"] .avatar-grid{grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;padding-top:20px} #menaria-harmonisee[data-concept="5"] .avatar-card{display:flex;flex-direction:column;background:transparent;border-radius:0;border:0;overflow:visible} #menaria-harmonisee[data-concept="5"] .avatar-card:nth-child(even){margin-top:55px} #menaria-harmonisee[data-concept="5"] .portrait{border-radius:150px 150px 20px 20px;height:290px;margin:0;background:#F1EDE5;overflow:hidden} #menaria-harmonisee[data-concept="5"] .portrait img{height:100%;min-height:0;object-position:center top} #menaria-harmonisee[data-concept="5"] .avatar-copy{padding:23px 5px 25px;border-bottom:1px solid var(--line)} #menaria-harmonisee[data-concept="5"] .avatar-copy h3{font-size:25px} #menaria-harmonisee[data-concept="5"] .avatar-copy p{min-height:105px} #menaria-harmonisee[data-concept="5"] .avatar-copy button{margin-top:20px} #menaria-harmonisee[data-concept="5"] .connection{grid-template-columns:1.1fr 1fr;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:65px 0;gap:65px} #menaria-harmonisee[data-concept="5"] .connection .devices{grid-column:1;grid-row:1;background:var(--mist);border-radius:44% 44% 18px 18px} #menaria-harmonisee[data-concept="5"] .connection-copy{grid-column:2} #menaria-harmonisee[data-concept="5"] .usage-closing{background:var(--slate);color:var(--paper);border-radius:28px;padding:65px 50px;margin-top:70px;text-align:left;display:grid;grid-template-columns:1.2fr 1fr;gap:18px 55px} #menaria-harmonisee[data-concept="5"] .usage-closing .eyebrow{color:var(--peach);grid-column:1/-1;margin:0} #menaria-harmonisee[data-concept="5"] .usage-closing h2{grid-column:1;grid-row:2/4} #menaria-harmonisee[data-concept="5"] .usage-closing p{color:#EAF0F7;margin:0} #menaria-harmonisee[data-concept="5"] .territory{justify-content:flex-start;margin:0} #menaria-harmonisee[data-concept="5"] .territory span{border-color:#738298} #menaria-harmonisee[data-concept="5"] .usage-closing .actions{grid-column:2;justify-content:flex-start;margin:0} #menaria-harmonisee[data-concept="5"] .usage-closing .action{background:var(--paper);color:var(--slate);border-color:var(--paper)} @media(max-width:850px){ #menaria-harmonisee[data-concept="5"] .hero-content{grid-template-columns:1fr;gap:25px} #menaria-harmonisee[data-concept="5"] .hero .lead{max-width:650px} #menaria-harmonisee[data-concept="5"] .avatar-grid{grid-template-columns:1fr 1fr;gap:32px} #menaria-harmonisee[data-concept="5"] .avatar-card:nth-child(even){margin-top:35px} #menaria-harmonisee[data-concept="5"] .connection{gap:25px;grid-template-columns:1fr 1fr} #menaria-harmonisee[data-concept="5"] .usage-closing{display:block;padding:40px} #menaria-harmonisee[data-concept="5"] .usage-closing>*+*{margin-top:24px} } @media(max-width:600px){ #menaria-harmonisee[data-concept] .hero h1{font-size:39px} #menaria-harmonisee[data-concept] .avatar-card{display:flex;flex-direction:column} #menaria-harmonisee[data-concept="2"] .portrait{height:300px;margin:18px 18px 0} #menaria-harmonisee[data-concept="5"] .hero{padding:55px 0 35px} #menaria-harmonisee[data-concept="5"] .avatar-grid{gap:30px;grid-template-columns:1fr} #menaria-harmonisee[data-concept="5"] .avatar-card{max-width:340px} #menaria-harmonisee[data-concept="5"] .avatar-card:nth-child(even){margin-top:0} #menaria-harmonisee[data-concept="5"] .portrait{height:340px} #menaria-harmonisee[data-concept="5"] .avatar-copy p{min-height:0} #menaria-harmonisee[data-concept="5"] .connection{display:flex;flex-direction:column;padding:35px 15px;gap:25px} #menaria-harmonisee[data-concept="5"] .usage-closing{padding:35px 23px} #menaria-harmonisee[data-concept] .under{white-space:normal} #menaria-harmonisee[data-concept] .devices{min-width:280px;max-width:300px;align-self:center} } #menaria-harmonisee[data-concept="2"] .avatar-grid{grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;padding-top:20px} #menaria-harmonisee[data-concept="2"] .avatar-card{display:flex;flex-direction:column;background:transparent;border-radius:0;border:0;overflow:visible} #menaria-harmonisee[data-concept="2"] .avatar-card:nth-child(even){margin-top:55px} #menaria-harmonisee[data-concept="2"] .portrait{border-radius:150px 150px 20px 20px;height:290px;margin:0;background:#F1EDE5;overflow:hidden} #menaria-harmonisee[data-concept="2"] .portrait img{height:100%;min-height:0;object-position:center top} #menaria-harmonisee[data-concept="2"] .avatar-copy{padding:23px 5px 25px;border-bottom:1px solid var(--line)} #menaria-harmonisee[data-concept="2"] .avatar-copy h3{font-size:25px} #menaria-harmonisee[data-concept="2"] .avatar-copy p{min-height:105px} #menaria-harmonisee[data-concept="2"] .avatar-copy button{margin-top:20px} @media(max-width:850px){ #menaria-harmonisee[data-concept="2"] .avatar-grid{grid-template-columns:1fr 1fr;gap:32px} #menaria-harmonisee[data-concept="2"] .avatar-card:nth-child(even){margin-top:35px} } @media(max-width:600px){ #menaria-harmonisee[data-concept="2"] .avatar-grid{gap:30px;grid-template-columns:1fr} #menaria-harmonisee[data-concept="2"] .avatar-card{max-width:340px} #menaria-harmonisee[data-concept="2"] .avatar-card:nth-child(even){margin-top:0} #menaria-harmonisee[data-concept="2"] .portrait{height:340px} #menaria-harmonisee[data-concept="2"] .avatar-copy p{min-height:0} } /* Harmonisation avec le PDF d’accueil fourni le 22 septembre. */ #menaria-harmonisee .navbar{background:#fff;color:var(--slate);border:1px solid #E1E4E8;box-shadow:0 5px 20px #26303F17} #menaria-harmonisee .brand-diamond{background:var(--slate)} #menaria-harmonisee .brand-diamond span{color:#fff} #menaria-harmonisee .nav-cta{background:var(--slate);color:#fff;border-radius:12px} #menaria-harmonisee .navlinks .current{border-color:var(--peach)} #menaria-harmonisee .nav-phone{border:1px solid #DFE5EC;padding:8px 12px;border-radius:25px;font-size:12px;white-space:nowrap} #menaria-harmonisee[data-concept] .hero .under,#menaria-harmonisee[data-concept] .connection h2 .under,#menaria-harmonisee[data-concept] .usage-closing .under,#menaria-harmonisee[data-concept] .contact .under{background:var(--peach);color:var(--ink);padding:.01em .16em .06em;border-radius:.6em;transform:none;box-decoration-break:clone;-webkit-box-decoration-break:clone} #menaria-harmonisee[data-concept] .usage-closing .under:after,#menaria-harmonisee[data-concept] .contact .under:after,#menaria-harmonisee[data-concept] .under:after{display:none} #menaria-harmonisee .eyebrow{color:var(--slate);letter-spacing:.1em} #menaria-harmonisee .checklist li:before{content:'';display:inline-block;width:10px;height:10px;min-width:10px;border:2px solid var(--peach);background:transparent;transform:rotate(45deg);border-radius:2px;margin-right:15px} #menaria-harmonisee .checklist li{align-items:center} #menaria-harmonisee .avatar-copy .name{color:var(--slate)} #menaria-harmonisee .avatar-copy button{align-self:flex-start;border-bottom:2px solid var(--peach);padding-bottom:5px} #menaria-harmonisee[data-concept] .action{border-radius:12px} #menaria-harmonisee footer{background:#fff;width:100%;padding-left:6%;padding-right:6%} #menaria-harmonisee .connection .caption{font-size:11px} @media(max-width:850px){#menaria-harmonisee .nav-phone{display:none}} /* ========================================================================== LE H1 REPREND L'APPARENCE DU SURTITRE, 22/09/2026 ⚠ Le socle SEO fige le h1 de cette page sur « Ce qu'on fait », alors que la maquette ouvrait sur « Moins de tâches répétitives ». La sortie est de rendre le h1 au surtitre que la maquette portait deja au meme endroit, et de passer son grand titre en h2. Le texte du surtitre est celui de la maquette, mot pour mot, avec la requete cible en tete. Sans cette regle, le h1 heritait d'une taille de 73 px et ecrasait le grand titre, ce qui inversait la hierarchie visuelle voulue. ⚠ Effet de bord utile : le saut de niveau h1 -> h3 de la maquette disparait, l'ordre est desormais h1, h2, quatre h3, puis trois h2. ========================================================================== */ /* ⚠ max-width:none est indispensable. style.css borne les h1 a une largeur de quinze caracteres, ce qui est juste pour un grand titre et absurde pour un surtitre : il se cassait en TROIS lignes de 176 px, aligne a gauche, au lieu de tenir sur une seule ligne centree comme dans la maquette. */ #menaria-harmonisee .hero-content h1.eyebrow{ font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#526071;margin:0 0 18px;line-height:1.5;display:block; max-width:none;text-align:center;width:100%} /* ========================================================================== GARDE CONTRE LES REGLES DU SITE, 23/09/2026 ⚠ Le cloisonnement sous #menaria-harmonisee empeche ce fichier de deborder sur les autres pages. Il n'empeche PAS l'inverse : style.css continue de s'appliquer ici pour toute propriete que la maquette ne declare pas. Deux contaminations mesurees en comparant la page a la maquette de reference, propriete par propriete : · .hero h1{max-width:24ch} de l'accueil cassait le surtitre en trois lignes · h2{max-width:20ch} du site bridait tous les titres de section a 657 px alors que la maquette les laisse libres Cette regle les neutralise. Elle est volontairement large : toute largeur maximale heritee du site est fausse ici, la maquette gere les siennes. ========================================================================== */ #menaria-harmonisee h1, #menaria-harmonisee h2, #menaria-harmonisee h3, #menaria-harmonisee p{max-width:none} /* le chapo du bloc creme garde la sienne, elle vient bien de la maquette */ #menaria-harmonisee .hero-content .lead{max-width:660px;margin-left:auto;margin-right:auto} /* ========================================================================== LE BLOC CREME NE PORTE PLUS QUE LE TITRE, 23/09/2026 Demande de Tristan : « pas de lien dans le header ni rien, juste ça, un titre ». Le surtitre « Ce qu'on fait · Quatre exemples pour commencer » est supprime, et le grand titre devient le h1 de la page. ⚠ TROIS CONSEQUENCES TRAITEES, aucune n'est cosmetique. 1. Le h1 etait le surtitre. En le supprimant, la page n'avait plus de h1 du tout. Le grand titre le devient. 2. La page serait alors passee de h1 directement aux h3 des quatre avatars, donc un saut de niveau. L'etiquette « 01. Choisissez une situation de travail », qui titre deja cette section, passe de span a h2 et comble le trou. Son apparence ne change pas. 3. Le fil d'Ariane sort du bloc creme et se pose au-dessus, sur le fond de page. Il ne pouvait pas disparaitre : le balisage BreadcrumbList de cette page doit correspondre a ce que le visiteur voit, sinon il ment. ⚠ Le h1 ne contient plus « Ce qu'on fait ». C'est acceptable ICI et nulle part ailleurs : le socle note cette page « sommaire, pas de requete propre ». Le title, lui, garde la formule complete. ========================================================================== */ #menaria-harmonisee .hero-content h1.grand-titre{ font-size:clamp(38px,4.6vw,72.96px);font-weight:700;letter-spacing:-.02em; line-height:1.06;color:#26303F;margin:0 0 22px;max-width:none;text-align:center; text-transform:none} /* l'etiquette devient un h2 sans changer d'allure */ #menaria-harmonisee h2.route-label{font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#526071;margin:0 0 18px;max-width:none;line-height:1.5} /* le fil d'Ariane, desormais hors du bloc creme */ .fil-hors{max-width:1120px;margin:0 auto;padding:var(--e5) 24px var(--e3); font-size:var(--t1);color:var(--gris)} .fil-hors a{color:var(--gris)} /* ⚠ TROISIEME CONTAMINATION, trouvee le 23/09 au moment ou le grand titre est devenu le h1 de la page. Deux regles ecrites pour le hero de l'accueil le 22/09 s'appliquaient ici, la page utilisant la meme classe .hero : · .hero h1 br{display:none} masquait le retour a la ligne du titre, qui s'affichait « repetitives.Plus de temps », colle · .hero h1{text-wrap:balance} recomposait les lignes par-dessus ce retour, et le titre tombait sur cinq lignes au lieu de deux La garde posee ce matin ne couvrait que les largeurs. Elle couvre maintenant ce qui gouverne la coupure des lignes. ⚠️ Toute nouvelle regle .hero de l'accueil devra etre verifiee ici. */ #menaria-harmonisee .hero h1 br, #menaria-harmonisee h1 br{display:inline} #menaria-harmonisee h1, #menaria-harmonisee h2{text-wrap:wrap} /* Exemples depliables des quatre assistants (23/09). Le p de la carte porte une marge et, en concept 2, une hauteur minimale, qu'il ne faut pas transmettre aux paragraphes de l'exemple. */ #menaria-harmonisee .avatar-copy .example p,#menaria-harmonisee[data-concept="2"] .avatar-copy .example p{font-size:12px;color:var(--ink,#1F2A37);margin:0;min-height:0} #menaria-harmonisee .example .ex-travail{margin:0 0 9px;padding-left:16px;list-style:disc} #menaria-harmonisee .example .ex-travail li{margin:2px 0} #menaria-harmonisee .example .ex-resultat{font-weight:550} /* Prenom et role des quatre assistants (24/09). Demande de Tristan, les mettre en valeur, le prenom plus gros et plus gras, le role surligne en bleu ciel. #D9EAF7 est EXACTEMENT le fond du bloc de chiffres de l'accueil, forme reprise de la pastille .surl-t des titres (rayon plein, .16em .5em). Contraste --encre sur #D9EAF7, 10,8. */ #menaria-harmonisee .avatar-copy .name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;color:var(--ink,#1F2A37);margin-bottom:12px} #menaria-harmonisee .avatar-copy .name .prenom{font-size:20px;font-weight:700;line-height:1.2} #menaria-harmonisee .avatar-copy .name .role{background:#D9EAF7;border-radius:99px;padding:.16em .6em;font-weight:600;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* Audit du 24/09. Trois corrections sans effet visible. 1. Les deux attributs style="" de la maquette etaient BLOQUES par la politique de securite (style-src 'self'), le navigateur les ignorait et le signalait en console. Ils sont RETIRES, pas convertis. Les appliquer aurait remonte les cartes de 71 px sur une page validee en ligne sans eux. L'affichage ne change donc pas. 2. Le h2 « 01. Choisissez une situation de travail » etait en display:none, masque par la maquette, donc absent pour un lecteur d'ecran, qui passait du h1 aux h3. Il reste invisible a l'ecran mais redevient lisible par les aides techniques. 3. « Source · page 3 » du telephone tenait 4,49 de contraste pour un minimum de 4,5. #8A4F1C tient 5,59 sur #F1EDE5. */ #menaria-harmonisee h2.route-label{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #menaria-harmonisee .phone-doc span{color:#8A4F1C} /* « Assistant IA » devant chaque prenom (24/09). Demande de Tristan : sans ce mot, Thomas, Claire, Camille et Gabriel se lisent comme de vrais personnages, « il faut dire que c'est des assistants IA ». Le type reste un cran sous le prenom, graisse 500, pour que le prenom domine. */ #menaria-harmonisee .avatar-copy .name .prenom .type{font-weight:500}