/* Popeye Prime, version teckel. Une seule carte, peu de mots, beaucoup de douceur :
   la prairie de Pokopia, le pêcher, les buissons et les boutons de jeu d'Animal Crossing,
   une touche girly en rose sur le bouton et le collier, et un teckel nain fauve en version chibi pour mascotte. */
:root {
  --fond: #FBF5EA;
  --carte: #FFFDF8;
  --carte-ombre: #F0E4CF;
  --filet: rgba(90, 64, 48, 0.08);
  --brun: #5A4030;
  --brun-doux: #8A6A4C;
  --rose: #FF6FAE;
  --rose-ombre: #DE4F8F;
  --rose-doux: #FFC2E0;
  --violet: #9B6BF2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--brun);
  font-family: Nunito, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
}

/* ---------- La carte ---------- */
.carte {
  width: min(580px, calc(100% - 32px));
  margin: auto;
  margin-top: 48px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--carte-ombre), 0 30px 60px -36px rgba(90, 64, 48, 0.45);
}

.prairie { display: block; width: 100%; height: auto; aspect-ratio: 600 / 280; }

.contenu { padding: 30px 32px 36px; text-align: center; }

h1 {
  margin: 0;
  font: 700 clamp(42px, 9vw, 64px) / 1.1 Fredoka, Nunito, sans-serif;
  color: var(--brun);
}

.texte { margin: 14px auto 0; max-width: 34ch; font-size: 18px; line-height: 1.6; color: var(--brun-doux); }

