/* Theme Name: Empirys Theme URI: https://empirys.eu Description: Thème de blocs sur mesure pour empirys.eu. Les jetons du design system vivent dans theme.json, les composants dans style.css, les sections dans patterns/. Aucune dépendance à un thème parent, à un constructeur de pages ou à une police distante. Author: Empirys Author URI: https://empirys.eu Version: 1.0.0 Requires at least: 6.7 Tested up to: 6.8 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: empirys Tags: business, portfolio, block-patterns, full-site-editing, custom-colors, custom-logo, accessibility-ready */ /* ===================================================================== 1. ALIAS — les jetons de theme.json vers les noms courts du design system theme.json génère --wp--preset--color--brand ; le CSS des composants utilise --brand. Cet alias fait le pont, et c'est le SEUL endroit à modifier si un jeton change de nom. ===================================================================== */ :root{ --brand:var(--wp--preset--color--brand); --brand-600:var(--wp--preset--color--brand-600); --brand-700:var(--wp--preset--color--brand-700); --brand-50:var(--wp--preset--color--brand-50); --brand-100:var(--wp--preset--color--brand-100); --petrole:var(--wp--preset--color--petrole); --petrole-800:var(--wp--preset--color--petrole-800); --petrole-700:var(--wp--preset--color--petrole-700); --ink:var(--wp--preset--color--ink); --body:var(--wp--preset--color--body); --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --field-line:#828B9F; /* bordure des champs : 3,42 sur blanc, cf. 1.4.11 */ --line-2:var(--wp--preset--color--line-2); --surface:var(--wp--preset--color--surface); --surface-2:var(--wp--preset--color--surface-2); --surface-3:var(--wp--preset--color--surface-3); --ok:var(--wp--preset--color--ok); --font-h:var(--wp--preset--font-family--poppins); --font-b:var(--wp--preset--font-family--inter); --font-m:var(--wp--preset--font-family--plex-mono); --step--1:var(--wp--custom--step--minus-1, clamp(.82rem,.8rem + .1vw,.88rem)); --step-0:var(--wp--custom--step--0); --step-1:var(--wp--custom--step--1); --step-2:var(--wp--custom--step--2); --step-3:var(--wp--custom--step--3); --step-4:var(--wp--custom--step--4); --radius-s:var(--wp--custom--radius--s); --radius:var(--wp--custom--radius--base); --radius-l:var(--wp--custom--radius--l); --radius-xl:var(--wp--custom--radius--xl); --shadow-1:none; --shadow-2:none; --shadow-3:none; --hair:var(--wp--custom--hair); --maxw:var(--wp--custom--maxw); } /* ===================================================================== 2. COMPOSANTS ET MÉCANISMES — repris à l'identique de la maquette validée (généré depuis css.py, ne pas modifier ici). Ne pas réintroduire d'ombre portée, de dégradé, ni de rayon > 4 px. =====================================================================*/ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* WCAG 2.4.11 : la cible d'une ancre ne doit pas passer sous l'en-tete collant */ :target,[id]{scroll-margin-top:96px} @media (max-width:700px){:target,[id]{scroll-margin-top:82px}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{margin:0;-webkit-tap-highlight-color:rgba(229,50,22,.14);font-family:var(--font-b);font-size:var(--step-0);line-height:1.65;color:var(--body);background:var(--surface);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-h);color:var(--petrole);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em;font-weight:700} h1{font-size:var(--step-4);letter-spacing:-.03em} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)} p{margin:0 0 1em} a{color:var(--brand-600);text-decoration:none} a:hover{text-decoration:underline} img,svg{max-width:100%;height:auto;display:block} ul{margin:0 0 1em;padding-left:1.15em} strong{color:var(--ink);font-weight:650} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px} .progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;z-index:200;pointer-events:none} @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .progress{animation:pg linear both;animation-timeline:scroll(root block)} @keyframes pg{from{transform:scaleX(0)}to{transform:scaleX(1)}} } } .skip{position:absolute;left:-9999px;top:0;background:var(--petrole);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 8px 0} .skip:focus{left:0} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:max(clamp(1rem,4vw,2rem), env(safe-area-inset-left), env(safe-area-inset-right))} /* eHub Apps (FR #23, EN #46) — marge laterale renforcee sur la colonne de contenu. Le hero et ses sections partagent .wrap : on les decale ensemble pour garder l'alignement gauche. Scope a `main` pour ne pas toucher l'en-tete ni le pied, qui portent aussi .wrap. Decision Julien Muller, 03/09/2026. */ body.page-id-23 main .wrap, body.page-id-46 main .wrap{padding-inline:max(clamp(1.5rem,5.5vw,2.75rem), env(safe-area-inset-left), env(safe-area-inset-right))} /* eHub Apps — plus d'air entre le paragraphe du hero et les boutons d'appel a l'action (defaut 1.9rem, trop serre sous le grand sous-titre). */ body.page-id-23 .hero__cta, body.page-id-46 .hero__cta{margin-top:2.75rem} .sec{padding:clamp(3.5rem,7vw,6.5rem) 0} .sec--tight{padding:clamp(2.5rem,4vw,3.5rem) 0} .sec--alt{background:var(--surface-2)} .sec--dark{background:var(--petrole);color:#C9DFE6} .sec--dark h2,.sec--dark h3{color:#fff} .sec--dark strong{color:#fff} .eyebrow{display:flex;align-items:baseline;gap:.7rem;font-family:var(--font-m);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)} .eyebrow b{font-weight:500;color:var(--brand-600);font-variant-numeric:tabular-nums} .eyebrow b::after{content:"";display:inline-block;width:1.4rem;height:1px;background:var(--line);margin:0 0 .28em .6rem;vertical-align:middle} /* --brand (#E53216) donne 4,38 sur blanc, sous les 4,5 de WCAG AA 1.4.3. --brand-600 (#C9280F) donne 5,54 et passe. Mesuré le 21/08/2026 sur les 48 pages, à trois largeurs. Les 36 autres usages de --brand, sur 33 lignes, restent : ils sont décoratifs — filets, bordures, traits SVG, donc jugés à 3,0 par 1.4.11 — ou en grand texte (.stat__n em, ≥ 25,6 px, seuil 3,0), ou portés par une classe qui n'est rendue nulle part (.hero__kw, .tick, .chev). Ce n'est pas un changement de charte : trois emplacements de texte, pas la palette. */ .sig{font-family:var(--font-h);font-weight:700;font-size:clamp(1.05rem,1rem + .25vw,1.25rem);color:var(--brand-600);letter-spacing:-.01em;margin:0 0 .55rem} .values__t{font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-bottom:.7rem;border-bottom:1px solid var(--line)} .values{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:820px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.values{grid-template-columns:1fr}} .values li{padding:1.1rem 1.5rem 1.2rem 0;border-bottom:1px solid var(--line)} .values li+li{border-left:1px solid var(--line);padding-left:1.5rem} @media (max-width:820px){.values li:nth-child(odd){border-left:0;padding-left:0}} @media (max-width:520px){.values li{border-left:0!important;padding-left:0!important}} .values b{display:block;font-family:var(--font-h);font-size:1rem;color:var(--petrole);margin-bottom:.3rem} .values span{font-size:.9rem;color:var(--body);line-height:1.55} .sup-media{display:grid;gap:1.1rem} .ph{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface-3)} .ph img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;object-position:center 45%;display:block} .ph figcaption{font-family:var(--font-m);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.6rem .9rem;border-top:1px solid var(--line);background:#fff} .eyebrow--hero{border-bottom:0;padding-bottom:0;color:var(--petrole-700)} .eyebrow--hero::before{content:"";width:26px;height:2px;background:var(--brand);flex:none;margin-bottom:.32em} .sec--dark .eyebrow{color:#8FB8C4;border-bottom-color:rgba(255,255,255,.16)} .sec--dark .eyebrow b{color:#FF7A57} .sec--dark .eyebrow b::after{background:rgba(255,255,255,.2)} .lead{font-size:var(--step-1);color:var(--body);max-width:62ch} .sec-head{max-width:70ch;margin-bottom:clamp(2rem,4vw,3rem)} .sec-head--center{margin-left:auto;margin-right:auto;text-align:center} .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-h);font-weight:600;font-size:.94rem;padding:.9rem 1.45rem;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;text-decoration:none!important} .btn--primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600)} .btn--primary:hover{background:var(--brand-700);border-color:var(--brand-700)} .btn--ghost{background:transparent;color:var(--petrole);border-color:#C7CBD4} .btn--ghost:hover{border-color:var(--petrole);background:var(--surface-3)} .sec--dark .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .sec--dark .btn--ghost:hover{border-color:#fff} .btn--sm{padding:.62rem 1rem;font-size:.84rem} .arrow{transition:transform .16s ease} .btn:hover .arrow,.card__link:hover .arrow{transform:translateX(4px)} /* header */ .hdr{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line)} /* LE VERRE DEPOLI EST PORTE PAR UN PSEUDO-ELEMENT, ET C'EST LOAD-BEARING. « backdrop-filter » sur .hdr en faisait le BLOC CONTENEUR de tous ses descendants en position:fixed, au meme titre qu'un « transform ». Or le bloc Navigation du coeur rend son panneau mobile en position:fixed avec inset:0 : « 0 » y designait la boite de l'en-tete, pas la fenetre. Mesure du 26/08/2026 a 390 px, sur le rendu : panneau de 390 x 66 px au lieu de 390 x 844, offsetParent = header.hdr au lieu de la fenetre, scrollHeight 1023 pour clientHeight 66, et elementFromPoint au centre rendait « p.hero__sub ». Le menu s'ouvrait dans une bande de 66 px et le texte de la page restait devant. La barre .progress etait clouee pareil, sans que cela se voie : elle est a top:0 et l'en-tete aussi. Deplacer le fond ET le filtre sur ::before laisse .hdr sans aucune propriete qui cree un bloc conteneur. Le rendu est identique : compare au pixel sur les 85 positions de defilement de l'accueil, ecart maximal 1,1/255, sous le seuil de 6/255 que partModifiee() retient comme limite de perception. Ne pas remettre background ni backdrop-filter sur .hdr. Le critere 39 de tools/controle-navigateur.mjs echoue si on le fait. Document 47. */ .hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px)} /* ET LE RANG DU CALQUE, QUE LE CORRECTIF CI-DESSUS A REVELE. Le panneau du coeur porte z-index:100000, mais .hdr est un contexte d'empilement (position:sticky + z-index:100) : ces 100000 ne valent QU'A L'INTERIEUR de l'en-tete. Face au reste de la page, le panneau vaut 100. Tant qu'il ne faisait que 66 px de haut, cela ne se voyait pas. Plein ecran, il passe DERRIERE la barre d'actions mobile (.dock, 150), le lanceur de Nora (145) et la fleche de retour en haut (140) : mesure du 26/08/2026 a 390 px, « Devis / Appeler / Nora » restait pose sur le menu ouvert. Le coeur pose « has-modal-open » sur le temps de l'ouverture : on s'en sert pour hisser l'en-tete au-dessus des trois, et au-dessus du tiroir de Nora (160) par prudence. Le rang ne change QUE pendant l'ouverture. */ html.has-modal-open .hdr{z-index:170} .hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:74px} .logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-h);font-weight:700;font-size:1.4rem;color:var(--petrole);letter-spacing:-.03em} .logo:hover{text-decoration:none} .logo__mark{width:32px;height:32px;border-radius:3px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:1.15rem;font-weight:700;flex:none} .nav{margin-left:auto} .nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.1rem} .nav li{position:relative} .nav a,.nav__btn{font-family:var(--font-h);font-weight:550;font-size:.92rem;color:var(--petrole-700);padding:.55rem .7rem;border-radius:3px;display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;line-height:1.2;position:relative} .nav a:hover,.nav__btn:hover{text-decoration:none;color:var(--petrole)} .nav>ul>li>a::after,.nav__btn::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.2,.7,.3,1)} .nav>ul>li>a:hover::after,.nav__btn:hover::after,.has-sub:hover .nav__btn::after,.has-sub.open .nav__btn::after{transform:scaleX(1)} .nav [aria-current="page"]::after{transform:scaleX(1)} .chev{transition:transform .18s cubic-bezier(.2,.7,.3,1);margin-top:1px;color:var(--muted)} .nav .open>.nav__btn,.has-sub:hover .nav__btn{color:var(--petrole)} .nav .open .chev,.has-sub:hover .chev{transform:rotate(180deg);color:var(--brand)} /* le panneau commence a ras du bouton : plus de zone morte au survol. L'ecart visuel vient du padding-top, pas d'un decalage de position. */ .sub{position:absolute;top:100%;left:-.35rem;min-width:280px;padding:.5rem 0 0;z-index:120; opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .17s cubic-bezier(.2,.7,.3,1) .14s, transform .17s cubic-bezier(.2,.7,.3,1) .14s, visibility 0s linear .31s} .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition-delay:0s,0s,0s} .sub ul{list-style:none;margin:0;padding:.4rem;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:0 0 4px 4px;box-shadow:0 14px 34px rgba(11,42,51,.11)} .sub li{opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .16s ease} .has-sub:hover .sub li,.has-sub:focus-within .sub li,.has-sub.open .sub li{opacity:1;transform:none} .sub li:nth-child(2){transition-delay:.02s}.sub li:nth-child(3){transition-delay:.04s} .sub li:nth-child(4){transition-delay:.06s}.sub li:nth-child(5){transition-delay:.08s} .sub li:nth-child(6){transition-delay:.1s}.sub li:nth-child(7){transition-delay:.12s} .sub li:nth-child(8){transition-delay:.14s} .sub a{display:block;padding:.55rem .7rem;font-size:.9rem;font-weight:500;border-radius:3px;color:var(--petrole-700);position:relative} .sub a::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:2px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:transform .16s ease} .sub a:hover{background:var(--brand-50);color:var(--brand-700)} .sub a:hover::before{transform:scaleY(1)} .hdr__side{display:flex;align-items:center;gap:.75rem} .lang{display:flex;font-family:var(--font-m);font-size:.76rem;font-weight:500;letter-spacing:.06em;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff} .lang a{padding:.35rem .55rem;color:var(--muted)} .lang a:hover{text-decoration:none;color:var(--petrole)} .lang a[aria-current="true"]{background:var(--petrole);color:#fff} .lang a+a{border-left:1px solid var(--line)} .burger{display:none;background:#fff;border:1px solid var(--line);border-radius:3px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer} @media (max-width:1000px){ .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:.75rem clamp(1rem,4vw,2rem) 1.25rem;max-height:75vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .hdr.is-open .nav{display:block} .nav>ul{flex-direction:column;align-items:stretch;gap:0} .nav>ul>li{border-top:1px solid var(--line-2)} .nav a,.nav__btn{width:100%;justify-content:space-between;padding:.8rem .1rem} .sub{position:static;display:none;border:0;border-left:2px solid var(--brand);border-radius:0;box-shadow:none;min-width:0;margin:0 0 .5rem .1rem;padding:.1rem 0 .1rem .8rem} .has-sub:hover .sub{display:none} .has-sub.open .sub{display:block} .burger{display:flex} } @media (max-width:700px){.hdr__side .btn{display:none}.hdr__in{min-height:66px}.logo{font-size:1.2rem}} /* hero */ .hero{position:relative;background:var(--surface);border-bottom:1px solid var(--line); background-image:linear-gradient(to right,#F5F5F3 1px,transparent 1px); background-size:calc(100%/6) 100%} .hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem)} @media (max-width:980px){.hero__in{grid-template-columns:1fr;align-items:start}} .hero h1{margin-bottom:1rem} .hero__kw{color:var(--brand)} .hero__sub{font-size:var(--step-1);max-width:56ch;color:var(--body)} .hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.9rem 0 1.6rem} .hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--step--1);color:var(--muted)} .hero__meta span{display:inline-flex;align-items:center;gap:.4rem} .tick{color:var(--brand);flex:none} .proof{background:transparent;border:0;border-top:2px solid var(--petrole);padding:1.1rem 0 0} .proof__t{font-family:var(--font-m);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem} .proof__grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .proof__grid .stat{padding:.9rem 0 .9rem 1rem;border-left:1px solid var(--line);border-top:1px solid var(--line)} .proof__grid .stat:nth-child(odd){padding-left:0;border-left:0} .proof__grid .stat:nth-child(-n+2){border-top:0} .stat__n{font-family:var(--font-h);font-size:clamp(1.6rem,1.15rem + 1.3vw,2.15rem);font-weight:700;color:var(--petrole);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat__n em{font-style:normal;color:var(--brand)} .stat__l{font-size:.82rem;color:var(--muted);margin-top:.3rem;line-height:1.35} .proof__foot{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem} .chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:500;letter-spacing:.04em;font-family:var(--font-m);color:var(--petrole-700);background:transparent;border:1px solid #D4D7DE;padding:.32rem .55rem;border-radius:2px} /* answer card (GEO) */ .answer{border:0;border-left:2px solid var(--brand);border-radius:0;background:transparent;padding:.35rem clamp(1rem,2vw,1.5rem) .35rem clamp(1.1rem,2.5vw,1.9rem)} .answer p:last-child{margin-bottom:0} .answer h2{font-size:var(--step-2);margin-bottom:.5rem} .facts{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.92rem} .facts th,.facts td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--line);vertical-align:top} .facts th{font-family:var(--font-m);font-weight:500;font-size:.8rem;letter-spacing:.03em;color:var(--muted);width:34%;text-transform:uppercase} @media (max-width:620px){.facts,.facts tbody,.facts tr,.facts th,.facts td{display:block;width:auto} .facts tr{padding:.7rem 0;border-bottom:1px solid var(--line)} .facts th,.facts td{border:0;padding:0} .facts th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}} .facts tr:last-child th,.facts tr:last-child td{border-bottom:0} /* grids */ .grid{display:grid;gap:1.1rem} .grid--flush{gap:0} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:960px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(1.15rem,2.2vw,1.6rem);display:flex;flex-direction:column;transition:border-color .16s ease,background-color .16s ease} .card{position:relative} .card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)} .card:hover{border-color:var(--petrole)} .card:hover::before{transform:scaleX(1)} .card h3{margin-bottom:.5rem;font-size:var(--step-1)} .card p{font-size:.94rem;margin-bottom:1rem} .card__link{margin-top:auto;font-family:var(--font-h);font-weight:600;font-size:.88rem;color:var(--brand-600);display:inline-flex;align-items:center;gap:.35rem} .card__link:hover .arrow{transform:translateX(3px)} .ico{width:26px;height:26px;border-radius:0;background:transparent;color:var(--brand);display:grid;place-items:center;margin-bottom:.9rem;flex:none;border:0} .sec--dark .card{background:transparent;border-color:rgba(255,255,255,.18)} .sec--dark .card:hover{border-color:rgba(255,255,255,.5)} .sec--dark .card p{color:#B6D0D8} .sec--dark .ico{background:transparent;border:0;color:#FF7A57} /* numbered service rows */ .svc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem)} @media (max-width:820px){.svc{grid-template-columns:1fr}} .svc>li{border-top:1px solid var(--line);padding:1.4rem 0 1.5rem;position:relative} .svc>li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--brand);transition:width .24s cubic-bezier(.2,.7,.3,1);z-index:1} .svc>li:hover::after{width:72px} .svc>li:hover .svc__n{color:var(--brand-700)} .svc__n{font-family:var(--font-m);font-size:.74rem;font-weight:500;color:var(--brand-600);letter-spacing:.1em;display:block;margin-bottom:.5rem;font-variant-numeric:tabular-nums} .svc h3{margin:0 0 .45rem;font-size:var(--step-1)} .svc p{font-size:.94rem;margin:0 0 .7rem;max-width:46ch} .svc__sub{font-family:var(--font-m);font-size:.76rem;color:#5B6472;margin:0 0 .8rem;line-height:1.7} .svc__sub span::after{content:" · ";color:#B6BCC8} .svc__sub span:last-child::after{content:""} /* product rows */ .prod{display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:center;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.4rem 1rem} .prod:last-child{border-bottom:1px solid var(--line)} .prod{transition:background-color .18s ease,padding-left .18s ease} .prod:hover{background:var(--surface-2);padding-left:1.4rem} @media (max-width:720px){.prod{grid-template-columns:auto 1fr;gap:1rem}.prod>a.btn{grid-column:1/-1;justify-self:start}} .prod h3{margin:0 0 .25rem;font-size:var(--step-1)} .prod p{margin:0;font-size:.92rem} .prod .ico{margin:0} /* logos */ .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)} @media (max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}} .logos li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;place-items:center;padding:1.1rem .8rem;min-height:118px} .logos img{height:var(--lh,34px);width:auto;max-width:100%;object-fit:contain;font-family:var(--font-m);font-size:.7rem;color:#5A6478;filter:grayscale(1);opacity:.7;transition:filter .18s ease,opacity .18s ease} .logos li{transition:background-color .18s ease} .logos li:hover{background:var(--surface-2)} .logos li:hover img{filter:none;opacity:1} .logos figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* steps */ .steps{counter-reset:s;padding:0;margin:0;list-style:none;display:grid;gap:1.25rem;grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .steps li{counter-increment:s;position:relative;padding-top:2.6rem;border-top:1px solid var(--line)} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:.8rem;left:0;font-family:var(--font-m);font-weight:500;font-size:.78rem;letter-spacing:.1em;color:var(--brand-600)} .steps h3{font-size:1.02rem;margin-bottom:.35rem} .steps p{font-size:.9rem;margin:0} /* quote */ .quote{background-color:var(--petrole);background-image:none;color:#fff;border-radius:4px;padding:clamp(1.75rem,4vw,2.75rem);position:relative;overflow:hidden;border-top:3px solid var(--brand)} .quote blockquote{margin:0;font-family:var(--font-h);font-size:var(--step-2);line-height:1.35;letter-spacing:-.02em;position:relative;z-index:1} .quote figcaption{margin-top:1.75rem;font-family:var(--font-m);font-size:.78rem;letter-spacing:.04em;color:#8FB8C4;position:relative;z-index:1} .quote figcaption b{color:#fff;display:block;font-family:var(--font-h)} /* faq */ .faq{max-width:860px;margin:0 auto} .faq details{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;margin:0;overflow:hidden} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{transition:background-color .16s ease} .faq summary:hover{background:var(--surface-2)} .faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:1.2rem 3rem 1.2rem 1rem;font-family:var(--font-h);font-weight:600;color:var(--petrole);position:relative;font-size:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:1rem;top:50%;width:11px;height:11px;margin-top:-6px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .2s ease} .faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px} .faq .a{padding:0 3rem 1.5rem 1rem;font-size:.95rem;max-width:80ch} .faq .a p:last-child{margin-bottom:0} /* cta */ .cta{background:var(--brand-600);color:#fff;border-radius:4px;padding:clamp(1.75rem,4vw,3.25rem);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center} @media (max-width:820px){.cta{grid-template-columns:1fr}} .cta h2{color:#fff} .cta p{color:#FFEDE8} .cta .btn--primary{background:#fff;color:var(--brand-700);box-shadow:0 8px 24px rgba(0,0,0,.18)} .cta .btn--primary:hover{background:#FFF1EE} .cta .btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .cta__box{background:rgba(0,0,0,.16);border:0;border-left:2px solid rgba(255,255,255,.4);border-radius:0;padding:clamp(1.25rem,2.4vw,1.75rem)} .cta__box dl{margin:0;display:grid;gap:.9rem} .cta__box dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#FFD9D0;font-family:var(--font-m);font-weight:500} .cta__box dd{margin:.15rem 0 0;font-family:var(--font-h);font-weight:600;font-size:1.02rem;color:#fff} .cta__box dd a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)} /* L'anneau de focus global est var(--brand) = #E53216. Sur cette bande, dont le fond EST #C9280F, il rendait du rouge sur du rouge : rapport 1,27 pour 3,0 exige par WCAG 1.4.11, sur les 38 pages qui portent la bande. Quelqu'un qui navigue au clavier ne voyait pas ou il se trouvait au moment d'atteindre « Demander un devis » — un defaut d'accessibilite qui est aussi un defaut de conversion (document 28, priorite 4). Le blanc donne 5,54 sur #C9280F et davantage sur le #A9220D du .cta__box : une regle couvre les trois liens. Portee au .cta seul, et de specificite (0,2,0) contre (0,1,0) : l'ordre dans le fichier ne tranche pas, la specificite si. */ .cta :focus-visible{outline-color:#fff} /* footer */ .ftr{background:var(--petrole);color:#9FBCC4;padding:clamp(3rem,5vw,4.5rem) 0 2rem;font-size:.92rem} .ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem} @media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.ftr__grid{grid-template-columns:1fr}} .ftr h2,.ftr h3{color:#fff;font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.14)} .ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem} .ftr a{color:#9FBCC4} .ftr a:hover{color:#fff} .ftr .logo{color:#fff;margin-bottom:1rem} .ftr__bot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem} address{font-style:normal} .logo img{display:block;height:38px;width:auto} .logo--ftr img{height:34px} .reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:2.2rem 0 0;border-top:1px solid var(--line)} @media (max-width:820px){.reperes{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.reperes{grid-template-columns:1fr}} .reperes>div{padding:1.1rem 1.5rem 1.2rem 0;border-bottom:1px solid var(--line)} .reperes>div+div{border-left:1px solid var(--line);padding-left:1.5rem} @media (max-width:820px){.reperes>div:nth-child(odd){border-left:0;padding-left:0}} @media (min-width:821px){.reperes>div:nth-child(3n+1){border-left:0;padding-left:0}} @media (max-width:520px){.reperes>div{border-left:0!important;padding-left:0!important}} .reperes dt{font-family:var(--font-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem} .reperes dd{margin:0;font-size:.95rem;color:var(--ink);line-height:1.5} .band{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface-3)} .band img{width:100%;height:clamp(220px,26vw,380px);object-fit:cover;object-position:center 32%;background:var(--surface-3);font-family:var(--font-m);font-size:.78rem;color:var(--muted)} .band figcaption{font-family:var(--font-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.7rem clamp(1rem,4vw,2rem);border-top:1px solid var(--line);background:#fff} .prod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3rem)} .lux{flex:none;margin:0;text-align:right;border-right:2px solid var(--brand);padding-right:.9rem} .lux span{display:block;font-family:var(--font-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .lux b{display:block;font-family:var(--font-h);font-weight:700;font-size:clamp(1rem,1.6vw,1.35rem);color:var(--petrole);letter-spacing:-.02em} @media (max-width:720px){.lux{text-align:left;border-right:0;border-left:2px solid var(--brand);padding:0 0 0 .9rem}} @media (max-width:720px){.prod-head{flex-direction:column;gap:1.25rem}} .byline{display:flex;align-items:center;gap:.9rem} .mono-av{width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--font-m);font-size:.82rem;letter-spacing:.06em;color:#fff} .byline span{display:block} .mission{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mission__q{font-family:var(--font-h);font-weight:600;font-size:clamp(1.3rem,1rem + 1.6vw,2.15rem);line-height:1.28;letter-spacing:-.025em;color:var(--petrole);max-width:34ch;margin:0 0 1.1rem;text-wrap:balance} .mission__s{font-family:var(--font-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ /* on n'anime que les sections situees sous la ligne de flottaison : jamais le hero ni le bloc « En bref », qui seraient a demi transparents a l'arrivee */ /* Deplacement seul, sans fondu. Un fondu depuis opacity:0 rend le contenu invisible tant que la section n'est pas entree : mauvais pour l'indexation, et une capture pleine page ressort avec des blocs blancs. */ main>section:nth-of-type(n+3)>.wrap>*{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%} @keyframes rise{from{transform:translateY(14px)}to{transform:none}} } } /* --- LinkedIn --- */ .social{margin:0} .social__a{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:4px;color:#A9C4CC;transition:color .16s ease,border-color .16s ease,background-color .16s ease} .social__a:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)} /* --- barre d'actions mobile --- */ .dock{display:none} @media (max-width:700px){ body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))} .dock{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:150; padding:.5rem clamp(.75rem,3vw,1rem) calc(.5rem + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-top:1px solid var(--line)} .dock .btn{flex:1;justify-content:center;min-height:46px;font-size:.92rem;white-space:nowrap;padding-left:.6rem;padding-right:.6rem} .dock .btn--ghost{background:#fff} /* « .ftr a » (0,1,1) ligne 327 et « .ftr a:hover » (0,2,1) ligne 328 battent « .btn--primary » et « .btn--ghost » (0,1,0) des lignes 127-129 : la barre vit dans la partie « pied de page ». Même piège que « a.totop ». Mesuré sur le rendu, à 375 px, avant correctif : Devis au repos #9FBCC4 sur #C9280F 2,38 (4,5 exigé) Appeler au repos #9FBCC4 sur #FFFFFF 2,33 Appeler au survol #FFFFFF sur #FFFFFF 1 — le texte disparaissait On porte « a » et le contexte « .dock » : (0,2,1), à égalité avec « .ftr a:hover », et la règle est ici, après la ligne 328, donc elle tranche. Volontairement sans « :hover » : la couleur ne change pas d'état, seul le fond le fait. Qualifier en « a.btn--primary » seul ne suffirait pas — (0,1,1) à égalité avec « .ftr a », mais placé AVANT elle. */ .dock a.btn--primary{color:#fff} .dock a.btn--ghost{color:var(--petrole)} /* la barre ne monte qu'apres le premier ecran : pas de doublon avec le CTA du hero */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .dock{animation:dock steps(2,jump-none) both;animation-timeline:scroll(root block);animation-range:0 520px} @keyframes dock{from{transform:translateY(105%)}to{transform:none}} } } } @media (prefers-reduced-motion:reduce){.social__a{transition:none}} /* --- cibles tactiles --- */ @media (max-width:700px){ .lang a{padding:.72rem .85rem} .logo img{height:34px} .btn--sm{padding:.8rem 1.1rem;font-size:.9rem;min-height:44px} .card__link{display:inline-flex;align-items:center;min-height:44px} .ftr ul{gap:0} .ftr ul a{display:flex;align-items:center;min-height:44px} .ftr address a{display:inline-flex;align-items:center;min-height:40px} .ftr__bot a{display:inline-flex;align-items:center;min-height:40px} .cta__box dd a{display:inline-flex;align-items:center;min-height:40px} .facts a{display:inline-flex;align-items:center;min-height:40px} } /* --- impression --- */ @media print{ *,*::before,*::after{animation:none!important;transform:none!important;opacity:1!important} .hdr,.dock,.progress,.skip,.cta,.btn,.nav,.lang{display:none!important} body{color:#000;background:#fff;font-size:11pt} .sec{padding:.8rem 0;break-inside:avoid} .sec--dark,.quote{background:#fff!important;color:#000!important} .sec--dark h2,.sec--dark h3,.quote blockquote{color:#000!important} .sec--dark .card p,.quote figcaption{color:#333!important} .card,.answer,.prod,.svc>li{border-color:#bbb!important} .logos img{filter:none;opacity:1} a[href^="http"]::after,a[href^="/"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} .faq details{break-inside:avoid} .faq .a{display:block!important} .ftr{background:#fff!important;color:#000!important;border-top:1px solid #bbb} .ftr a,.ftr h3{color:#000!important} } .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ===================================================================== 3. PONTS ÉDITEUR — du DOM des blocs vers les composants ci-dessus ------------------------------------------------------------------- Règle de lecture : au-dessus de cette ligne, la maquette validée, inchangée. En dessous, uniquement de l'adaptation WordPress. Si un composant se dérègle après une mise à jour de WordPress, c'est ici qu'il faut regarder, pas plus haut. ===================================================================== */ /* --- 3.1 Neutralisation des réflexes de WordPress ------------------- */ .wp-site-blocks{overflow-x:clip} .wp-site-blocks>*{margin-block-start:0;margin-block-end:0} .entry-content>*{margin-block:0} .wp-block-group.sec{padding-block:clamp(3.5rem,7vw,6.5rem)} .wp-block-group.sec--tight{padding-block:clamp(2.5rem,4vw,3.5rem)} /* Le lien d'évitement de WordPress prend l'apparence de celui de la maquette. */ .skip-link.screen-reader-text{position:absolute;left:-9999px;top:0;width:auto;height:auto; background:var(--petrole);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 8px 0; font-family:var(--font-h);font-weight:600;font-size:.94rem;clip:auto;clip-path:none;text-decoration:none} .skip-link.screen-reader-text:focus{left:0} /* --- 3.2 Compteurs : la numérotation n'est plus écrite dans le contenu. Un éditeur qui déplace ou supprime une section n'a rien à renuméroter. */ body{counter-reset:sec} .eyebrow{counter-increment:sec} .eyebrow::before{content:counter(sec,decimal-leading-zero);font-weight:500;color:var(--brand-600); font-variant-numeric:tabular-nums;padding-right:2rem;flex:none; background:linear-gradient(var(--line),var(--line)) no-repeat right center/1.4rem 1px} .sec--dark .eyebrow::before{color:#FF7A57;background-image:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2))} /* --- 3.3 Boutons du cœur de WordPress = .btn de la maquette --------- */ .wp-block-button__link{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-h); font-weight:600;font-size:.94rem;padding:.9rem 1.45rem;border-radius:4px;border:1px solid transparent; cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease; text-decoration:none!important;background:var(--brand-600);color:#fff;border-color:var(--brand-600)} .wp-block-button__link:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff} .wp-block-button__link::after{content:"";width:16px;height:16px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .16s ease} .wp-block-button__link:hover::after{transform:translateX(4px)} .wp-block-button.no-arrow .wp-block-button__link::after{display:none} .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-fantome .wp-block-button__link{background:transparent;color:var(--petrole);border-color:#C7CBD4} .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-fantome .wp-block-button__link:hover{border-color:var(--petrole);background:var(--surface-3);color:var(--petrole)} .wp-block-button.compacte .wp-block-button__link{padding:.62rem 1rem;font-size:.84rem} .sec--dark .wp-block-button.is-style-fantome .wp-block-button__link, .sec--dark .wp-block-button.is-style-outline .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.35)} .sec--dark .wp-block-button.is-style-fantome .wp-block-button__link:hover{border-color:#fff} .cta .wp-block-button:not(.is-style-outline):not(.is-style-fantome) .wp-block-button__link{background:#fff;color:var(--brand-700);border-color:#fff} .cta .wp-block-button:not(.is-style-outline):not(.is-style-fantome) .wp-block-button__link:hover{background:#FFF1EE} .cta .wp-block-button.is-style-fantome .wp-block-button__link, .cta .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin:0} /* --- 3.4 Titres : WordPress ajoute .wp-block-heading, rien de plus --- */ .wp-block-heading{margin:0 0 .6em} .sec-head .wp-block-heading{margin-bottom:.6em} /* --- 3.5 Logo du site et logo du pied de page ---------------------- */ .wp-block-site-logo{line-height:0} .wp-block-site-logo a{display:inline-block} .wp-block-site-logo img{height:38px;width:auto;max-width:none} @media (max-width:700px){.wp-block-site-logo img{height:34px}} .logo--ftr img{height:34px;width:auto} .logo--ftr{display:inline-block;margin-bottom:1rem;line-height:0} .logo--ftr figcaption{display:none} /* --- 3.6 Navigation : bloc « Navigation » de WordPress ------------- Le menu reste géré dans Apparence → Éditeur → Navigation. On ne reproduit pas le balisage à la main : on l'habille. */ .nav{margin-left:auto} .nav .wp-block-navigation__container{gap:.1rem} .nav .wp-block-navigation-item__content{font-family:var(--font-h);font-weight:550;font-size:.92rem; color:var(--petrole-700);padding:.55rem .7rem;border-radius:3px;line-height:1.2;position:relative;text-decoration:none} .nav .wp-block-navigation-item__content:hover{color:var(--petrole);text-decoration:none} .nav>.wp-block-navigation__responsive-container .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content::after{ content:"";position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:2px;background:var(--brand); transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.2,.7,.3,1)} .nav .wp-block-navigation__container>.wp-block-navigation-item:hover>.wp-block-navigation-item__content::after, .nav .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content[aria-current="page"]::after{transform:scaleX(1)} .nav .wp-block-navigation__submenu-icon{color:var(--muted);transition:transform .18s cubic-bezier(.2,.7,.3,1);padding:0 0 0 .1rem} .nav .has-child:hover>.wp-block-navigation-item__content>.wp-block-navigation__submenu-icon, .nav .has-child:focus-within>.wp-block-navigation-item__content>.wp-block-navigation__submenu-icon{transform:rotate(180deg);color:var(--brand)} .nav .wp-block-navigation__submenu-container{background:#fff;border:1px solid var(--line); border-radius:6px;box-shadow:0 14px 34px rgba(11,42,51,.11); padding:.4rem;min-width:280px;left:-.35rem} .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:block;padding:.55rem .7rem; font-size:.9rem;font-weight:500;border-radius:3px} .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before{content:"";position:absolute; left:0;top:.55rem;bottom:.55rem;width:2px;background:var(--brand);transform:scaleY(0);transform-origin:top; transition:transform .16s ease} .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{background:var(--brand-50);color:var(--brand-700)} .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before{transform:scaleY(1)} /* Bouton hamburger : l'apparence de .burger de la maquette. */ .nav .wp-block-navigation__responsive-container-open{background:#fff;border:1px solid var(--line); border-radius:3px;width:42px;height:42px;align-items:center;justify-content:center;color:var(--petrole)} .nav .wp-block-navigation__responsive-container-close{color:var(--petrole)} .nav .wp-block-navigation__responsive-container.is-menu-open{background:#fff;padding:clamp(1.25rem,4vw,2.25rem)} /* L'apparence du panneau ouvert est en SECTION 3.34, pas ici. Deux règles se trouvaient à cet endroit ; celle qui aplatissait le sous-menu pesait (0,4,0), à égalité avec la section 3.16 qui vient après, donc elle ne s'appliquait pas : le menu mobile portait l'ombre du menu déroulant de bureau. Ne pas les réécrire ici, elles y reperdraient la même bataille. */ /* La bascule vers le hamburger se fait à 1000 px, pas à 600 px : cinq entrées de menu en Poppins 0.92rem ne tiennent pas en dessous. */ @media (max-width:1000px){ .nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex} .nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none} } @media (max-width:700px){.hdr__side .wp-block-buttons{display:none}} /* L'appel à l'action de l'en-tête ne doit jamais passer sur deux lignes : le bloc bouton du cœur pose word-break:break-word, qui le casse. */ .hdr__side{flex:none} .hdr__side .wp-block-button__link{white-space:nowrap;word-break:normal} /* --- 3.7 Sélecteur de langue --------------------------------------- */ .lang{list-style:none;padding:0;margin:0} .lang li{display:contents} /* --- 3.8 Listes à puce cochée et pastilles ------------------------- */ .hero__meta,.checks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem; font-size:var(--step--1);color:var(--muted)} .checks{flex-direction:column;gap:.5rem;font-size:var(--step-0);color:var(--body)} .hero__meta li,.checks li{display:flex;align-items:flex-start;gap:.4rem} .hero__meta li::before,.checks li::before{content:"";width:17px;height:17px;flex:none;margin-top:.28em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E53216' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat} .chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem} .chips li{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:500;letter-spacing:.04em; font-family:var(--font-m);color:var(--petrole-700);background:transparent;border:1px solid #D4D7DE; padding:.32rem .55rem;border-radius:2px} /* --- 3.9 Services : la numérotation vient d'un compteur ------------- */ .svc{counter-reset:svc;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem)} @media (max-width:820px){.svc{grid-template-columns:1fr}} .svc__i{counter-increment:svc;border-top:1px solid var(--line);padding:1.4rem 0 1.5rem;position:relative} .svc__i::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--brand); transition:width .24s cubic-bezier(.2,.7,.3,1);z-index:1} .svc__i:hover::after{width:72px} .svc__i::before{content:counter(svc,decimal-leading-zero);font-family:var(--font-m);font-size:.74rem; font-weight:500;color:var(--brand-600);letter-spacing:.1em;display:block;margin-bottom:.5rem; font-variant-numeric:tabular-nums;transition:color .18s ease} .svc__i:hover::before{color:var(--brand-700)} .svc__i .wp-block-heading{margin:0 0 .45rem;font-size:var(--step-1)} .svc__i p{font-size:.94rem;margin:0 0 .7rem;max-width:46ch} .svc__i .svc__sub{font-family:var(--font-m);font-size:.76rem;color:#5B6472;margin:0 0 .8rem;line-height:1.7} .svc__i .card__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto} .card__link::after{content:"";width:16px;height:16px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .16s ease} .card__link:hover{text-decoration:none} .card__link:hover::after{transform:translateX(3px)} /* --- 3.10 Étapes, valeurs, repères, stats : mêmes grilles, DOM blocs - */ .steps{counter-reset:s;display:grid;gap:1.25rem;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:0} @media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .steps__i{counter-increment:s;position:relative;padding-top:2.6rem;border-top:1px solid var(--line)} .steps__i::before{content:counter(s,decimal-leading-zero);position:absolute;top:.8rem;left:0; font-family:var(--font-m);font-weight:500;font-size:.78rem;letter-spacing:.1em;color:var(--brand-600)} .steps__i .wp-block-heading{font-size:1.02rem;margin-bottom:.35rem} .steps__i p{font-size:.9rem;margin:0} .values__i{padding:1.1rem 1.5rem 1.2rem 0;border-bottom:1px solid var(--line)} .values__i+.values__i{border-left:1px solid var(--line);padding-left:1.5rem} @media (max-width:820px){.values__i:nth-child(odd){border-left:0;padding-left:0}} @media (max-width:520px){.values__i{border-left:0!important;padding-left:0!important}} .values__k{font-family:var(--font-h);font-weight:600;font-size:1rem;color:var(--petrole);margin:0 0 .3rem} .values__v{font-size:.9rem;color:var(--body);line-height:1.55;margin:0} .reperes__k{font-family:var(--font-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0 0 .35rem} .reperes__v{margin:0;font-size:.95rem;color:var(--ink);line-height:1.5} .stat__n,.stat__l{margin:0} .stat__l{margin-top:.3rem} .ctab__k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#FFD9D0; font-family:var(--font-m);font-weight:500;margin:0} .ctab__v{margin:.15rem 0 0;font-family:var(--font-h);font-weight:600;font-size:1.02rem;color:#fff} .ctab__v a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)} .ctab__i+.ctab__i{margin-top:.9rem} /* --- 3.11 Produits et logos ---------------------------------------- */ .prod>.wp-block-buttons{margin:0} @media (max-width:720px){.prod>.wp-block-buttons{grid-column:1/-1;justify-self:start}} .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line)} @media (max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}} .logos__i{border-right:1px solid var(--line);border-bottom:1px solid var(--line); display:grid;place-items:center;padding:1.1rem .8rem;min-height:118px;transition:background-color .18s ease} .logos__i:hover{background:var(--surface-2)} .logos__i img{height:var(--lh,34px);width:auto;max-width:100%;object-fit:contain;font-family:var(--font-m); font-size:.7rem;color:#5A6478;filter:grayscale(1);opacity:.7;transition:filter .18s ease,opacity .18s ease} /* Les bandes de MARQUES ne sont pas le mur de logos CLIENTS. Le mur de l'accueil est une texture : 18 logos desatures a 70 %, qui se lisent en masse et ne demandent pas a etre reconnus un par un. Une bande « technologies » a le travail inverse — chaque marque doit se reconnaitre, sinon elle ne dit rien. Mesure du 31/08/2026 sur le rendu de /certifications-partenaires/ : encre a 126/255 sur un fond a 249, soit 3,86:1 — la moitie du contraste du texte courant (7,5:1) — et 0,9 % de la bande encree. Julien Muller : « je vois pas les icones ». Il avait raison, et c'etait mesurable. L'opacite passe a 1 ; le gris RESTE. Deux raisons : la page garde sa discipline de couleur, et le survol conserve sa raison d'etre — il revele la couleur de la marque. Le mur de clients, lui, n'est pas touche. */ .logos--marques .logos__i img{opacity:1;filter:grayscale(1) brightness(var(--ink,1))} /* --ink : NORMALISATION DU POIDS D'ENCRE, le pendant de --lh. --lh egalise l'AIRE que chaque logo occupe ; --ink egalise sa DENSITE. grayscale() conserve la clarte d'origine : un logo dessine en gris moyen reste gris, un logo noir reste noir. Mesure du 31/08/2026 sur les 14 fichiers, luminance moyenne des pixels encres : de 30 (MongoDB) a 135 (Cisco), soit 4,5:1 d'ecart dans une meme bande. A l'oeil, la moitie des marques disparaissait a cote de l'autre. Le facteur est calcule dans tools/ajouter-logos-technologies.py, borne entre 0,45 et 1,6 : au-dela on lave un logo noir ou on empate un logo clair. Il ne touche que l'encre — les 14 fichiers ont un canal alpha, verifie, donc la cellule reste au fond de la page. */ .logos__i:hover img{filter:none;opacity:1} .logos__i figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* --- 3.12 FAQ : bloc « Détails » de WordPress ----------------------- */ .faq .wp-block-details{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent; margin:0;overflow:hidden;padding:0} .faq .wp-block-details:last-of-type{border-bottom:1px solid var(--line)} .faq .wp-block-details summary{cursor:pointer;list-style:none;padding:1.2rem 3rem 1.2rem 1rem; font-family:var(--font-h);font-weight:600;color:var(--petrole);position:relative;font-size:1rem; transition:background-color .16s ease} .faq .wp-block-details summary:hover{background:var(--surface-2)} .faq .wp-block-details summary::-webkit-details-marker{display:none} .faq .wp-block-details summary::marker{content:""} .faq .wp-block-details summary::after{content:"";position:absolute;right:1rem;top:50%;width:11px;height:11px; margin-top:-6px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand); transform:rotate(45deg);transition:transform .2s ease} .faq .wp-block-details[open] summary::after{transform:rotate(225deg);margin-top:-2px} .faq .wp-block-details>*:not(summary){padding:0 3rem 0 1rem;font-size:.95rem;max-width:80ch} .faq .wp-block-details>*:last-child:not(summary){padding-bottom:1.5rem} /* --- 3.13 Citation ------------------------------------------------- */ .quote .wp-block-quote{border:0;margin:0;padding:0;font-style:normal} .quote blockquote p{margin:0;font-family:var(--font-h);font-size:var(--step-2);line-height:1.35; letter-spacing:-.02em;color:#fff} .quote .byline{margin-top:1.75rem;font-family:var(--font-m);font-size:.78rem;letter-spacing:.04em;color:#8FB8C4} .quote .byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none} .quote .byline p{margin:0} .quote .byline__n{color:#fff;font-family:var(--font-h);font-weight:600} .quote .wp-block-image{margin:0;line-height:0} /* --- 3.14 Éditeur : ce qui n'a de sens que dans l'écran d'édition --- */ .editor-styles-wrapper .hdr{position:static} .editor-styles-wrapper .dock,.editor-styles-wrapper .progress{display:none} .editor-styles-wrapper .wp-site-blocks{overflow-x:visible} /* --- 3.15 Compléments : variantes et détails de la maquette --------- */ /* L'exergue du héros garde le tiret rouge, pas de numéro de section. */ .eyebrow--hero{counter-increment:none} .eyebrow--hero::before{content:"";width:26px;height:2px;background:var(--brand);background-image:none; flex:none;margin-bottom:.32em;padding:0} /* Exergue à l'intérieur d'une carte : c'est une étiquette, pas une section. Sans cette variante, le compteur de sections s'incrémente une fois par carte et affiche « 02 CEO ». */ .card .eyebrow{counter-increment:none;color:var(--brand-600);letter-spacing:.14em; margin-bottom:.6rem;padding-bottom:.55rem} .card .eyebrow::before{content:none;display:none} /* Variante « lien fléché » : un bouton qui a l'apparence d'un lien. */ .wp-block-button.is-style-lien .wp-block-button__link{background:transparent;border:0;padding:0; color:var(--brand-600);font-size:.88rem;font-weight:600} .wp-block-button.is-style-lien .wp-block-button__link:hover{background:transparent;color:var(--brand-700); text-decoration:none!important} .sec--dark .wp-block-button.is-style-lien .wp-block-button__link{color:#FF9C80} /* Titres : battre les styles globaux de theme.json, qui ciblent :root :where(h3). */ h3.values__t{font-family:var(--font-m);font-weight:500;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-bottom:.7rem; border-bottom:1px solid var(--line)} h3.sect__t{margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;font-size:var(--step-1)} /* Réglages ponctuels qui étaient des attributs style= dans la maquette. */ .sec-head--flush{margin-bottom:0} .sec--dark .lead{color:#B6D0D8} .grid--center{gap:clamp(1.5rem,4vw,3rem);align-items:center} .logos{list-style:none;padding:0;margin:0} .cta__box .proof__t{color:#FFD3C7;margin-bottom:1rem} .support__cta{margin-top:1.25rem} .byline__txt p{margin:0} .prod__txt{min-width:0} .prod__txt p{margin:0;font-size:.92rem} .prod__txt .wp-block-heading{margin:0 0 .25rem;font-size:var(--step-1)} .hero__col{min-width:0} /* --- 3.21 Héros de page intérieure --------------------------------- Le héros de l'accueil est une grille 7/4 : le second bloc n'existe pas sur une page intérieure, la grille repasse donc sur une colonne et le texte garde une largeur de lecture. */ .hero__in--solo{grid-template-columns:minmax(0,1fr);align-items:start; padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,3vw,2.5rem)} .hero__in--solo .wp-block-heading{max-width:34ch} .hero__in--solo .hero__sub{max-width:62ch;margin-bottom:0} .hero__in--solo .eyebrow--hero{margin-bottom:.9rem} /* Le bloc de réponse d'une page intérieure porte un H2 : on garde la même échelle que sur l'accueil. */ .answer .wp-block-heading{font-size:var(--step-2);margin-bottom:.5rem} /* --- 3.20 Bandeau des marques officielles --------------------------- Les badges partenaires ne sont pas des logos clients : pas de desaturation, pas de grille, et un intertitre a eux. */ .partners{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--line);padding-top:1.5rem} .partners img{height:auto;flex:none} .partners img[alt*="Made in"]{width:108px} .partners .chips{gap:.4rem} @media (max-width:520px){ .partners{gap:1.25rem} .partners img{width:104px} } /* --- 3.19 Badge partenaire dans le bloc « en chiffres » ------------- .proof__foot etait une simple liste de pastilles ; il accueille maintenant le badge officiel Microsoft a cote des pastilles restantes. */ .proof__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem; margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)} .proof__foot .chips{gap:.4rem} .badge{margin:0;line-height:0;flex:none} .badge img{height:auto;width:116px;max-width:100%} @media (max-width:520px){.badge img{width:100px}} /* Taille d'affichage en CSS, dimensions natives dans les attributs : c'est ce qui permet au navigateur de reserver la bonne hauteur avant chargement. */ .lux{width:150px} @media (max-width:720px){.lux{width:132px}} /* --- 3.16 Spécificité : les cas où le CSS du cœur est plus fort ------ Trois règles du cœur ciblent plus précisément que les nôtres. On ne joue pas sur l'ordre d'impression (perdu d'avance), on monte d'un cran. Mesuré sur le site rendu, pas déduit. */ /* .wp-block-site-logo.is-default-size img pose width:120px -> le logo tombait a 23 px de haut au lieu de 38. */ .hdr .wp-block-site-logo.is-default-size img, .hdr .wp-block-site-logo img{height:38px;width:auto;max-width:none} @media (max-width:700px){ .hdr .wp-block-site-logo.is-default-size img, .hdr .wp-block-site-logo img{height:34px} } /* .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container impose sa bordure grise : le liseré rouge du menu deroulant disparaissait. */ .hdr .nav.wp-block-navigation .wp-block-navigation__submenu-container{ background:#fff;border:1px solid var(--line); border-radius:6px;box-shadow:0 14px 34px rgba(11,42,51,.11);padding:.4rem; min-width:280px;left:-.35rem} .hdr .nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ display:block;padding:.55rem .7rem;font-size:.9rem;font-weight:500;border-radius:3px;color:var(--petrole-700)} /* --- 3.17 WCAG 2.2 - 2.5.8 : cibles de moins de 24 px --------------- Le cœur rend le chevron des sous-menus comme un