/* ENGENDRÉ — ne pas éditer ici. Ce fichier est une copie de kit/verdier.css du dépôt atelierduverdier/site. Toute retouche faite ici sera écrasée : corriger la source, puis relancer outils/diffuser_kit.py. */ /* ========================================================================= verdier.css — charte commune de l'Atelier du Verdier ========================================================================= FICHIER DU KIT. Il vit dans le dépôt « site », et il est RECOPIÉ dans chaque site satellite par outils/diffuser_kit.py (chantier 3). Ne pas l'éditer dans une copie : la copie sera écrasée au prochain envoi. Source : atelierduverdier/site — kit/verdier.css Les jetons ci-dessous sont repris TELS QUELS du site laser (laser.atelierduverdier.fr), qui servait déjà cette charte. Aucune valeur n'a été retouchée : le but du kit est d'arrêter la divergence, pas d'ouvrir un troisième dialecte. Ce que le kit NE contient PAS, volontairement : les composants propres à un seul site (les cartes de mode et les schémas du site laser, les couleurs de phase du journal PrintNC). Chaque site garde sa feuille locale pour ça, chargée APRÈS celle-ci. ========================================================================= */ /* ---------- 1. Jetons --------------------------------------------------- Trois blocs et non un seul : le premier donne le thème clair par défaut, le second suit le réglage du système, le troisième laisse le bouton de bascule forcer un thème via data-theme sur . Sans le troisième, le bouton ne peut pas contredire le système. */ :root{ /* Le navigateur peut peindre son canevas, ses ascenseurs et ses widgets natifs dans les deux livrées — la d'entete.html le dit déjà avant même cette feuille, celle-ci le confirme pour les copies du kit qui n'auraient pas la balise. */ color-scheme: light dark; --orange:#ff8a00; --orange-d:#e67a00; --orange-soft:#fff3e2; /* L'ENCRE ORANGE N'EST PAS L'ORANGE DE LA MARQUE, et c'est tout le propos de ce jeton. `--orange-d` tenait DEUX rôles à la fois : encre de texte, et fond de survol des boutons. Les deux tirent en sens contraire — plus on fonce pour que le texte se lise sur blanc, moins le texte foncé du bouton se lit sur le fond. Un seul jeton ne pouvait pas les tenir. Mesuré le 29/08/2026 : #e67a00 sur blanc donne 2,94:1, quand il en faut 4,5 pour du texte courant et 3 pour du gros. Or c'est la couleur des liens, des étiquettes de section, et des 31 GRANDS CHIFFRES qui sont l'argument de ce site : ils étaient l'élément le moins lisible de la page. #ac5b00 est le plus CLAIR qui tienne 4,5 sur les trois fonds où il se pose — blanc 4,94, --orange-soft 4,51, --bg-2 4,61 — à la teinte exacte de la marque (31,8°), qui ne bouge pas. */ --orange-encre:#ac5b00; --slate:#2f3540; --slate-2:#3c434f; --bg:#ffffff; --bg-2:#f6f7f9; --bg-3:#eef0f3; --fg:#23272e; --fg-2:#5a626e; --fg-3:#858d99; --line:#e2e5ea; --line-2:#d3d8df; --card:#ffffff; --shadow:0 1px 2px rgba(20,25,35,.06),0 8px 24px rgba(20,25,35,.06); --tip:#eaf6ee; --tip-b:#3f9d5a; --warn:#fdf0e6; --warn-b:#e07a1f; --note:#eaf0fb; --note-b:#3f6fd1; --radius:14px; --maxw:1180px; /* LA MESURE : la largeur d'une ligne de TEXTE, qui n'est pas celle de la page. Sans elle, un paragraphe prenait les 1136 px de la colonne, soit 154 signes par ligne (mesuré le 29/08/2026 sur la fiche du sabot, caractère moyen 7,17 px). Au-delà de ~80 l'œil rate la ligne suivante en revenant à gauche : on fatigue sans savoir pourquoi. 35rem donne 78 signes — juste au-dessus du chapô du héros, qui en fait 73 et que personne n'a jamais trouvé trop étroit. EN REM, JAMAIS EN CH. `ch` mesure le glyphe « 0 », qui fait 11,39 px ici quand le caractère moyen en fait 7,17 : `70ch` ne livre pas 70 signes mais 111. Deux règles de cette feuille étaient dans ce piège. Le rem, lui, suit la taille de texte choisie par le visiteur. */ --mesure:35rem; } @media (prefers-color-scheme: dark){ :root{ --orange:#ff9a1f; --orange-d:#ffab45; --orange-soft:#3a2b12; /* Sur fond sombre l'encre n'a jamais manqué : 8,79:1 sur --card. */ --orange-encre:#ffab45; --slate:#0f1215; --slate-2:#191d23; --bg:#14171b; --bg-2:#1a1e23; --bg-3:#22272e; --fg:#e6e9ee; --fg-2:#a8b0bc; --fg-3:#7c8592; --line:#2a3038; --line-2:#353c46; --card:#1b1f25; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --tip:#17281c; --tip-b:#48a765; --warn:#2e2113; --warn-b:#e08b3a; --note:#161f30; --note-b:#5183e0; } } :root[data-theme="dark"]{ --orange:#ff9a1f; --orange-d:#ffab45; --orange-soft:#3a2b12; /* Sur fond sombre l'encre n'a jamais manqué : 8,79:1 sur --card. */ --orange-encre:#ffab45; --slate:#0f1215; --slate-2:#191d23; --bg:#14171b; --bg-2:#1a1e23; --bg-3:#22272e; --fg:#e6e9ee; --fg-2:#a8b0bc; --fg-3:#7c8592; --line:#2a3038; --line-2:#353c46; --card:#1b1f25; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --tip:#17281c; --tip-b:#48a765; --warn:#2e2113; --warn-b:#e08b3a; --note:#161f30; --note-b:#5183e0; } :root[data-theme="light"]{ --orange:#ff8a00; --orange-d:#e67a00; --orange-soft:#fff3e2; /* L'ENCRE ORANGE N'EST PAS L'ORANGE DE LA MARQUE, et c'est tout le propos de ce jeton. `--orange-d` tenait DEUX rôles à la fois : encre de texte, et fond de survol des boutons. Les deux tirent en sens contraire — plus on fonce pour que le texte se lise sur blanc, moins le texte foncé du bouton se lit sur le fond. Un seul jeton ne pouvait pas les tenir. Mesuré le 29/08/2026 : #e67a00 sur blanc donne 2,94:1, quand il en faut 4,5 pour du texte courant et 3 pour du gros. Or c'est la couleur des liens, des étiquettes de section, et des 31 GRANDS CHIFFRES qui sont l'argument de ce site : ils étaient l'élément le moins lisible de la page. #ac5b00 est le plus CLAIR qui tienne 4,5 sur les trois fonds où il se pose — blanc 4,94, --orange-soft 4,51, --bg-2 4,61 — à la teinte exacte de la marque (31,8°), qui ne bouge pas. */ --orange-encre:#ac5b00; --slate:#2f3540; --slate-2:#3c434f; --bg:#ffffff; --bg-2:#f6f7f9; --bg-3:#eef0f3; --fg:#23272e; --fg-2:#5a626e; --fg-3:#858d99; --line:#e2e5ea; --line-2:#d3d8df; --card:#ffffff; --shadow:0 1px 2px rgba(20,25,35,.06),0 8px 24px rgba(20,25,35,.06); --tip:#eaf6ee; --tip-b:#3f9d5a; --warn:#fdf0e6; --warn-b:#e07a1f; --note:#eaf0fb; --note-b:#3f6fd1; } /* ---------- 2. Base ---------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:74px} body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--orange-encre); text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{line-height:1.25; color:var(--fg); font-weight:700} h2{font-size:1.75rem; margin:0 0 .2em; letter-spacing:-.01em} h3{font-size:1.22rem; margin:1.6em 0 .4em} h4{font-size:1.02rem; margin:1.2em 0 .3em} p{margin:.7em 0} /* Le texte courant se borne ; les tableaux, les figures et les cartes gardent toute la largeur — c'est la mise en page éditoriale ordinaire, prose étroite et illustrations larges. Mesuré sur la fiche du sabot : la page s'allonge de 7 %, pas davantage, parce que l'essentiel de sa hauteur est fait de figures et de tableaux. */ p, li, figcaption{max-width:var(--mesure)} code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.88em; background:var(--bg-3); padding:.12em .4em; border-radius:5px} kbd{font:inherit; font-size:.85em; background:var(--bg-3); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:1px 7px} ul.clean{margin:.6em 0; padding-left:1.25em} ul.clean li{margin:.35em 0} img,video{max-width:100%} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px} .muted{color:var(--fg-3); font-size:.85rem} .pill{display:inline-block; background:var(--bg-3); border:1px solid var(--line); border-radius:8px; padding:2px 9px; font-size:.82rem; color:var(--fg-2)} /* Accessibilité : rendre le focus clavier visible. Absent du site laser, ajouté ici — une charte partagée est le bon endroit pour ça. */ /* L'anneau de focus doit se VOIR : c'est le seul repère de qui navigue au clavier. L'orange de marque donne 2,36:1 sur blanc, sous les 3 exigés pour un indicateur — il prend donc l'encre, à 4,94. */ :focus-visible{outline:2px solid var(--orange-encre); outline-offset:2px; border-radius:4px} /* ---------- 3. En-tête ------------------------------------------------- */ header.topbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } /* min-height et non height : `.navlinks` a `flex-wrap:wrap`, donc au-delà d'un certain nombre de liens la rangée passe à deux lignes — et une hauteur FIXE les laissait alors déborder par-dessous, sur le héros. Mesuré au navigateur le 18/08/2026 sur le site laser et ses neuf liens de sections : il débordait sous 1052 px de fenêtre, et le seuil montait à 1143 px une fois la marque élargie du chemin vers le portail. Sous 860 px la question ne se pose pas, les liens passent derrière le ☰. Le portail n'en voit rien : ses quatre liens tiennent sur une ligne. */ .topbar .wrap{display:flex; align-items:center; gap:16px; min-height:60px} /* text-decoration:none ÉCRIT ICI, alors que `a{text-decoration:none}` de la section 2 le dit déjà pour tout le site. La section 3 part seule chez les satellites, dans verdier-entete.css : celui qui n'a pas de règle `a` à lui recevait la barre avec tous ses liens soulignés — vu par Christophe sur liens.atelierduverdier.fr le 18/08/2026, en ligne. Le journal PrintNC y échappait par sa propre règle `a`, ce qui rendait le défaut invisible d'un satellite à l'autre. Une section extraite doit tenir sans le reste. */ .brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg); text-decoration:none} .brand:hover{text-decoration:none} .brand .dot{width:26px;height:26px;border-radius:7px;background:#fff; border:1px solid var(--line);display:grid;place-items:center;flex:none} .brand .dot svg{width:17px;height:17px;display:block} .brand .dot img{height:20px;width:auto;display:block} /* La marque « chapeau » : variante du .dot sans plaque blanche. Le chapeau est NOIR et porte son propre liseré blanc — c'est ce liseré qui le détache du fond sombre. Ne PAS le repeindre en blanc pour le faire ressortir : ce n'est plus le logo. */ /* margin:0 explicite — la page de liens a son propre `.chapeau`, le grand, avec `margin:0 auto 20px`. Sans cette remise à zéro le chapeau de la barre héritait de ses 20 px du bas : `.brand .chapeau` gagne sur `.chapeau` pour la hauteur, mais ne dit rien d'une marge qu'il ne déclare pas. Un composant de charte doit tenir chez l'hôte sans dépendre de ce que l'hôte n'a pas. */ .brand .chapeau{height:26px;width:auto;display:block;flex:none;margin:0} /* Le logo complet (chapeau + mot-symbole), collé en ligne par le générateur. Son mot-symbole est en `currentColor` : il prend donc la couleur de texte du contexte, et suit le thème. Le chapeau, lui, garde ses couleurs propres. */ .brand svg.logo{height:26px;width:auto;display:block;flex:none;color:var(--fg)} @media(max-width:430px){ .brand svg.logo{height:22px} } .hero-art svg.logo{width:100%;max-width:330px;height:auto;color:var(--fg)} .brand-sub{color:var(--fg-3); font-weight:500; font-size:.9rem; border-left:1px solid var(--line-2); padding-left:10px; margin-left:2px} @media(max-width:620px){ .brand-sub{display:none} } .navlinks{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap} .navlinks a{color:var(--fg-2); padding:6px 11px; border-radius:8px; font-size:.92rem; font-weight:500; text-decoration:none} .navlinks a:hover{background:var(--bg-3); color:var(--fg); text-decoration:none} /* L'ENTRÉE COURANTE S'ALLUME. Deux valeurs, pas une : `page` quand le lien mène exactement ici, `true` quand il mène à la rubrique qui contient la page — une fiche projet allume « Projets » sans être « Projets ». Le sélecteur ne visait que `="page"`, et rien ne posait l'attribut : la règle a attendu du 12/08 au 29/08/2026 sans jamais s'appliquer une fois. */ .navlinks a[aria-current]{color:var(--orange-encre); background:var(--orange-soft)} .theme-btn,.nav-btn{border:1px solid var(--line-2); background:var(--card); color:var(--fg-2); width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:1.05rem; flex:none} .theme-btn{margin-left:6px} .theme-btn:hover,.nav-btn:hover{color:var(--fg); border-color:var(--orange)} .nav-btn{display:none; margin-left:auto} /* montré seulement en étroit */ /* Navigation en étroit — le chantier 0 laissait `.navlinks` en display:none sans rien pour la remplacer : sous 860 px il n'y avait plus AUCUNE navigation. Acceptable sur une page unique à ancres, pas sur un portail. Le menu est un panneau déroulant, sans dépendance : si le JS ne se charge pas, le bouton reste inerte mais rien d'autre ne casse. */ @media(max-width:860px){ .nav-btn{display:block} .theme-btn{margin-left:0} .navlinks{ display:none; position:absolute; left:0; right:0; top:60px; flex-direction:column; gap:2px; margin:0; padding:10px 14px 14px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow); } .navlinks.ouvert{display:flex} .navlinks a{padding:10px 12px; font-size:1rem} } /* ---------- 4. Héros --------------------------------------------------- */ .hero{background: radial-gradient(1200px 400px at 80% -100px, color-mix(in srgb,var(--orange) 22%, transparent), transparent 60%), linear-gradient(180deg,var(--bg-2),var(--bg)); border-bottom:1px solid var(--line); padding:56px 0 48px} .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center} @media(max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:26px} } .hero h1{font-size:2.7rem; letter-spacing:-.02em; margin:.1em 0 .1em} @media(max-width:820px){ .hero h1{font-size:2.1rem} } .hero .lede{font-size:1.16rem; color:var(--fg-2); max-width:33rem; margin:.5em 0 1.3em} .hero-art{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; display:grid; place-items:center} .badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px} .badge{font-size:.8rem; font-weight:600; padding:5px 11px; border-radius:20px; background:var(--bg-3); color:var(--fg-2); border:1px solid var(--line)} .badge b{color:var(--orange-encre)} /* L'encart « ≈ N heures pour en arriver là ». Le chiffre qu'il contient est RECALCULÉ (outils/chiffrer_effort.py côté LaserAtelier), jamais retapé. */ .effort{margin:26px 0 0; padding:11px 15px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:.8rem; line-height:1.5; color:var(--fg-2)} .effort b{color:var(--fg)} .effort .qui{display:block; margin-top:.35em; font-size:.79rem; opacity:.9} /* ---------- 5. Boutons ------------------------------------------------- */ .cta{display:flex; flex-wrap:wrap; gap:12px} .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.96rem; padding:11px 20px; border-radius:11px; cursor:pointer; border:1px solid transparent} .btn-primary{background:var(--orange); color:#20160a} .btn-primary:hover{background:var(--orange-d); text-decoration:none} .btn-ghost{background:var(--card); color:var(--fg); border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--orange); text-decoration:none} .btn-kofi{background:var(--card); color:#ff5e5b; border-color:#ff5e5b; font-weight:600} .btn-kofi:hover{background:#ff5e5b; color:#fff; text-decoration:none} /* --- Le dépôt, en évidence -------------------------------------------- Les liens vers le code étaient noyés : « Dépôt » au bout d'une rangée de quatre liens sur l'accueil, une ligne de texte en bas des fiches. Christophe les a voulus visibles (23/08/2026) — un bouton en tête de chaque fiche, et la marque GitHub sur TOUS les liens de dépôt du site. Le bouton n'écrit aucune couleur en dur : `--fg` sur `--bg` donne le noir GitHub en thème clair et son inverse en thème sombre. La marque, elle, est un MASQUE peint en `currentColor` — une image de fond resterait noire sur fond sombre. */ .btn-github{background:var(--fg); color:var(--bg); border-color:var(--fg)} .btn-github:hover{background:var(--orange-d); color:#20160a; border-color:var(--orange-d); text-decoration:none} .btn-github svg{width:1.15em; height:1.15em; fill:currentColor; flex:none} .liens a[href*="github.com"]{font-weight:700} .liens a[href*="github.com"]::before{content:""; display:inline-block; width:1em; height:1em; vertical-align:-.14em; margin-right:.38em; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.013%208.013%200%200%200%2016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.013%208.013%200%200%200%2016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat} /* ---------- 6. Sections ------------------------------------------------ */ section{padding:52px 0; border-bottom:1px solid var(--line)} .sec-tag{display:inline-flex; align-items:center; gap:8px; color:var(--orange-encre); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px} .sec-lede{color:var(--fg-2); font-size:1.06rem; max-width:var(--mesure); margin:.4em 0 0} /* ---------- 7. Cartes et panneaux -------------------------------------- .carte est le composant générique du portail : une fiche logiciel, une fiche projet. Le site laser garde ses .mode (capture + icône + « quand ») dans sa feuille locale — trop spécifiques pour le kit. */ /* MINMAX BORNÉ PAR `min(…, 100%)`, ET C'EST LA RAISON D'ÊTRE DE CETTE ÉCRITURE. Un `minmax(290px, 1fr)` impose une colonne de 290 px même dans un conteneur de 276 : la grille déborde, et c'est TOUTE LA PAGE qui se met à défiler de gauche à droite. Relevé le 29/08/2026 sur la page des modèles 3D, où un minimum de 420 px faisait 52 px de débordement sur un téléphone de 390 — Christophe devait balayer l'écran pour lire une ligne. Les autres grilles y échappaient de justesse : à 320 px de large, une carte de 290 dépasse sa grille de 14 px, mais les 22 px de marge du `.wrap` les absorbent. De justesse n'est pas une garantie. */ .cartes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:20px; margin-top:26px} .carte{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; display:flex; flex-direction:column} .carte:hover{border-color:var(--orange)} .carte .head{display:flex; align-items:center; gap:11px; margin-bottom:8px} .carte .ci{width:34px;height:34px;border-radius:9px;background:var(--orange-soft); display:grid;place-items:center;flex:none;font-size:1.1rem} .carte .ci img{width:21px;height:21px} .carte h3{margin:0; font-size:1.12rem} .carte p{margin:.35em 0 0; font-size:.93rem; color:var(--fg-2); line-height:1.55} .carte .liens{margin-top:auto; padding-top:14px; display:flex; gap:14px; flex-wrap:wrap; font-size:.88rem} /* État d'un projet : le point de couleur qui dit « publié / privé / en cours ». */ .etat{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--fg-2); margin-left:auto; flex:none} .etat::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--fg-3)} .etat.public::before{background:var(--tip-b)} .etat.prive::before{background:var(--warn-b)} .etat.chantier::before{background:var(--note-b)} .cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px} @media(max-width:760px){ .cols{grid-template-columns:1fr} } .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px} .panel h3{margin-top:.2em} /* ---------- 7bis. Figures et formules ----------------------------------- Deux familles bien distinctes, et la différence n'est pas cosmétique : .figure = schéma DESSINÉ pour le site, en SVG en ligne. Il utilise les variables du thème (currentColor, var(--orange)…) donc il suit le thème clair/sombre tout seul. .plan = planche TechDraw exportée depuis FreeCAD. Ses traits sont en #212529 en dur : sur fond sombre elle serait INVISIBLE. D'où la plaque claire fixe, comme les schémas du site laser. */ .figure{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 18px 14px; margin:22px 0; box-shadow:var(--shadow)} .figure svg{display:block; width:100%; height:auto; margin:0 auto; max-width:640px} .figure figcaption{text-align:center; color:var(--fg-2); font-size:.86rem; margin-top:14px; line-height:1.5} .figure figcaption b{color:var(--fg)} .plan{background:#fdfdfd; border:1px solid var(--line); border-radius:12px; padding:14px; margin:22px 0; box-shadow:var(--shadow)} .plan img{display:block; width:100%; height:auto; border-radius:6px} .plan figcaption{text-align:center; color:#5a626e; font-size:.85rem; margin-top:12px} .plan figcaption code{background:#eef0f3; color:#2f3540} /* .capture = copie d'écran d'un logiciel. Contrairement à .plan, PAS de plaque claire imposée : l'image porte déjà son propre fond, et lui en coller un dessous ferait un liseré blanc autour d'une interface sombre. */ .capture{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:10px; margin:22px 0; box-shadow:var(--shadow)} .capture img,.capture video{display:block; width:100%; max-width:100%; height:auto; border-radius:7px} .capture figcaption{color:var(--fg-2); font-size:.88rem; margin:12px 6px 4px; line-height:1.55} .capture figcaption b{color:var(--fg)} /* Les bandeaux de panneaux d'un atelier FreeCAD font 430 px de large, et c'est leur largeur JUSTE : les étirer à la colonne les rendrait flous. D'où une grille qui les pose côte à côte à leur taille, alignés en haut puisqu'ils n'ont pas la même hauteur. */ .panneaux{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),430px)); gap:20px; margin:24px 0; justify-content:center; align-items:start} .capture.panneau{margin:0} .capture.panneau img{max-width:430px; margin:0 auto} .capture.panneau figcaption{text-align:center; font-size:.85rem} .figure-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0} /* Une colonne `1fr` a `min-width:auto` : elle refuse de descendre sous la largeur INTRINSÈQUE de son contenu. Une image a beau être en width:100%, une VIDÉO de 1024 px de large force sa colonne à 1024 — la rangée fait 2048 et la page déborde en travers. Vu par Christophe le 23/08/2026, sur le site en ligne. `min-width:0` rend aux colonnes le droit de rétrécir. */ .figure-row>*{min-width:0} /* `.serree` — une rangée qui ne doit pas occuper toute la largeur. Deux vidéos carrées de 14 s en pleine page font deux pavés de 520 px de haut qui écrasent tout le reste ; à 720 de rangée elles retombent à ~350 et redeviennent ce qu'elles sont, deux petites démonstrations. */ .figure-row.serree{max-width:720px; margin-left:auto; margin-right:auto} .figure-row .figure,.figure-row .plan,.figure-row .capture{margin:0} @media(max-width:760px){ .figure-row{grid-template-columns:1fr} } /* Traits et remplissages des schémas — nommés une fois pour que les SVG restent lisibles et que le thème s'applique sans les retoucher. */ .figure .trait{stroke:var(--fg); fill:none; stroke-width:1.6} .figure .trait-fin{stroke:var(--fg-3); fill:none; stroke-width:1} .figure .cote{stroke:var(--fg-2); fill:none; stroke-width:1.1} .figure .accent{stroke:var(--orange); fill:none; stroke-width:2.2} .figure .rempli{fill:var(--bg-3); stroke:var(--fg); stroke-width:1.6} .figure .bille{fill:var(--slate); stroke:var(--fg); stroke-width:1.2} .figure .zone-ok{fill:var(--orange); opacity:.14} .figure .zone-non{fill:var(--warn-b); opacity:.13} /* Schémas de TRANCHAGE : une couche déposée, celle qui déborde dans le vide, et le contour que l'on visait. Les couches prennent l'encre du texte — c'est de la matière, pas un trait de construction — donc elles s'inversent avec le thème comme le reste. */ .figure .couche{fill:var(--fg)} .figure .couche-surplomb{fill:var(--warn-b); stroke:var(--warn-b); stroke-width:1} .figure .vise{fill:none; stroke:var(--fg-3); stroke-width:1.2; stroke-dasharray:4 4} /* Tailles de texte en `em`, pas en px — et c'est le point à ne pas rater. Un SVG est étiré à la largeur de sa colonne : une figure au viewBox étroit est agrandie davantage qu'une figure large, et le MÊME texte y paraît plus gros. Mesuré : de 10,5 à 18,2 px de rendu pour un 10,5 px déclaré, selon la figure. En `em`, chaque SVG porte sa base (font-size en ligne, calculée pour que le rendu tombe à ~12 px) et toutes les figures s'accordent. */ .figure svg{font-size:12px} /* base par défaut, échelle 1 */ .figure text{fill:var(--fg-2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:400; font-size:1em} .figure text.fort{fill:var(--fg); font-weight:700} .figure text.orange{fill:var(--orange-encre); font-weight:700} .figure text.petit{font-size:.875em} .figure text.gros{font-size:1.1em} /* Une formule mise en avant. Pas de MathJax : les formules d'ici tiennent en HTML, et une dépendance externe serait bloquée hors ligne. */ .formule{background:var(--bg-2); border-left:3px solid var(--orange); border-radius:0 10px 10px 0; padding:14px 18px; margin:18px 0; font-size:1.02rem; overflow-x:auto} .formule .res{color:var(--orange-encre); font-weight:700} .formule .ou{display:block; color:var(--fg-3); font-size:.85rem; margin-top:6px} var{font-style:italic; font-family:Georgia,"Times New Roman",serif} sub{font-size:.75em} /* Le chiffre-clé d'une section, gros et seul. */ .chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:14px; margin:22px 0} .chiffre{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow)} .chiffre .v{display:block; font-size:1.7rem; font-weight:800; color:var(--orange-encre); line-height:1.1; font-variant-numeric:tabular-nums} .chiffre .l{display:block; font-size:.82rem; color:var(--fg-2); margin-top:6px; line-height:1.4} /* ---------- 8. Encarts ------------------------------------------------- */ .callout{border-radius:12px; padding:14px 16px; margin:18px 0; border:1px solid var(--line); background:var(--bg-2); position:relative} .callout p{margin:.3em 0} .callout .ci{font-weight:700; display:block; margin-bottom:2px} .callout.tip{background:var(--tip); border-color:color-mix(in srgb,var(--tip-b) 40%,transparent)} .callout.tip .ci{color:var(--tip-b)} .callout.warn{background:var(--warn); border-color:color-mix(in srgb,var(--warn-b) 45%,transparent)} .callout.warn .ci{color:var(--warn-b)} .callout.note{background:var(--note); border-color:color-mix(in srgb,var(--note-b) 40%,transparent)} .callout.note .ci{color:var(--note-b)} /* ---------- 9. Étapes numérotées --------------------------------------- */ .pipe{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px; margin-top:26px} .step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 14px; box-shadow:var(--shadow); position:relative} .step .n{width:28px;height:28px;border-radius:8px;background:var(--orange-soft);color:var(--orange-encre); display:grid;place-items:center;font-weight:800;font-size:.9rem;margin-bottom:9px} .step h4{margin:0 0 3px; font-size:.98rem} .step p{margin:0; font-size:.86rem; color:var(--fg-2); line-height:1.5} /* ---------- 10. Tableaux ------------------------------------------------ .twrap est OBLIGATOIRE autour de chaque table : sans lui, un tableau large fait défiler la page entière de travers sur téléphone. */ .twrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:12px} table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px} th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top} thead th{background:var(--bg-2); font-weight:700; color:var(--fg); white-space:nowrap} tbody tr:last-child td{border-bottom:none} td code{white-space:nowrap} .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} .gain{color:var(--tip-b); font-weight:700} /* ---------- 11. FAQ ----------------------------------------------------- */ details.faq{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:12px 0; box-shadow:var(--shadow); overflow:hidden} details.faq summary{cursor:pointer; padding:15px 18px; font-weight:600; list-style:none; display:flex; align-items:center; gap:12px} details.faq summary::-webkit-details-marker{display:none} details.faq summary .q{flex:1} details.faq summary .chev{color:var(--orange-encre); transition:transform .2s; flex:none; font-size:1.1rem} details.faq[open] summary .chev{transform:rotate(90deg)} details.faq summary:hover{color:var(--orange-encre)} details.faq .a{padding:0 18px 16px; color:var(--fg-2); font-size:.94rem} details.faq .a p:first-child{margin-top:0} /* details.pliable — le repli des passages TECHNIQUES. Différent de .faq : il tient du contenu riche (figures, tableaux, encarts), il est fermé par défaut, et son résumé se lit comme un titre. Christophe l'a demandé le 12/08/2026 : une page qui s'ouvre sur du protocole propriétaire décourage avant d'avoir dit ce que fait le logiciel. Le détail reste là — replié, pas retiré. */ details.pliable{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:14px 0; box-shadow:var(--shadow)} details.pliable>summary{cursor:pointer; padding:16px 20px; list-style:none; display:flex; align-items:baseline; gap:12px} details.pliable>summary::-webkit-details-marker{display:none} details.pliable>summary::before{content:"▸"; color:var(--orange-encre); font-size:1.05rem; transition:transform .2s; flex:none; line-height:1} details.pliable[open]>summary::before{transform:rotate(90deg)} details.pliable>summary:hover{color:var(--orange-encre)} details.pliable>summary .t{font-weight:700; font-size:1.1rem; color:var(--fg); flex:1} details.pliable>summary:hover .t{color:var(--orange-encre)} details.pliable>summary .s{color:var(--fg-3); font-size:.86rem; flex:none} @media(max-width:620px){ details.pliable>summary .s{display:none} } details.pliable .corps{padding:0 20px 18px; border-top:1px solid var(--line); margin-top:2px} details.pliable .corps>:first-child{margin-top:16px} details.pliable .figure,details.pliable .capture{box-shadow:none} /* ---------- 12. Pied ---------------------------------------------------- */ footer{padding:44px 0 60px; color:var(--fg-2)} .foot-grid{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between} .foot-links{display:flex; gap:18px; flex-wrap:wrap} /* ---------- 13. Visionneuse (clic sur une image pour l'agrandir) -------- */ .lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,12,15,.92); cursor:zoom-out} .lightbox.open{display:flex} .lightbox img{max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.6); background:#fff} .lightbox .lb-close{position:absolute; top:14px; right:18px; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; font-size:1.6rem; line-height:1; background:rgba(255,255,255,.14); color:#fff} .lightbox .lb-close:hover{background:rgba(255,255,255,.28)} .lightbox .lb-hint{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:rgba(255,255,255,.6); font-size:.82rem} /* ---------- 13bis. Mouvement et profondeur ------------------------------ Le site etait juste, mais il n'avait pas de TEMPS : tout y apparaissait d'un bloc et rien ne repondait sous le curseur. Cette section lui en donne, sous trois disciplines : 1. LA CLASSE QUI CACHE N'EST JAMAIS DANS LE HTML. C'est verdier.js qui pose `.js-reveal`, et seulement s'il sait ensuite l'animer. Script bloque, vieux navigateur, lecteur d'ecran : la page s'affiche entiere. Ecrire `class="js-reveal"` a la main rendrait le contenu invisible chez qui n'execute pas le script — ne jamais le faire. 2. `prefers-reduced-motion` COUPE TOUT, ici et dans le script. Ce n'est pas une politesse : une animation qui defile donne la nausee a qui y est sensible. Chaque part se neutralise elle-meme, en bloc. 3. RIEN NE BOUGE DE PLUS DE QUELQUES PIXELS. Un site d'atelier n'est pas une demo : le mouvement doit se sentir, pas se voir. La courbe est la meme partout — une sortie longue, sans rebond. LA SECTION EST COUPEE EN DEUX, et cette coupure est la seule chose qui permet d'en donner un morceau aux satellites : `13bis-a` ne nomme que des classes que le kit ecrit lui-meme, `13bis-b` s'appuie sur toute la mise en page du kit. Voir le bandeau de 13bis-b pour ce que couterait de les confondre. */ :root{ --sortie:cubic-bezier(.16,1,.3,1); /* decelere longuement */ --leve:0 2px 4px rgba(20,25,35,.05),0 14px 40px rgba(20,25,35,.10); } @media (prefers-color-scheme: dark){ :root{ --leve:0 2px 6px rgba(0,0,0,.35),0 16px 44px rgba(0,0,0,.45) } } :root[data-theme="dark"]{ --leve:0 2px 6px rgba(0,0,0,.35),0 16px 44px rgba(0,0,0,.45) } :root[data-theme="light"]{ --leve:0 2px 4px rgba(20,25,35,.05),0 14px 40px rgba(20,25,35,.10) } /* ---------- 13bis-a. Portable ------------------------------------------- CE QUI SUIT NE SUPPOSE AUCUNE MISE EN PAGE. Les seuls noms cites sont ecrits par le kit lui-meme — `.js-reveal` par verdier.js, `data-agrandir` par la visionneuse — ou sont des elements bruts. Rien ici ne peut entrer en collision avec la feuille d'un site hote. C'est pour cela que kit/extraire_mouvement.py en tire verdier-mouvement.css, pose chez les satellites qui gardent leur propre mise en page. Les bornes de cette part sont ses reperes : ne pas renommer ces deux bandeaux sans corriger l'extracteur (il s'arrete au lieu de produire un fichier vide, mais autant ne pas le declencher). AJOUTER UNE REGLE ICI, C'EST L'ENVOYER SUR QUATRE SITES. Une regle qui nomme `.carte`, `.hero`, `.btn` ou tout autre classe de mise en page va dans 13bis-b, pas ici. */ /* L'entree dans le champ. Posee par verdier.js, jamais par le HTML. */ .js-reveal{ opacity:0; transform:translateY(16px); transition:opacity .75s var(--sortie), transform .75s var(--sortie) } .js-reveal.vu{ opacity:1; transform:none } /* Une planche qu'on peut agrandir doit le DIRE avant le clic. */ [data-agrandir]{ cursor:zoom-in } /* Une ancre ne doit pas se garer SOUS la barre collante. `scroll-margin` plutot qu'un decalage bricole : le navigateur s'en charge, y compris au clavier et depuis un lien externe. 84 px = la barre du kit (60) et de quoi respirer. MAIS LE CHIFFRE EST UNE VARIABLE, et ce n'est pas de la coquetterie : chez un hote, les barres collantes n'ont pas cette hauteur-la. Le journal PrintNC empile la barre de l'atelier et sa rangee d'onglets, mesure le total a chaque bascule de vue et le publie dans `--marge-ancre` — 128 px releves le 27/08/2026. En lisant cette variable, la regle prend le bon chiffre chez qui le connait, et garde 84 chez qui ne dit rien. */ html{ scroll-behavior:smooth } section[id],h2[id],h3[id]{ scroll-margin-top:var(--marge-ancre, 84px) } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .js-reveal,.js-reveal.vu{ opacity:1; transform:none; transition:none } } /* ---------- 13bis-b. Maison --------------------------------------------- CE QUI SUIT S'APPUIE SUR LES CLASSES DU KIT et ne part PAS chez un site qui a sa propre mise en page. Ce n'est pas de la prudence en l'air, c'est la lecon des 258 px : en posant le kit entier sous le journal PrintNC le 12/08/2026, sa page s'allongeait de 258 px parce que `.hero h1` du kit est plus specifique que son `.hero-titre`. Dix-sept selecteurs se croisent, et la specificite en cree d'autres qui ne se voient pas au nom. Le halo du heros ci-dessous est le pire cas : il force `overflow:hidden` sur `.hero`. Chez un hote dont le heros deborde exprès, cela ROGNE son dessin — sans rien dire. */ /* --- Le souleve au survol. La carte gagnait deja un liseré orange ; elle se detache maintenant du fond, ce qui rend le liseré lisible au lieu de le laisser flotter. SEUL CE QUI EST CLIQUABLE SE SOULEVE. C'etait `.carte:hover,.panel:hover`, et Christophe l'a vu tout de suite sur le panneau « Le changeur d'outil » : il se soulevait, donc il avait l'air de mener quelque part. Compte fait sur le site : 25 panneaux, 4 seulement portent un lien. Vingt-et-une fausses promesses. Un bloc qui bouge sous le curseur ANNONCE un clic ; s'il n'en a pas, il ment. `.carte-cliquable` est pose par verdier.js sur ce qui mene reellement quelque part — carte ou panneau porteur d'un lien, ou element deja cliquable de lui-meme. Le reste garde son aspect, immobile. */ .carte,.panel,.figure,.plan,.capture{ transition:transform .4s var(--sortie), box-shadow .4s var(--sortie), border-color .25s ease } .carte-cliquable:hover{ transform:translateY(-3px); box-shadow:var(--leve); border-color:var(--orange) } .figure:hover,.plan:hover,.capture:hover{ box-shadow:var(--leve) } /* --- La planche respire legerement sous le curseur. Le cadre garde ses coins, d'ou l'overflow. */ .plan,.capture,.figure{ overflow:hidden } .plan img,.capture img{ transition:transform .55s var(--sortie) } .plan:hover img,.capture:hover img{ transform:scale(1.012) } /* --- Les boutons repondent a l'appui. Un bouton qui ne bouge pas laisse douter du clic sur les liaisons lentes. */ .btn{ transition:transform .18s var(--sortie), background-color .2s ease, border-color .2s ease, box-shadow .3s var(--sortie) } .btn:hover{ transform:translateY(-1px) } .btn:active{ transform:translateY(0) scale(.985) } /* --- Les liens de rubrique et de navigation, en douceur plutot qu'en bascule seche. */ /* `background-size` EST DANS LA LISTE, sinon le balayage saute ici : cette regle est plus specifique que le `a{}` qui l'installe, et une transition redeclaree REMPLACE la precedente, elle ne s'y ajoute pas. Or tous les liens des cartes vivent dans `.liens` — l'effet aurait manque a l'endroit ou on le regarde le plus. */ .navlinks a,.liens a{ transition:color .2s ease, opacity .2s ease, background-size .35s var(--sortie) } /* --- LE SOULIGNEMENT SE TIRE, il ne s'allume plus. La charte faisait `a:hover{text-decoration:underline}` : un trait qui apparait d'un coup, sur toute sa longueur. Il se dessine maintenant de gauche a droite. Un degrade en fond plutot que `text-decoration` : c'est ce qui permet de l'ANIMER — `text-decoration` ne s'interpole pas. Le trait prend `currentColor`, donc il suit la couleur du lien, y compris au survol et sur les deux themes, sans qu'on ait a le redire nulle part. `background-size:0 1px` et non `0%` : une longueur nulle en pourcentage se compare mal a `100%` sur certaines versions, et le trait sautait. */ a{ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0 1px; transition:background-size .35s var(--sortie), color .2s ease } a:hover{ text-decoration:none; background-size:100% 1px } /* CE QUI N'EST PAS UN LIEN DE TEXTE n'en veut pas : un bouton, la marque, un onglet de navigation ont deja leur reponse au survol, et un trait sous un bouton se lit comme un defaut. */ .brand,.navlinks a,.btn,.theme-btn,.nav-btn{ background-image:none; transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s var(--sortie) } /* --- LA CARTE ENTIERE EMMENE AU LIEN. Elle se souleve deja au survol : elle a l'air cliquable, donc elle doit l'etre. Le recouvrement est le `::after` du PREMIER lien de la carte — un vrai lien, pas un gestionnaire de clic : le clic du milieu, « ouvrir dans un nouvel onglet », le clavier et la barre d'etat continuent tous de marcher. LES AUTRES LIENS DE LA CARTE PASSENT DEVANT (`carte-dessus`) : une fiche logiciel en porte jusqu'a quatre — documentation, manuel, depot — et les noyer sous le recouvrement les rendrait tous inaccessibles. Ce que cela coute : on ne peut plus selectionner le texte de la carte a la souris. C'est le prix connu de ce motif ; le texte reste copiable au clavier et lisible par les lecteurs d'ecran. `position:relative` est pose par le script sur la carte, PAS ici : le `::after` se cale sur le premier ancetre positionne, et si le lien lui -meme etait positionne, le recouvrement se replierait sur son seul texte. */ .carte-cliquable{ position:relative; cursor:pointer } .carte-cible::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit } .carte-dessus{ position:relative; z-index:2 } /* --- Le heros recoit un halo tres pale, decale vers son coin haut droit : assez pour que la page ne commence pas sur du blanc plat, pas assez pour qu'on le remarque. Il est DERRIERE le contenu et ne prend aucun clic. */ .hero{ position:relative; isolation:isolate; overflow:hidden } /* `overflow:hidden` n'est PAS decoratif : sans lui le halo depassait la fenetre de 47 px et ouvrait une barre de defilement HORIZONTALE sur tout le site — mesure au navigateur, pas devinee. Un fond qui fait defiler la page de cote est le genre de defaut qu'on ne voit qu'a la souris. */ .hero::before{ content:""; position:absolute; inset:-18% -8% auto auto; width:min(620px,70%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--orange) 16%, transparent), transparent 62%); z-index:-1; pointer-events:none; filter:blur(18px) } /* --- La coupure, en bloc, pour la part maison. Le soulignement REVIENT au trait franc : il doit rester visible, c'est ce qui signale un lien. Ce qu'on retire, c'est le mouvement, pas l'information. La carte reste cliquable pour la meme raison — ce n'est pas une animation. */ @media (prefers-reduced-motion:reduce){ .carte,.panel,.figure,.plan,.capture,.btn,.plan img,.capture img{ transition:none } .carte-cliquable:hover,.btn:hover,.btn:active{ transform:none } .plan:hover img,.capture:hover img{ transform:none } a{ background-image:none; transition:none } a:hover{ text-decoration:underline } .brand:hover,.navlinks a:hover,.btn:hover,.theme-btn:hover,.nav-btn:hover{ text-decoration:none } } /* ---------- 14. Impression --------------------------------------------- Le manuel laser part en PDF par WeasyPrint ; autant que le kit ne sabote pas l'impression des autres pages. */ @media print{ header.topbar,.theme-btn,.lightbox{display:none !important} body{background:#fff; color:#000} section{padding:18px 0; break-inside:avoid} .carte,.panel,.callout,.step{break-inside:avoid; box-shadow:none} }