/* ================================================================= 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. Exception : la revue fluidite du 18/09/2026 a retouche la matiere (grain), le mur (hauteur), le titre (remplissage) et les revelations, pour un rendu identique a l'oeil ; chaque retouche porte sa note datee. ================================================================= */ /* ===== 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 ne vit plus ici, voir .chapitre[data-fond="chaux"]::before --- Revue fluidité du 18/09/2026. L'ancien grain était un bruit SVG (feTurbulence) posé en mix-blend-mode sur chaque chapitre (overlay sur l'encre et sur le mur, multiply sur la chaux) : chaque fusion obligeait le navigateur à recomposer le chapitre dans une surface à part à chaque image du défilement, premier poste de dépense de la page, et le bruit était recalculé à chaque rastérisation. Mesuré pixel par pixel, le grain de l'encre et celui du mur ne changeaient l'image que de 0,1 à 0,6 niveau sur 255 en moyenne : ils sont retirés. Sur la chaux, il devient une petite image (img/grain-chaux-1x.webp et -2x.webp), rendue une fois depuis le même bruit, en noir d'alpha 0,0335 × A - 0,0054 : calibrée sur l'ancien multiply à 0,09, elle assombrit de 3,1 niveaux en moyenne (écart-type 1,1 ; 1,0 avant). */ /* --- 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); /* La désaturation partielle et le flou léger des vignettes (anciennement --mur-filtre, « saturate(.88) blur(1px) ») sont cuits dans img/wall-*.webp par tools/cuire_mur.py : Firefox recalculait ce filtre à chaque image du mur en mouvement (revue fluidité du 18/09/2026). */ --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); } [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); } /* ===== 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, par des animations Web Animations que le navigateur joue sur son compositeur (js/offre.js, section 3). 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. Hauteur 100vh et non inset:0 (revue fluidité du 18/09/2026) : sur téléphone, 100vh est la GRANDE hauteur de fenêtre, celle sans barre d'adresse. Avec inset:0, le mur changeait de taille chaque fois que la barre d'adresse s'escamotait ou revenait, c'est-à-dire à chaque changement de sens du défilement, et tout le mur était remis en page et repeint. */ .mur{position:fixed;top:0;left:0;right:0;height:100vh;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;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);} /* --- 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;} /* Le grain ne vit que sur la chaux, en fusion normale : voir la note « Matière » de la palette. Pavé de 180 px, en densité 1 ou 2 selon l'écran (le navigateur n'en charge qu'un). */ .chapitre[data-fond="chaux"]::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:url("../img/grain-chaux-1x.webp"); background-image:image-set(url("../img/grain-chaux-1x.webp") 1x,url("../img/grain-chaux-2x.webp") 2x); background-size:180px 180px; } .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);} /* Interligne 1,1 (18/09/2026 ; .99 avant, et 1 sous 560 px). Les accents des capitales de Big Shoulders montent à 0,98 em au-dessus de la ligne de base (tréma 0,95), les capitales à 0,81 : à .99, l'accent d'une deuxième ligne touchait le bas de la première (« UN PAR MÉTIER », « À PRÉPARER », « SOI-MÊME », « ÉÉN PER BEROEP »). À 1,1, il reste 0,1 em d'air, 4 px sur téléphone. Une virgule (0,14 em sous la ligne) posée juste au-dessus d'une capitale accentuée toucherait encore : tools/recette_titres.py le signale. Le titre du premier écran n'est pas un .geant : son interligne est calibré avec --titre-em (section 6). */ .geant{ font-family:var(--f-titre);font-weight:800;text-transform:uppercase; line-height:1.1;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);} } /* Repli sans animation-timeline (Firefox, Safari avant 26) : js/offre.js pose .filet passé 90 px. La classe s'appelait .pose jusqu'au 18/09/2026, comme les montants « qui se posent » (section 9) : l'en-tête héritait de leur opacity:0 et de leur display:inline-block, et disparaissait dès qu'on défilait, dans Firefox et sur les iPhone d'avant iOS 26. */ html.js .entete.filet{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;}} /* Remplissage « backwards » et non « both » (revue fluidité du 18/09/2026) : l'état final est le style de base de .anim, et l'animation cesse d'exister une fois jouée. En « both », elle restait en vigueur après la dernière image, et le navigateur gardait chacune des 38 lettres dans un calque graphique à part pendant toute la visite. Rendu identique. */ html.js .hero__titre .g{opacity:0;transform:translateY(.34em) rotate(2deg);} html.js .anim .hero__titre .g{opacity:1;transform:none;animation:poser .72s cubic-bezier(.18,.9,.25,1) backwards;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;} /* 14e modèle (10/10/2026) : « Quatorze vrais sites, » dépasse les 16ch de « Treize vrais sites, » de 2,7 % ; 17ch et un plancher à 2.25rem gardent le titre sur deux lignes dès 320 px, comme avant (sinon « SITES, » restait seul sur sa ligne ; tools/recette_titres.py, FR et NL). */ .scene__titre{font-size:clamp(2.25rem,6.6vw,5.4rem);max-width:17ch;} .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;} /* Une seule mécanique pour tous les navigateurs depuis la revue fluidité du 18/09/2026 : la classe .vu posée par un IntersectionObserver (js/offre.js), puis une transition jouée une fois. La variante « animation-timeline: view() » est retirée. Elle ne fonctionnait que dans les chapitres du mur : ailleurs, overflow:hidden fait de chaque .chapitre un conteneur de défilement, view() suivait donc le chapitre, qui ne défile jamais, au lieu de la page. Les éléments y restaient figés, certains à demi transparents (#acheter, #methode), et chaque chapitre devenait un calque de défilement. Les animations liées au défilement gardaient en outre une trentaine de calques graphiques en vie en permanence. Seule reste la dérive du portrait (div.portrait.parallaxe, à remettre avec la photo) : elle vit dans #essentiel, chapitre du mur sans overflow:hidden, où view() suit bien la page. */ @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;} /* --- 10. Le ruban des quatorze 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 quatorze 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-depannage:checked~.metier__choix label[for="mt-depannage"], #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"], #mt-boutique:checked~.metier__choix label[for="mt-boutique"]{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-depannage:focus-visible~.metier__choix label[for="mt-depannage"], #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"], #mt-boutique:focus-visible~.metier__choix label[for="mt-boutique"]{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-depannage:checked~.metier__scene .vue--depannage, #mt-sante:checked~.metier__scene .vue--sante, #mt-bien-etre:checked~.metier__scene .vue--bien-etre, #mt-artisan:checked~.metier__scene .vue--artisan, #mt-boutique:checked~.metier__scene .vue--boutique{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; } /* Sans poignée de redimensionnement (revue fluidité du 18/09/2026) : sa première peinture compilait un effet graphique à part, soit un à-coup de 100 à 200 ms à l'arrivée du formulaire, au premier passage sur ordinateur. Le champ grandit désormais tout seul avec le texte (field-sizing, Chrome et Edge) ; ailleurs il garde sa hauteur et défile. */ .champ textarea{min-height:120px;max-height:20rem;resize:none;field-sizing:content;} .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;} .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