/* ---------- Les boutons de jeu : ils s'enfoncent quand on appuie ---------- */
.boutons { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bouton {
  display: inline-block;
  font: 800 16px Nunito, sans-serif;
  text-decoration: none;
  color: var(--brun);
  background: #FFFFFF;
  border: 1px solid var(--filet);
  padding: 13px 24px;
  border-radius: 99px;
  box-shadow: 0 5px 0 var(--carte-ombre);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bouton.principal { color: #FFFFFF; background: var(--rose); border-color: var(--rose); box-shadow: 0 5px 0 var(--rose-ombre); }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--carte-ombre); }
.bouton.principal:active { box-shadow: 0 1px 0 var(--rose-ombre); }
.bouton:focus-visible { outline: 3px dashed var(--violet); outline-offset: 3px; }

/* ---------- Les animations de la prairie ---------- */
.nuage { fill: #FFFFFF; animation: derive 9s ease-in-out infinite alternate; }
.nuage.petit { animation-duration: 12s; }
@keyframes derive { from { translate: -12px 0; } to { translate: 14px 0; } }

/* Le teckel respire, remue la queue, cligne des yeux et bouge les oreilles */
.teckel { transform-box: fill-box; transform-origin: center bottom; animation: respire 2.6s ease-in-out infinite; }
@keyframes respire { 0%, 100% { scale: 1 1; } 50% { scale: 1.015 0.985; } }

.queue { transform-box: view-box; transform-origin: 166px 112px; animation: remue 0.45s ease-in-out infinite alternate; }
@keyframes remue { from { rotate: -16deg; } to { rotate: 14deg; } }

.yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4s infinite; }
@keyframes cligne { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 0.1; } }

.oreille { transform-box: fill-box; transform-origin: 50% 8%; animation: oreille 4s ease-in-out infinite; }
.oreille.droite { animation-delay: -0.2s; }
@keyframes oreille { 0%, 80%, 100% { rotate: 0deg; } 86% { rotate: 7deg; } 92% { rotate: -4deg; } }

/* Le ballon traverse le ciel lentement, en se balançant au bout de sa ficelle */
.ballon { translate: 380px 40px; animation: traverse 30s linear infinite; animation-delay: -11s; }
@keyframes traverse { from { translate: -60px 62px; } to { translate: 660px 34px; } }
.ballon-flotte { transform-box: fill-box; transform-origin: 50% 0%; animation: flotte 3.2s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -8px; rotate: 4deg; } }


/* ---------- Les vagues ---------- */
.vagues { display: block; width: 100%; height: 90px; margin-top: 48px; }

/* ---------- Sur téléphone ---------- */
@media (max-width: 560px) {
  .carte { margin-top: 24px; border-radius: 32px; }
  .contenu { padding: 24px 20px 28px; }
  .bouton { width: 100%; text-align: center; }
  .vagues { height: 60px; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* =====================================================================
   PAGE OUTILS
   Le même univers que l'accueil : crème, brun doux, rose pour l'action,
   cartes arrondies. Les filtres vivent dans une colonne à gauche, une
   ligne par choix, pour rester lisibles. Ils fonctionnent sans
   JavaScript : des boutons radio, et :has() qui masque les fiches.
   ===================================================================== */
:root {
  --vert: #3E9B7F;
  --vert-doux: #DDF1E6;
  --rose-pale: #FFE3EF;
  --rose-texte: #B23A73;
  --vert-texte: #2A7A62;
}

.page-outils { display: block; }

.haut-outils, .boite, .pied-outils { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.haut-outils { padding: 22px 0 0; }

.retour {
  display: inline-flex; align-items: center; gap: 6px;
  font: 800 15px Nunito, sans-serif; color: var(--brun); text-decoration: none;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 99px;
  padding: 9px 18px; box-shadow: 0 4px 0 var(--carte-ombre);
}
.retour:hover { color: var(--rose); }
.retour:focus-visible { outline: 3px dashed var(--violet); outline-offset: 3px; }

/* ---------- L'introduction ---------- */
.intro-outils {
  position: relative;
  margin-top: 22px;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 40px;
  padding: 40px 40px 34px; text-align: center;
  box-shadow: 0 6px 0 var(--carte-ombre);
}
.mini-ballon { position: absolute; top: 18px; right: 34px; width: 46px; overflow: visible; }
.intro-outils h1 { margin: 0; font: 700 clamp(38px, 7vw, 58px) / 1.1 Fredoka, Nunito, sans-serif; color: var(--brun); }
.chapo { margin: 14px auto 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--brun-doux); }
.chiffres { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chiffres li { background: var(--fond); border-radius: 99px; padding: 8px 16px; font-size: 15px; color: var(--brun-doux); }
.chiffres b { font: 700 18px Fredoka, sans-serif; color: var(--brun); margin-right: 4px; }

/* ---------- Le catalogue : les filtres à gauche, les fiches à droite ---------- */
.catalogue { margin-top: 56px; }
.boite h2 { margin: 0 0 20px; font: 700 clamp(28px, 4.5vw, 36px) / 1.15 Fredoka, Nunito, sans-serif; color: var(--brun); }

.catalogue-tete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.catalogue-tete h2 { margin: 0; }

.choix-source { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.choix-source legend { float: left; padding: 0; margin-right: 10px; font: 800 12px Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brun-doux); }
.choix-source input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.catalogue-corps { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.catalogue-corps > * { min-width: 0; }

.panneau-filtres {
  position: sticky; top: 16px;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 28px;
  padding: 18px 14px 16px; box-shadow: 0 4px 0 var(--carte-ombre);
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--carte-ombre) transparent;
}
.panneau-filtres fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.panneau-filtres legend {
  padding: 0 10px; margin-bottom: 8px;
  font: 800 12px Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brun-doux);
}

/* Le bouton radio reste lisible par le clavier et les lecteurs d'écran, il est seulement caché à l'œil */
.panneau-filtres input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Chaque choix est une ligne : le nom à gauche, le nombre à droite */
.panneau-filtres label {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 12px; cursor: pointer;
  font: 700 15px Nunito, sans-serif; color: var(--brun);
}
.panneau-filtres label:hover { background: var(--fond); }
.panneau-filtres label span {
  min-width: 26px; text-align: center;
  font: 800 12px Nunito, sans-serif; color: var(--brun-doux);
  background: var(--fond); border-radius: 99px; padding: 2px 8px;
}
.panneau-filtres input:checked + label { background: var(--rose-pale); color: var(--rose-texte); font-weight: 800; }
.panneau-filtres input:checked + label span { background: var(--carte); color: var(--rose-texte); }
.panneau-filtres input:focus-visible + label { outline: 3px dashed var(--violet); outline-offset: 1px; }

/* La source : trois pastilles dans une capsule, chacune avec la couleur de ses fiches */
.segments {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 99px;
  box-shadow: 0 3px 0 var(--carte-ombre);
}
.segments label {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  padding: 7px 14px; border-radius: 99px;
  font: 800 14px Nunito, sans-serif; color: var(--brun);
}
.segments label:hover { background: var(--fond); }
.segments label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(90deg, #F48BB8 50%, #6CC49E 50%); }
.segments label[for="src-a"]::before { background: #F48BB8; }
.segments label[for="src-b"]::before { background: #6CC49E; }
.choix-source input:checked + label { background: var(--rose-pale); color: var(--rose-texte); }
.choix-source input:focus-visible + label { outline: 3px dashed var(--violet); outline-offset: 1px; }

/* Les catégories, rangées en deux groupes */
.groupe { margin-top: 8px; }
.groupe-titre {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px; padding: 8px 10px 2px;
  font: 800 12px Nunito, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brun-doux);
  border-top: 1px dashed var(--carte-ombre);
}
.groupe-titre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.groupe-a .groupe-titre::before { background: #F48BB8; }
.groupe-b .groupe-titre::before { background: #6CC49E; }
.groupe-lignes { display: flex; flex-direction: column; gap: 2px; }

/* Une source choisie : seules ses catégories restent affichées */
.boite:has(#src-a:checked) .groupe-b { display: none; }
.boite:has(#src-b:checked) .groupe-a { display: none; }

/* ---------- Les fiches ---------- */
.outils { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.outil {
  background: var(--carte); border: 1px solid var(--filet); border-radius: 24px;
  padding: 18px 20px 16px; box-shadow: 0 4px 0 var(--carte-ombre);
  display: flex; flex-direction: column; gap: 8px;
}
.outil-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pastille-source { font: 800 11px Nunito, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 99px; padding: 4px 10px; }
.pastille-source.a { background: var(--rose-pale); color: var(--rose-texte); }
.pastille-source.b { background: var(--vert-doux); color: var(--vert-texte); }
.genre { font: 800 11px Nunito, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brun-doux); }
.outil h3 { margin: 2px 0 0; font: 700 20px / 1.2 Fredoka, Nunito, sans-serif; color: var(--brun); }
.outil h3 a { color: inherit; text-decoration: none; }
.outil h3 a:hover { color: var(--rose); }
.outil h3 a:focus-visible { outline: 3px dashed var(--violet); outline-offset: 2px; border-radius: 6px; }
.outil h3 a span { font-size: 0.75em; color: var(--brun-doux); }
.desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--brun); flex: 1; }
.acces { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--brun-doux); }
.acces b { color: var(--brun); }
.meta { margin: 0; font-size: 12.5px; color: var(--brun-doux); }
.alerte { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #9A4A1E; background: #FFF1DE; border-radius: 12px; padding: 7px 10px; }

/* Le filtre, une règle par source et par catégorie */
.boite:has(#src-a:checked) .outil:not([data-source="a"]) { display: none; }
.boite:has(#src-b:checked) .outil:not([data-source="b"]) { display: none; }
.boite:has(#cat-inspiration:checked) .outil:not([data-cat="inspiration"]) { display: none; }
.boite:has(#cat-design-system:checked) .outil:not([data-cat="design-system"]) { display: none; }
.boite:has(#cat-composants:checked) .outil:not([data-cat="composants"]) { display: none; }
.boite:has(#cat-animation:checked) .outil:not([data-cat="animation"]) { display: none; }
.boite:has(#cat-prompts:checked) .outil:not([data-cat="prompts"]) { display: none; }
.boite:has(#cat-code:checked) .outil:not([data-cat="code"]) { display: none; }
.boite:has(#cat-prototypage:checked) .outil:not([data-cat="prototypage"]) { display: none; }
.boite:has(#cat-contexte:checked) .outil:not([data-cat="contexte"]) { display: none; }
.boite:has(#cat-tests:checked) .outil:not([data-cat="tests"]) { display: none; }
.boite:has(#cat-deploiement:checked) .outil:not([data-cat="deploiement"]) { display: none; }
.boite:has(#cat-espaces:checked) .outil:not([data-cat="espaces"]) { display: none; }
.boite:has(#cat-apprendre:checked) .outil:not([data-cat="apprendre"]) { display: none; }
.boite:has(#src-a:checked):has(#cat-code:checked, #cat-prototypage:checked, #cat-contexte:checked, #cat-tests:checked, #cat-deploiement:checked, #cat-espaces:checked, #cat-apprendre:checked) .vide,
.boite:has(#src-b:checked):has(#cat-inspiration:checked, #cat-design-system:checked, #cat-composants:checked, #cat-animation:checked, #cat-prompts:checked) .vide { display: block; }

/* Sur ordinateur, à partir du catalogue, seules les cartes défilent :
   le titre et la source restent fixés en haut, les catégories juste en dessous.
   Le bandeau a le fond de la page, les cartes passent dessous, et un léger
   fondu adoucit le bord. */
@media (min-width: 821px) {
  .catalogue { --haut-tete: 86px; }
  .catalogue-tete {
    position: sticky; top: 0; z-index: 5;
    min-height: var(--haut-tete); margin-bottom: 0; padding: 14px 0;
    background: var(--fond);
  }
  .catalogue-tete::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
    background: linear-gradient(var(--fond), rgba(251, 245, 234, 0));
    pointer-events: none;
  }
  .catalogue-corps { padding-top: 6px; }
  .panneau-filtres { top: calc(var(--haut-tete) + 10px); max-height: calc(100vh - var(--haut-tete) - 26px); }
}

/* L'état vide : une combinaison de filtres qui ne donne rien */
.vide { display: none; margin: 0; padding: 26px; text-align: center; color: var(--brun-doux); background: var(--carte); border: 2px dashed var(--carte-ombre); border-radius: 24px; }

/* ---------- Le pied de page ---------- */
.pied-outils { margin-top: 56px; text-align: center; }
.pied-outils p { margin: 0 auto 16px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--brun-doux); }
.pied-outils a:not(.retour) { color: var(--rose-texte); }
.page-outils .vagues { margin-top: 24px; }

/* ---------- Sur tablette et téléphone : les filtres passent au-dessus ---------- */
@media (max-width: 820px) {
  .catalogue-corps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .panneau-filtres { position: static; max-height: none; overflow: visible; padding: 16px 12px; gap: 16px; }
  /* Chaque groupe devient une rangée qu'on fait défiler du doigt */
  .groupe-lignes { flex-direction: row; overflow-x: auto; gap: 8px; padding: 2px 2px 6px; scrollbar-width: none; }
  .choix-source { max-width: 100%; }
  .segments { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segments::-webkit-scrollbar, .groupe-lignes::-webkit-scrollbar { display: none; }
  .choix-source legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .groupe-lignes label, .ligne-tout {
    flex: 0 0 auto; white-space: nowrap;
    background: var(--carte); border: 1px solid var(--filet); border-radius: 99px;
    padding: 7px 12px; box-shadow: 0 2px 0 var(--carte-ombre);
  }
  .panneau-filtres .ligne-tout { display: inline-flex; margin: 0 2px; }
  .groupe { margin-top: 10px; }
}

@media (max-width: 640px) {
  .intro-outils { padding: 88px 20px 28px; border-radius: 32px; }
  .mini-ballon { width: 34px; top: 12px; right: 18px; }
}