/* ========================================================================= LES PAGES FRANCAISES DU FIL DEBUTANT, posees le 2026-09-24. Accueil /fr/, les 4 marches (DAY 0 a DAY 30), les fiches « Can you… ? » et la page formation. Une seule feuille pour toutes : elles racontent la meme chose dans le meme ordre, elles doivent se ressembler. Charte v4 a la lettre : sol gris, charbon pour la machine, orange UNIQUEMENT sur charbon, bleu signal, Archivo, angle vif (zero arrondi). Les jetons viennent de brand.css, rien n'est redeclare ici. ========================================================================= */ *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{ font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--body); background:var(--paper); line-height:1.6; font-size:var(--t-base); -webkit-font-smoothing:antialiased; } .wrap{max-width:940px; margin:0 auto; padding:0 24px} a{color:var(--accent-ink)} img{max-width:100%; height:auto; display:block} b,strong{color:var(--ink)} :focus-visible{outline:2px solid var(--accent); outline-offset:3px} /* ---------- L'ETIQUETTE DAY ---------- La marche se lit partout au meme endroit, en mono, sur charbon. C'est la seule raison pour laquelle l'orange apparait hors survol : le numero. */ .day{ display:inline-flex; align-items:center; gap:.45em; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; background:var(--charbon); color:var(--sur-charbon); padding:6px 9px; text-decoration:none; } .day b{color:var(--orange)} /* ---------- L'EN-TETE DE PAGE ---------- */ .tete{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e-5); align-items:end; padding:var(--e-6) 0 var(--e-5); border-bottom:1px solid var(--line); } .tete h1{ font-size:clamp(1.9rem,5.6vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--ink); margin-top:var(--e-3); max-width:20ch; } .tete p{color:var(--soft); font-size:var(--t-md); margin-top:var(--e-3); max-width:50ch} .tete-m{width:150px} /* ---------- LES BLOCS ---------- Un filet entre deux blocs, et un rythme unique a l'interieur : chaque enfant pousse le suivant du meme pas. */ .bloc{padding:var(--e-6) 0; border-bottom:1px solid var(--line)} .bloc > * + *{margin-top:var(--e-4)} .bloc h2{font-size:var(--t-xl); font-weight:800; letter-spacing:-.01em; line-height:1.15; color:var(--ink)} .bloc > p{max-width:62ch} .bloc .sous{color:var(--soft); font-size:var(--t-sm2)} .bloc h3{font-size:var(--t-md); font-weight:800; color:var(--ink); line-height:1.3; margin-top:var(--e-5)} .bloc .mention{font:400 var(--t-xs)/1.5 "JetBrains Mono",monospace; color:var(--soft)} /* ---------- LES 4 MARCHES ---------- Un escalier au sens propre : chaque marche est plus haute que la precedente. Sur telephone elles s'empilent et le decalage passe a gauche, l'escalier descend au lieu de monter. */ .marches{list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; align-items:end} .marche{ display:flex; flex-direction:column; gap:var(--e-2); height:100%; padding:var(--e-4); background:var(--card); color:var(--ink); text-decoration:none; border-top:3px solid var(--ink); transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap); } .marches li{position:relative} .marches li:nth-child(1) .marche{min-height:260px} .marches li:nth-child(2) .marche{min-height:300px} .marches li:nth-child(3) .marche{min-height:340px} .marches li:nth-child(4) .marche{min-height:380px} .marche .q{font-weight:800; font-size:var(--t-lg); line-height:1.12; margin-top:var(--e-2)} .marche .d{color:var(--soft); font-size:var(--t-sm2); line-height:1.5} .marche .go{margin-top:auto; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; color:var(--accent-ink); letter-spacing:.04em} @media (hover:hover) and (pointer:fine){ .marche:hover{background:var(--charbon); color:var(--sur-charbon); border-top-color:var(--orange)} .marche:hover .d{color:var(--inox)} .marche:hover .go{color:var(--orange)} } .marche:focus-visible{background:var(--charbon); color:var(--sur-charbon); outline:2px solid var(--orange); outline-offset:-2px} .marche:focus-visible .d{color:var(--inox)} /* ---------- LES QUESTIONS « CAN YOU… ? » ---------- Meme lecture que l'ancien index : un filet en haut de chaque ligne, le dernier ferme la liste. La reponse a droite, en etiquette. */ .qa{list-style:none; border-bottom:1px solid var(--line)} .qa-l{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e-2) var(--e-4); align-items:center; padding:var(--e-4) var(--e-3); border-top:1px solid var(--line); color:var(--ink); text-decoration:none; transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap); } .qa-q{font-weight:700; font-size:var(--t-md); line-height:1.3} .qa-p{display:block; color:var(--soft); font-size:var(--t-sm2); font-weight:400; margin-top:3px} .qa-l .bientot{font:700 var(--t-xs)/1 "JetBrains Mono",monospace; color:var(--soft); letter-spacing:.04em} @media (hover:hover) and (pointer:fine){ a.qa-l:hover{background:var(--charbon); color:var(--sur-charbon)} a.qa-l:hover .qa-p{color:var(--inox)} a.qa-l:hover .v-non{border-color:var(--sur-charbon); color:var(--sur-charbon)} } a.qa-l:focus-visible{background:var(--charbon); color:var(--sur-charbon); outline:2px solid var(--orange); outline-offset:-2px} a.qa-l:focus-visible .qa-p{color:var(--inox)} /* La reponse. Oui en bleu signal, en partie sur charbon (donc orange autorise), non au trait : le « non » ne doit pas avoir l'air d'une erreur, c'est une reponse comme les autres. */ .v{ display:inline-block; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; padding:7px 10px; white-space:nowrap; } .v-oui{background:var(--accent); color:#fff} .v-part{background:var(--charbon); color:var(--orange)} .v-non{border:1.5px solid var(--ink); color:var(--ink); padding:5.5px 8.5px} /* ---------- LA FICHE ---------- */ .verdict{display:flex; gap:var(--e-3); align-items:center; flex-wrap:wrap; margin-top:var(--e-4)} .verdict .v{font-size:var(--t-sm)} .verdict p{font-weight:700; color:var(--ink); font-size:var(--t-md); line-height:1.35; max-width:44ch} /* Meme filet d'encre en haut que les marches : la limite fait partie de la reponse, elle n'est pas un encart d'alerte colle sur le cote. */ .limite{background:var(--card); border-top:3px solid var(--ink); padding:var(--e-4)} .limite > * + *{margin-top:var(--e-2)} /* Une question sans fiche : la reponse, et dessous « fiche bientot ». */ .fin-l{display:flex; flex-direction:column; align-items:flex-end; gap:6px} /* Le fil en bas de fiche : question precedente a gauche, l'index a droite. */ .fil{display:flex; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap; font-size:var(--t-sm2); padding-top:var(--e-3)} /* Les etapes : le numero en mono, la phrase a cote. */ .etapes{list-style:none; counter-reset:e} .etapes li{ counter-increment:e; display:grid; grid-template-columns:2.4em minmax(0,1fr); gap:var(--e-3); padding:var(--e-3) 0; border-top:1px solid var(--line); max-width:66ch; } .etapes li::before{content:counter(e,decimal-leading-zero); font:700 var(--t-sm)/1.75 "JetBrains Mono",monospace; color:var(--accent-ink)} /* Le prompt a copier : c'est de la machine, donc du charbon. */ .prompt{background:var(--charbon); color:var(--sur-charbon); padding:var(--e-4)} .prompt .lbl{display:block; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--inox); margin-bottom:var(--e-3)} .prompt pre{font:400 var(--t-sm2)/1.65 "JetBrains Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere} .copie{ margin-top:var(--e-4); font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; background:transparent; color:var(--orange); border:1px solid var(--orange); padding:11px 14px; cursor:pointer; border-radius:0; transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap); } .copie:hover,.copie.ok{background:var(--orange); color:var(--charbon)} .copie:focus-visible{outline:2px solid var(--orange); outline-offset:3px} /* Les outils : ce que c'est, a quoi ca me sert. Jamais le prix. */ .outils{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--e-3) var(--e-5); max-width:720px} .outils dt{font-weight:800; color:var(--ink)} .outils dd{color:var(--body)} /* ---------- LA SUITE ---------- Le bas de chaque marche pousse vers la suivante. Un seul bouton, gros, en charbon : on sait toujours ou aller. */ .suite{ display:flex; justify-content:space-between; align-items:center; gap:var(--e-4); background:var(--charbon); color:var(--sur-charbon); padding:var(--e-5); text-decoration:none; margin:var(--e-6) 0; } .suite .t{display:block; font-weight:800; font-size:var(--t-lg); line-height:1.2; margin-top:var(--e-2)} .suite .fl{flex:none; color:var(--orange); font:700 var(--t-xl)/1 "JetBrains Mono",monospace; transition:transform var(--d-ui) var(--out)} .suite:hover .fl,.suite:focus-visible .fl{transform:translateX(5px)} .suite:focus-visible{outline:2px solid var(--orange); outline-offset:3px} .suite .day{padding:0; background:none} /* ---------- LE BOUTON ---------- */ .btn{ display:inline-block; font-weight:700; font-size:var(--t-sm2); text-decoration:none; background:var(--charbon); color:var(--sur-charbon); padding:14px 20px; transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap); } .btn:hover{background:var(--orange); color:var(--charbon)} /* ---------- LA CAPTURE D'ADRESSE ---------- Reprise telle quelle de l'ancien accueil : elle marchait. */ .prise{display:flex; gap:2px; max-width:460px} .prise input{ flex:1; min-width:0; font:inherit; font-size:var(--t-sm2); padding:14px 16px; border:1px solid var(--line); border-radius:0; background:#EFEFED; color:var(--ink); } .prise input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,91,255,.15)} .prise button{ flex:none; font:inherit; font-weight:700; font-size:var(--t-sm2); cursor:pointer; padding:14px 20px; border:0; border-radius:0; background:var(--charbon); color:var(--sur-charbon); transition:background var(--d-ui) var(--snap); } .prise button:hover{background:var(--orange); color:var(--charbon)} .prise button:disabled{opacity:.6; cursor:default} .dit{font-size:var(--t-sm); min-height:1.4em} .bloc .dit{margin-top:var(--e-2)} .fine{font-size:var(--t-xs); color:var(--soft)} /* ---------- L'INDEX « ALLER PLUS LOIN » ---------- L'ancien sommaire de l'accueil, garde tel quel : vignette numerotee, titre, une ligne, et la ligne s'inverse en charbon au survol. */ .index{border-bottom:1px solid var(--line)} .index ul{list-style:none} .ix{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--e-3) var(--e-4); align-items:start; padding:var(--e-4) var(--e-3); border-top:1px solid var(--line); color:var(--ink); text-decoration:none; transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap); } .ix-v{position:relative; display:block; width:120px} .ix-v img{width:100%; border:1px solid var(--line)} .ix-v i{position:absolute; left:0; bottom:0; font-style:normal; font:700 var(--t-xs)/1.4 "JetBrains Mono",monospace; background:var(--charbon); color:var(--orange); padding:3px 7px} .ix-t{display:block; font-weight:700; font-variation-settings:"wdth" 108; text-transform:uppercase; letter-spacing:.01em; line-height:1.16; font-size:var(--t-lg); color:var(--ink)} .ix-d{display:block; color:var(--soft); font-size:var(--t-sm2); margin-top:6px; max-width:56ch} .ix-m{font:400 var(--t-xs)/1.5 "JetBrains Mono",monospace; color:var(--soft); white-space:nowrap; text-align:right; padding-top:.55em} @media (hover:hover) and (pointer:fine){ .ix:hover{background:var(--charbon); color:var(--sur-charbon)} .ix:hover .ix-t{color:var(--sur-charbon)} .ix:hover .ix-d,.ix:hover .ix-m{color:var(--inox)} .ix:hover .ix-v i{background:var(--orange); color:var(--charbon)} } .ix:focus-visible{background:var(--charbon); color:var(--sur-charbon); outline:2px solid var(--orange); outline-offset:-2px} .ix:focus-visible .ix-t{color:var(--sur-charbon)} .ix:focus-visible .ix-d,.ix:focus-visible .ix-m{color:var(--inox)} /* ---------- L'HISTOIRE ---------- */ .histoire{display:flex; gap:var(--e-4); align-items:center; padding:var(--e-6) 0} .histoire img{flex:none; width:96px} .histoire p{font-size:var(--t-md); color:var(--ink); max-width:52ch; line-height:1.5} .histoire p + p{margin-top:var(--e-2); color:var(--soft); font-size:var(--t-sm2)} /* ---------- TELEPHONE ---------- */ /* Sur telephone, les 4 marches forment une PYRAMIDE (choix de David le 24/09, redit le soir meme : « j'aimais bien ce cote pyramide, il fallait juste qu'on la voie mieux »). Pour qu'elle se voie : les marches sont en charbon plein sur la bande claire, la base DAY 0 en orange (c'est la que tout commence), et la mascotte au trophee est assise sur l'arete du sommet. On lit de bas en haut, la phrase au-dessus le dit en orange. */ @media (max-width:720px){ .marches{display:flex; flex-direction:column-reverse; align-items:center; gap:10px; padding-top:100px; padding-right:6px} .marches li{width:100%} .marches li:nth-child(2){width:86%} .marches li:nth-child(3){width:72%} .marches li:nth-child(4){width:58%} /* chaque marche est un bloc VOXEL (David, 24/09 : « en mode voxel, ou un contour ») : face creme quadrillee en petits cubes comme la mascotte, contour charbon, et une ombre dure qui donne l'epaisseur du bloc. */ .marches li:nth-child(n) .marche{min-height:0; align-items:center; text-align:center; padding:var(--e-4) var(--e-3); border:2px solid #16181D; color:var(--ink); background-color:#EFE9DC; background-image:linear-gradient(rgba(22,24,29,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(22,24,29,.07) 1px, transparent 1px); background-size:12px 12px; box-shadow:inset 0 5px 0 #FBF8F1, inset 0 -5px 0 #D9CFBC, 6px 6px 0 #16181D} .marches li:first-child .marche{background-color:#F6D9C6} .marche .d{display:none} .marche .q{font-size:var(--t-md); margin-top:4px} .marche .go{margin-top:6px} p.glisse{display:block; color:var(--orange); text-align:center} .marches li:nth-child(4) .marche{padding-top:62px} .sommet-m{display:block !important} } /* Assise sur l'arete du sommet : la ligne d'assise de l'image est a 62 % de sa hauteur, on la cale sur le haut du bloc DAY 30. Les jambes pendent devant le bloc, dont le haut est degage pour qu'elles ne cachent pas l'etiquette. */ .sommet-m{display:none; position:absolute; top:0; left:50%; transform:translate(-50%,-62%); width:80px; height:auto; pointer-events:none} .glisse{display:none; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)} @media (max-width:600px){ .wrap{padding:0 16px} .tete{grid-template-columns:minmax(0,1fr) 84px; gap:var(--e-3); padding-top:var(--e-5)} .tete-m{width:84px} .bloc{padding:var(--e-5) 0} .bloc h2{font-size:var(--t-lg)} .qa-l{padding:var(--e-3) 0} .qa-q{font-size:var(--t-base)} .outils{grid-template-columns:minmax(0,1fr); gap:0} .outils dd{margin:2px 0 var(--e-3)} .suite{padding:var(--e-4); margin:var(--e-5) 0} .suite .t{font-size:var(--t-md)} .prise button{padding:14px; font-size:var(--t-sm)} .ix{grid-template-columns:auto minmax(0,1fr); padding:var(--e-3) 0; gap:var(--e-2) var(--e-3)} .ix-v{width:84px} .ix-t{font-size:var(--t-md)} .ix-m{grid-column:2; text-align:left; padding-top:0} .histoire img{width:72px} } @media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important} } /* ========================================================================= « L'IA POUR LES NOOBS » : la collection de guides autonomes (2026-09-24). L'esprit des livres pour debutants (resultat annonce, chapitres courts, encadres, antiseche), dans la charte : aucun jaune, aucun pictogramme emprunte. Les encadres se distinguent par leur etiquette et leur fond. ========================================================================= */ .tete .meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:var(--e-3); font:700 var(--t-xs)/1.4 "JetBrains Mono",monospace; letter-spacing:.04em; text-transform:uppercase; color:var(--soft)} .tete .meta span{border:1px solid var(--line); padding:4px 7px} .depart{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--e-5); align-items:start} .depart > * + *{margin-top:0} .resultat{background:var(--charbon); color:var(--sur-charbon); padding:var(--e-4)} .resultat p{font-weight:700; font-size:var(--t-md); line-height:1.4; margin-top:var(--e-2)} .resultat .tag{color:var(--orange)} .bloc h2.petit{font-size:var(--t-md)} .besoin{list-style:none; margin-top:var(--e-2)} .besoin li{padding:6px 0 6px 1.3em; position:relative} .besoin li::before{content:"✓"; position:absolute; left:0; color:var(--accent-ink); font-weight:800} .bloc h2 .ch{display:block; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:var(--e-2)} .tag{display:block; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase} .encart{padding:var(--e-4); max-width:720px} .encart p{margin-top:var(--e-2)} .encart-retenir{background:var(--card); border-top:3px solid var(--ink)} .encart-astuce{background:var(--card); border-top:3px solid var(--accent)} .encart-astuce .tag{color:var(--accent-ink)} .encart-attention{background:var(--charbon); color:var(--sur-charbon)} .encart-attention .tag{color:var(--orange)} .encart-attention b{color:var(--sur-charbon)} .encart-mot{border:1px solid var(--line)} .encart-mot .tag{color:var(--soft)} .ba{display:grid; grid-template-columns:1fr 1fr; gap:3px; max-width:720px} .ba > div{padding:var(--e-4); background:var(--card)} .ba p{margin-top:var(--e-2)} .ba-non .tag{color:var(--soft)} .ba-non p{color:var(--soft)} .ba-oui{border-top:3px solid var(--accent)} .ba-oui .tag{color:var(--accent-ink)} .qa-q .num{display:block; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--soft); margin-bottom:6px} .qa-q .num b{color:var(--accent-ink)} .bloc code{font-family:"JetBrains Mono",monospace; font-size:.9em; background:var(--card); padding:1px 5px} @media (max-width:720px){ .depart{grid-template-columns:minmax(0,1fr)} .ba{grid-template-columns:minmax(0,1fr)} } /* ========================================================================= LE CONTRASTE BICOLORE, repris de drink.withdavid (2026-09-24, demande de David). DWD alterne des bandes pleine largeur en deux tons (charbon, puis creme) au lieu de poser des cartes sur un fond. Ici : charbon #16181D et le sol gris de la charte vousyetes. L'en-tete de page est toujours sombre, puis les blocs alternent clair / sombre tout seuls. Une bande sombre REDEFINIT les jetons : tous les composants (liens, filets, reponses, encadres, index) suivent sans regle a part. --charbon descend d'un cran dedans, pour que les boites « machine » (prompt, antiseche) restent lisibles comme des objets poses sur la bande. L'orange reste sur le sombre, le bleu sur le clair : la charte ne bouge pas. La pleine largeur passe par l'ombre + clip-path : le fond deborde sans elargir la page, donc aucun defilement horizontal. ========================================================================= */ :root{--bande-a:#16181D} /* brand.css peint en clair (!important) tout element