/* ========================================================================= ARCHI IA · feuille de style du site Fidèle à marque/03-identite-visuelle.md, dont rien n'est réinventé ici. Le principe de base, article 1 : fond blanc, texte noir, le bordeaux accentue, le rose ponctue rarement. La couleur est un événement. Les marqueurs de marque sont ceux de la charte, pas des inventions : le filet bordeaux de 3 px sur 64, les dégradés linéaire et radial, les rayons de 4 et 8 px. La trame technique de 48 px a été retirée sur demande de Benoît le 2026-08-31 : à l'écran elle caricaturait le métier. La charte `marque/03-identite-visuelle.md` la mentionne encore, à arbitrer. ========================================================================= */ /* Les polices sont chargées par un dans le de chaque page. Un @import ici les faisait découvrir après le téléchargement de cette feuille, soit deux allers-retours réseau avant le premier caractère. */ :root{ /* Palette, article 2 de la charte */ --bx-50:#fcefef; --bx-100:#f6d2d2; --bx-200:#d4a0a0; --bx-300:#b36f6f; --bx-400:#961919; --bx:#7c1e1e; --bx-600:#691a1a; --bx-700:#4d1414; --bx-800:#2e0c0c; --bx-900:#170606; --blanc:#fff; --noir:#000; --gris:#f4f4f4; --gris-txt:#5a5a5a; /* Le gris de filet employé partout dans la feuille, jusqu'ici écrit en dur dix-sept fois. Les blocs ajoutés le 31 août l'appelaient déjà comme jeton alors qu'il n'existait pas : leurs traits étaient donc invisibles ou repris de la couleur du texte. */ --gris-bord:#e6e6e6; --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --serif:'PT Serif',Georgia,'Times New Roman',serif; /* Échelle typographique, article 3 de la charte, rendue fluide. Display 56 · H1 40 · H2 30 · H3 22 · H4 17 · chapô 19 · corps 16 · légende 12 */ --t-display:clamp(2.1rem,1.45rem + 2.7vw,3.5rem); --t-h1:clamp(1.8rem,1.35rem + 1.9vw,2.5rem); --t-h2:clamp(1.45rem,1.2rem + 1.05vw,1.875rem); --t-h3:clamp(1.2rem,1.1rem + .42vw,1.375rem); --t-chapo:clamp(1.06rem,1rem + .26vw,1.1875rem); --t-corps:1rem; --t-petit:.875rem; --t-leg:.75rem; --marge:1.25rem; --max:1200px; --pas:clamp(3rem,5.4vw,5.75rem); /* respiration de section */ --r-btn:4px; --r-carte:8px; --ombre:0 4px 16px rgba(23,6,6,.10); --ombre-f:0 12px 40px rgba(23,6,6,.16); } @media (min-width:48em){ :root{ --marge:2.5rem } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{margin:0;background:var(--blanc);color:var(--noir); font-family:var(--sans);font-size:var(--t-corps);font-weight:400;line-height:1.6; -webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} figure{margin:0} a{color:inherit} /* La page d'accueil s'ouvre sur du blanc. Une lueur bordeaux très basse, posée en haut à droite, donne une profondeur au fond sans jamais devenir une couleur : elle reste sous le seuil de perception consciente. */ .lueur{position:relative;isolation:isolate;overflow:clip} .lueur::before{content:"";position:absolute;inset:-30% -15%;z-index:-1;pointer-events:none; background:radial-gradient(50% 45% at 78% 12%,rgba(150,25,25,.10) 0%,rgba(150,25,25,0) 68%)} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)} .sec{padding-block:var(--pas)} .sec--serre{padding-block:calc(var(--pas) * .62)} /* ---------- Typographie, graisses de la charte -------------------------- */ h1,h2,h3{margin:0;text-wrap:balance} h1{font-size:var(--t-h1);font-weight:900;line-height:1.08;letter-spacing:-.025em} .display{font-size:var(--t-display);font-weight:900;line-height:1.02;letter-spacing:-.03em} h2{font-size:var(--t-h2);font-weight:800;line-height:1.15;letter-spacing:-.02em} h3{font-size:var(--t-h3);font-weight:800;line-height:1.25;letter-spacing:-.01em} p{margin:0 0 1rem;max-width:36em} .chapo{font-size:var(--t-chapo);line-height:1.5;max-width:34em;color:var(--gris-txt)} .petit{font-size:var(--t-petit);line-height:1.5} .leg{font-size:var(--t-leg);font-weight:600;line-height:1.4;letter-spacing:.08em; text-transform:uppercase;color:var(--gris-txt);max-width:none} .gris{color:var(--gris-txt)} /* LA CHUTE. Le second membre d'un titre en deux temps, renvoyé à la ligne et monté d'un cran. Ce n'est pas l'accent PT Serif, réservé à un mot isolé : ici la chute fait trois mots, et c'est l'échelle qui la détache. `.plein .chute` porte deux classes, donc l'emporte sur `.plein h2`. */ .chute{display:block;margin-top:.3em;font-family:var(--serif);font-style:italic; font-weight:700;font-size:1.55em;line-height:1.06;letter-spacing:-.01em} /* L'accent PT Serif. Un mot par phrase, deux au maximum par bloc. En bordeaux quand le mot est le point culminant. Jamais un titre entier, jamais un bouton. line-height:0 annule le débord de sa boîte. */ .ac{font-family:var(--serif);font-style:italic;font-weight:700;line-height:0} .ac--bx{color:var(--bx)} /* Un mot seul, posé sous un titre, dans la seconde police. `.ac` porte une hauteur de ligne nulle parce qu'il vit d'ordinaire au fil du texte : il faut la lui rendre dès qu'il devient un bloc. */ .mot-cle{margin:.5rem 0 0;font-size:var(--t-h1);line-height:1.15} .mot-cle .ac{line-height:1.15} /* LE FILET BORDEAUX. Trait plein de 3 px, largeur 64 px, entre le titre et le corps sur les ouvertures de section. C'est le marqueur de marque de la charte, article 7. Il se trace au défilement. */ .filet{display:block;width:64px;height:3px;background:var(--bx); margin:1.5rem 0;transform-origin:left;transition:transform .7s cubic-bezier(.22,.61,.36,1)} .js .filet{transform:scaleX(0)} .js [data-vu] .filet,.js .filet[data-vu]{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .js .filet{transform:scaleX(1);transition:none} } /* ---------- Aplats bordeaux -------------------------------------------- Le quadrillage de 48 px est retiré. Il illustrait l'architecture au lieu de la faire : un carreau ne dit pas le métier, il le mime. Ce qui le remplace vient du même endroit, la charte article 2 : son dégradé linéaire à 135° reste la base, on lui ajoute la lumière du dégradé radial des portraits. Un aplat devient un volume éclairé de biais, ce qui est le vrai sujet de l'architecture. ----------------------------------------------------------------------- */ .plein{position:relative;isolation:isolate;overflow:clip;color:var(--blanc); background:linear-gradient(135deg,var(--bx-400) 0%,var(--bx) 45%,var(--bx-700) 100%)} /* La lumière. Une ouverture large et très douce, hors de l'axe, et le poids d'une ombre dans le coin opposé pour que le champ ne soit pas plat. */ .plein::before{content:"";position:absolute;inset:-25% -12%;z-index:-2;pointer-events:none; background: radial-gradient(58% 52% at 20% 14%,rgba(255,255,255,.17) 0%,rgba(255,255,255,0) 64%), radial-gradient(46% 42% at 84% 94%,rgba(23,6,6,.46) 0%,rgba(23,6,6,0) 70%)} /* Le grain. Tuile de 200 px répétée et deux octaves seulement : la tramer coûte peu et le navigateur la garde en cache. C'est lui qui enlève la platitude du numérique et donne la matière d'un tirage. */ .plein::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; opacity:.15;mix-blend-mode:overlay;background-size:200px 200px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url%28%23g%29'/%3E%3C/svg%3E")} /* Les cartes posées sur un aplat n'avaient pas de fond : seul un liseré à 28 % les tenait, et elles se confondaient avec le dégradé. Un panneau plus sombre les détache et les creuse, ce qui va dans le sens de la lumière rasante du fond. Assombrir ne peut qu'améliorer le contraste du texte blanc qu'elles portent. */ .plein .carte{background:rgba(77,20,20,.34);border-color:rgba(255,255,255,.20)} .plein .carte:hover{border-color:rgba(255,255,255,.42); box-shadow:0 14px 40px rgba(23,6,6,.35)} .plein .carte p{color:rgba(255,255,255,.86)} .plein h2,.plein h3{color:var(--blanc)} .plein p{color:rgba(255,255,255,.88)} .plein .leg{color:var(--bx-100)} .plein .filet{background:var(--bx-100)} .radial{background:radial-gradient(circle at 50% 40%,var(--bx-400) 0%,var(--bx) 40%,var(--bx-700) 100%); color:var(--blanc)} /* ---------- En-tête ----------------------------------------------------- */ .entete{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96); backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s} .entete.file{border-bottom-color:#e6e6e6} .barre{display:flex;align-items:center;justify-content:space-between;gap:1rem; max-width:var(--max);margin-inline:auto;padding:.9rem var(--marge)} .logo{text-decoration:none;font-weight:900;letter-spacing:.16em;font-size:.8rem; color:var(--bx);white-space:nowrap} .nav{display:flex;align-items:center;gap:1.1rem;font-size:var(--t-leg); font-weight:700;letter-spacing:.06em;text-transform:uppercase} .nav a{text-decoration:none;position:relative;padding-block:.3em} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--bx);transform:scaleX(0);transform-origin:right;transition:transform .4s} .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left} .nav .interne{display:none} @media (min-width:60em){ .nav{gap:1.6rem} .nav .interne{display:inline-block} } @media (max-width:47.99em){ .barre{flex-wrap:wrap;row-gap:.5rem;padding-block:.7rem} .logo{flex:1 0 100%} .nav{flex:1 0 100%;justify-content:space-between;gap:.5rem; border-top:1px solid #e6e6e6;padding-top:.5rem} .nav a{white-space:nowrap} } @media (prefers-reduced-motion:reduce){ .nav a::after{transition:none} } /* ---------- Boutons, rayon 4 px de la charte ---------------------------- */ .btn,.btn2{display:inline-flex;align-items:center;gap:.6em;min-height:3.25rem; padding:0 1.6rem;border-radius:var(--r-btn);text-decoration:none; font-size:var(--t-leg);font-weight:800;letter-spacing:.08em;text-transform:uppercase; border:2px solid transparent;transition:background-color .25s,color .25s,box-shadow .25s,transform .2s} .btn{background:var(--bx);color:var(--blanc);box-shadow:var(--ombre)} .btn:hover{background:var(--bx-600);box-shadow:var(--ombre-f);transform:translateY(-2px)} .btn2{border-color:var(--noir);color:var(--noir)} .btn2:hover{background:var(--noir);color:var(--blanc);transform:translateY(-2px)} .plein .btn{background:var(--blanc);color:var(--bx)} .plein .btn:hover{background:var(--bx-100)} .plein .btn2{border-color:rgba(255,255,255,.6);color:var(--blanc)} .plein .btn2:hover{background:var(--blanc);color:var(--bx)} .btn::after,.btn2::after{content:"\2192";font-family:var(--sans);font-weight:700; transition:transform .25s} .btn:hover::after,.btn2:hover::after{transform:translateX(4px)} .btn:focus-visible,.btn2:focus-visible{outline:3px solid var(--bx);outline-offset:3px} .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem} .lien{text-decoration:none;font-weight:700;border-bottom:2px solid var(--bx);padding-bottom:1px} .lien:hover{color:var(--bx)} /* ---------- Grille ------------------------------------------------------ */ .duo{display:grid;gap:2rem;grid-template-columns:1fr} @media (min-width:56em){ .duo{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center} .duo--large{grid-template-columns:5fr 7fr} .duo--haut{align-items:start} .duo--inv>*:first-child{order:2} } .trio{display:grid;gap:1.25rem;grid-template-columns:1fr} @media (min-width:44em){ .trio{grid-template-columns:repeat(3,1fr)} } /* ---------- Cartes, rayon 8 px ------------------------------------------ */ .carte{border:1px solid #e6e6e6;border-radius:var(--r-carte);padding:1.6rem; background:var(--blanc);transition:box-shadow .3s,transform .3s,border-color .3s} .carte:hover{box-shadow:var(--ombre-f);transform:translateY(-3px);border-color:var(--bx-200)} /* Un filet bordeaux se tire sur l'arête haute au survol. Même geste que le filet de marque, à l'échelle de la carte. */ .carte{position:relative;overflow:hidden} .carte::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%; background:var(--bx);transform:scaleX(0);transform-origin:left; transition:transform .45s cubic-bezier(.22,.61,.36,1)} .carte:hover::before,.carte:focus-within::before{transform:scaleX(1)} .plein .carte::before{background:var(--bx-100)} @media (prefers-reduced-motion:reduce){ .carte::before{transition:none} } /* Le numéro devient un chiffre d'édition : grand, plein, aligné sur le filet. Testé en transparence, abandonné : à 50 % d'opacité il plafonne à 2,81:1 pour un seuil de 3:1. Un chiffre illisible n'est pas un chiffre discret. */ .carte .num{display:block;font-size:var(--t-h2);font-weight:900;line-height:1; letter-spacing:-.04em;color:var(--bx);margin-bottom:.5rem} .plein .carte .num{color:var(--blanc)} .carte p{margin-bottom:0;font-size:var(--t-petit);color:var(--gris-txt)} .carte h3{margin-bottom:.6rem} @media (prefers-reduced-motion:reduce){ .carte:hover{transform:none} } /* ---------- La fiche de décision --------------------------------------- La moitié « documents » de l'offre n'avait aucun visuel, alors qu'elle en porte la moitié. Plutôt qu'une capture d'écran qu'on n'a pas, ou un faux document rempli qu'on s'interdit, on montre la forme du livrable : ses rubriques, et rien d'autre. Aucune valeur, donc aucun chiffre inventé. */ .fiche{border:1px solid #e6e6e6;border-radius:var(--r-carte);overflow:hidden; background:var(--blanc);box-shadow:var(--ombre)} .fiche-tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; background:var(--bx);color:var(--blanc);padding:.7rem 1.1rem; font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .fiche-tete span:last-child{color:var(--bx-100)} .fiche ul{list-style:none;margin:0;padding:0} .fiche li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:.8rem 1.1rem;border-bottom:1px solid #ededed; font-size:var(--t-petit);font-weight:700;max-width:none} .fiche li:last-of-type{border-bottom:0} .fiche li span{font-weight:400;color:var(--gris-txt);text-align:right;flex:none;max-width:52%} .fiche figcaption{padding:.85rem 1.1rem;background:var(--blanc); border-top:1px solid var(--gris-bord); font-size:var(--t-leg);line-height:1.5;color:var(--gris-txt)} /* ---------- Listes ------------------------------------------------------ */ .pastilles{list-style:none;margin:1.25rem 0 0;padding:0} .pastilles li{position:relative;padding:.55rem 0 .55rem 1.6rem;max-width:36em; font-size:var(--t-petit)} .pastilles li::before{content:"";position:absolute;left:0;top:1.15em; width:8px;height:8px;background:var(--bx);border-radius:1px} .etapes{list-style:none;margin:0;padding:0;counter-reset:e;display:grid;gap:1.25rem} @media (min-width:44em){ .etapes{grid-template-columns:repeat(2,1fr)} } @media (min-width:68em){ .etapes{grid-template-columns:repeat(4,1fr)} } .etapes li{counter-increment:e;border-top:3px solid var(--bx);padding-top:.9rem;max-width:none} .etapes li::before{content:counter(e,decimal-leading-zero);display:block; font-size:var(--t-leg);font-weight:800;letter-spacing:.1em;color:var(--bx);margin-bottom:.4rem} .etapes strong{display:block;margin-bottom:.3rem} /* Une précision qui ouvre sa propre phrase : elle se détache de ce qui précède, mais reste soudée à ce qu'elle annonce. D'où une marge en haut seulement, et le `strong` remis en ligne pour ne pas casser la phrase. */ .apres{display:block;margin-top:.55rem} .apres strong{display:inline;margin:0} .etapes span{font-size:var(--t-petit);color:var(--gris-txt)} /* ---------- Preuves ----------------------------------------------------- */ .tableau{display:grid;gap:2.5rem;grid-template-columns:1fr} @media (min-width:52em){ .tableau{grid-template-columns:1fr 1fr;gap:3rem} } .tableau ul{list-style:none;margin:1rem 0 0;padding:0} .tableau li{padding:.9rem 0;border-bottom:1px solid #e6e6e6;max-width:none;font-size:var(--t-petit)} .tableau li:last-child{border-bottom:0} .tableau .v{display:block;font-size:var(--t-h3);font-weight:900;letter-spacing:-.02em; color:var(--bx);margin-bottom:.2rem} /* ---------- Questions --------------------------------------------------- */ .faq{margin-top:1.75rem;border-top:1px solid #e6e6e6} .faq details{border-bottom:1px solid #e6e6e6} .faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative; font-weight:700;font-size:var(--t-chapo)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%); color:var(--bx);font-size:1.4em;font-weight:400;line-height:1} .faq details[open] summary::after{content:"\2212"} .faq summary:hover{color:var(--bx)} .faq summary:focus-visible{outline:3px solid var(--bx);outline-offset:2px} .faq .rep{padding-bottom:1.25rem} .faq .rep p{font-size:var(--t-petit);max-width:44em} .faq .rep p:last-child{margin-bottom:0} /* ---------- Qui. Un retour à la ligne, pas une séparation --------------- Première version rejetée : filets bordeaux et intitulés de rôle en tête de chaque bloc. Les filets flottaient comme des tirets dans le vide, et le rôle était déjà porté par la légende du portrait, à droite. Il ne reste que ce qui était demandé : le nom en gros, le parcours à la ligne. */ .qui-liste{display:grid;gap:1.1rem;margin:1.5rem 0 1.75rem} .qui-liste p{margin:0} .qui-nom{display:block;font-size:var(--t-h3);font-weight:800; letter-spacing:-.01em;line-height:1.25;margin-bottom:.1rem} /* ---------- Portraits, dégradé radial de la charte ---------------------- */ .portraits{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr;max-width:34rem} .portraits figure{border-radius:var(--r-carte);overflow:hidden; background:radial-gradient(circle at 50% 40%,var(--bx-400) 0%,var(--bx) 40%,var(--bx-700) 100%)} .portraits img{mix-blend-mode:normal;width:100%} .portraits figcaption{padding:.7rem .9rem;color:var(--blanc);font-size:var(--t-leg); font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* ---------- Pied -------------------------------------------------------- */ .pied{background:var(--gris);padding-block:var(--pas) 2rem;margin-top:0} .pied .liens{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.5rem 0; font-size:var(--t-leg);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .pied a{text-decoration:none;border-bottom:2px solid transparent} .pied a:hover{border-bottom-color:var(--bx);color:var(--bx)} .signature{font-family:var(--serif);font-style:italic;font-weight:700; font-size:var(--t-h3);color:var(--bx);margin:0} .mentions{font-size:var(--t-leg);letter-spacing:0;text-transform:none;font-weight:400; color:var(--gris-txt);line-height:1.6;max-width:60em;margin-top:1.5rem} /* ---------- Divers ------------------------------------------------------ */ .saut{position:absolute;left:-9999px} .saut:focus{left:var(--marge);top:.5rem;z-index:60;background:var(--noir);color:var(--blanc); padding:.75rem 1rem;font-weight:700;font-size:var(--t-petit);border-radius:var(--r-btn)} /* Révélations au défilement. Fondu d'opacité, hors du champ du critère WCAG 2.3.3 ; la translation n'est ajoutée que si elle est acceptable. */ .js [data-vu]{opacity:0;transition:opacity .38s ease,transform .38s cubic-bezier(.22,.61,.36,1)} .js.mvt [data-vu]{transform:translateY(12px)} .js [data-vu].vu{opacity:1;transform:none} .js [data-vu][data-d="1"]{transition-delay:.1s} .js [data-vu][data-d="2"]{transition-delay:.2s} .js [data-vu][data-d="3"]{transition-delay:.3s} .js [data-vu][data-d="4"]{transition-delay:.4s} .js [data-vu][data-d="5"]{transition-delay:.5s} @media (prefers-reduced-motion:reduce){ .js [data-vu]{opacity:1;transform:none;transition:none} } @media print{ .entete,.nav{display:none} .plein,.radial{background:none !important;color:#000 !important;border:2px solid #000} .plein p,.plein h2{color:#000 !important} } /* Le comparateur et la bande de matières */ /* Le comparateur occupe toute la colonne, de marge à marge. Le plafond de 900 px le maintenait plus étroit que le texte alors que c'est la seule image de la page où l'on regarde vraiment quelque chose. */ .cmp-cadre{position:relative;border-radius:var(--r-carte);overflow:hidden; box-shadow:var(--ombre-f)} /* La rangée de déclinaisons : un bandeau d'une seule ligne, comme une planche d'échantillons de matière. Elle ne sert pas à étudier chaque image, le grand comparateur au-dessus s'en charge, elle sert à montrer l'étendue d'un coup d'œil et à ne pas manger la page. `grid-auto-flow:column` force la ligne unique. La colonne ne descend jamais sous 64 px : au-delà de ce que l'écran peut tenir, le bandeau défile latéralement plutôt que de rendre les vignettes illisibles. Ce sont des images sans poignée, donc aucun conflit de geste au doigt. */ .mat{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr); gap:2px;border-radius:var(--r-carte);overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:thin} .mat img{width:100%;aspect-ratio:1/1;object-fit:cover} /* Raccord des pages intérieures au vocabulaire de la charte */ /* LES PLANCHES DU BOOK. Elles étaient empilées sur une colonne de 896 px, en alternance gauche et droite. Deux défauts : le rythme est monotone sur dix-sept planches, et une verticale y faisait 1 150 px de haut, donc plus d'un écran pour une image. Deux colonnes règlent les deux d'un coup. Une planche passe de 896 à 570 px de large environ, ce qui divise sa hauteur d'autant et double la finesse perçue à résolution de fichier constante. La plus haute, une verticale en 0,78, tombe à 730 px : elle tient dans un écran. `align-items:start` laisse chaque planche à sa hauteur propre. Le rythme devient irrégulier, ce qui est voulu : dix-sept rectangles identiques, c'est un catalogue, pas un book. */ .planches-liste{display:grid;gap:clamp(2rem,4vw,3.25rem); grid-template-columns:1fr;align-items:start} @media (min-width:62em){ .planches-liste{grid-template-columns:1fr 1fr} } .planche-fig{max-width:none;min-width:0} /* La pleine largeur est réservée aux panoramiques. À 1 200 px une 16/9 fait 675 px de haut et tient à l'écran ; une verticale en ferait 1 540. */ @media (min-width:62em){ .planche-fig--large{grid-column:1 / -1} } /* Garde-fou pour les écrans bas : on rogne légèrement plutôt que de déborder. */ .planche-fig .cmp,.planche-fig .diptyque{max-height:78vh} .fig-tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; border-top:3px solid var(--bx);padding-top:.6rem;margin-bottom:1rem} .fig-num,.fig-info{font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .fig-info{color:var(--gris-txt);text-align:right} /* Le triptyque : deux volets montrant trois états d'un même cadrage. Côte à côte à partir de 56em, l'un sous l'autre en dessous, où deux 16/9 de 170 px de haut ne seraient plus lisibles. */ .triptyque{display:grid;gap:.75rem} @media (min-width:56em){ .triptyque{grid-template-columns:1fr 1fr} } .diptyque{display:grid;grid-template-columns:1fr;gap:2px;border-radius:var(--r-carte);overflow:hidden} @media (min-width:34em){ .diptyque{grid-template-columns:1fr 1fr} } .diptyque figure{position:relative} .etiq{position:absolute;left:0;bottom:0;background:var(--blanc);padding:.4em .6em; font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .cmp{border-radius:var(--r-carte)} .reperage{position:absolute;left:0;top:0;z-index:2;background:var(--blanc);padding:.45em .7em; font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .etapes-feuille{list-style:none;padding:0;counter-reset:e;margin:1.5rem 0 0;display:block} .etapes-feuille li{counter-increment:e;border-top:3px solid var(--bx);padding:1rem 0;margin:0;max-width:none} .etapes-feuille li::before{content:counter(e,decimal-leading-zero);display:block; font-size:var(--t-leg);font-weight:800;letter-spacing:.1em;color:var(--bx);margin-bottom:.3rem} .etapes-feuille strong{display:block;margin-bottom:.2rem} .avert{border-left:3px solid var(--bx);background:var(--bx-50);padding:1.2rem 1.4rem; border-radius:0 var(--r-carte) var(--r-carte) 0} .avert p{max-width:none;margin:0} .avert p + p{margin-top:.6rem} .acompleter{background:var(--bx-50);border-bottom:2px solid var(--bx);padding:.1em .45em; font-weight:700;color:var(--bx)} .feuille{max-width:44rem;margin-inline:auto} .cartouche{display:flex;flex-wrap:wrap;border:1px solid #e6e6e6;border-radius:var(--r-carte);overflow:hidden} .cartouche div{padding:.8rem 1.1rem;flex:1 1 auto;border-right:1px solid #e6e6e6} .cartouche div:last-child{border-right:0} .cartouche dt{font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt)} .cartouche dd{margin:.2rem 0 0;font-size:var(--t-petit)} .liste{list-style:none;margin:0;padding:0} .liste li{padding:.7rem 0;border-bottom:1px solid #e6e6e6;max-width:none;font-size:var(--t-petit)} .liste li:last-child{border-bottom:0} .mono{font-variant-numeric:tabular-nums} .imprimer{margin:1.5rem 0} @media print{ .imprimer{display:none} } /* L'appel aux agences pilotes. Un bloc qui se distingue sans crier : fond rose très clair de la charte, filet bordeaux à gauche, rayon 8 px. */ .appel{background:var(--bx-50);border-left:3px solid var(--bx); border-radius:0 var(--r-carte) var(--r-carte) 0; padding:clamp(1.5rem,4vw,2.75rem)} .appel .pastilles li{font-size:var(--t-petit)} .appel .actions{margin-bottom:0} /* L'onglet des agences pilotes. C'est l'élément de départ du projet, il doit attirer l'oeil sans crier. Pastille bordeaux qui bat trois fois au chargement puis s'arrête : une animation finie ne relève pas du critère WCAG 2.2.2, qui vise ce qui dure au-delà de cinq secondes. */ .pilote-nav{color:var(--bx)} .pilote-nav::after{background:var(--bx)} /* Les portraits restent sur blanc, comme les photos fournies. Le dégradé radial appartient aux bannières, pas aux vignettes du site. */ /* Pas de contour autour des photos : elles sont détourées sur blanc, un filet gris les enfermerait dans une vignette. Le nom revient sur un bandeau bordeaux, qui est le seul aplat de la section. */ .portraits figure{background:var(--blanc);border:0} .portraits figcaption{color:var(--blanc);background:var(--bx);border-top:0} /* La page courante se signale dans le menu, sinon on ne sait plus où on est. */ .nav a.actif{color:var(--bx)} .nav a.actif::after{transform:scaleX(1);transform-origin:left} /* ========================================================================= Le programme pilote : fenêtre à l'arrivée, puis onglet de rappel ========================================================================= */ .pop{border:0;padding:0;max-width:min(34rem,calc(100vw - 2rem));width:100%; border-radius:var(--r-carte);box-shadow:0 32px 80px -24px rgba(23,6,6,.45); padding:clamp(1.75rem,4vw,2.5rem);position:relative;background:var(--blanc); color:var(--noir)} .pop::backdrop{background:rgba(23,6,6,.55);backdrop-filter:blur(3px)} .pop-fermer-form{position:absolute;top:.5rem;right:.5rem;margin:0} .pop-fermer{border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer; color:var(--gris-txt);padding:.35rem .6rem;border-radius:var(--r-btn)} .pop-fermer:hover{color:var(--bx);background:var(--bx-50)} .pop-fermer:focus-visible{outline:3px solid var(--bx);outline-offset:2px} .pop-sur{font-size:var(--t-leg);font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--bx);margin:0 0 .8rem} .pop-titre{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);font-weight:800; line-height:1.18;letter-spacing:-.02em;margin:0;max-width:20em} .pop .filet{margin:1.1rem 0} .pop-txt{font-size:var(--t-petit);color:var(--gris-txt);max-width:38em;margin:0} .pop-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem} .pop-actions .btn2{cursor:pointer;font-family:inherit} /* L'onglet de rappel, épinglé en bas. Il glisse une fois puis ne bouge plus. */ .onglet-pilote{position:fixed;z-index:35;right:var(--marge);bottom:1.25rem; display:flex;align-items:center;gap:.7em;max-width:calc(100vw - 2 * var(--marge)); background:var(--bx);color:var(--blanc);border:0;border-radius:var(--r-carte); padding:.75rem 1.1rem;cursor:pointer;font-family:inherit;text-align:left; box-shadow:0 12px 30px -12px rgba(23,6,6,.55); animation:onglet-entre .55s cubic-bezier(.22,.61,.36,1) both} .onglet-pilote:hover{background:var(--bx-600)} .onglet-pilote:focus-visible{outline:3px solid var(--bx);outline-offset:3px} .onglet-txt{font-size:var(--t-leg);font-weight:700;letter-spacing:.05em; text-transform:uppercase;line-height:1.3} .onglet-txt b{display:block;font-weight:400;letter-spacing:.02em; text-transform:none;color:var(--bx-100)} .onglet-point{width:8px;height:8px;border-radius:50%;background:var(--bx-100);flex:none; animation:onglet-bat 1.4s ease-out 3 1s} @keyframes onglet-entre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes onglet-bat{ 0%{box-shadow:0 0 0 0 rgba(246,210,210,.7)} 70%{box-shadow:0 0 0 10px rgba(246,210,210,0)} 100%{box-shadow:0 0 0 0 rgba(246,210,210,0)} } /* Le saut d'attention. `.pose` neutralise l'animation d'entrée une fois celle-ci jouée : sans elle, retirer `.saute` relancerait l'entrée à chaque fois, puisque le navigateur redémarre toute animation dont le nom change. */ .onglet-pilote.pose{animation:none} .onglet-pilote.saute{animation:onglet-saute .85s cubic-bezier(.28,.84,.42,1)} /* Pas de mode de remplissage : les images 0 % et 100 % sont identiques, et une classe restée en place faute d'`animationend` doit rester sans effet. */ @keyframes onglet-saute{ 0%,100%{transform:translateY(0)} 14%{transform:translateY(-10px)} 30%{transform:translateY(0)} 43%{transform:translateY(-5px)} 56%{transform:translateY(0)} 66%{transform:translateY(-2px)} 74%{transform:translateY(0)} } /* Le sélecteur porte les deux classes : `.onglet-pilote` seul serait moins spécifique que `.onglet-pilote.saute` et ne l'annulerait pas. */ @media (prefers-reduced-motion:reduce){ .onglet-pilote,.onglet-point, .onglet-pilote.saute{animation:none} } @media (max-width:33em){ .onglet-pilote{left:.75rem;right:.75rem;bottom:.75rem;justify-content:center} } /* La fenêtre est en position fixe une fois modale : elle ne doit jamais entraîner la page vers le haut quand on l'ouvre depuis le bas du site. */ .pop{margin:auto} @media print{ .pop,.onglet-pilote{display:none} } /* ========================================================================= ANIMATIONS PILOTÉES PAR LE DÉFILEMENT `animation-timeline` n'est pas Baseline : MDN le classe en disponibilité limitée, et Firefox le garde derrière un drapeau. C'est donc une couche en plus, jamais une dépendance. Tout ce qui suit est écrit pour que la page soit finie sans, et seulement plus vivante avec. Rien ne démarre tout seul : c'est le défilement qui mène, donc le critère WCAG 2.2.2 est hors sujet. La translation, elle, relève du critère 2.3.3, d'où le garde-fou sur le mouvement réduit. ========================================================================= */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ /* La lumière traverse le mur pendant que la section défile. C'est le seul mouvement des aplats, et il est lent. */ .plein::before{animation:plein-lumiere linear both; animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes plein-lumiere{ from{transform:translate3d(-5%,-4%,0) scale(1.06)} to{transform:translate3d(7%,6%,0) scale(1.14)} } /* La lueur de l'accueil dérive plus lentement que la page, ce qui creuse la profondeur sans que rien ne saute aux yeux. */ .lueur::before{animation:lueur-derive linear both; animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes lueur-derive{ from{transform:translate3d(0,-7%,0)} to{transform:translate3d(0,11%,0)} } /* Le filet de progression sous l'en-tête. Il dit où on en est dans la page : un mouvement qui informe vaut mieux qu'un mouvement qui décore. */ .entete::after{content:"";position:absolute;left:0;bottom:-1px; height:2px;width:100%;background:var(--bx); transform:scaleX(0);transform-origin:left; animation:progression linear both;animation-timeline:scroll(root block)} @keyframes progression{ to{transform:scaleX(1)} } } } /* ========================================================================= RYTHME ET MOUVEMENT · 31 août 2026 Deux constats de la recette ont produit ce bloc. 1. Les onze sections ouvraient toutes sur la même petite capitale, le même titre et le même filet. Les corps étaient variés, huit formes distinctes ; c'est l'entrée qui sonnait mécanique. Quatre sections pivots gardent l'ouverture complète, les autres entrent autrement. 2. Le mouvement se limitait à un fondu à l'apparition. Les références regardées avec Benoît, chatflowai.co et remakeit.io, sont sombres et très logicielles, donc leur allure ne se reprend pas ici : la charte impose le fond blanc. Ce qui se reprend est leur grammaire, un mouvement lié au défilement plutôt qu'à une minuterie. Le doigt sur la molette pilote, donc rien ne tourne en boucle et le critère WCAG 2.2.2 ne s'applique toujours pas. ========================================================================= */ /* ---------- 1 · La lecture au défilement -------------------------------- Le titre part en gris très clair et se remplit de noir mot après mot, au rythme du défilement. C'est une variation d'opacité sur un texte présent dans le document : il reste sélectionnable, lu par un lecteur d'écran, et entièrement noir dès que la section est en place. Réservé aux trois titres qui portent la page. Répandu partout, l'effet redeviendrait le gabarit qu'on cherche à casser. */ .lire{--p:0} .js .lire .m{opacity:max(.22, calc(var(--p) * var(--n) - var(--i)))} @media (prefers-reduced-motion:reduce){ .js .lire .m{opacity:1} } /* ---------- 2 · Le trait de progression --------------------------------- Les quatre étapes de la méthode portent une ligne verticale qui se remplit à mesure qu'on descend. C'est la ligne de rappel d'une coupe, pas une barre de chargement : elle mesure la lecture, elle n'annonce pas une attente. */ /* LE TRAIT DE LA MÉTHODE. Quatre filets séparés en tête de chaque étape se lisaient comme quatre objets. C'est une seule progression : un seul trait, continu d'un bout à l'autre des quatre colonnes, qui avance au fil du défilement. Les quatre repères posés dessus marquent les étapes, comme les graduations d'une ligne de cote, et prennent le bordeaux quand la lecture les franchit. Le trait continu n'existe qu'à partir du moment où les quatre étapes sont sur une seule ligne. En dessous elles se placent en deux colonnes ou en une : un trait horizontal ne relierait plus rien, donc chaque étape garde son propre filet, qui se remplit à son tour. */ .js .etapes li{border-top-color:var(--gris-bord);position:relative} .js .etapes li::after{content:"";position:absolute;left:0;right:0;top:-3px; height:3px;background:var(--bx);transform:scaleX(var(--r,0)); transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)} @media (min-width:68em){ .js .etapes{position:relative;padding-top:1.6rem;margin-top:2rem} .js .etapes li{border-top:0;padding-top:0} /* La ligne, en deux couches : la graduation grise, puis le remplissage bordeaux piloté par la progression du défilement. */ .js .etapes::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:var(--gris-bord)} .js .etapes::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:var(--bx);transform:scaleX(var(--p,0));transform-origin:left} /* Le repère de chaque étape, posé sur la ligne. Il pâlit tant que la lecture ne l'a pas franchi : une opacité pilotée par la même variable que le reste, donc aucune classe supplémentaire à poser. */ .js .etapes li::after{content:"";left:0;right:auto;top:-1.6rem; width:2px;height:1.6rem;background:var(--bx); transform:none;opacity:calc(.16 + var(--r,0) * .84); transition:opacity .45s ease} } @media (prefers-reduced-motion:reduce){ .js .etapes li{border-top-color:var(--bx)} .js .etapes li::after{display:none} .js .etapes::after{transform:scaleX(1)} } /* ---------- 3 · Les ouvertures de section ------------------------------- Cinq formes, pour que la page cesse d'entrer onze fois de la même façon. La forme « chiffrée », essayée le 31 août, est retirée : ses quatre filets tombaient juste après les quatre filets des étapes, et deux motifs de lignes d'affilée se lisaient comme un seul. */ /* a · L'ouverture pivot. Petite capitale, titre, filet. Elle est réservée aux quatre moments qui structurent la page : ce qu'on fait, la limite, pourquoi nous, et la conversion. Ailleurs, elle est interdite. */ /* b · En regard. Le titre tient la colonne de gauche, le texte celle de droite. Aucun surtitre : le titre se suffit. */ .ouv-regard{display:grid;gap:1.25rem 3rem;grid-template-columns:1fr;align-items:start} @media (min-width:56em){ .ouv-regard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem} .ouv-regard>*{margin:0} } .ouv-regard h2{max-width:12em} .ouv-regard .chapo{margin:0;max-width:32em} /* c · Nue. Le titre seul, plus grand, sans surtitre ni filet. Le blanc autour fait le travail que le filet faisait ailleurs. */ .ouv-nue h2{font-size:var(--t-h1);max-width:13em} .ouv-nue{padding-block:.5rem 0} /* d · Comptée. Un nombre en vis-à-vis du titre, à l'échelle du display. Il dit combien il y en a avant qu'on ait commencé à lire. */ .ouv-compte{display:flex;align-items:baseline;gap:clamp(.9rem,2.4vw,1.8rem);flex-wrap:wrap} .ouv-compte .nb{font-size:var(--t-display);font-weight:900;line-height:.9; letter-spacing:-.04em;color:var(--bx);font-variant-numeric:tabular-nums} .ouv-compte h2{max-width:13em;flex:1 1 16rem} .ouv-compte .nb-lg{display:block;font-size:var(--t-leg);font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--gris-txt);margin-top:.5rem} /* e · Interrogée. Le titre est une question, et un filet court le précède sur la même ligne au lieu de le suivre. */ .ouv-question{display:flex;align-items:baseline;gap:1rem} .ouv-question::before{content:"";flex:0 0 auto;width:32px;height:3px; background:var(--bx);transform:translateY(-.35em)} .ouv-question h2{max-width:16em} /* ---------- 4 · Le rythme vertical -------------------------------------- Toutes les sections respiraient de la même façon. Une page dont chaque intervalle est identique se lit comme un document généré, même quand son contenu ne l'est pas. */ .sec--ample{padding-block:calc(var(--pas) * 1.45)} /* La première section après l'accroche pleine page. C'est le seul endroit où le fond change sous les yeux du lecteur, donc c'est celui qui demande le plus d'air : 70 px de blanc mesurés avant, la moitié de la moyenne. */ .sec--ouverture{padding-top:calc(var(--pas) * 1.6)} .sec--suite{padding-top:calc(var(--pas) * .8)} /* ========================================================================= LA PLANCHE · 31 août 2026, second passage Reproche de Benoît, et il est juste : « très proche d'un PDF animé », et « au bout du 3e bandeau bordeaux on est déjà lassé ». Le site empilait des sections bien composées sans qu'aucun objet ne tienne l'ensemble. Ce qui le tient maintenant vient du métier, pas de la décoration : une planche de rendu. Elle est cotée, et elle se signe par un cartouche. Ce sont les instruments du dessin d'architecture, pas son imitation. La coupe avait été refusée au retour 3 parce qu'elle illustrait ; ceux-là servent. Une réglette de repérage a été essayée dans la marge gauche, puis retirée à la demande de Benoît le 31 août : la barre du haut fait déjà ce travail, et deux navigations pour onze sections en font une de trop. ========================================================================= */ /* ---------- 1 · La cote ------------------------------------------------ Une ligne de cote sépare deux sections blanches : un trait fin, deux tirets d'about, et une légende au milieu. C'est la respiration mesurée d'une planche, et elle remplace le filet quand il n'y a rien à ouvrir. */ .cote{display:flex;align-items:center;gap:1rem;margin-block:0;max-width:none; color:var(--gris-txt);font-size:var(--t-leg);font-weight:700; letter-spacing:.12em;text-transform:uppercase} .cote::before,.cote::after{content:"";height:1px;background:var(--gris-bord);flex:1} .cote span{position:relative;padding-inline:.1rem;white-space:nowrap} /* ---------- 2 · Le moment de bascule ------------------------------------ La limite est le point culminant de la page, et le seul endroit où l'on n'a rien à ajouter. Elle devient une pleine page presque vide, éclairée par le dégradé radial des couvertures. Elle ne ressemble donc pas aux deux autres aplats, et le troisième bandeau cesse d'en être un. */ /* Sur un téléphone, une pleine page de bascule coûte un écran entier pour une phrase. Elle reste un temps d'arrêt, mais mesuré. */ .bascule{min-height:min(60vh,26rem);display:flex;align-items:center; background:radial-gradient(circle at 50% 42%,var(--bx-400) 0%,var(--bx) 42%,var(--bx-700) 100%)} @media (min-width:56em){ .bascule{min-height:min(78vh,44rem)} } .bascule .wrap{width:100%;text-align:center} .bascule h2{margin-inline:auto;font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);line-height:1.02} .bascule p{margin-inline:auto;text-align:center} .bascule .filet{margin-inline:auto} .bascule .leg{text-align:center} /* ---------- 3 · Le circuit des six raisons ------------------------------ Neuvième forme, et la courbe s'en va. Benoît : « des traits un peu plus fins en pointillés comme archi qui relient, qui sont très courts entre chaque module. » C'est juste, et c'est une vraie convention de dessin. Sur un plan, le pointillé fin ne décore pas : il relie ce qui n'est pas dessiné en plein. Une longue courbe en S était une illustration ; quatre segments courts sont un circuit. Le SVG et son calcul de géométrie disparaissent avec elle, ce qui retire aussi une centaine de lignes de script. Le pointillé est fait au dégradé répété plutôt qu'en `dashed` : le `border: dashed` du navigateur donne des tirets longs et irréguliers, là où le dégradé donne un pas exact, 2 px de trait pour 4 px de vide. */ .tete-centre{text-align:center;max-width:32rem;margin-inline:auto} .tete-centre h2{max-width:none;margin-top:.6rem; font-size:clamp(1.6rem,1.15rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.025em} .circuit{position:relative;display:grid;grid-template-columns:1fr;gap:1rem; margin-top:2.5rem} @media (min-width:48em){ .circuit{grid-template-columns:repeat(2,1fr); column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:2.2rem;align-items:start} } .cellule{position:relative; display:flex;align-items:flex-start;gap:1rem; padding:1.1rem 1.25rem 1.15rem;border-radius:var(--r-carte); background:rgba(77,20,20,.42);border:1px solid rgba(255,255,255,.20); translate:0 var(--dy,0px); transition:border-color .3s,box-shadow .3s,background-color .3s, opacity .38s ease,translate .38s cubic-bezier(.22,.61,.36,1), scale .3s cubic-bezier(.22,.61,.36,1)} .cellule:hover{scale:1.03;border-color:rgba(255,255,255,.46); background:rgba(77,20,20,.6);box-shadow:0 18px 44px rgba(23,6,6,.4);z-index:2} /* Les liaisons. Elles n'existent qu'à partir de deux colonnes : en dessous, les cellules sont empilées et un trait horizontal ne relierait rien. */ @media (min-width:48em){ /* Trait horizontal, dans le vide entre les deux cellules d'une ligne. Porté par la cellule de gauche, donc les impaires. */ .circuit > .cellule:nth-child(odd)::after{ content:"";position:absolute;top:1.95rem;left:100%; width:clamp(2.5rem,5vw,4.5rem);height:1px; background:repeating-linear-gradient(to right, var(--bx-100) 0 2px, transparent 2px 6px); opacity:0;transition:opacity .45s ease .12s} /* Trait vertical, dans le vide entre deux lignes, sous la cellule de gauche : c'est là que la lecture reprend. Pas sous la dernière. */ .circuit > .cellule:nth-child(odd):not(:nth-last-child(-n+2))::before{ content:"";position:absolute;left:1.95rem;top:100%; width:1px;height:2.2rem; background:repeating-linear-gradient(to bottom, var(--bx-100) 0 2px, transparent 2px 6px); opacity:0;transition:opacity .45s ease .12s} /* Le trait vertical porte un `:not()` dans son sélecteur, ce qui le rend plus spécifique que cette règle. Sans la même chaîne ici, son opacité nulle l'emporte et il ne se montre jamais. Vérifié : c'était le cas. */ .circuit > .cellule.posee::after{opacity:.55} .circuit > .cellule:nth-child(odd):not(:nth-last-child(-n+2)).posee::before{opacity:.55} } .js .circuit .cellule{opacity:0} .js .circuit .cellule.posee{opacity:1} .cellule .rg{flex:none;width:2.2rem;height:2.2rem;border-radius:6px; background:rgba(255,255,255,.14);color:var(--bx-100); display:flex;align-items:center;justify-content:center; font-size:var(--t-leg);font-weight:900;letter-spacing:.02em; font-variant-numeric:tabular-nums} .cellule h3{font-size:var(--t-h4);font-weight:800;line-height:1.2; letter-spacing:.04em;text-transform:uppercase;margin:0 0 .3rem;max-width:none; color:var(--blanc)} .cellule p{font-size:var(--t-petit);color:rgba(255,255,255,.86);margin:0;max-width:32em} /* ---------- 3 ter · Le flottement au défilement ------------------------- Rien ne bouge tout seul : le décalage est une fonction de la position dans la fenêtre, donc du doigt sur la molette. Quelques pixels au plus, et deux sens opposés pour que l'ensemble respire au lieu de glisser en bloc. */ .flotte{translate:0 var(--dy,0px);will-change:translate} @media (prefers-reduced-motion:reduce){ .cellule,.flotte{translate:none !important;transition:none} .cellule:hover{scale:1} .js .circuit .cellule{opacity:1} .circuit > .cellule::after,.circuit > .cellule::before{opacity:.55 !important} } /* ---------- 3 bis · Le grand nombre en marge ---------------------------- La demande finale se lisait comme un paragraphe de plus. Le nombre sort dans la marge gauche, à l'échelle d'un chiffre de planche, et il porte sous lui ce qu'il compte et ce qu'il coûte. */ .appel-tete{display:grid;gap:1.1rem 2.75rem;grid-template-columns:1fr;align-items:start} @media (min-width:52em){ .appel-tete{grid-template-columns:auto minmax(0,1fr)} } .grand-nb{margin:0;line-height:.8;max-width:none} .grand-nb .n{display:block;font-size:clamp(5.5rem,3rem + 11vw,11rem);font-weight:900; line-height:.78;letter-spacing:-.06em;color:var(--bx);font-variant-numeric:tabular-nums} .grand-nb .quoi{display:block;margin-top:.5rem;font-size:var(--t-leg);font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--noir)} .grand-nb .prix{display:block;margin-top:.15rem;font-family:var(--serif); font-style:italic;font-weight:700;font-size:var(--t-h3);color:var(--bx);line-height:1.2} /* ---------- 4 · Le bloc de conversion ----------------------------------- La demande finale n'est plus une section pleine largeur de plus. C'est un bloc encadré, posé dans le blanc, qui se lit comme le dernier objet de la planche et non comme un troisième bandeau. */ .sec--fin{padding-block:calc(var(--pas) * 1.15) var(--pas)} .final{position:relative;isolation:isolate;overflow:clip;color:var(--blanc); border-radius:var(--r-carte);padding:clamp(2rem,4.5vw,3.4rem); background:linear-gradient(135deg,var(--bx-400) 0%,var(--bx) 45%,var(--bx-700) 100%); box-shadow:var(--ombre-f)} .final::before{content:"";position:absolute;inset:-25% -12%;z-index:-2;pointer-events:none; background: radial-gradient(58% 52% at 18% 12%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 64%), radial-gradient(46% 42% at 86% 96%,rgba(23,6,6,.46) 0%,rgba(23,6,6,0) 70%)} .final h2,.final h3{color:var(--blanc)} .final p{color:rgba(255,255,255,.9)} .final .leg{color:var(--bx-100)} .final .filet{background:var(--bx-100)} .final .btn{background:var(--blanc);color:var(--bx)} .final .btn:hover{background:var(--bx-100)} .final .btn2{border-color:rgba(255,255,255,.6);color:var(--blanc)} .final .btn2:hover{background:var(--blanc);color:var(--bx)} /* ---------- 5 · Le cartouche -------------------------------------------- Toute planche se signe dans son coin. Le pied cesse d'être une bande grise avec des liens : il devient le bloc d'identification du document, ses cases séparées par des filets, comme il l'est sur un plan. Il s'appelle `.pied--planche` et non `.cartouche` : `.cartouche` existe déjà depuis le book, où il désigne la bande de données d'une planche. Réutiliser le nom aurait cassé cette page en silence. */ .pied--planche{background:var(--blanc);border-top:2px solid var(--noir); padding-block:0 2.5rem;margin-top:0} .pied-grille{display:grid;grid-template-columns:1fr;gap:0; border-bottom:1px solid var(--gris-bord)} @media (min-width:44em){ .pied-grille{grid-template-columns:1.6fr 1fr 1fr} } @media (min-width:64em){ .pied-grille{grid-template-columns:2fr 1fr 1fr 1fr} } .pied-case{padding:1.3rem 1.4rem 1.5rem 0;border-bottom:1px solid var(--gris-bord)} @media (min-width:44em){ .pied-case{border-bottom:0;border-right:1px solid var(--gris-bord);padding-left:1.4rem} .pied-case:first-child{padding-left:0} .pied-case:last-child{border-right:0} } .pied-case .leg{margin-bottom:.5rem} .pied-case p{margin:0 0 .35rem;font-size:var(--t-petit);max-width:26em} .pied--planche .logo{display:block;font-size:1rem;margin-bottom:.5rem} .pied--planche .signature{font-size:var(--t-h3);margin-bottom:.6rem} /* Les listes du cartouche sont des cibles au doigt, pas des liens au fil du texte : elles tiennent la hauteur minimale de 44 px. */ .pied--planche .liens{display:flex;flex-direction:column;gap:0;margin:0; font-size:var(--t-leg);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .pied--planche .liens a{display:inline-flex;align-items:center;min-height:2.75rem} .pied--planche a{text-decoration:none;border-bottom:2px solid transparent;width:fit-content} .pied--planche a:hover{border-bottom-color:var(--bx);color:var(--bx)} .pied--planche .mentions{margin-top:1.5rem;font-size:var(--t-leg);letter-spacing:0; text-transform:none;font-weight:400;color:var(--gris-txt);line-height:1.6;max-width:60em} /* ========================================================================= LE PREMIER ÉCRAN · 1er septembre 2026 Constat de Benoît, vérifié avant d'y toucher : au chargement, l'écran montrait l'accroche ET une tranche de l'aplat bordeaux. 342 px en 1440, 137 px sur un téléphone. Deux sujets d'un coup, alors que la règle de la charte est « un seul point focal par écran ». Le premier écran ne montre donc plus qu'une chose. Puis la descente vers la suite se fait par un dégradé, pas par une arête. ========================================================================= */ /* La hauteur exacte de l'en-tête est posée par ui.js : elle passe de 56 px à 87 px quand la barre se replie en deux lignes, et une valeur en dur laisserait dépasser l'aplat sur l'un des deux formats. */ .sec.lueur{min-height:calc(100svh - var(--h-entete, 3.5rem)); display:flex;align-items:center;position:relative} @supports not (height: 100svh){ .sec.lueur{min-height:calc(100vh - var(--h-entete, 3.5rem))} } .sec.lueur > .wrap{width:100%} /* La transition. Le blanc se réchauffe vers le rose le plus clair de la charte sur le dernier tiers de l'écran, si bien que l'aplat n'arrive plus sur une arête franche. C'est le rose dans son rôle déclaré, une ponctuation, et il ne porte aucun texte. */ .lueur::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1; height:min(42vh,22rem);pointer-events:none; background:linear-gradient(to bottom,rgba(252,239,239,0) 0%,var(--bx-50) 100%)} /* La descente. Un segment bordeaux parcourt un filet vertical, trois fois, puis s'arrête : 4,5 secondes au total, sous le seuil de cinq secondes du critère WCAG 2.2.2, donc aucun bouton de pause n'est requis. Elle disparaît au premier défilement, parce qu'elle n'a plus rien à dire. */ .descente{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:0;max-width:none; font-size:var(--t-leg);font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gris-txt);transition:opacity .45s ease} .descente.partie{opacity:0;pointer-events:none} .descente-trait{position:relative;width:1px;height:2.6rem;background:var(--gris-bord); overflow:hidden} .descente-trait i{position:absolute;left:0;top:0;width:1px;height:14px;background:var(--bx); animation:descendre 1.5s cubic-bezier(.4,0,.3,1) 3 both} @keyframes descendre{ from{transform:translateY(-14px)} to{transform:translateY(2.6rem)} } @media (prefers-reduced-motion:reduce){ .descente-trait i{animation:none;top:0;height:2.6rem} .descente{transition:none} } /* Sous 34 em de haut, un clavier ouvert ou un écran très bas : la descente n'a plus la place et elle passerait sur les boutons. */ @media (max-height:34em){ .descente{display:none} } /* ---------- Le trait d'axe entre deux sections -------------------------- Benoît : « mettre des transitions entre chaque section, une réelle continuité, et que ça ne soit pas redondant. » Le dégradé avait été essayé, et jeté : deux fonds qui se recouvrent font une tache. Ce qui relie deux sections sur une planche n'est pas un fondu, c'est un trait d'axe. Il est court, il est fin, il est en pointillé, et il se trace en arrivant. Il ne se pose qu'entre deux sections BLANCHES. Aux jonctions avec un aplat, le changement de fond fait déjà le travail : y ajouter un trait serait exactement la redondance qu'on cherche à éviter. Quatre traits sur la page, pas onze. */ .axe{display:block;width:1px;height:2.75rem;margin:0 0 1.75rem;padding:0; background:repeating-linear-gradient(to bottom, var(--gris-bord) 0 4px, transparent 4px 9px, var(--bx) 9px 11px, transparent 11px 16px); transform-origin:top;transition:transform .55s cubic-bezier(.22,.61,.36,1)} .js .axe{transform:scaleY(0)} .js [data-vu].vu .axe,.js .axe[data-vu].vu{transform:scaleY(1)} @media (prefers-reduced-motion:reduce){ .js .axe{transform:scaleY(1);transition:none} }