/* ================================================================= ITEXPERIENCE - studio.css Feuille unique de la page d'accueil (index.html). Reprise TELLE QUELLE de la maquette validee par Charles (direction F1 : premier ecran du studio sans photo, accent laiton) : composition, couleurs et animations ne sont pas retouchees ici. Les polices sont auto-hebergees (fonts/fonts-studio.css) : aucune police distante, aucun CDN, aucun appel sortant, nulle part. Les seuls ajouts d'integration sont en fin de fichier, section 23. ================================================================= */ /* ===== PALETTE ===== */ /* Toutes les couleurs de la page vivent dans ce bloc, et nulle part ailleurs. Hors du bloc, la seule forme admise est rgba(var(--...-rgb), a). Rhabiller la page = changer --accent, --accent-action, --accent-sur-clair et les deux triplets qui vont avec. */ :root{ /* --- Les deux fonds de la page. Elle bascule de l'un à l'autre. --- */ --encre:#0C0C0F; /* fond sombre principal : l'encre du studio */ --encre-2:#141419; /* surface sombre levée : les chapitres teintés */ --encre-3:#1E1E26; /* surface sombre 3 : barres de cadre, champs de formulaire */ --encre-carte:#16161C; /* fond des cartes posées sur l'encre */ --encre-rgb:12,12,15; /* triplet de l'encre : voiles du mur, ombres, plaques */ --chaux:#F1EDE5; /* fond clair principal : la chaux */ --chaux-2:#E6E0D5; /* surface claire levée : les chapitres teintés */ --chaux-3:#D6CFC0; /* surface claire 3 : barres de cadre sur la chaux */ --chaux-carte:#F8F5EF; /* fond des cartes posées sur la chaux */ --chaux-rgb:241,237,229; /* triplet de la chaux : voiles et plaques sur fond clair */ /* --- Les textes, sur chacun des deux fonds --- */ --sur-encre:#F6F3EC; /* texte principal sur l'encre, 16,9:1 */ --sur-encre-2:#BAB6AD; /* texte secondaire sur l'encre, 8,7:1 */ --sur-encre-3:#918D85; /* texte tertiaire et filets forts sur l'encre, 5,2:1 */ --sur-encre-rgb:246,243,236; /* triplet du texte clair : filets, survols, plaques claires */ --sur-chaux:#15151A; /* texte principal sur la chaux, 15,8:1 */ --sur-chaux-2:#4B4F58; /* texte secondaire sur la chaux, 7,6:1 */ --sur-chaux-3:#6C707A; /* texte tertiaire et filets forts sur la chaux, 4,8:1 */ --sur-chaux-rgb:21,21,26; /* triplet du texte sombre : filets et voiles sur fond clair */ /* --- L'accent. C'est la seule teinte à décliner pour rhabiller la page. --- */ --accent:#D9A441; /* accent sur fond sombre : chiffres, filets, liens, 8,9:1 */ --accent-action:#D9A441; /* boutons pleins et focus sur fond sombre */ --accent-action-survol:#DEB15C; /* survol du bouton plein sur fond sombre */ --accent-sur-clair:#876628; /* version assombrie de l'accent, la seule qui tient sur la chaux, 8,1:1 */ --accent-sur-clair-survol:#69501F;/* survol du bouton plein sur fond clair */ --accent-rgb:217, 164, 65; /* triplet de l'accent d'action : halos, anneaux de focus, ombres */ --accent-clair-rgb:217, 164, 65; /* triplet de l'accent clair : filets et fonds très dilués */ --sur-accent:#0C0C0F; /* texte posé sur un aplat d'accent */ --sur-accent-clair:#FFFFFF; /* texte posé sur l'aplat d'accent EN CONTEXTE CLAIR : cet aplat est la version assombrie, il lui faut souvent l'encre inverse */ --alerte:#FF7A5C; /* bordure d'un champ obligatoire laissé vide */ /* --- Matière : le grain posé sur chaque chapitre (bruit SVG, sans couleur) --- */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-op-encre:.055; /* force du grain sur l'encre */ --grain-op-chaux:.09; /* force du grain sur la chaux */ --grain-op-mur:.07; /* force du grain posé par-dessus le mur */ /* --- Le mur : voile permanent, voiles d'état, traitement des vignettes --- Le plancher du voile permanent est à 0,62 : même une capture blanche qui passe sous un texte laisse 5,0:1 pour le texte courant. */ --mur-voile:linear-gradient(180deg, rgba(var(--encre-rgb),.97) 0, rgba(var(--encre-rgb),.76) 8%, rgba(var(--encre-rgb),.62) 24%, rgba(var(--encre-rgb),.62) 66%, rgba(var(--encre-rgb),.80) 87%, rgba(var(--encre-rgb),.97) 100%); --mur-voile-profond:rgba(var(--encre-rgb),1); /* nappe qui s'épaissit quand le mur se fige ou ralentit */ --mur-op-fige:.42; /* opacité de la nappe quand le mur est figé sous un message */ --mur-op-ralenti:.85; /* opacité de la nappe quand le mur ralentit derrière les formules */ --mur-fond-tuile:#1A1D22; /* fond d'une vignette pas encore chargée */ --mur-bord-tuile:rgba(var(--sur-encre-rgb),.07); --mur-filtre:saturate(.88) blur(1px); /* désaturation partielle et flou léger des vignettes */ --mur-ombre-tuile:0 14px 34px rgba(var(--encre-rgb),.45); /* --- Ombres et plaques --- */ --ombre-cadre:0 30px 70px -34px rgba(var(--encre-rgb),.95); --ombre-cadre-accent:0 34px 80px -34px rgba(var(--accent-rgb),.7); --ombre-bascule:0 18px 52px -4px rgba(var(--encre-rgb),1); /* l'ombre courte que le premier écran jette sur le mur */ --plaque-mur:rgba(var(--encre-rgb),.8); /* plaque posée sur le mur figé, sans flou ni verre */ --ombre-locale:linear-gradient(102deg, /* ombre douce sous le texte posé sur le mur en marche */ rgba(var(--encre-rgb),.60) 0%, rgba(var(--encre-rgb),.52) 38%, rgba(var(--encre-rgb),.22) 64%, rgba(var(--encre-rgb),0) 82%); --plaque-mur-bord:rgba(var(--sur-encre-rgb),.2); --halo-images:radial-gradient(60% 90% at 50% 100%, rgba(var(--accent-rgb),.22), transparent 70%); --voile-barre-basse:rgba(var(--encre-rgb),.95); } /* Bascule de fond. Chaque chapitre déclare data-fond="encre" ou "chaux". */ [data-fond="encre"]{ --fond:var(--encre); --fond-2:var(--encre-2); --fond-3:var(--encre-3); --texte:var(--sur-encre); --texte-2:var(--sur-encre-2); --texte-3:var(--sur-encre-3); --texte-rgb:var(--sur-encre-rgb); --ligne:rgba(var(--sur-encre-rgb),.17); --ligne-forte:rgba(var(--sur-encre-rgb),.38); --accent-ici:var(--accent); --btn:var(--accent-action); --btn-texte:var(--sur-accent); --btn-survol:var(--accent-action-survol); --btn2-bord:rgba(var(--sur-encre-rgb),.42); --carte:var(--encre-carte); --grain-op:var(--grain-op-encre); --grain-mode:overlay; } [data-fond="chaux"]{ --fond:var(--chaux); --fond-2:var(--chaux-2); --fond-3:var(--chaux-3); --texte:var(--sur-chaux); --texte-2:var(--sur-chaux-2); --texte-3:var(--sur-chaux-3); --texte-rgb:var(--sur-chaux-rgb); --ligne:rgba(var(--sur-chaux-rgb),.17); --ligne-forte:rgba(var(--sur-chaux-rgb),.4); --accent-ici:var(--accent-sur-clair); --btn:var(--accent-sur-clair); --btn-texte:var(--sur-accent-clair); --btn-survol:var(--accent-sur-clair-survol); --btn2-bord:rgba(var(--sur-chaux-rgb),.42); --carte:var(--chaux-carte); --grain-op:var(--grain-op-chaux); --grain-mode:multiply; } /* ===== FIN PALETTE ===== */ /* --- 1. Base ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0; background:var(--encre); color:var(--sur-encre); font-family:var(--f-texte); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } :root{ --f-titre:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --f-texte:"Figtree","Segoe UI",system-ui,sans-serif; --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif; --pad:clamp(1.45rem,1.8vw,1.75rem); --gout:clamp(1.15rem,4.4vw,3.2rem); --max:1320px; --max-large:1520px; --entete-h:68px; --r:4px; --mur-gap:14px; } img{max-width:100%;display:block;} a{color:inherit;} button,input,select,textarea{font:inherit;color:inherit;} h1,h2,h3,h4{margin:0;font-weight:inherit;} p,ul,ol,figure{margin:0;} ul{list-style:none;padding:0;} :focus-visible{outline:3px solid var(--accent-action);outline-offset:3px;border-radius:2px;} [data-fond="chaux"] :focus-visible{outline-color:var(--accent-sur-clair);} .enveloppe{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gout);} .enveloppe--large{max-width:var(--max-large);} .saut{position:absolute;left:-9999px;top:0;} .saut:focus{left:var(--gout);top:8px;z-index:300;background:var(--accent-action);color:var(--sur-accent);padding:.7rem 1.1rem;border-radius:var(--r);} /* --- 2. Le mur vivant --------------------------------------------------- Quatre colonnes de vraies captures qui glissent en translate3d, poussées par une seule boucle rAF. Il est fixe : le premier écran, opaque, le cache entièrement, puis le découvre dès qu'on défile. Les chapitres calmes le recouvrent, les chapitres « mur » le laissent voir. Sans JavaScript, il reste une grille figée. */ .mur{position:fixed;inset:0;z-index:0;pointer-events:none;contain:paint;} html.js .mur--attente{display:none;} .mur__grille{position:absolute;inset:-2% -1%;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mur-gap);} .mur__col{overflow:hidden;} .mur__piste{display:grid;gap:var(--mur-gap);will-change:transform;} .mur__tuile{ margin:0;aspect-ratio:1280/812;border-radius:6px;overflow:hidden; background:var(--mur-fond-tuile);border:1px solid var(--mur-bord-tuile); box-shadow:var(--mur-ombre-tuile); } .mur__tuile img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:var(--mur-filtre);transform:scale(1.03);} .mur__voile{position:absolute;inset:0;background:var(--mur-voile);} .mur__nappe{position:absolute;inset:0;background:var(--mur-voile-profond);opacity:0;transition:opacity .85s ease;} html.js[data-mur="fige"] .mur__nappe{opacity:var(--mur-op-fige);} html.js[data-mur="ralenti"] .mur__nappe{opacity:var(--mur-op-ralenti);} html.js[data-mur="resserre"] .mur__nappe, html.js[data-mur="eteint"] .mur__nappe{opacity:var(--mur-op-ralenti);} .mur__grain{position:absolute;inset:0;background-image:var(--grain);opacity:var(--grain-op-mur);mix-blend-mode:overlay;} /* --- 3. Chapitres, grain, filets ---------------------------------------- */ .chapitre{ position:relative;z-index:1; background:var(--fond); color:var(--texte); padding-block:var(--pad); scroll-margin-top:calc(var(--entete-h) + 12px); overflow:hidden; isolation:isolate; } .chapitre--teinte{background:var(--fond-2);} .chapitre--mur{background:transparent;overflow:visible;} .chapitre::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain); opacity:var(--grain-op); mix-blend-mode:var(--grain-mode); } .chapitre--mur::before{display:none;} .chapitre--halo::after{ content:"";position:absolute;z-index:-1;pointer-events:none; inset:auto -10% -30% -10%;height:70%; background:var(--halo-images); } .rubrique{ display:flex;align-items:baseline;gap:1rem; border-top:1px solid var(--ligne-forte); padding-top:.7rem;margin-bottom:clamp(.9rem,2vw,1.5rem); } .rubrique__no{font-family:var(--f-serif);font-style:italic;font-size:1.4rem;line-height:1;color:var(--accent-ici);} .rubrique__quoi{font-family:var(--f-texte);font-weight:700;font-size:.8125rem;letter-spacing:.19em;text-transform:uppercase;color:var(--texte-2);} .geant{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; line-height:.99;letter-spacing:-.005em;text-wrap:balance; } .titre-chapitre{font-size:clamp(2.1rem,5.4vw,4.2rem);max-width:18ch;} .chapo{margin-top:clamp(.7rem,1.6vw,1.1rem);max-width:56ch;font-size:clamp(1rem,1.3vw,1.1875rem);color:var(--texte-2);} .serif{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400;} .titre-chapitre .serif{font-size:.74em;white-space:nowrap;} /* --- 4. Boutons --------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:52px;padding:.85rem 1.5rem; font-family:var(--f-texte);font-weight:700;font-size:1.0625rem;line-height:1.2; text-decoration:none;border:1px solid transparent;border-radius:var(--r); cursor:pointer;text-align:center; transition:transform .18s cubic-bezier(.2,.8,.3,1),background-color .18s,color .18s,border-color .18s; } .btn--plein{background:var(--btn);color:var(--btn-texte);} .btn--plein:hover{background:var(--btn-survol);transform:translateY(-2px);} .btn--vide{background:transparent;color:var(--texte);border-color:var(--btn2-bord);} .btn--vide:hover{border-color:var(--texte);transform:translateY(-2px);} .btn--grand{min-height:58px;font-size:1.125rem;padding-inline:1.9rem;} .btn svg{flex:none;} .btn:hover svg{transform:translateX(3px);transition:transform .18s;} /* --- 5. Jauge de défilement et en-tête ---------------------------------- */ .jauge{position:fixed;inset:0 0 auto 0;height:3px;z-index:210;background:transparent;pointer-events:none;} .jauge__barre{height:100%;background:var(--accent-action);transform:scaleX(0);transform-origin:0 50%;} @supports (animation-timeline:scroll()){ .jauge__barre{animation:remplir linear both;animation-timeline:scroll(root);} } @keyframes remplir{from{transform:scaleX(0);}to{transform:scaleX(1);}} .entete{ position:sticky;top:0;z-index:200;height:var(--entete-h); display:flex;align-items:center; background:var(--encre); border-bottom:1px solid rgba(var(--sur-encre-rgb),.14); } @supports (animation-timeline:scroll()){ html.js .entete{ border-bottom-color:transparent; animation:poserEntete linear both;animation-timeline:scroll(root);animation-range:0 160px; } } @keyframes poserEntete{ from{border-bottom-color:rgba(var(--sur-encre-rgb),0);} to {border-bottom-color:rgba(var(--sur-encre-rgb),.18);} } html.js .entete.pose{border-bottom-color:rgba(var(--sur-encre-rgb),.18);} .entete__inner{display:flex;align-items:center;gap:1rem;width:100%;} .marque{ font-family:var(--f-titre);font-weight:800;font-size:1.65rem;line-height:1; letter-spacing:.005em;text-transform:uppercase;color:var(--sur-encre);text-decoration:none; display:inline-flex;align-items:center;gap:.5rem; } .marque i{width:9px;height:9px;background:var(--accent-action);display:block;border-radius:50%;} .entete__chapitre{ font-family:var(--f-serif);font-style:italic;font-size:1.05rem;color:var(--sur-encre-2); opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;white-space:nowrap; } .entete__chapitre.vu{opacity:1;transform:none;} .entete nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem;} .entete nav a{color:var(--sur-encre-2);text-decoration:none;font-size:.95rem;font-weight:600;transition:color .18s;} .entete nav a.btn--plein{color:var(--sur-accent);} .entete nav a:hover{color:var(--sur-encre);} .entete .btn{min-height:44px;padding:.55rem 1.1rem;font-size:.95rem;white-space:nowrap;} .entete__tel{color:var(--sur-encre);font-weight:700;text-decoration:none;font-size:.95rem;white-space:nowrap;} /* --- 6. Le premier écran : le studio, net et typographique -------------- Aucune image, aucun mur, aucun voile. C'est le contraste avec le mur qui suit qui fait l'effet. Le chapitre est opaque : c'est lui qui cache le mur au chargement, et son ombre courte tombe sur le mur quand on commence à défiler. */ .hero{ padding-top:clamp(1.6rem,3.4vw,2.6rem); padding-bottom:0; min-height:calc(100svh - var(--entete-h) - 1.2rem); display:flex;flex-direction:column; box-shadow:var(--ombre-bascule); } .hero__corps{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;} .hero__oeil{ display:inline-flex;align-items:center;gap:.7rem; font-size:.8125rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase; color:var(--sur-encre-2);margin-bottom:clamp(1rem,2.2vw,1.6rem); } .hero__oeil i{width:26px;height:1px;background:var(--accent);display:block;} .hero__titre{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; line-height:.99;letter-spacing:-.012em; /* Largeur de la ligne la plus longue, en em, avec 2 % de marge (FR « VOTRE SITE WEB » 5,348 em). min() ne réduit la taille que sur les écrans trop étroits pour tenir cette ligne, soit sous 345 px environ : au-dessus, le titre garde exactement sa taille. À remesurer si le titre change. */ --titre-em:5.46; font-size:min(clamp(3.6rem,10.1vw,9.7rem),calc((100vw - 2 * var(--gout)) / var(--titre-em)));margin:0; } .hero__titre .l{display:block;} :lang(nl) .hero__titre{--titre-em:5.32;} /* NL « STAAT al KLAAR. » 5,217 em */ .hero__titre .m{white-space:nowrap;} /* un mot découpé en lettres ne se coupe jamais en deux */ .hero__titre .l3{font-size:.5em;line-height:1.02;margin-top:-.04em;color:transparent;-webkit-text-stroke:clamp(1.6px,.2vw,2.6px) var(--sur-encre);} .hero__titre .serif{font-size:.66em;color:var(--accent);padding-inline:.05em;} .hero__titre .g{display:inline-block;} /* Tant qu'elles ne sont pas découpées en lettres, les lignes du titre sont invisibles : c'est l'état de départ de l'animation. Le découpage (script du d'index.html) arrive avant la première peinture ; cette règle couvre le cas où le navigateur peindrait un titre à moitié lu. Filet de sécurité : si aucun script ne les découpe, elles apparaissent d'elles-mêmes à 3 s. Sans JavaScript (pas de classe js), rien n'est masqué. (Revue performance du 13/09/2026.) */ html.js .hero__titre:not([data-decoupe]) .l{animation:secoursTitre 0s linear 3s both;} @keyframes secoursTitre{from{opacity:0;}to{opacity:1;}} html.js .hero__titre .g{opacity:0;transform:translateY(.34em) rotate(2deg);} html.js .anim .hero__titre .g{animation:poser .72s cubic-bezier(.18,.9,.25,1) both;animation-delay:calc(var(--i) * 22ms);} @keyframes poser{from{opacity:0;transform:translateY(.34em) rotate(2deg);}to{opacity:1;transform:none;}} .hero__bloc{position:relative;} .sceau{ position:absolute;right:2%;bottom:2%;width:clamp(140px,12vw,182px);height:auto; color:var(--sur-encre-2);transform:rotate(-7deg);pointer-events:none; } .sceau text{font-family:var(--f-titre);font-weight:700;font-size:13px;letter-spacing:.16em;fill:currentColor;text-transform:uppercase;} .sceau .sceau__coeur{font-size:40px;fill:var(--accent);letter-spacing:0;} @media (max-width:1180px){.sceau{display:none;}} .hero__barre{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.4rem 2.4rem;margin-top:clamp(1.4rem,2.8vw,2.2rem);} .hero__prix{ font-family:var(--f-titre);font-weight:700;text-transform:uppercase; font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.12;letter-spacing:.012em; max-width:30ch;margin:0;flex:0 1 auto; } .hero__prix b{color:var(--accent);font-weight:800;} .hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-left:auto;align-items:center;} .hero__micro{margin-top:1rem;color:var(--sur-encre-2);font-size:1rem;max-width:52ch;} .faits{ margin-top:clamp(1.4rem,2.8vw,2.2rem); border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne); display:grid;grid-template-columns:repeat(4,1fr); } .faits li{padding:.85rem 1.2rem .85rem 0;font-size:.95rem;color:var(--sur-encre-2);border-left:1px solid var(--ligne);padding-left:1.2rem;} .faits li:first-child{border-left:0;padding-left:0;} .faits b{display:block;font-family:var(--f-titre);font-weight:800;font-size:1.55rem;line-height:1;text-transform:uppercase;color:var(--sur-encre);margin-bottom:.3rem;} /* La charnière : ce qui annonce le mur, juste avant de le découvrir. */ .bascule{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; padding-block:clamp(.9rem,1.8vw,1.4rem); font-size:.8125rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--sur-encre-3); } .bascule i{width:34px;height:1px;background:var(--sur-encre-3);display:block;flex:none;} .bascule svg{color:var(--accent);} html.js .bascule svg{animation:respire 2.6s ease-in-out infinite;} @keyframes respire{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}} /* --- 7. Le mur en scène : la bascule du typographique au spectacle ------ */ .scene{ min-height:70svh;display:flex;flex-direction:column;justify-content:flex-end; padding-block:clamp(2.6rem,8vw,6rem) clamp(1.6rem,3vw,2.6rem); } .chapitre--mur.scene::before{ display:block;content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--ombre-locale);opacity:1;mix-blend-mode:normal; } .scene .btn,.chapitre--mur .btn{box-shadow:0 0 0 1px rgba(var(--encre-rgb),.7),0 14px 40px -14px rgba(var(--encre-rgb),.95);} .scene__oeil{ display:inline-flex;align-items:center;gap:.7rem; font-size:.8125rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase; color:var(--sur-encre);margin-bottom:clamp(.8rem,1.8vw,1.2rem); } .scene__oeil i{width:26px;height:2px;background:var(--accent);display:block;} .scene__titre{font-size:clamp(2.4rem,6.6vw,5.4rem);max-width:16ch;} .scene__dit{margin-top:clamp(.8rem,1.8vw,1.2rem);max-width:52ch;color:var(--sur-encre);font-size:clamp(1rem,1.3vw,1.1875rem);} .scene__pied{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:clamp(1.1rem,2.2vw,1.7rem);} .scene__compte{display:flex;align-items:baseline;gap:.7rem;} .scene__nb{font-family:var(--f-titre);font-weight:800;line-height:.8;letter-spacing:-.02em;font-size:clamp(3rem,5vw,4.4rem);color:var(--accent);font-variant-numeric:tabular-nums;display:inline-block;} .scene__quoi{font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sur-encre);line-height:1.35;} /* --- 8. Le message, sur le mur figé ------------------------------------- */ .message{padding-block:clamp(1.4rem,2.6vw,2.2rem) clamp(1.8rem,3.4vw,2.8rem);} .plaque{ background:var(--plaque-mur);border:1px solid var(--plaque-mur-bord); border-top:2px solid var(--accent-action); border-radius:var(--r);padding:clamp(1.2rem,2.4vw,1.9rem); display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,.74fr);gap:clamp(1rem,2.6vw,2.4rem);align-items:start; } .portrait{ aspect-ratio:1/1;border:2px dashed rgba(var(--sur-encre-rgb),.38);border-radius:var(--r); display:grid;place-items:center;text-align:center;padding:1.2rem; background:rgba(var(--sur-encre-rgb),.04);color:var(--sur-encre-2); font-family:var(--f-titre);font-weight:700;text-transform:uppercase;font-size:1.25rem;line-height:1.1; } .plaque__label{font-family:var(--f-serif);font-style:italic;font-size:1.35rem;color:var(--accent);} .plaque__texte{font-size:clamp(1.0625rem,1.4vw,1.24rem);line-height:1.6;color:var(--sur-encre);margin-top:.5rem;} .plaque__sous{margin-top:.8rem;color:var(--sur-encre-2);font-size:1rem;} .identite{margin-top:clamp(.8rem,1.5vw,1.1rem);display:grid;gap:.36rem;border-top:1px solid rgba(var(--sur-encre-rgb),.17);padding-top:.85rem;} .identite li{font-size:.98rem;color:var(--sur-encre-2);line-height:1.5;} .identite b{color:var(--sur-encre);font-weight:700;} .identite a{color:var(--sur-encre);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(var(--sur-encre-rgb),.38);} .identite a:hover{box-shadow:inset 0 -2px 0 var(--accent);} /* --- 9. Révélations au défilement --------------------------------------- */ .rev{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);} .rev.vu{opacity:1;transform:none;} html:not(.js) .rev{opacity:1;transform:none;} .rev:nth-child(2){transition-delay:.06s;} .rev:nth-child(3){transition-delay:.12s;} .rev:nth-child(4){transition-delay:.18s;} @supports (animation-timeline:view()){ html.js .rev{opacity:1;transform:none;transition:none;animation:monter linear both;animation-timeline:view();animation-range:entry 4% cover 26%;} } @keyframes monter{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} @supports (animation-timeline:view()){ html.js .parallaxe{animation:derive linear both;animation-timeline:view();animation-range:cover;} } @keyframes derive{from{transform:translateY(14px);}to{transform:translateY(-14px);}} /* Les montants ne comptent pas : ils se posent. Aucun prix faux à l'écran. */ .pose{display:inline-block;} html.js .pose{opacity:0;transform:translateY(.16em);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);} html.js .pose.vu{opacity:1;transform:none;} html:not(.js) .pose{opacity:1;transform:none;} @supports (animation-timeline:view()){ html.js .pose{opacity:1;transform:none;transition:none;animation:poserChiffre linear both;animation-timeline:view();animation-range:entry 14% cover 34%;} } @keyframes poserChiffre{from{opacity:0;transform:translateY(.16em);}to{opacity:1;transform:none;}} /* --- 10. Le ruban des douze noms ---------------------------------------- */ .ruban{ border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne); overflow:hidden;padding-block:.6rem;margin-bottom:clamp(1.1rem,2.2vw,1.6rem); -webkit-mask-image:linear-gradient(90deg,transparent,rgba(var(--sur-encre-rgb),1) 8%,rgba(var(--sur-encre-rgb),1) 92%,transparent); mask-image:linear-gradient(90deg,transparent,rgba(var(--sur-encre-rgb),1) 8%,rgba(var(--sur-encre-rgb),1) 92%,transparent); } .ruban__file{ display:flex;gap:2.2rem;white-space:nowrap;width:max-content; font-family:var(--f-titre);font-weight:700;text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1;color:var(--texte-3); } .ruban__file span{display:inline-flex;align-items:center;gap:2.2rem;} .ruban__file span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-ici);opacity:.65;} @supports (animation-timeline:scroll()){ html.js .ruban__file{animation:filer linear both;animation-timeline:scroll(root);} } @keyframes filer{from{transform:translateX(0);}to{transform:translateX(-46%);}} /* --- 11. Les douze modèles : la grille cliquable, en perspective -------- */ .galerie{position:relative;} .galerie__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;} .compte{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .5rem;} .compte__nb{font-family:var(--f-titre);font-weight:800;line-height:.8;letter-spacing:-.02em;font-size:clamp(3.4rem,6vw,5.2rem);color:var(--accent-ici);font-variant-numeric:tabular-nums;display:inline-block;} .compte__quoi{font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2);line-height:1.35;} @media (max-width:820px){.compte{display:none;}} .galerie__piste{ display:flex;gap:clamp(.9rem,1.6vw,1.6rem); overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;perspective:1150px; padding-block:clamp(1rem,1.6vw,1.4rem); padding-inline:max(var(--gout), calc((100% - var(--max)) / 2 + var(--gout))); scrollbar-width:none;-webkit-overflow-scrolling:touch; } .galerie__piste::-webkit-scrollbar{display:none;} .modele{flex:0 0 min(78vw,430px);scroll-snap-align:center;text-decoration:none;color:inherit;display:block;transform-style:preserve-3d;} .modele__pivot{display:block;transform-origin:50% 50%;} @supports (animation-timeline:view()){ html.js .modele__pivot{animation:pivoter linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%;} } @keyframes pivoter{ 0%{transform:rotateY(24deg) scale(.88);opacity:.62;} 42%{transform:rotateY(0deg) scale(1);opacity:1;} 58%{transform:rotateY(0deg) scale(1);opacity:1;} 100%{transform:rotateY(-24deg) scale(.88);opacity:.62;} } .cadre{display:block;border:1px solid var(--ligne-forte);border-radius:var(--r);background:var(--fond-2);overflow:hidden;box-shadow:var(--ombre-cadre);} .cadre__barre{display:flex;align-items:center;gap:.5rem;padding:.36rem .6rem;background:var(--fond-3);border-bottom:1px solid var(--ligne);} .pastilles{display:inline-flex;gap:4px;flex:none;} .pastilles i{width:7px;height:7px;border-radius:50%;display:block;background:var(--texte-3);opacity:.7;} .cadre__url{flex:1;min-width:0;font-size:.66rem;color:var(--texte-3);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--fond);padding:.1rem .5rem;border-radius:99px;} .cadre__vue{display:block;aspect-ratio:16/9.6;overflow:hidden;background:var(--fond-3);} .cadre__vue img{width:100%;height:100%;object-fit:cover;object-position:top center;} .modele .cadre{transition:border-color .22s,box-shadow .22s;} .modele:hover .cadre{border-color:var(--accent-ici);box-shadow:var(--ombre-cadre-accent);} .modele .cadre__vue img{transition:transform .6s cubic-bezier(.16,1,.3,1);} .modele:hover .cadre__vue img{transform:scale(1.045);} .modele__pied{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-top:.85rem;} .modele__nom{display:block;font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;letter-spacing:.005em;color:var(--texte);} .modele__metier{display:block;margin-top:.34rem;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ici);} .modele__fleche{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne-forte);display:grid;place-items:center;color:var(--texte-2);transition:background-color .2s,color .2s,border-color .2s,transform .2s;} .modele:hover .modele__fleche{background:var(--btn);border-color:transparent;color:var(--btn-texte);transform:translateX(3px);} .galerie__pied{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem;} .galerie__rail{flex:1;min-width:140px;height:2px;background:var(--ligne);position:relative;overflow:hidden;} .galerie__rail i{position:absolute;inset:0;background:var(--accent-ici);transform:scaleX(.09);transform-origin:0 50%;display:block;} @supports (animation-timeline:scroll()) and (timeline-scope:--t){ html.js .galerie{timeline-scope:--piste;} html.js .galerie__piste{scroll-timeline:--piste inline;} html.js .galerie__rail i{animation:remplir linear both;animation-timeline:--piste;} } .galerie__aide{font-size:.9rem;color:var(--texte-2);} .fleches{display:flex;gap:.5rem;} .fleches button{width:46px;height:46px;border-radius:50%;background:transparent;border:1px solid var(--ligne-forte);color:var(--texte);cursor:pointer;display:grid;place-items:center;transition:background-color .2s,color .2s,border-color .2s;} .fleches button:hover{background:var(--btn);border-color:transparent;color:var(--btn-texte);} html:not(.js) .fleches{display:none;} .galerie__appel{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-top:clamp(.9rem,1.8vw,1.4rem);padding-top:clamp(.9rem,1.6vw,1.2rem);border-top:1px solid var(--ligne);} .galerie__appel p{max-width:46ch;color:var(--texte-2);margin:0;} /* --- 12. Le mur se resserre sur un seul métier -------------------------- */ .metier__grille{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:start;margin-top:clamp(1rem,2vw,1.6rem);} .metier__grille>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0;} .metier__pastilles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1rem,2vw,1.4rem);} .metier__choix label{ cursor:pointer;font-size:.98rem;font-weight:700;padding:.6rem .95rem;min-height:44px; display:inline-flex;align-items:center;border-radius:99px; border:1px solid var(--ligne-forte);background:transparent;color:var(--texte-2); transition:background-color .2s,color .2s,border-color .2s; } .metier__choix label:hover{border-color:var(--texte);color:var(--texte);} #mt-coiffure:checked~.metier__choix label[for="mt-coiffure"], #mt-barbershop:checked~.metier__choix label[for="mt-barbershop"], #mt-restaurant:checked~.metier__choix label[for="mt-restaurant"], #mt-bouche:checked~.metier__choix label[for="mt-bouche"], #mt-garage:checked~.metier__choix label[for="mt-garage"], #mt-sante:checked~.metier__choix label[for="mt-sante"], #mt-bien-etre:checked~.metier__choix label[for="mt-bien-etre"], #mt-artisan:checked~.metier__choix label[for="mt-artisan"]{background:var(--btn);border-color:var(--btn);color:var(--btn-texte);} #mt-coiffure:focus-visible~.metier__choix label[for="mt-coiffure"], #mt-barbershop:focus-visible~.metier__choix label[for="mt-barbershop"], #mt-restaurant:focus-visible~.metier__choix label[for="mt-restaurant"], #mt-bouche:focus-visible~.metier__choix label[for="mt-bouche"], #mt-garage:focus-visible~.metier__choix label[for="mt-garage"], #mt-sante:focus-visible~.metier__choix label[for="mt-sante"], #mt-bien-etre:focus-visible~.metier__choix label[for="mt-bien-etre"], #mt-artisan:focus-visible~.metier__choix label[for="mt-artisan"]{outline:3px solid var(--btn);outline-offset:3px;} #mt-coiffure:checked~.metier__scene .vue--coiffure, #mt-barbershop:checked~.metier__scene .vue--barbershop, #mt-restaurant:checked~.metier__scene .vue--restaurant, #mt-bouche:checked~.metier__scene .vue--bouche, #mt-garage:checked~.metier__scene .vue--garage, #mt-sante:checked~.metier__scene .vue--sante, #mt-bien-etre:checked~.metier__scene .vue--bien-etre, #mt-artisan:checked~.metier__scene .vue--artisan{opacity:1;transform:none;z-index:2;} .metier__scene .cadre{box-shadow:var(--ombre-cadre);} .metier__ecrans{position:relative;aspect-ratio:16/9.6;overflow:hidden;background:var(--fond-3);} .vue{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);transition:opacity .55s ease,transform .85s cubic-bezier(.2,.7,.3,1);} .vue img{width:100%;height:100%;object-fit:cover;object-position:top center;} .vue figcaption{ position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .8rem; background:linear-gradient(180deg,rgba(var(--encre-rgb),0),rgba(var(--encre-rgb),.93) 58%,rgba(var(--encre-rgb),.98)); display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem; } .vue figcaption b{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;color:var(--sur-encre);} .vue figcaption span{font-size:.9rem;color:var(--sur-encre-2);} .metier__note{margin-top:.9rem;color:var(--texte-2);font-size:.98rem;} /* --- 13. Le prix -------------------------------------------------------- */ .prix__entree{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(1.4rem,3.6vw,3.4rem);align-items:end;} .formules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.1rem,2.2vw,1.8rem);align-items:stretch;} .formule{ position:relative;display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne-forte); border-radius:var(--r);padding:clamp(1.2rem,2.1vw,1.7rem); transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s; } .formule:hover{transform:translateY(-4px);border-color:var(--texte);} .formule--phare{border-color:var(--btn);border-width:2px;background:var(--fond);} .formule__etiquette{ position:absolute;top:0;right:clamp(1.2rem,2.4vw,2rem);transform:translateY(-50%); background:var(--btn);color:var(--btn-texte);font-size:.72rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase;padding:.34rem .7rem;border-radius:99px; } .formule__nom{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:.95;} .formule__pour{color:var(--texte-2);font-size:.98rem;margin-top:.4rem;max-width:36ch;min-height:2.4em;} .montant{display:flex;align-items:baseline;gap:.5rem;margin-top:clamp(.8rem,1.8vw,1.2rem);border-top:1px solid var(--ligne);padding-top:clamp(.8rem,1.8vw,1.2rem);} .montant__nb{font-family:var(--f-titre);font-weight:800;line-height:.78;letter-spacing:-.015em;font-size:clamp(4rem,6.8vw,6rem);font-variant-numeric:tabular-nums;display:inline-block;} .montant__eur{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1;} .montant__unite{font-size:1rem;font-weight:700;color:var(--texte-2);letter-spacing:.04em;} .engagement{margin-top:.7rem;font-size:.95rem;color:var(--texte);background:var(--fond-2);border-left:3px solid var(--accent-ici);padding:.6rem .85rem;border-radius:0 var(--r) var(--r) 0;} .liste{margin-top:clamp(.7rem,1.5vw,1rem);display:grid;gap:.5rem;} .liste li{display:block;position:relative;padding-left:1.75rem;font-size:.98rem;color:var(--texte-2);line-height:1.5;} .liste li b{color:var(--texte);font-weight:700;} .coche{position:absolute;left:0;top:.24em;width:19px;height:19px;color:var(--accent-ici);} .formule .btn{margin-top:clamp(1rem,2vw,1.5rem);width:100%;} .repli{margin-top:.6rem;} .formule .repli,.forfait .repli{margin-bottom:auto;} .repli summary{cursor:pointer;font-size:.92rem;font-weight:700;color:var(--accent-ici);list-style:none;padding:.5rem 0;display:flex;align-items:center;gap:.45rem;min-height:44px;} .repli summary::-webkit-details-marker{display:none;} .repli summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;} .repli[open] summary::after{transform:rotate(-135deg) translateY(-2px);} .note{margin-top:clamp(.8rem,1.6vw,1.2rem);font-size:.95rem;color:var(--texte-2);max-width:78ch;} .note strong{color:var(--texte);} /* --- 14. Acheter -------------------------------------------------------- */ .forfaits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem);margin-top:clamp(1rem,2vw,1.6rem);align-items:stretch;} .forfait{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne-forte);border-radius:var(--r);padding:clamp(1.2rem,2.2vw,1.7rem);position:relative;transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s;} .forfait:hover{transform:translateY(-4px);border-color:var(--texte);} .forfait--conseil{border-color:var(--btn);} .forfait__nom{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.85rem;line-height:1;} .forfait__des{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-3);margin-top:.55rem;} .forfait__nb{font-family:var(--f-titre);font-weight:800;font-size:clamp(2.8rem,5vw,4.2rem);line-height:.9;font-variant-numeric:tabular-nums;display:inline-block;} .forfait__htva{font-size:.95rem;font-weight:700;color:var(--texte-2);margin-left:.4rem;} .forfait__pour{color:var(--texte-2);font-size:.95rem;margin-top:.5rem;min-height:2.6em;} .forfait .liste li{font-size:.92rem;} .forfait__pied{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--ligne);font-size:.86rem;color:var(--texte-2);} /* --- 15. Étapes --------------------------------------------------------- */ .etapes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,2rem);margin-top:clamp(1.2rem,2.2vw,1.8rem);} .etape{position:relative;padding-top:1.1rem;border-top:2px solid var(--ligne-forte);} .etape__no{font-family:var(--f-titre);font-weight:800;font-size:clamp(3.2rem,6vw,5rem);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--texte-3);display:block;} .etape--actif .etape__no{-webkit-text-stroke-color:var(--accent-ici);} .etape__titre{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;margin-top:.7rem;} .etape__texte{color:var(--texte-2);font-size:1rem;margin-top:.6rem;} /* --- 16. Comparatif ----------------------------------------------------- */ .compare{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem);margin-top:clamp(1.2rem,2.4vw,2rem);align-items:stretch;} .colonne{border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(1.2rem,2.2vw,1.7rem);background:var(--carte);} .colonne--nous{border-color:var(--btn);border-width:2px;background:var(--fond-2);} .colonne__qui{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--texte);} .colonne__cle{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:.95;margin-top:.8rem;color:var(--texte-3);} .colonne--nous .colonne__cle{color:var(--accent-ici);} .colonne__sous{font-size:.92rem;color:var(--texte-2);margin-top:.4rem;} .colonne ul{margin-top:1rem;display:grid;gap:.6rem;} .colonne li{font-size:.94rem;color:var(--texte-2);padding-left:1.1rem;position:relative;line-height:1.5;} .colonne li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--texte-3);} .colonne--nous li::before{background:var(--accent-ici);width:8px;height:2px;} /* --- 17. FAQ ------------------------------------------------------------ */ .faq{margin-top:clamp(1.1rem,2.2vw,1.7rem);} .faq__col{border-top:1px solid var(--ligne-forte);} @media (min-width:900px){.faq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.6rem,3vw,3rem);align-items:start;}} .q{border-bottom:1px solid var(--ligne);} .q summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;padding:.8rem 0;min-height:50px;font-family:var(--f-texte);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--texte);transition:color .18s;} .q summary::-webkit-details-marker{display:none;} .q summary:hover{color:var(--accent-ici);} .q__signe{flex:none;margin-left:auto;width:26px;height:26px;position:relative;color:var(--accent-ici);} .q__signe::before,.q__signe::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);} .q__signe::before{width:15px;height:2px;} .q__signe::after{width:2px;height:15px;transition:transform .22s;} .q[open] .q__signe::after{transform:translate(-50%,-50%) scaleY(0);} .q__rep{padding:0 0 1.1rem;color:var(--texte-2);font-size:1rem;max-width:84ch;} .faq__reste{margin-top:1.1rem;font-size:.95rem;color:var(--texte-2);} /* --- 18. Contact -------------------------------------------------------- */ .contact__grille{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(1.4rem,3.4vw,3rem);align-items:start;margin-top:clamp(1.1rem,2.2vw,1.8rem);} .contact__promesse{display:grid;gap:.6rem;margin-top:1.1rem;} .contact__promesse li{display:flex;gap:.8rem;font-size:1rem;color:var(--texte-2);line-height:1.5;} .contact__promesse b{color:var(--texte);} .coordonnees{margin-top:clamp(1rem,2vw,1.5rem);border-top:1px solid var(--ligne);padding-top:1rem;display:grid;gap:.55rem;} .coordonnees a{color:var(--texte);text-decoration:none;font-weight:600;box-shadow:inset 0 -1px 0 var(--ligne-forte);} .coordonnees a:hover{box-shadow:inset 0 -2px 0 var(--accent-ici);} .form{display:grid;gap:1rem;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(1.2rem,2.6vw,2rem);} .duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .champ{display:grid;gap:.35rem;} .champ label{font-size:.86rem;font-weight:700;color:var(--texte-2);letter-spacing:.02em;} .champ input,.champ select,.champ textarea{ width:100%;padding:.8rem .95rem;min-height:48px; background:var(--fond);border:1px solid var(--ligne-forte);border-radius:var(--r); color:var(--texte);transition:border-color .18s,box-shadow .18s; } .champ textarea{min-height:120px;resize:vertical;} .champ input::placeholder,.champ textarea::placeholder{color:var(--texte-3);} .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.32);} .champ--vide input,.champ--vide select,.champ--vide textarea{border-color:var(--alerte);} .champ select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;} .select{position:relative;} .select::after{content:"";position:absolute;right:1rem;top:calc(50% + .5rem);width:8px;height:8px;border-right:2px solid var(--texte-3);border-bottom:2px solid var(--texte-3);transform:translateY(-50%) rotate(45deg);pointer-events:none;} .form .btn{width:100%;} .form__mention{font-size:.9rem;color:var(--texte-3);text-align:center;} .form__mention a{color:var(--texte);font-weight:700;white-space:nowrap;} .form__ok[hidden]{display:none;} .form__ok{background:rgba(var(--accent-rgb),.14);border:1px solid var(--btn);border-radius:var(--r);padding:.9rem 1rem;font-size:.98rem;color:var(--texte);} /* --- 19. Pied de page --------------------------------------------------- */ .pied{position:relative;z-index:1;background:var(--encre);color:var(--sur-encre);padding-block:clamp(1.6rem,3vw,2.4rem) 1.3rem;} .pied__geant{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,8.2vw,7.6rem);line-height:.82;letter-spacing:-.015em;color:transparent;-webkit-text-stroke:1.5px rgba(var(--sur-encre-rgb),.34);margin-bottom:clamp(1.1rem,2.2vw,1.9rem);} .pied__grille{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.2vw,2rem);border-top:1px solid rgba(var(--sur-encre-rgb),.17);padding-top:clamp(1.2rem,2.2vw,1.8rem);} .pied__col h3{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-encre-3);margin-bottom:.9rem;} .pied__col ul{display:grid;gap:.5rem;} /* Un élément de grille vaut min-width:auto, c'est-à-dire la largeur de son plus LONG MOT, et overflow-wrap:break-word n'entre pas dans ce calcul. Un mot composé néerlandais plus large que la colonne (« Abonnementsvoorwaarden », 194 px pour 168 px sous 412 px de fenêtre) poussait donc la PAGE ENTIÈRE et rendait l'accueil /nl/ scrollable en largeur. min-width:0 rend la colonne maîtresse de sa largeur, la césure douce coupe le mot trop long. */ .pied__col li{min-width:0;} .pied__col a{color:var(--sur-encre-2);text-decoration:none;font-size:.95rem;overflow-wrap:break-word;hyphens:auto;} .pied__col a:hover{color:var(--sur-encre);} .pied__id{font-size:.95rem;color:var(--sur-encre-2);line-height:1.65;max-width:44ch;overflow-wrap:break-word;} .pied__id b{color:var(--sur-encre);} .pied__bas{margin-top:clamp(1.1rem,2.2vw,1.8rem);padding-top:1.1rem;border-top:1px solid rgba(var(--sur-encre-rgb),.17);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:var(--sur-encre-2);} .glisser{display:none;font-size:.9rem;color:var(--texte-2);margin-top:.9rem;} /* --- 20. Barre d'action mobile et curseur ------------------------------- */ .barre-basse{display:none;} .curseur{ position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%; border:1.5px solid var(--sur-encre);pointer-events:none;z-index:400;opacity:0; transform:translate(-50%,-50%) scale(.55);mix-blend-mode:difference; transition:opacity .25s,width .2s,height .2s,border-color .2s;will-change:transform; } .curseur.on{opacity:.9;} .curseur.grand{width:58px;height:58px;border-width:2px;} @media (hover:none),(pointer:coarse){.curseur{display:none!important;}} /* --- 21. Adaptations ---------------------------------------------------- */ @media (max-width:1180px){ .plaque{grid-template-columns:1fr;} .portrait{aspect-ratio:16/9;} .pied__grille{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);} } @media (max-width:1000px){ .entete nav a:not(.entete__tel):not(.btn){display:none;} .entete nav{gap:.9rem;} .entete__chapitre{display:none;} .prix__entree{grid-template-columns:1fr;align-items:start;} .forfaits{grid-template-columns:1fr;} .compare{grid-template-columns:1fr;} .contact__grille{grid-template-columns:1fr;} .etapes{grid-template-columns:1fr;} .etape{padding-top:1rem;} .metier__grille{grid-template-columns:1fr;} } @media (max-width:820px){ .formules{grid-template-columns:1fr;} .faits{grid-template-columns:1fr 1fr;} .faits li{border-left:0;padding-left:0;border-top:1px solid var(--ligne);} .faits li:first-child,.faits li:nth-child(2){border-top:0;} .faits li:nth-child(odd){border-right:1px solid var(--ligne);padding-right:1rem;} .pied__grille{grid-template-columns:repeat(2,minmax(0,1fr));} .duo{grid-template-columns:1fr;} .duo--court{grid-template-columns:1fr 1fr;gap:.7rem;} .forfaits,.compare{ display:flex;gap:.8rem;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:none; margin-inline:calc(-1 * var(--gout));padding:.6rem var(--gout) .5rem; } .forfaits::-webkit-scrollbar,.compare::-webkit-scrollbar{display:none;} .forfait,.colonne{flex:0 0 84vw;scroll-snap-align:center;} .colonne--nous{order:-1;} .glisser{display:block;} .hero__actions{margin-left:0;width:100%;} .hero__actions .btn{flex:1 1 100%;} .barre-basse{ display:flex;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:190; padding:.6rem var(--gout) calc(.6rem + env(safe-area-inset-bottom,0px)); background:var(--voile-barre-basse);border-top:1px solid rgba(var(--sur-encre-rgb),.2); } .barre-basse .btn{flex:1;min-height:48px;font-size:1rem;padding-inline:.8rem;} .barre-basse .btn--vide{flex:0 0 56px;color:var(--sur-encre);border-color:rgba(var(--sur-encre-rgb),.42);} body{padding-bottom:76px;} @supports (animation-timeline:scroll()){ html.js .barre-basse{transform:translateY(110%);animation:monterBarre linear both;animation-timeline:scroll(root);animation-range:340px 480px;} } @keyframes monterBarre{from{transform:translateY(110%);}to{transform:translateY(0);}} } /* Le mur sur téléphone : deux colonnes, vignettes recadrées, et les deux autres colonnes ne sont jamais téléchargées. */ @media (max-width:760px){ /* Sur téléphone le texte de la scène est en bas : l'ombre locale descend au lieu d'aller vers la droite, et le haut du mur reste en pleine lumière. */ :root{ --ombre-locale:linear-gradient(180deg, rgba(var(--encre-rgb),0) 0%, rgba(var(--encre-rgb),.18) 28%, rgba(var(--encre-rgb),.50) 50%, rgba(var(--encre-rgb),.58) 100%); } .mur__grille{inset:-2% -4%;grid-template-columns:repeat(2,1fr);} .mur__col--3,.mur__col--4{display:none;} .mur__tuile{aspect-ratio:16/13;} } @media (max-width:560px){ :root{--entete-h:60px;--pad:1.45rem;} .hero__titre{line-height:1.02;} .geant{line-height:1;} .entete .btn{padding:.55rem .85rem;} .entete__tel{display:none;} .marque{font-size:1.4rem;} .faits li{padding-block:.8rem;} .faits b{font-size:1.35rem;} .galerie__appel .btn{width:100%;} .modele{flex:0 0 84vw;} .montant__nb{font-size:clamp(4.2rem,21vw,6.6rem);} .formule,.forfait,.colonne{padding:1.1rem 1rem;} .plaque{padding:1.1rem 1rem;} .q summary{padding:.72rem 0;} .pied__geant{margin-bottom:1.1rem;} .scene{min-height:68svh;} } /* Téléphone : le texte courant ne descend jamais sous 16 px. Seuls restent plus petits les micro-libellés en capitales espacées et l'adresse décorative des cadres de navigateur, qui ne sont pas du texte à lire. */ @media (max-width:820px){ .liste li,.colonne li,.identite li,.coordonnees li,.contact__promesse li, .forfait__pour,.formule__pour,.forfait__pied,.forfait__htva,.colonne__sous, .faq__reste,.glisser,.galerie__aide,.note,.engagement,.metier__note, .q__rep,.etape__texte,.form__mention,.champ label,.repli summary, .pied__col a,.pied__id,.pied__bas,.plaque__sous,.hero__micro, .galerie__appel p,.entete .btn,.form__ok,.chapo,.faits li,.form__mention a, .vue figcaption span,.metier__choix label{font-size:1rem;} .forfait__des{font-size:.86rem;} .formule__etiquette{font-size:.8rem;} .pied__col h3{font-size:.86rem;} .modele__metier{font-size:.84rem;} } /* --- 22. Mouvement réduit : tout se fige proprement, mur compris -------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} html.js .hero__titre .g{opacity:1;transform:none;animation:none;} html.js .hero__titre:not([data-decoupe]) .l{animation:none;} html.js .rev,.rev{opacity:1;transform:none;animation:none;} html.js .pose,.pose{opacity:1;transform:none;animation:none;transition:none;} html.js .modele__pivot{animation:none;transform:none;opacity:1;} html.js .ruban__file{animation:none;transform:none;} html.js .parallaxe{animation:none;transform:none;} html.js .barre-basse{animation:none;transform:none;} html.js .bascule svg{animation:none;} html.js .entete{background-color:rgba(var(--encre-rgb),1);border-bottom-color:rgba(var(--sur-encre-rgb),.18);animation:none;} .jauge__barre{animation:none;transform:scaleX(0);} .curseur{display:none!important;} .galerie__piste{scroll-snap-type:none;} .mur__piste{transform:none!important;animation:none;} .mur__nappe{transition:none;} } /* --- 23. Ajouts d'integration (hors maquette) --------------------------- Trois choses que la maquette autonome n'avait pas et que le site reel exige. Rien d'autre : la composition, les couleurs et les animations de la maquette ne sont retouchees nulle part. 1. Le selecteur de langue FR/NL. Le site est bilingue et la page NL est un vrai fichier (/nl/) : le selecteur est un lien, pas une bascule. Il vit dans l'entete, HORS du